RTCDataChannel: bufferedamountlow event - Web APIs
in other words, we'll try to keep at least 64kb of data in the buffer, reading 64kb at a time from the source. ...
...in other words, we'll try to keep at least 64kb of data in the buffer, reading 64kb at a time from the source. ...
...in other words, we'll try to keep at least 64kb of data in the buffer, reading 64kb at a time from the source. ...
...And 8 more matches

Block and inline layout in normal flow - CSS: Cascading Style Sheets
they can be either block or inline, but not both at once. we describe block-level boxes as participating in a block formatting context, and inline-level boxes as participating in an inline formatting context. the behaviour of elements which have a block or inline formatting context is also defined in this specification. ...
... area that contains the boxes that form a line is called a line box.” - 9.4.2 note that the css 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. for example, by describing vertical distance between block boxes. the behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on flow layout and writing modes. elements participating in a block formatting context block elements in a horizontal writing mode such as english, layout vertically, one below the other. in a vertical writing mode then would lay out horizontally. in this guide, we will be working in english and therefore a horizontal writing mode. however, everything described should work in the same way if your...
...et adds spacing between the paragraphs by way of adding a margin to the top and bottom. if we set margins on the paragraph element to 0 then the borders will touch. by default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. if we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side. each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode. margin collapsing the spec explains that margins between block elements collapse. this means that if you have an element with a top margin immediately after an element with a bottom margin, rathe...
...And 8 more matches

Access-Control-Allow-Headers - HTTP
the header may list any number of headers, separated by commas. ...
...the header may list any number of headers, separated by commas. * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information). ...
...o a preflight request which includes the access-control-request-headers to indicate which http headers can be used during the actual request. this header is required if the request has an access-control-request-headers header. header type response header forbidden header name no syntax access-control-allow-headers: <header-name>[, <header-name>]* access-control-allow-headers: * directives <header-name> the name of a supported request header. the header may list any number of headers, separated by commas. * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information). in requests with credentials, it is treated as the literal header name "*" without ...
...And 8 more matches

DataTransfer.effectAllowed - Web APIs
the datatransfer.effectallowed property specifies the effect that is allowed for a drag operation. the copy operation is used to indicate that the data being dragged will be copied from its present location to the drop location. the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of relationship or connection will be created between the source and drop locations. this property should be set in the dragstart event to set the desired drag effect for the drag source. within the dragenter and dragover event handlers, this property will be set to whatever value was assigned during the dragstart event, thus effectallowed may be used to determine which effect is permitted. ...
...tion will be created between the source and drop locations. this property should be set in the dragstart event to set the desired drag effect for the drag source. within the dragenter and dragover event handlers, this property will be set to whatever value was assigned during the dragstart event, thus effectallowed may be used to determine which effect is permitted. assigning a value to effectallowed in events other than dragstart has no effect. syntax datatransfer.effectallowed; values a domstring representing the drag operation that is allowed. the possible values are: none the item may not be dropped. copy a copy of the source item may be made at the new location. copylink a copy or link operation is permitted. copymove a copy or move operation is permitted. link a link ...
...peration is permitted. copymove a copy or move operation is permitted. link a link may be established to the source at the new location. linkmove a link or move operation is permitted. move an item may be moved to a new location. all all operations are permitted. uninitialized the default value when the effect has not been set, equivalent to all. ...
...And 7 more matches

flex-flow - CSS: Cascading Style Sheets
the flex-flow css shorthand property specifies the direction of a flex container, as well as its wrapping behavior. 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. ...
...-flow css shorthand property specifies the direction of a flex container, as well as its wrapping behavior. 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. ...
...r, as well as its wrapping behavior. 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 7 more matches

grid-auto-flow - CSS: Cascading Style Sheets
two keywords: row dense or column dense. ...
... two keywords: row dense or column dense. ...
...ow css property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. 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. syntax /* keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; this property may take one of two forms: a single keyword: one of row, column, or dense. two keywords: row dense or column dense. values row items are placed by filling each row in tu...
...And 7 more matches

Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
see cors settings attributes for details on how the crossorigin attribute is used. security and tainted canvases because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise. ...
... canvas any data that was loaded from another origin without cors approval, the canvas becomes tainted. a tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown. ...
...exception to be thrown. if the source of the foreign content is an html <img> or svg <svg> element, attempting to retrieve the contents of the canvas isn't allowed. if the foreign content comes from an image obtained from either as htmlcanvaselement or imagebitmap, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked. calling any of the following on a tainted canvas will result in an error: calling getimagedata() on the canvas's context calling toblob() on the <canvas> element itself calling todataurl() on the canvas attempting any of these when the canvas is tainted will cause a securityerror to be thrown. this protects users from having private data exposed by using images to pull information from remote web sites without perm...
...And 7 more matches

String.prototype.toLocaleLowerCase() - JavaScript
if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. ...
...if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. ...
...if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. ...
...And 7 more matches

Following the Android Toasts Tutorial from a JNI Perspective
it will use the jni.jsm module that is available in firefox for android since version 17. this article teaches developers how to port java code to jni by reading the java and android documentation. toast description a toast provides simple feedback about an operation in a small popup. it only fills the amount of space required for the message, and the current activity remains visible and interactive. ...
...emains visible and interactive. for example, navigating away from an email before you send it triggers a "draft saved" toast to let you know that you can continue editing later. toasts automatically disappear after a timeout. toasts do not have to be created with jni; they are exposed by the nativewindow feature on firefox for android, see toast documentation. java code let's start with the following java code, which invokes a toast and says "hello, firefox!". context context = getapplicationcontext(); charsequence text = "hello, firefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript s...
...irefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the nativewindow object. ...
...And 6 more matches

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the css 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode. layout properties should work in the same way in vertical writing modes. in this guide, we look at how flow layout behaves when used with different document writing modes. this is not a comprehensive guide to the use of writing modes in css, the aim here is to document the areas where flow layout interacts with writing modes in possibly unanticipated ways. the external resources and see also sections of this document link to more writing modes resources. the writing modes specification the css writing modes level 3 specification defines the impact a change the document writing mode has on flow layout. in the writing modes introduction, the specification says, “a writing mode in ...
...esources. the writing modes specification the css writing modes level 3 specification defines the impact a change the document writing mode has on flow layout. in the writing modes introduction, the specification says, “a writing mode in css is determined by the writing-mode, direction, and text-orientation properties. it is defined primarily in terms of its inline base direction and block flow direction.” the specification defines the inline base direction as the direction in which content is ordered on a line. this defines the start and end of the inline direction. ...
...erties. it is defined primarily in terms of its inline base direction and block flow direction.” the specification defines the inline base direction as the direction in which content is ordered on a line. this defines the start and end of the inline direction. the start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line. the block flow direction is the direction in which boxes, for example paragraphs, stack in that writing mode. the css writing-mode property controls the block flow direction. if you want to change your page, or part of your page, to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore the inline direction as well. while certain lan...
...And 6 more matches

overflow-y - CSS: Cascading Style Sheets
the overflow-y css property sets what shows when content overflows a block-level element's top and bottom edges. this may be nothing, a scroll bar, or the overflow content. 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. syntax /* keyword values */ overflow-y: visible; overflow-y: hidden; overflow-y: clip; overflow-y: scroll; overflow-y: auto; /* global values */ overflow-y: inherit; overflow-y: initial; overflow-y: unset; the overflow-y property is specified as a single keyword chosen from the list of values below. ...
... values visible content is not clipped and may be rendered outside the padding box's top and bottom edges. ...
... the padding box. no scrollbars are provided. clip like for hidden, the content is clipped to the element's padding box. the difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. the box is not a scroll container, and does not start a new formatting context. if you wish to start a new formatting context, you can use display: flow-root to do so. scroll content is clipped if necessary to fit vertically in the padding box. browsers display scrollbars whether or not any content is actually clipped. (this prevents scrollbars from appearing or disappearing when the content changes.) printers may still print overflowing content. auto depends on the user agent. if content fits inside the padding box, it looks the same as visi...
...And 6 more matches

2015 MDN Fellowship Program - Archive of obsolete content
warning: the 2015 mdn fellowship program is closed. we are not accepting applications. this page is a historical archive, originally hosted at /fellowship, and was localized. more information: mdn/developerfellowship wiki page. announcing the mdn fellows! blog post, may 14 2015. mdn fellows successfully oriented blog post, july 6 2015. mdn fellows: what they did & what’s next blog post, september 23, 2015. 2015 mdn fellowship program launching in q1 2015, the mozilla developer fellowship intends to accelerate the involvement of highly-skilled and experienced web developers with the open web. who web and mobile developers with an established track record of contributions and expertise in a specific web technology, function or domain who wish to increase the effectiveness of ...
...est practices for effectively communicating and educating with technical information. we expect this to be between 5-10 hours of your time per week. specific projects (we encourage you to target one of these in your application): testthewebforward brief project description mozilla participates in an important w3c open testing initiative, testthewebforward.com. to support our efforts, the fellow will review various technical specifications to identify gaps between the documentation and current situation and refine existing tests to adapt to this cross-browser test harness. activities and deliverables identify gaps between existing documentation and current development environments. the work would entail refining existing tests to adapt to this framework. required skills and experience...
...nce and comfort writing javascript test scripts. mentor information josh matthews, mozilla platform group. github: jdm twitter: @lastontheboat service workers brief project description service workers essentially act as proxy servers that sit between web applications, the browser and (when available) the network. they enable the creation of effective offline experiences and wiill also allow access to push notifications and background sync apis. activities and deliverables write a demonstration web application (new or existing) to showcase service worker functionality. provide detailed api descriptions. required skills and experience experienced web developer with expertise in javascript, css, html as well as with efficient network interaction (queuing resource fetching, etc.). s...
...And 5 more matches

Normal Flow - Learn web development
previous overview: css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout. prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to explain how browsers layout web pages by default, before we begin to make changes. as detailed in the last lesson introducing layout, elements on a webpage lay out in the normal flow, if you have not applied any css to change the way they behave. and, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. starting with a solid, well-structured document that is read...
... as detailed in the last lesson introducing layout, elements on a webpage lay out in the normal flow, if you have not applied any css to change the way they behave. and, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. starting with a solid, well-structured document that is readable in normal flow is the best way to begin any webpage. it ensures that your content is readable, even if the user is using a very limited browser or a device such as a screen reader that reads out the content of the page. in addition, as normal flow is designed to make a readable document, by starting in this way you are working with the document rather than fighting against it as you make changes to the layout. ...
... how are elements laid out by default? first of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier. ...
...And 5 more matches

overflow-clip-box-block
note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. ...
...note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. ...
...note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. ...
...And 5 more matches

overflow-clip-box-inline
note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. ...
...note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. ...
...note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. ...
...And 5 more matches

IDBKeyRange.lowerBound() - Web APIs
the lowerbound() method of the idbkeyrange interface creates a new key range with only a lower bound. by default, it includes the lower endpoint value and is closed. note: this feature is available in web workers. syntax var myidbkeyrange = idbkeyrange.lowerbound(lower); var myidbkeyrange = idbkeyrange.lowerbound(lower, open); parameters lower specifies the lower bound of the new key range. open optional indicates whether the lower bound excludes the endpoint value. the default is false. return value idbkeyrange: the newly created key range. exceptions this method may raise a domexception of the following type: exception description dataerror the value parameter passed was not a valid key. ...
...he new key range. open optional indicates whether the lower bound excludes the endpoint value. the default is false. return value idbkeyrange: the newly created key range. exceptions this method may raise a domexception of the following type: exception description dataerror the value parameter passed was not a valid key. example the following example illustrates how you'd use a lower bound key range. here we declare keyrangevalue = idbkeyrange.lowerbound("f", false); — a range that includes the value "f" and everthing after it. we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value. this means that the cursor will ...
...eyrange.lowerbound("f", false); — a range that includes the value "f" and everthing after it. we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value. this means that the cursor will only retrieve the record with the key value "f" and all that come after it. if we used idbkeyrange.lowerbound("f", true);, then the range would not include "f"; only the values after it. ...
...And 5 more matches

CSS Flow Layout - CSS: Cascading Style Sheets
normal flow, or flow layout, is the way that block and inline elements are displayed on a page before any changes are made to their layout. the flow is essentially a set of things that are all working together and know about each other in your layout. once something is taken out of flow it works independently. in normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the writing mode of the document. block elements display one after the other, as paragraphs do in the writing mode of that document. in english therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page. ...
... the inline direction, that is in the direction words are displayed in a sentence according to the writing mode of the document. block elements display one after the other, as paragraphs do in the writing mode of that document. in english therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page. ...
...the top and move down the page. basic example the following example demonstrates block and inline level boxes. the two paragraph elements with a green border are block level, displaying one under the other. the first sentence also includes a span element with a blue background. this is inline level and therefore displays in place in the sentence. ...
...And 5 more matches

Control flow - MDN Web Docs Glossary: Definitions of Web-related terms
for example, imagine a script used to validate user data from a webpage form. the script submits validated data, but if the user, say, leaves a required field empty, the script prompts them to fill it in. ...
... for example, imagine a script used to validate user data from a webpage form. the script submits validated data, but if the user, say, leaves a required field empty, the script prompts them to fill it in. ...
...side a function that runs when the user clicks the submit button for the form. the function could also include a loop, which iterates through all of the fields in the form, checking each one in turn. looking back at the code in the if and else sections, the lines promptuser and submitform could also be calls to other functions in the script. ...
...And 4 more matches

FeaturePolicy.allowedFeatures() - Web APIs
please note that these features might be restricted by the permissions api, if the user did not grant the corrsponding permission yet. ...
...please note that these features might be restricted by the permissions api, if the user did not grant the corrsponding permission yet. ...
...please note that these features might be restricted by the permissions api, if the user did not grant the corrsponding permission yet. ...
...And 4 more matches

IDBKeyRange.lower - Web APIs
the lower read-only property of the idbkeyrange interface returns the lower bound of the key range. note: this feature is available in web workers. syntax var lower = mykeyrange.lower value the lower bound of the key range (can be any type.) example the following example illustrates how you'd use a key range. here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value. ...
...und("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value. after declaring the key range, we log its lower property value to the console, which should appear as "f". ...
...hem — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value. after declaring the key range, we log its lower property value to the console, which should appear as "f". ...
...And 4 more matches

IDBKeyRange.lowerOpen - Web APIs
the loweropen read-only property of the idbkeyrange interface returns a boolean indicating whether the lower-bound value is included in the key range. note: this feature is available in web workers. syntax var loweropen = mykeyrange.loweropen value a boolean: value indication true the lower-bound value is not included in the key range. false the lower-bound value is included in the key range. example the following example illustrates how you'd use a key range. here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransact...
...und("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value. after declaring the key range, we log its loweropen property value to the console, which should appear as "true": the lower bound is open, so won't be included in the range. ...
... open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value. after declaring the key range, we log its loweropen property value to the console, which should appear as "true": the lower bound is open, so won't be included in the range. ...
...And 4 more matches

CSS Overflow - CSS: Cascading Style Sheets
the css overflow module contains the features of css relating to scrollable overflow handling in visual media. in css overflow happens when the content of a box extends past one or more of the box's edges. ink overflow and scrollable overflow there are two types of overflow that you might encounter in css. the first is described as ink overflow. this is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc. the overflow that we sometimes need to manage in css is described as scrollable overflow. this is the content appearing outside of the box for which scrolling mechanisms need to be provided. ...
... 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 4 more matches

overflow-wrap - CSS: Cascading Style Sheets
the overflow-wrap css property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box. 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. note: in contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. the property was originally a nonstandard and unprefixed microsoft extension called word-wrap, and was implemented by most browsers with the same name. it has since been renamed to overflow-wrap, with word-wrap being an alias. ...
... contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. the property was originally a nonstandard and unprefixed microsoft extension called word-wrap, and was implemented by most browsers with the same name. it has since been renamed to overflow-wrap, with word-wrap being an alias. syntax /* keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; /* global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset; the overflow-wrap property is specified as a single keyword chosen from the list of values below. values normal lines may only break at normal word break points (such as a space between two words). ...
...no hyphenation character is inserted at the break point. soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes. ...
...And 4 more matches

overflow-clip-box
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 overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow. ...
...ature 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 overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties. ...
...s 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 overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties. /* keyword values */ overflow-clip-box: padding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: padding-box content-box; overflow-clip-box: content-box content-box; /* global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. prior to ...
...And 3 more matches

HTMLIFrameElement.allowPaymentRequest - Web APIs
living standard browser compatibility the compatibility table on this page is generated from structured data. ...
... living standard browser compatibility the compatibility table on this page is generated from structured data. ...
... living standard browser compatibility the compatibility table on this page is generated from structured data. ...
...And 3 more matches

PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
as of this writing (march 2019), only "public-key" may be used. ...
...property of the publickeycredentialrequestoptions dictionary which indicates the existing credentials acceptable for retrieval. this is an array of credential descriptors. note: publickeycredentialcreationoptions.excludecredentials may be used during the creation of the credentials in order to avoid creating new credentials for an existing user with existing public key credential. contrary to allowcredentials, it is used to filter out credentials. syntax allowcredentials = publickeycredentialrequestoptions.allowcredentials value an array whose elements are objects with the following properties: type a string describing type of public-key credential to be created. as of this writing (march 2019), only "public-key" may be used. id a buffersource matching an existing public key cred...
...ation of the publickeycredential instance. transports optional an array of strings describing the possible transports between the client and the authenticator. ...
...And 3 more matches

Handling Overflow in Multicol - CSS: Cascading Style Sheets
in this guide we look at how multicol deals with overflow, both inside the column boxes and in situations where there is more content than will fit into the container. overflow inside column boxes an overflow situation happens when an item's size is larger than the column box. for example, the situation could happen when an image in a column is wider than the column-width value or the width of the column based on the number of columns declared with column-count. in this situation, the content should visibly overflow into the next column, rather than be clipped by the column box. you can see an example of this below, with an image of the expected rendering as, at the time of writing, browsers deal with this differently. if you want an image to size down to fit the column box, the stan...
...o the next column, rather than be clipped by the column box. you can see an example of this below, with an image of the expected rendering as, at the time of writing, browsers deal with this differently. if you want an image to size down to fit the column box, the standard responsive images solution of setting max-width: 100% will achieve that for you. more columns than will fit how overflowing columns are handled depends on whether you are in a fragmented media context, such as print, or a continuous media context, such as a web page. in fragmented media, once a fragment (for example a page) is filled with columns, the columns will move to a new page and fill that up with columns. in continuous media, columns will overflow in the inline direction. on the web this means that you wil...
...u are in a fragmented media context, such as print, or a continuous media context, such as a web page. in fragmented media, once a fragment (for example a page) is filled with columns, the columns will move to a new page and fill that up with columns. in continuous media, columns will overflow in the inline direction. on the web this means that you will get a horizontal scrollbar. the example below shows this overflow behaviour. ...
...And 3 more matches

Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz' - HTTP
reason reason: cors header 'access-control-allow-origin' does not match 'xyz' what went wrong? ...
... reason reason: cors header 'access-control-allow-origin' does not match 'xyz' what went wrong? ...
... reason reason: cors header 'access-control-allow-origin' does not match 'xyz' what went wrong? ...
...And 3 more matches

Reason: CORS header 'Access-Control-Allow-Origin' missing - HTTP
reason reason: cors header 'access-control-allow-origin' missing what went wrong? the response to the cors request is missing the required access-control-allow-origin header, which is used to determine whether or not the resource can be accessed by content operating within the current origin. if the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the access-control-allow-origin header's value. for example, to allow a site at https://amazing.site to access the resource using cors, the header should be: access-control-allow-origin: https://amazing.site you can also configure a site to allow any site to access it by using the * wildcard. you should only use this for public apis. private apis should never use *, an...
... can also configure a site to allow any site to access it by using the * wildcard. you should only use this for public apis. private apis should never use *, and should instead have a specific domain or domains set. in addition, the wildcard only works for requests made with the crossorigin attribute set to anonymous, and it prevents sending credentials like cookies in requests. access-control-allow-origin: * warning: using the wildcard to allow all sites to access a private api is a bad idea. ...
...or public apis. private apis should never use *, and should instead have a specific domain or domains set. in addition, the wildcard only works for requests made with the crossorigin attribute set to anonymous, and it prevents sending credentials like cookies in requests. access-control-allow-origin: * warning: using the wildcard to allow all sites to access a private api is a bad idea. to allow any site to make cors requests without using the * wildcard (for example, to enable credentials), your server must read the value of the request's origin header and use that value to set access-control-allow-origin, and must also set a vary: origin header to indicate that some headers are being set dynamically depending on the origin. the exact directive for setting headers depends on your web s...
...And 3 more matches

Access-Control-Allow-Credentials - HTTP
credentials are cookies, authorization headers or tls client certificates. when used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. ...
... credentials are cookies, authorization headers or tls client certificates. when used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. ...
...cates. when used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. note that simple get requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content. ...
...And 3 more matches

SyntaxError: "use strict" not allowed in function with non-simple parameters - JavaScript
the javascript exception "'use strict' not allowed in function" occurs when a "use strict" directive is used at the top of a function with default parameters, rest parameters, or destructuring parameters. message edge: cannot apply strict mode on functions with non-simple parameter list firefox: syntaxerror: "use strict" not allowed in function with default parameter syntaxerror: "use strict" not allowed in function with rest parameter syntaxerror: "use strict" not allowed in function with destructuring parameter chrome: syntaxerror: illegal 'use strict' directive in function with non-simple parameter list error type syntaxerror. ...
...n with default parameter syntaxerror: "use strict" not allowed in function with rest parameter syntaxerror: "use strict" not allowed in function with destructuring parameter chrome: syntaxerror: illegal 'use strict' directive in function with non-simple parameter list error type syntaxerror. what went wrong? ...
... not allowed in function with destructuring parameter chrome: syntaxerror: illegal 'use strict' directive in function with non-simple parameter list error type syntaxerror. what went wrong? ...
...And 3 more matches

overflow - SVG: Scalable Vector Graphics
when scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped. within svg content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip. ...
... when scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped. within svg content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip. ...
...e of the svg viewport is applied. when scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped. within svg content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip. although the initial value for overflow is auto, it is overwritten in the user agent style sheet for the <svg> element when it is not the root element of a stand-alone document, the <pattern> element, and the <marker> element to be hidden by default. note: as a presentation attribute, overflow can be used as a css property. see the css opacity property for more information. as a presentation attribute, it can be applied to any elemen...
...And 3 more matches

-ms-wrap-flow - Archive of obsolete content
the -ms-wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements. initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values auto for floated elements, an exclusion is created; for all other elements, an exclusion is not created. both inline flow content can flow on all sides of the exclusion. start inline flow content can wrap on the start edge of the exclusion area but must leave empty the area after the end edge of the exclusion area. end inline flow content can wrap after the end edge of the exclusion area but must leave empty the area before the start edge of the exclusion area. ...
... both inline flow content can flow on all sides of the exclusion. start inline flow content can wrap on the start edge of the exclusion area but must leave empty the area after the end edge of the exclusion area. end inline flow content can wrap after the end edge of the exclusion area but must leave empty the area before the start edge of the exclusion area. maximum inline flow content can wrap on the side of the exclusion with the largest available space for the given line, and must leave empty the other side of the exclusion. clear inline flow content can only wrap on top and bottom of the exclusion and must leave empty the areas to the start and end edges of the exclusion box. formal syntax auto | both | start | end | maximum | clear specifications not ...
... the largest available space for the given line, and must leave empty the other side of the exclusion. clear inline flow content can only wrap on top and bottom of the exclusion and must leave empty the areas to the start and end edges of the exclusion box. formal syntax auto | both | start | end | maximum | clear specifications not part of any specification. remarks the -ms-wrap-flow property makes an element an exclusion element when it has a computed value other than auto. ...
...And 2 more matches

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

RTCDataChannel.bufferedAmountLowThreshold - Web APIs
the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of bytes of buffered outgoing data that is considered "low." the default value is 0. when the number of buffered outgoing bytes, as indicated by the bufferedamount property, falls to or below this value, a bufferedamountlow event is fired. this event may be used, for example, to implement code which queues more messages to be sent whenever there's room to buffer them. listeners may be added with onbufferedamountlow or addeventlistener(). the user agent may implement the process of actually sending data in any way it chooses; this may be done periodically during the event loop or truly asynchronously. ...
...ode which queues more messages to be sent whenever there's room to buffer them. listeners may be added with onbufferedamountlow or addeventlistener(). the user agent may implement the process of actually sending data in any way it chooses; this may be done periodically during the event loop or truly asynchronously. as messages are actually sent, this value is reduced accordingly. bufferedamountlow events are not fired after the data channel is closed. ...
...fferedamountlow or addeventlistener(). the user agent may implement the process of actually sending data in any way it chooses; this may be done periodically during the event loop or truly asynchronously. as messages are actually sent, this value is reduced accordingly. bufferedamountlow events are not fired after the data channel is closed. ...
...And 2 more matches

x-ms-aria-flowfrom - Accessibility
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. the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order. ...
...ompatibilities between implementations and the behavior may change in the future. the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order. the property serves to define element relationships utilizing aria relationship attributes and the aria-flowto property. this proprietary property is specific to internet explorer and microsoft edge. syntax x-ms-aria-flowfrom="elementid"; value the x-ms-aria-flowfrom property value uses an id selector to define which previous element the reading order will flow from. ...
...And 2 more matches

Low-Level APIs - Archive of obsolete content
you can use these modules in your add-on if you need to, but should be aware that the cost of privileged access is the need to take more elaborate security precautions. ...
...es fall roughly into three categories: fundamental utilities such as collection. many add-ons are likely to want to use modules from this category. building blocks for higher level modules, such as events and worker. you're more likely to use these if you are building your own modules that implement new apis, thus extending the sdk itself. privileged modules that expose powerful low-level capabilities such as window/utils and net/xhr. you can use these modules in your add-on if you need to, but should be aware that the cost of privileged access is the need to take more elaborate security precautions. in many cases these modules have simpler, more restricted analogs among the "high-level apis" (for example, windows or request). these modules are still in active developmen...
...e restricted analogs among the "high-level apis" (for example, windows or request). these modules are still in active development, and we expect to make incompatible changes to them in future releases. /loader create commonjs module loaders. 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. console/plain-text constructor for a console instance. console/traceback functionality similar to python's traceback module. content/content re-exports three objects from three other modules: loader, worker, and symbiont. content/loader provides one of the building blocks for those modules that use content scripts to interact with web content, such as panel and page-mo...
...tent. core/heritage helper functions for inheritance. core/namespace provides an api for creating namespaces for objects, which effectively may be used for creating fields that are not part of objects public api. core/promise implementation of promises to make asynchronous programming easier. dev/panel enables you to extend the firefox developer tools. event/core the event/core module allows the creation of apis to broadcast and subscribe to events. event/target create objects that broadcast events. frame/hidden-frame creates firefox frames (i.e. xul <iframe> elements) that are not displayed to the user. frame/utils provides helper functions for working with platform internals like frames and browsers. fs/path provides access to the local filesystem with the nodejs path modu...

-ms-overflow-style - Archive of obsolete content
"traditional" scrollbars don't auto-hide and never overlap the element's content. ...
..."traditional" scrollbars don't auto-hide and never overlap the element's content. ...
..."traditional" scrollbars don't auto-hide and never overlap the element's content. ...
...lies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto the initial value. same as inherit. none scrollbars are never displayed, although the element can still be scrolled if the element's content overflows. scrollbar "traditional" scrollbars are displayed if the element's content overflows. "traditional" scrollbars don't auto-hide and never overlap the element's content. accordingly, the dimensions of the layout area for the content are reduced by the width (for vertical scrollbars) or height (for horizontal scrollbars) of the scrollbar(s). -ms-autohiding-scrollbar auto-hiding scrollbars are used if the element's content overflows. auto-hiding scrollbars are displayed during scr...

Test your skills: Overflow - Learn web development
the aim of these tasks is to help you check your understanding of overflow in css. note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one the content is overflowing the box because it has a fixed height. keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. test by removing some of the text from the html, that if there is only a small amount of text that does not overflow, no scrollbar appears. ...
...ther help section at the bottom of this page. task one the content is overflowing the box because it has a fixed height. keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. test by removing some of the text from the html, that if there is only a small amount of text that does not overflow, no scrollbar appears. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task an image is in the box, it is bigger than the dimensions of the box so overflows visibly. ...
... assessment or further help you can practice these examples in the interactive editors mentioned above. ...
... stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for overflow skill test 1". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. a link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their c...

Element: overflow event - Web APIs
the overflow event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible). it is a proprietary event specific to gecko (firefox). ...
...e first time in this state (only works for elements styled with overflow != visible). it is a proprietary event specific to gecko (firefox). ...
...ific to gecko (firefox). ...
...idth: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; c...

Element: underflow event - Web APIs
the non-standard underflow event, which is specific to firefox, is fired when an element is no longer overflowed by its content. this only works for elements for which overflow is not set to visible. the counterpart overflow event is fired when overflow occurs. ...
...ontent. this only works for elements for which overflow is not set to visible. the counterpart overflow event is fired when overflow occurs. ...
...ed when overflow occurs. ...
...idth: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; c...

Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’ - HTTP
reason reason: invalid token ‘xyz’ in cors header ‘access-control-allow-methods’ what went wrong? ...
... reason reason: invalid token ‘xyz’ in cors header ‘access-control-allow-methods’ what went wrong? ...
... reason reason: invalid token ‘xyz’ in cors header ‘access-control-allow-methods’ what went wrong? ...
...ors requests. the header's value is a comma-delineated string of http method names, such as get, post, or head. if any of the specified values are not recognized by the client user agent, this error occurs. this is a problem that most likely can only be fixed on the server side, by modifying the server's configuration to no longer send the invalid or unknown method name with the access-control-allow-methods header. it may also be worth checking to ensure that the user agent or http library you're using on the client is up-to-date. ...

allowevents - Archive of obsolete content
« xul reference home allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. on listitem and titlebar elements, mouse events normally do not get sent to their children; instead they are retargeted to the listitem and titlebar element itself. this means that elements placed inside a listitem do not respond to events, and instead clicking the mouse simply selects that item within the list. by setting the allowevents attribute to true, this special behavior is disabled, and the events are targeted the same as other elements. for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also retargeted to the element itself. however, the...
...o events, and instead clicking the mouse simply selects that item within the list. by setting the allowevents attribute to true, this special behavior is disabled, and the events are targeted the same as other elements. for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also retargeted to the element itself. however, the allowevents attribute is handled in a different way. instead, the allowevents may be set to true on a descendant instead. this does the same thing in that it allows events to be targeted normally, but allows this to be different for each descendant. ...
... and the popup datepicker, mouse events are also retargeted to the element itself. however, the allowevents attribute is handled in a different way. instead, the allowevents may be set to true on a descendant instead. this does the same thing in that it allows events to be targeted normally, but allows this to be different for each descendant. this behavior is used for menus, for instance, to allow a menu button to behave as a menu when clicking on it, yet have part of the menu behave as a button. for the latter, the allowevents attribute is set to true to have a click on the child button receive events instead of targeting all events at the menu. ...

TCP slow start - MDN Web Docs Glossary: Definitions of Web-related terms
tcp slow start helps buildup transmission speeds to the network's capabilities. it does this without initially knowing what those capabilities are and without creating congestion. tcp slow start is an algorithm used to detect the available bandwidth for packet transmission, and balances the speed of a network connection. it prevents the appearance of network congestion whose capabilities are initially unknown, and slowly increases the volume of information diffused until the network's maximum capacity is found. to implement tcp slow start, the congestion window (cwnd) sets an upper limit on the amount of data a source can transmit over the network before receiving an acknowledgment (ack). the slow start threshold (ssthresh) determines the (de)activation of slow start. when a new c...
...a source can transmit over the network before receiving an acknowledgment (ack). the slow start threshold (ssthresh) determines the (de)activation of slow start. when a new connection is made, cwnd is initialized to one tcp data or acknowledgment packet, and waits for an acknowledgement, or ack. when that ack is received, the congestion window is incremented until the cwnd is less than ssthresh. slow start also terminates when congestion is experienced. congestion control congestion itself is a state that happens within a network layer when the message traffic is too busy it slows the network response time. the server sends data in tcp packets, the user's client then confirms delivery by returning acknoledgements, or acks. the connection has a limited capacity depending on hardware and netw...
...the server sends data in tcp packets, the user's client then confirms delivery by returning acknoledgements, or acks. the connection has a limited capacity depending on hardware and network conditions. if the server sends too many packets too quickly, they will be dropped. meaning, there will be no acknowledgement. the server registers this as missing acks. congestion control algorithms use this flow of sent packets and acks to determine a send rate. see also populating the page: how browsers work http overview ...

FeaturePolicy.allowsFeature() - Web APIs
the allowsfeature() method of the featurepolicy interface enables introspection of individual directives of the feature policy it is run on. it returns a boolean that is true if and only if the specified feature is allowed in the specified context (or the default context if no context is specified). syntax const allowed = featurepolicy.allowsfeature(<feature>) or const allowed = featurepolicy.allowsfeature(<feature>, <origin>) parameters feature name a specific feature name must be specified. origin name optional an origin url to check the feature on. if it is omitted the default origin is used. return value a boolean that is true if and only if the feature is allowed. ...
...x const allowed = featurepolicy.allowsfeature(<feature>) or const allowed = featurepolicy.allowsfeature(<feature>, <origin>) parameters feature name a specific feature name must be specified. origin name optional an origin url to check the feature on. if it is omitted the default origin is used. return value a boolean that is true if and only if the feature is allowed. example the following example queries whether or not the document is allowed to use camera api by the feature policy. please note that camera api might be restricted by the permissions api, if the user did not grant the corresponding permission yet. ...
...ature is allowed. example the following example queries whether or not the document is allowed to use camera api by the feature policy. please note that camera api might be restricted by the permissions api, if the user did not grant the corresponding permission yet. // first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowed = featurepolicy.allowsfeature("camera") if (allowed){ console.log("fp allows camera.") } else { console.log("fp does not allows camera.") } specifications specification status comment feature policythe definition of 'allowsfeature' in that specification. editor's draft initial definition. ...

FeaturePolicy.getAllowlistForFeature() - Web APIs
the getallowlistforfeature() method of the featurepolicy allows query of the allow list for a specific feature for the current feature policy. syntax const allowlist = featurepolicy.getallowlistforfeature(<feature>) parameter feature name a specific feature name must be specified. return value an allow list for the specified feature. errors the function will raise a warning if the specified feature policy directive name is not known. however, it will also return empty array, inditating that no origin is allowed to use the feature. example the followin example prints all the origins that are allowed to use camera api by the feature policy. please note that camera api might be restricted by the permissions api, if the user did not grant the corrsponding permission yet. /...
... editor's draft initial definition. ...
...xample the followin example prints all the origins that are allowed to use camera api by the feature policy. please note that camera api might be restricted by the permissions api, if the user did not grant the corrsponding permission yet. // first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowlist = featurepolicy.getallowlistforfeature("camera") for (const origin of allowlist){ console.log(origin) } specification specification status comment feature policythe definition of 'getallowlistforfeature' in that specification. editor's draft initial definition. ...

HTMLImageElement.lowSrc - Web APIs
the htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property. this property reflects the html lowsrc attribute. syntax htmlimageelement.lowsrc = imageurl; imageurl = htmlimageelement.lowsrc; value a domstring specifying the url of a version of the image specified by src which has been modified in some fashion so that it loads significantly more quickly than the primary image. there are a number of ways to achieve this; primary among them: higher compression levels (for example, a primary image saved as a jpeg using 85% quality might have a lowsrc version saved at 15%. reduced color depth; a primary image in 32-bit color might have an alternate image in...
... some fashion so that it loads significantly more quickly than the primary image. there are a number of ways to achieve this; primary among them: higher compression levels (for example, a primary image saved as a jpeg using 85% quality might have a lowsrc version saved at 15%. reduced color depth; a primary image in 32-bit color might have an alternate image in 8-bit color. important: the lowsrc property is obsolete and should not be used. instead, you should use an image format which loads progressively (such as progressive jpeg). or simply make sure your images are all well-optimized and balanced for appearance versus size. usage notes lowsrc is a strange case. it was never technically part of the html specification (it was a mozilla extension to html); however, html 5 does list ...
...olete attributes. 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. ...

RTCDataChannel.onbufferedamountlow - Web APIs
the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel. this event, which is represented by a simple event object, is sent when the amount of data buffered to be sent falls to or below the threshold specified by the channel's bufferedamountlowthreshold. see buffering in using webrtc data channels to learn more about how to work with the data channel buffer. syntax rtcdatachannel.onbufferedamountlow = function; value a function which the browser will call to handle the bufferedamountlow event. this function receives as its only input parameter a simple event object representing the event which has occurred. ...
...using webrtc data channels to learn more about how to work with the data channel buffer. syntax rtcdatachannel.onbufferedamountlow = function; value a function which the browser will call to handle the bufferedamountlow event. this function receives as its only input parameter a simple event object representing the event which has occurred. example this example responds to the bufferedamountlow event by fetching up to 64kb of a file represented by an object source and calling rtcdatachannel.send() to queue up the retrieved data for sending on the data channel. pc = new rtcpeerconnection(); dc = pc.createdatachannel("sendfile"); /* ... ...
...rameter a simple event object representing the event which has occurred. example this example responds to the bufferedamountlow event by fetching up to 64kb of a file represented by an object source and calling rtcdatachannel.send() to queue up the retrieved data for sending on the data channel. pc = new rtcpeerconnection(); dc = pc.createdatachannel("sendfile"); /* ... */ dc.onbufferedamountlow = function() { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onbufferedamountlow' in that specification. candidate recommendation initial specification. ...

ValidityState.rangeOverflow - Web APIs
when true, the element matches the :invalid and :out-of-range css pseudo-classes. ...
... a validitystate object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's max attribute. if the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a max value is set, if the value don't doesn't conform to the constraints set by the max value, the rangeoverflow property will be true. given the following: <input type="number" min="20" max="40" step="2"/> if value > 40, rangeoverflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeoverflow' in that specification. living standa...
... min="20" max="40" step="2"/> if value > 40, rangeoverflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeoverflow' in that specification. living standard html 5.1the definition of 'validitystate.rangeoverflow' in that specification. recommendation html5the definition of 'validitystate.rangeoverflow' in that specification. recommendation ...

ValidityState.rangeUnderflow - Web APIs
when true, the element matches the :invalid and :out-of-range css pseudo-classes. ...
...a validitystate object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's min attribute. if the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a min value is set, if the value don't doesn't conform to the constraints set by the min value, the rangeunderflow property will be true. given the following: <input type="number" min="20" max="40" step="2"/> if value < 20, rangeunderflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeunderflow' in that specification. living stan...
...n="20" max="40" step="2"/> if value < 20, rangeunderflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeunderflow' in that specification. living standard html 5.1the definition of 'validitystate.rangeunderflow' in that specification. recommendation html5the definition of 'validitystate.rangeunderflow' in that specification. recommendation ...

msRegionOverflow - Web APIs
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 msregionoverflow read-only property determines if content fully fits into the region or not. this proprietary property is specific to internet explorer. syntax string = object.msregionoverflow values type:domstring overflow: the region element's content overflows the region's content box. note that the region's overflow property value can be used to control the visibility of the overflowing content. this means that the region is the last one in the region chain and not able to fit the ...
...o internet explorer. syntax string = object.msregionoverflow values type:domstring overflow: the region element's content overflows the region's content box. note that the region's overflow property value can be used to control the visibility of the overflowing content. this means that the region is the last one in the region chain and not able to fit the remaining content from the named flow. fit: the region element's content fits into the region's content box. it does not overflow. if the region is the last one in the region chain, it means that the content fits without overflowing. if the region is not the last one in the region chain, that means the named flow content is further fitted in subsequent regions. in particular, in this last case, that means the region may have receive...
...content fits into the region's content box. it does not overflow. if the region is the last one in the region chain, it means that the content fits without overflowing. if the region is not the last one in the region chain, that means the named flow content is further fitted in subsequent regions. in particular, in this last case, that means the region may have received no content from the named flow (for example if the region is too small to accommodate any content). empty: the region element has no content and is empty. all content from the named flow was fitted in regions with a lower content-order value. undefined: the element is not a region. when the region is an actual element, msregionoverflow provides the ability to find out if content fully fits into the region or not. however, ...

overflow-anchor - CSS: Cascading Style Sheets
none the element won't be selected as a potential anchor. ...
...roll anchoring behavior, which adjusts scroll position to minimize content shifts. scroll anchoring behavior is enabled by default in any browser that supports it. therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off. syntax /* keyword values */ overflow-anchor: auto; overflow-anchor: none; /* global values */ overflow-anchor: inherit; overflow-anchor: initial; overflow-anchor: unset; values auto the element becomes a potential anchor when adjusting scroll position. none the element won't be selected as a potential anchor. formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscr...
...r: unset; values auto the element becomes a potential anchor when adjusting scroll position. none the element won't be selected as a potential anchor. formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | none examples prevent scroll anchoring to prevent scroll anchoring in a document, use the overflow-anchor property. body { overflow-anchor: none; } specifications specification status comment css scroll anchoring module level 1the definition of 'overflow-anchor' in that specification. editor's draft initial definition. ...

Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’ - HTTP
reason reason: did not find method in cors header ‘access-control-allow-methods’ what went wrong? ...
... reason reason: did not find method in cors header ‘access-control-allow-methods’ what went wrong? ...
...d being used by the cors request is not included in the list of methods specified by the response's access-control-allow-methods header. this header specifies a comma-delineated list of the http methods which may be used when using cors to access the url specified in the request; if the request is using any other method, this error occurs. for example, if the response includes: access-control-allow-methods: get,head,post trying to use a put request will fail with this error. make sure your code only uses the permitted http methods when accessing the service. note: if the server includes any unrecognized or undefined method names in its access-control-allow-methods header, a different error occurs: reason: invalid token ‘xyz' in cors header ‘access-control-allow-methods’. ...

Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ - HTTP
reason reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ what went wrong? ...
... reason reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ what went wrong? ...
... ...

Allow - HTTP
the allow header lists the set of methods supported by a resource. this header must be sent if the server responds with a 405 method not allowed status code to indicate which request methods can be used. an empty allow header indicates that the resource allows no request methods, which might occur temporarily for a given resource, for example. header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods. ...
...icate which request methods can be used. an empty allow header indicates that the resource allows no request methods, which might occur temporarily for a given resource, for example. header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods. ...
...st methods, which might occur temporarily for a given resource, for example. header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods. ...

405 Method Not Allowed - HTTP
the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the target resource. the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods. ...
... the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the target resource. the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods. ...
...ed response status code indicates that the request method is known by the server but is not supported by the target resource. the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods. ...

allowEvents - Archive of obsolete content
...
... ...

Reflow - MDN Web Docs Glossary: Definitions of Web-related terms
reflow happens when a browser must process and draw part or all of a webpage again, such as after an update on an interactive site. ...
... reflow happens when a browser must process and draw part or all of a webpage again, such as after an update on an interactive site. ...

JSSecurityCallbacks.contentSecurityPolicyAllows
the jssecuritycallbacks.contentsecuritypolicyallows callback is called when a script attempts to access an object property. the callback can deny the script access to the property. jscheckaccessop is the type of the callback. (it is also the type of the callback set by js_setcheckobjectaccesscallback.) syntax typedef jsbool (*jscspevalchecker)(jscontext *cx); name type description cx jscontext * the js context in which the property access attempt is occurring. description check whether runtime code generation is allowed for the current global. ...
... ...

-webkit-overflow-scrolling - CSS: Cascading Style Sheets
syntax values auto use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen. touch use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. the speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. also creates a new stacking context. ...
...creates a new stacking context. formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not. </p> </div> css div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; } .scroll-touch { -webkit-overflow-scrolling: touch; /* lets it scroll lazy */ } .scroll-auto { -webkit-overflow-scrolling: auto; /* stops scrolling immediately */ } results specifications not part of any standard. apple has a description in the safari css reference. ...

overflow-block - CSS: Cascading Style Sheets
the overflow-block css media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis. syntax the overflow-block feature is specified as a keyword value chosen from the list below. none content that overflows the block axis is not displayed. scroll content that overflows the block axis can be seen by scrolling to it. optional-paged content that overflows the block axis can be seen by scrolling to it, but page breaks can be manually triggered (such as via break-inside, etc.) to cause the following content to display on the following page. paged content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page. examples html <p>lorem ipsum dolor...
...et ultrices posuere cubilia curae; nunc velit erat, tempus id rutrum sed, dapibus ut urna. integer vehicula nibh a justo imperdiet rutrum. nam faucibus pretium orci imperdiet sollicitudin. nunc id facilisis dui. proin elementum et massa et feugiat. integer rutrum ullamcorper eleifend. proin sit amet tincidunt risus. sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css @media (overflow-block: scroll) { p { color: red; } } result specifications specification status comment media queries level 4the definition of 'overflow-block' in that specification. candidate recommendation initial definition. ...

overflow-inline - CSS: Cascading Style Sheets
examples html <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; nunc velit erat, tempus id rutrum sed, dapibus ut urna. integer vehicula nibh a justo imperdiet rutrum. nam faucibus pretium orci imperdiet sollicitudin. ...
...rae; nunc velit erat, tempus id rutrum sed, dapibus ut urna. integer vehicula nibh a justo imperdiet rutrum. nam faucibus pretium orci imperdiet sollicitudin. nunc id facilisis dui. proin elementum et massa et feugiat. integer rutrum ullamcorper eleifend. proin sit amet tincidunt risus. sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css p { white-space: nowrap; } @media (overflow-inline: scroll) { p { color: red; } } result specifications specification status comment media queries level 4the definition of 'overflow-inline' in that specification. candidate recommendation initial definition. ...

math:lowest() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes math:lowest() returns the node in the specified node-set with the lowest value (where the lowest value calculated using math:min()). a node has this minimum value if converting its string value to a number equals the minimum value. syntax math:lowest(nodeset) parameters nodeset the node-set whose lowest value is to be returned. ...
... the lowest value (where the lowest value calculated using math:min()). a node has this minimum value if converting its string value to a number equals the minimum value. syntax math:lowest(nodeset) parameters nodeset the node-set whose lowest value is to be returned. returns a result tree fragment consisting of copies of the nodes returned by math:min(). ...

Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
to correct this problem on the client side, simply ensure that the credentials flag's value is false when issuing your cors request. if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true. if using server-sent events, make sure eventsource.withcredentials is false (it's the default value). ...
...rs request. if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true. if using server-sent events, make sure eventsource.withcredentials is false (it's the default value). if using the fetch api, make sure request.credentials is "omit". if, instead, you need to adjust the server's behavior, you'll need to change the value of access-control-allow-origin to grant access to the origin from which the client is loaded. ...

Access-Control-Allow-Methods - HTTP
the access-control-allow-methods response header specifies the method or methods allowed when accessing the resource in response to a preflight request. header type response header forbidden header name no syntax access-control-allow-methods: <method>, <method>, ... access-control-allow-methods: * directives <method> comma-delimited list of the allowed http request methods. * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information). in requests with credentials, it is treated as the literal method name "*" without special semantics. ...
...low-methods: * directives <method> comma-delimited list of the allowed http request methods. * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information). in requests with credentials, it is treated as the literal method name "*" without special semantics. examples access-control-allow-methods: post, get, options access-control-allow-methods: * specifications specification status comment fetchthe definition of 'access-control-allow-methods' in that specification. living standard initial definition ...

Timing-Allow-Origin - HTTP
the timing-allow-origin response header specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. header type response header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources. <origin> specifies a uri that may see the timing resources. you can specify multiple origins, separated by commas. ...
... header type response header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources. <origin> specifies a uri that may see the timing resources. you can specify multiple origins, separated by commas. examples to allow any resource to see timing resources: timing-allow-origin: * to allow https://developer.mozilla.org to see timing resources, you can specify: timing-allow-origin: https://developer.mozilla.org specifications specification status comment resource timing level 3the definition of 'timing-allow-origin' in that specification. editor's draft initial definition. ...

String.prototype.toLowerCase() - JavaScript
the tolowercase() method returns the calling string value converted to lower case. 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. syntax str.tolowercase() return value a new string representing the calling string converted to lower case. description the tolowercase() method returns the value of the string converted to lower case. tolowercase() does not affect the value of the string str itself. ...
...ive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax str.tolowercase() return value a new string representing the calling string converted to lower case. description the tolowercase() method returns the value of the string converted to lower case. tolowercase() does not affect the value of the string str itself. examples using tolowercase() console.log('alphabet'.tolowercase()); // 'alphabet' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.tolowercase' in that specification. ...

Disabling interruptible reflow - Archive of obsolete content
add the following variables to your environment to disable gecko interruptible reflow: gecko_reflow_interrupt_mode=counter gecko_reflow_interrupt_frequency=1000000 gecko_reflow_interrupt_checks_to_skip=1000000 now start firefox within this environment. ...

allownegativeassertions - Archive of obsolete content
« xul reference home allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. ...

-ms-flow-from - Archive of obsolete content
initial valuenoneapplies tonon-replaced elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none default. no container has been specified. <custom-ident> the name of the region container. formal syntax [ none | <custom-ident> ]# specifications not part of any specification. ...

-ms-flow-into - Archive of obsolete content
initial valuenoneapplies toiframe elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none default. no container has been specified. <custom-ident> the name of the region container. formal syntax [ none | <custom-ident> ]# specifications not part of any specification. ...

GetAccessibleBelow
« nsiaccessible page summary this method returns an accessible node geometrically below this one. nsiaccessible getaccessiblebelow(); return value returns an accessible node geometrically below this one. see also nsiaccessible.getaccessibletoright() nsiaccessible.getaccessibletoleft() nsiaccessible.getaccessibleabove() ...

copyToFollowingLinks
...

copyToFollowingLinksNative
...

isLowMemory
...

Reason: CORS request external redirect not allowed - HTTP
for example, if the page https://service.tld/fetchdata were requested, and the http response is "301 moved permanently", "307 temporary redirect", or "308 permanent redirect" with a location of https://anotherservice.net/getdata, the cors request will fail in this manner. ...

Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ - HTTP
reason reason: invalid token ‘xyz’ in cors header ‘access-control-allow-headers’ what went wrong? the response to the cors request that was sent by the server includes an access-control-allow-headers header which includes at least one invalid header name. the access-control-allow-headers header is sent by the server in response to a preflight request; it lets the client know which http headers are permitted in cors requests. if the client user agent finds among the comma-delineated values provided by the header any header name it does not recognize, this error occurs. this is a problem that most likely can only be fixed on the server side, by modifying the server's configuration to no longer send the invalid or unknown header name with the access-control-allow-headers header. it...

Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel - HTTP
reason reason: missing token ‘xyz’ in cors header ‘access-control-allow-headers’ from cors preflight channel what went wrong? the access-control-allow-headers header is sent by the server to let the client know which headers it supports for cors requests. the value of access-control-allow-headers should be a comma-delineated list of header names, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed). this error occurs when attempting to preflight a header that is not expressly allowed (that is, it's not included in the list specified by the access-control-allow-headers header sent by the server). to fix this, the server needs to be updated so that it allows the indicated header, or you need to avoid using that header. ...

following-sibling - XPath
the following-sibling axis indicates all the nodes that have the same parent as the context node and appear after the context node in the source document. ...

following - XPath
the following axis indicates all the nodes that appear after the context node, except any descendant, attribute, and namespace nodes. ...

Index - Web APIs
found 5328 pages: # page tags and summary 1 web apis api, dom, landing, reference, web when writing code for the web, there are a large number of web apis available. below is a list of all the apis and interfaces (object types) that you may be able to use while developing your web app or site. 2 angle_instanced_arrays api, reference, webgl, webgl extension the angle_instanced_arrays extension is part of the webgl api and allows to draw the same object, or groups of similar objects multiple times, if they share the same vertex data, primitive count and type. 3 angle_instanced_arrays.drawarraysinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.dr...
....vertexattribdivisorangle() method of the webgl api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle(). 6 abortcontroller api, abortcontroller, experimental, interface, reference the abortcontroller interface represents a controller object that allows you to abort one or more dom requests as and when desired. 7 abortcontroller.abortcontroller() api, abortcontroller, constructor, experimental, fetch, reference the abortcontroller() constructor creates a new abortcontroller object instance. 8 abortcontroller.abort() api, abortcontroller, experimental, fetch, method, reference, abort() the abort() method...
... abortcontroller, experimental, fetch, property, reference, signal the signal read-only property of the abortcontroller interface returns an abortsignal object instance, which can be used to communicate with/abort a dom request as desired. 10 abortsignal api, abortsignal, dom, experimental, interface, reference the abortsignal interface represents a signal object that allows you to communicate with a dom request (such as a fetch) and abort it if required via an abortcontroller object. 11 abortsignal.aborted api, abortsignal, experimental, property, reference, aborted the aborted read-only property returns a boolean that indicates whether the dom request(s) the signal is communicating with is/are aborted (true) or not (false). 12 abort...
...And 276 more matches

Index - Archive of obsolete content
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 : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other. syntax highliting support for .htaccess files less. 3 2015 mdn fellowship program 2015, archive, fellowship no summary! 4 api api, archive archived documentation about obsolete web standards apis. 5 navigator api, navigator features that used to hang off the navigator interface, but have since been removed. 6 navigator.moznotification api, deprecated, mobile, non-standard, property, 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-text constructor for a console instance. 72 console/trace...
... provides an api for creating namespaces for objects, which effectively may be used for creating fields that are not part of objects public api. 80 core/promise implementation of promises to make asynchronous programming easier. 81 dev/panel enables you to extend the firefox developer tools. 82 event/core the event/core module allows the creation of apis to broadcast and subscribe to events. 83 event/target create objects that broadcast events. 84 frame/hidden-frame creates firefox frames (i.e. xul <iframe> elements) that are not displayed to the user. 85 frame/utils provides helper functions for working with platform internals like frames and browsers. ...
...And 148 more matches

Index
rtability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards. ...
...rder to allow interoperability between software and devices that perform cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. ...
...ifferent numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base l...
...And 102 more matches

sslfnc.html
lt ssl_cipherprefgetdefault ssl_clearsessioncache ssl_configserversessionidcache ssl_configmpserversidcache ssl_inheritmpserversidcache nss_init sets up configuration files and performs other tasks required to run network security services. database files are opened read-only. syntax #include "nss.h" secstatus nss_init(char *configdir); parameter this function has the following parameter: configdir a pointer to a string containing the pathname of the directory where the certificate, key, and security module databases reside. returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to retrieve the error code. description nss_init opens the certn.d...
...fied directory. nss_init isnot idempotent, so call it only once. nss_init opens the database files read-only. if you are performing operations that require write permission, for example s/mime operations such as adding a certificate, use nss_initreadwrite instead. before calling nss_init, your program must call pr_init. the policy flags for all cipher suites are turned off by default, disallowing all cipher suites. therefore, an application cannot use nss to perform any cryptographic operations until after it enables appropriate cipher suites by calling one of the ssl export policy functions: nss_setdomesticpolicy, nss_setexportpolicy, and nss_setfrancepolicy configure the cipher suites for domestic, international, and french versions of software products with encryption features. ...
...licy functions: nss_setdomesticpolicy, nss_setexportpolicy, and nss_setfrancepolicy configure the cipher suites for domestic, international, and french versions of software products with encryption features. ssl_cipherpolicyset sets policy flags for individual cipher suites, one at a time. ...
...And 96 more matches

HTTP Index - HTTP
und 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, that is, a protocol that doesn't lose messages silently like udp does. rudp...
...te 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 communication flow. on top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new http methods or headers. 5 choosing between www and non-www urls guide, http, url a recurring question among website owners is whether to choose non-www or www urls. this page provides some advice on what's best. 6 data urls ...
...tionality and new semantics by creating new http methods or headers. 5 choosing between www and non-www urls guide, http, url a recurring question among website owners is whether to choose non-www or www urls. this page provides some advice on what's best. 6 data urls base64, guide, http, intermediate, url data urls, urls prefixed with the data: scheme, allow content creators to embed small files inline in documents. 7 evolution of http guide, http, needsupdate, needsupdate(http/3) http (hypertext transfer protocol) is the underlying protocol of the world wide web. http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in h...
...And 71 more matches

Index
found 1275 pages: # page tags and summary 1 xpcom add-ons, extensions, landing, mozilla, xpcom xpcom is a cross platform component object model, similar to microsoft com. it has multiple language bindings, allowing xpcom components to be used and implemented in javascript, java, and python in addition to c++. 2 accessing the windows registry using xpcom add-ons, code snippets, extensions, needsclassification, windows registry when implementing windows-specific functionality, it is often useful to access the windows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in...
... if mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail. it is a possiblity that is introduced when upgrading to a new compiler without recompiling everything. effectively, it is a different platform. 5 bundling multiple binary components binary xpcom components are sometimes required to implement low-level features for extensions. since binary components are linked against a single gecko sdk, a dependency to a particular version of gecko is created. if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example). the more likely case is that the component uses "unfrozen" interf...
...omponents.utils.unwaivexrays undo a previous call to components.utils.waivexrays(), restoring xray vision for the caller. 49 components.utils.waivexrays waives xray vision for an object, giving the caller a transparent wrapper to the underlying object. 50 javaxpcom embedding, java, javaxpcom, mozilla, xpcom, xpcom:language bindings javaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface. javaxpcom is not actively maintained. 51 development javaxpcom, xpcom:language bindings no summary! 52 examples javaxpcom, xpcom:language bindings no summary! 53 other resource...
...And 67 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
atag, accessibility, authoring tool accessibility guidelines, glossary atag (authoring tool accessibility guidelines) is a w3c recommendation for building accessible-authoring tools that produce accessible contents. 10 abstraction abstraction, coding, codingscripting, glossary, programming language abstraction in computer programming is a way to reduce complexity and allow efficient design and implementation in complex software systems. it hides the technical complexity of systems behind simpler apis. 11 accessibility accessibility, glossary web accessibility (a11y) refers to best practices for keeping a website usable despite physical and technical restrictions. web accessibility is formally defined and discussed at the w3c through the web acc...
...separate rendering engine. 32 block disambiguation, glossary the term block can have several meanings depending on the context. it may refer to: 33 block (css) css, codingscripting, design, glossary, html a block on a webpage is an html element that appears on a new line, i.e. underneath the preceding element in a horizontal writing mode, and above the following element (commonly known as a block-level element). for example, <p> is by default a block-level element, whereas <a> is an inline element — you can put several links next to one another in your html source and they will sit on the same line as one another in the rendered output. 34 block (scripting) codingscripting, glossary, javascript in javascript, a block is a collec...
...descendants. 40 breadcrumb accessibility, glossary, navigation, search, site map, breadcrumb a breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the the site's structure, from top level to current page, or a list of the links the user followed to get to the current page, in the order visited. 41 brotli brotli, glossary, reference, web performance, compression brotli is a general-purpose lossless compression algorithm. 42 browser glossary, navigation 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 ...
...And 58 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
easier method of building a firefox/thunderbird addon for developers who are well-acquainted with ides like netbeans, eclipse, etc. is to use netbeans (ide from sun microsystems) and foxbeans (plugin for netbeans, 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 t...
...s used to contain language data that can be translated. to make an extension’s gui support multiple languages, you can include multiple locale packages, one for each language. the skin package this is used to include source files used as visual elements in the gui, including style sheets and images. most extensions include only one skin package, but you can include multiple skin packages to allow the gui to change with different themes. chrome url use a file called a “chrome manifest” to register chrome packages with firefox and start using them. to register a package, you use a special uri scheme called a “chrome url” to represent the path to the file. chrome urls are structured as: chrome://%package name%/%package type%/%relative path to source file% for example, the chrome ...
...hrome url use a file called a “chrome manifest” to register chrome packages with firefox and start using them. to register a package, you use a special uri scheme called a “chrome url” to represent the path to the file. chrome urls are structured as: chrome://%package name%/%package type%/%relative path to source file% for example, the chrome url for the firefox browser window is as follows: chrome://browser/content/browser.xul here, the package name is “browser”, the file “browser.xul”, and the type of the package is “content”. source files represented through chrome urls run with universalxpconnect privileges; even if they haven’t been granted “use xpconnect as local file” privileges, as discussed in chapter 4, they will be able to use xpcom functions (figure ...
...And 50 more matches

Python binding for NSS
are projects. nss is fips-140 certified. nss is built upon nspr because nspr provides an abstraction of common operating system services, particularly in the areas of networking and process management. python also provides an abstraction of common operating system services but because nss and nspr are tightly bound python-nss exposes elements of nspr. ...
...e nss and nspr are tightly bound python-nss exposes elements of nspr. for information on nss and nspr, see the following: network security services (nss). nss project page. netscape portable runtime. nspr project page. nspr reference. nspr api documentation. design goals nss and nspr are c language api's which python-nss "wraps" and exposes to python programs. the design of python-nss follows these basic guiding principles: be a thin layer with almost a one-to-one mapping of nss/nspr calls to python methods and functions. programmers already familiar with nss/nspr will be quite comfortable with python-nss. be "pythonic". the term pythonic means to follow accepted python paradigms and idoms in the python language and libraries. thus when deciding if the nss/nspr api should be rigi...
... basic guiding principles: be a thin layer with almost a one-to-one mapping of nss/nspr calls to python methods and functions. programmers already familiar with nss/nspr will be quite comfortable with python-nss. be "pythonic". the term pythonic means to follow accepted python paradigms and idoms in the python language and libraries. thus when deciding if the nss/nspr api should be rigidly followed or a more pythonic api provided the pythonic implementation wins because python programmers do not want to write c programs in python, rather they want their python code to feel like python code with the richness of full python. identifer names follow the preferred python style instead of the style in the nss/nspr c header files. classes are camel-case. class names always begin with a up...
...And 49 more matches

Drawing graphics - Learn web development
previous overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl). 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. graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later vi...
...svg. this however was still not enough. while you could use css and javascript to 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. ...
... 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. ...
...And 48 more matches

HTML documentation index - HTML: Hypertext Markup Language
d summary 1 html: hypertext markup language html, html5, landing, web, l10n:priority html (hypertext markup language) is the most basic building block of the web. it defines the meaning and structure of web content. other technologies besides html are generally used to describe a web page's appearance/presentation (css) or functionality/behavior (javascript). 2 allowing cross-origin use of images and canvas advanced, cors, canvas, html, image, reference, security, storage, data html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin. 3 app...
...utocapitalize, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. 10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element. classes allow css and javascript to 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 ...
...ents 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. ...
...And 43 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
s 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 requests and data transfers between browsers and servers. modern browsers use cors in apis such as xmlhttprequest or fetc...
...ssion of cross-origin resource sharing from a server perspective (including php code snippets) can be found in the server-side access control (cors) article. simple requests some requests don’t trigger a cors preflight. those are called “simple requests” in this article, though the fetch spec (which defines cors) doesn’t use that term. ...
...ing from a server perspective (including php code snippets) can be found in the server-side access control (cors) article. simple requests some requests don’t trigger a cors preflight. those are called “simple requests” in this article, though the fetch spec (which defines cors) doesn’t use that term. ...
...And 39 more matches

Setting up your own test automation environment - Learn web development
n 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 with other server-side environments, also...
...nt end devs. note: if you want to find out how to use webdriver with other server-side environments, also check out platforms supported by selenium for some useful links. setting up selenium in node to start with, set up a new npm project, as discussed in setting up node and npm in the last chapter. call it something different, like selenium-test. ...
...all it something different, like selenium-test. next, we need to install a framework to allow us to work with selenium from inside node. we are going to choose selenium's official selenium-webdriver, as the documentation seems fairly up-to-date and it is well-maintained. if you want different options, webdriver.io and nightwatch.js are also good choices. to install selenium-webdriver, run the following command, making sure you are inside your project folder: npm install selenium-webdriver note: it is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. you should make sure that everything is up-to-date. ...
...And 38 more matches

LiveConnect Overview - Archive of obsolete content
ts original javascript object type. the jsobject class provides an interface for invoking javascript methods and examining javascript properties. javascript to java communication when you refer to a java package or class, or work with a java object or array, you use one of the special liveconnect objects. all javascript access to java takes place with these objects, which are summarized in the following table. table 9.1 the liveconnect objects object description javaarray a wrapped java array, accessed from within javascript code. javaclass a javascript reference to a java class. javaobject a wrapped java object, accessed from within javascript code. javapackage a javascript reference to a java package. note: because ja...
...e data types for the other language when you use liveconnect. see data type conversion for complete information. in some ways, the existence of the liveconnect objects is transparent, because you interact with java in a fairly intuitive way. for example, you can create a java string object and assign it to the javascript variable mystring by using the new operator with the java constructor, as follows: var mystring = new java.lang.string("hello world"); in the previous example, the variable mystring is a javaobject because it holds an instance of the java object string. as a javaobject, mystring has access to the public instance methods of java.lang.string and its superclass, java.lang.object. these java methods are available in javascript as methods of the javaobject, and you can call them ...
... mystring = new java.lang.string("hello world"); in the previous example, the variable mystring is a javaobject because it holds an instance of the java object string. as a javaobject, mystring has access to the public instance methods of java.lang.string and its superclass, java.lang.object. these java methods are available in javascript as methods of the javaobject, and you can call them as follows: mystring.length(); // returns 11 static members can be called directly on the javaclass object. alert(java.lang.integer.max_value); //alerts 2147483647 the packages object if a java class is not part of the java, sun, or netscape packages, you access it with the packages object. for example, suppose the redwood corporation uses a java package called redwood to contain various java classes tha...
...And 36 more matches

A first splash into JavaScript - Learn web development
mmer brain" in five minutes, but we will give you plenty of opportunity to practice thinking like a programmer throughout the course. with that in mind, let's look at the example we'll be building up in this article, and review the general process of dissecting it into tangible tasks. ...
... max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. ...
... guess it in 10 turns or fewer. ...
...And 35 more matches

Introduction to automated testing - Learn web development
adding in css prefixes or transpiling nascent javascript features for maximum cross-browser reach, and so on. use a browser automation system like selenium to run specific tests on installed browsers and return results, alerting you to failures in browsers as they crop up. commercial cross-browser testing apps like lambdatest, sauce labs, browserstack, and testingbot are based on selenium, but allow you to access their set up remotely using a simple interface, saving you the hassle of setting up your own testing system. we will look at how to set up your own selenium-based testing system in the next article. in this article, we'll look at how to set up a task runner, and use the basic functionality of commercial systems like the ones mentioned above. note: the above two categories are no...
...em in the next article. in this article, we'll look at how to set up a task runner, and use the basic functionality of commercial systems like the ones mentioned above. note: the above two categories are not mutually exclusive. it is possible to set up a task runner to access a service like sauce labs, or lambdatest via an api, run cross browser tests, and return results. we will look at this below as well. using a task runner to automate testing tools as we said above, you can drastically speed up common tasks such as linting and minifying code by using a task runner to run everything you need to run automatically at a certain point in your build process. for example, this could be every time you save a file, or at some other point. inside this section we'll look at how to automate task...
...ng with node and gulp, a beginner-friendly option. setting up node and npm most tools these days are based on node.js, so you'll need to install it from nodejs.org: download the installer for your system from the above site. (if you already have node and npm installed, jump to point 4) install it like you would any other program. note that node comes with node package manager (npm), which allows you to easily install packages, share your own packages with others, and run useful scripts on your projects. once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of node and npm: node -v npm -v if you've got node/npm already installed, you should update them to their latest versions. to update node, the mos...
...And 34 more matches

WebIDL bindings
ous helper objects and utility methods in dom/bindings that are also all in the mozilla::dom namespace and whose headers are all exported into mozilla/dom (placed in $objdir/dist/include by the build process). adding webidl bindings to a class to add a webidl binding for interface myinterface to a class mozilla::dom::myinterface that's supposed to implement that interface, you need to do the following: if your interface doesn't inherit from any other interfaces, inherit from nswrappercache and hook up the class to the cycle collector so it will trace the wrapper cache properly. note that you may not need to do this if your objects can only be created, never gotten from other objects. if you also inherit from nsisupports, make sure the nsisupports comes before the nswrappercache in you...
...arentobject chain will eventually get you to a window, so that every webidl object is associated with a particular window. for example, nsinode::getparentobject returns the node's owner document. the return type of getparentobject doesn't matter other than it must either singly-inherit from nsisupports or have a corresponding tosupports method that can produce an nsisupports from it. ...
...again, if you do not need wrapper caching you don't need to do this. ...
...And 34 more matches

Index - HTTP
leading 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. ...
...leading 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. ...
...r 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. using content negotiation, the server selects one of the proposals, uses it and informs the client of its choice with the content...
...And 34 more matches

Index - Archive of obsolete content
rly for various xul element types. sections in bold are to draw attention to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. 5 attribute (xul) xul attributes, xul reference no summary! 6 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. 7 accelerated xul, xul attribute, xul reference no summary! 8 acceltext xul...
...tributes, xul reference no summary! 10 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 11 activetitlebarcolor xul attributes, xul reference no summary! 12 afterselected xul attributes, xul reference no summary! 13 align reference, référence(2), xul no summary! 14 allowevents xul attributes, xul reference no summary! 15 allownegativeassertions xul attributes, xul reference no summary! 16 alternatingbackground xul attributes, xul reference no summary! 17 alwaysopenpopup xul attributes, xul reference no summary! 18 attribute xul attributes, xul reference no summary! ...
... 31 browserid xul, xul reference no summary! 32 button.type xul attributes, xul reference no summary! 33 buttonaccesskeyaccept xul attributes, xul reference no summary! 34 buttonaccesskeycancel xul attributes, xul reference ...
...And 33 more matches

Client-side storage - Learn web development
or 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 (e.g. storing the contents of a shopping cart from a previous session, remembering if a user was previously logged in).
...w to use cookies in this article. however, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data related to user personalization and state, e.g. session ids and access tokens. for more information on cookies see our using http cookies article. new school: web storage and indexeddb the "easier" features we mentioned above are as follows: the web storage api provides a very simple syntax for storing and retrieving smaller, data items consisting of a name and a corresponding value. this is useful when you just need to store some simple data, like the user's name, whether they are logged in, what color to use for the background of the screen, etc. the indexeddb api provides the browser with a complete database system for stori...
...st need to store some simple data, like the user's name, whether they are logged in, what color to use for the background of the screen, etc. the indexeddb api provides the browser with a complete database system for storing complex data. this can be used for things from complete sets of customer records to even complex data types like audio or video files. you'll learn more about these apis below. the future: cache api some modern browsers support the new cache api. this api is designed for storing http responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection. cache is usually used in combination with the service worker api, although it doesn't have to be. use of cache and s...
...And 32 more matches

SVG documentation index - SVG: Scalable Vector Graphics
s, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content. 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 syntax and descriptions of what they're used for. 5 linking guide, svg the target attribute on the svg <a> element doesn't work...
...or not the element on which it appears should be rendered. 15 svg core attributes attribute, intermediate, reference, svg the svg core attributes are all the common attributes that can be specified on any svg element. 16 svg event attributes advanced, attribute, draft, landing, needsupdate, svg event attributes always have their name starting with "on" followed by the name of the event for which they are intended. they specifies some script to run when the event of the given type is dispatched to the element on which the attributes are specified. 17 svg presentation attributes attribute, beginner, draft, reference, svg svg presentation attributes are css properties that can be used as attributes on svg elements. 18 svg ...
...ative. 21 additive needscompattable, needsexample, svg, svg attribute no summary! 22 alignment-baseline svg, svg attribute the alignment-baseline attribute specifies how an object is aligned with respect to its parent. this property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. for example, this allows alphabetic baselines in roman text to stay aligned across font size changes. it defaults to the baseline with the same name as the computed value of the alignment-baseline property. 23 alphabetic deprecated, svg, svg attribute the alphabetic attribute defines the lower baseline of a font. it has the same syntax and semantics as the baseline descriptor within an @font-face. ...
...And 32 more matches

TypeScript support in Svelte - Learn web development
objective: learn how to configure and use typescript when developing svelte applications. note that our application is fully functional and porting it to typescript is completely optional. there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using typescript. even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own decision. if you are not interested at all in typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte...
...contributors, we have an official solution ready to be put to the test. in this section we'll show you how to setup a svelte project with typescript support to give it a try. why typescript? recently typescript has seen enormous growth. from last year's github octoverse report we can see that typescript is the 7th most used and 5th fastest growing language used on github. according to stackoverflow's 2019 developer survey it is the third most loved language, right behind rust and python. so typescript is going through a great phase of adoption. typescript's main advantages are: early spotted bugs: the compiler checks types at compile time and provides error reporting. readability: static typing gives the code more structure, making it self-documenting and more readable. rich ide supp...
... it is the third most loved language, right behind rust and python. so typescript is going through a great phase of adoption. typescript's main advantages are: early spotted bugs: the compiler checks types at compile time and provides error reporting. readability: static typing gives the code more structure, making it self-documenting and more readable. rich ide support: type information allows code editors and ides to offer features like code navigation, autocompletion, and smarter hints. safer refactoring: types allows ides to know more about your code, and assist you while refactoring large portions of your code base. type inference: enables you to take advantage of many typescript features even without declaring variable types. availability of new and future javascript features:...
...And 31 more matches

Details of the object model - JavaScript
this chapter attempts to clarify the situation. this chapter assumes that you are already somewhat familiar with javascript and that you have used javascript functions to create simple objects. class-based vs. ...
...e, such as javascript, does not make this distinction: it simply has objects. a prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object. any object can specify its own properties, either when you create it or at run time. in addition, any object can be associated as the prototype for another object, allowing the second object to share the first object's properties. defining a class in class-based languages, you define a class in a separate class definition. in that definition you can specify special methods, called constructors, to create instances of the class. a constructor method can specify initial values for the instance's properties and perform other processing appropriate at creation time...
...efine a class in a separate class definition. in that definition you can specify special methods, called constructors, to create instances of the class. a constructor method can specify initial values for the instance's properties and perform other processing appropriate at creation time. you use the new operator in association with the constructor method to create class instances. javascript follows a similar model, but does not have a class definition separate from the constructor. instead, you define a constructor function to create objects with a particular initial set of properties and values. any javascript function can be used as a constructor. you use the new operator with a constructor function to create a new object. note that ecmascript 2015 introduces a class declaration: jav...
...And 31 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
3c-compliant ones. 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 browser support later. since different browsers sometimes use different apis for the same functionality, you can often find multiple if() else() blocks throughout the code to differentiate between the browsers. the following code shows blocks designated for internet explorer: . . . var elm; if (ns4) elm = document.layers["myid"]; else if (ie4) elm = document.all["myid"] the above code isn't extensible, so if you want it to support a new browser, you must update these blocks throughout the web application. the easiest way to eliminate the need to recode for a new browser is to abstract out functionality. ...
...ode that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes. it is much better and more reliable to sniff by browser capability or object feature support. you can usually do this by testing the required functionality in javascript. for example, rather than: if (ismozilla || isie5) you would use: if (document.getelementbyid) this would allow other browsers that support that w3c standard method, such as opera or safari, to work without any changes. useragent sniffing makes sense in very limited cases where you really do want to know the exact browser in use, such as when you need to work around a bug in a specific version of a specific browser. for all other purposes you should check for the feature you need rather than the browser...
...h as opera or safari, to work without any changes. useragent sniffing makes sense in very limited cases where you really do want to know the exact browser in use, such as when you need to work around a bug in a specific version of a specific browser. for all other purposes you should check for the feature you need rather than the browsers you think will support that feature. ...
...And 30 more matches

Introduction to CSS layout - Learn web development
and introduce some of the concepts we'll be covering throughout this module. prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to give you an overview of css page layout techniques. each technique can be learned in greater detail in subsequent tutorials. ...
...ction to html), and an idea of how css works (study introduction to css.) objective: to give you an overview of css page layout techniques. each technique can be learned in greater detail in subsequent tutorials. css page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. the page layout techniques we'll be covering in more detail in this module are 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 und...
... detail in this module are 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. normal flow normal flow is how the browser lays out html pages by default when you do nothing to control page layout. ...
...And 30 more matches

Index - Learn web development
tood our wai-aria basics article. 12 what is accessibility? at, accessibility, article, beginner, css, codingscripting, html, javascript, learn, tools, users, assistive technology, keyboard, screan reader, screenreader this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. you should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why html is a good basis for accessibility. 13 aprender y obtener ayuda beginner, learn, learning, web development, getting help it is great that you are putting some time into learning a new set of skills, but th...
...nical side. of course you must be familiar with the technique of your craft, but what really matters is what you want to accomplish. yes, it seems obvious, but too many projects fail not from a lack of technical know-how, but from lack of goals and vision. 17 how do i use github pages? beginner, github, guide, web, gh-pages, git, publish github is a "social coding" site. it allows you to upload code repositories for storage in the git version control system. you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it. you can do that with other people's code too! this article provides a basic guide to publishing content using github's gh-pages feat...
...thing on the web? beginner, webmechanics, cost, hosting, web development tools when launching a website, you may spend nothing, or your costs may go through the roof. in this article we discuss how much everything costs, and how you get what you pay (or don't pay). 24 what html features promote accessibility? accessibility, beginner, html, learn, needscontent the following content describes specific features of html that can be used to make a web page more accessible to people with different disabilities. 25 what are browser developer tools? beginner, browser, css, codingscripting, dev tools, html, javascript, learn the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: ...
...And 30 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
ll utilize some techniques for accessing dom nodes and executing methods like focus() and select(). we will also see how to declare and clean-up event listeners on dom elements. we also need to learn a bit about component lifecycle, to understand when these dom nodes get mounted and and unmounted from the dom and how we can access them. ...
... newtodo: displays the <input> field and add button for adding a new todo. ...
... charge of displaying the buttons and emitting the corresponding events. create a new file — components/moreactions.svelte. when the first button is clicked, we'll emit a checkall event to signal that all the todos should be checked/unchecked. when the second button is clicked, we'll emit a removecompleted event to signal that all of the completed todos should be removed. ...
...And 30 more matches

Positioning - Learn web development
previous overview: css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport. this article explains the different position values, and how to use them. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how css positioning works. we'd like you to follow along with the exercises on your local computer, if possible — grab a copy of 0_basic-flow.html from our github repo (source code here) and use that as a starting point. ...
...ction to html), and an idea of how css works (study introduction to css.) objective: to learn how css positioning works. we'd like you to follow along with the exercises on your local computer, if possible — grab a copy of 0_basic-flow.html from our github repo (source code here) and use that as a starting point. introducing positioning the whole idea of positioning is to allow us to override the basic document flow behavior described above, to produce interesting effects. what if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? positioning is your tool. or if you want to create a ui element that floats over the top of other parts of the page, and/or always sits in ...
...positioning makes such layout work possible. there are a number of different types of positioning that you can put into effect on html elements. to make a specific type of positioning active on an element, we use the position property. ...
...And 29 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
discusses what they are useful for, and considers their inherent issues. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand asynchronous loops and intervals and what they are useful for. introduction for a long time, the web platform has offered javascript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly 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. requestanimationf...
...ronously 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(). depending on how processor-intensiv...
...these operations are, they can delay your async code even further, as any async code will execute only after the main thread is available. (in other words, when the stack is empty.) you will learn more on this matter as you progress through this article. in any case, these functions are used for running constant animations and other background processing on a web site or application. in the following sections we will show you how they can be used. settimeout() as we said before, settimeout() executes a particular block of code once after a specified time has elapsed. it takes the following parameters: a function to run, or a reference to a function defined elsewhere. a number representing the time interval in milliseconds (1000 miliseconds equals 1 second) to wait before executing th...
...And 29 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. <input> types how an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. if this attribute is not specified, the default type adopted is text. the available types are as follows: type description basic examples spec button 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"/> ...
...a number. displays a spinner and adds default validation when supported. displays a numeric keypad in some devices with dynamic keypads. <input type="number" name="number"/> html5 password a single-line text field whose value is obscured. will alert user if site is not secure. <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type="range" name="range" min="...
...ement interface, they technically share the exact same set of attributes. however, in reality, most attributes have an effect on only a specific subset of input types. in addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways. this section provides a table listing all the attributes with a brief description. this table is followed by a list describing each attribute in greater detail, along with which input types they are associated with.those that are common to most or all input types are defined in greater detail below. attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those type...
...And 29 more matches

JXON - Archive of obsolete content
create a dom tree article. if you have already have a dom tree from using xmlhttprequest, skip to the next paragraph. note: if you are using an instance of xmlhttprequest in order to retrieve your xml file, please use the yourrequest.responsexml property to get a parsed xml document. don't use yourrequest.responsetext! the algorithms proposed here (see: #1, #2, #3, #4) will consider only the following types of nodes and their attributes: document (only as function argument), documentfragment (only as function argument), element, text (never as function argument), cdatasection (never as function argument), attr (never as function argument). this is a good and standardized compromise for a javascript usage, since all of the information of an xml document is contained in these node t...
...all of the information of an xml document is contained in these node types. all other information (like processing instructions, schemas, comments, etc.) will be lost. this type of algorithm is still considered lossless, since what is lost is meta-information and not information. ...
...still considered lossless, since what is lost is meta-information and not information. in order to avoid conflicts, the representation of nodes and attributes names is case insensitive (always rendered in lower case), so objects' local property names set using javascript must always have some kind of capitalization (that is, at least one capital letter somewhere in their names), as you can see below. the following algorithms are somewhat based on the parker convention, version 0.4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so, one can say that we follow a our convention). moreover, all algorithms are equally lossless for the co...
...And 27 more matches

Componentizing our Svelte app - Learn web development
previous overview: client-side javascript frameworks next in the last article we started developing our todo list app. the central objective of this article is to look at how to break our app into manageable components and share information between them. we'll componentize our app, then add more functionality to allow users to update existing components. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: to learn how to break our app into components and share information among them. code along with us git clone the github re...
...deciding if you should create a new function or object. one such technique is the single responsibility principle — that is, a component should ideally only do one thing. if it ends up growing, it should be split into smaller subcomponents. both approaches should complement each other, and help you decide how to better organize your components. eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred. newtodo.svelte: the text input and button that allow you to enter a new todo item. filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo items. todosstatus.svelte: the "x out of y items completed" heading. todo.svelte: an individu...
... in this article we will concentrate on creating the filterbutton and todo components; we'll get to the others in future articles. let's get started. ...
...And 27 more matches

Working with Svelte stores - Learn web development
ing stores we will create an alert component that shows notifications on screen, which can receive messages from any component. in this case, the alert component is independent from the rest — it is not a parent or child of any other — so the messages don't fit into the component hierarchy. we will also see how to develop our own custom store to persist the todo information to web storage, allowing our todos to persist over page reloads. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm r...
...t hierarchy gets complex, it might become too difficult for components to relay data between each other. in that case, moving to a global data store might be a good option. if you’ve already worked with redux or vuex, then you'll be familiar with how this kind of store works. svelte stores offer similar features for state management. a store is simply an object with a subscribe() method that allows interested parties to be notified whenever the store value changes, and an optional set() method that allows you to set new values for the store. this minimal api is known as the store contract. svelte provides functions for creating readable, writable, and derived stores in the svelte/store module. svelte also provides a very intuitive way to integrate stores into its reactivity system using ...
... whenever a notification arrives the alert component will be in charge of displaying it on screen. creating a store let's start by creating a writable store. any component will be able to write to this store, and the alert component will subscribe to it and display a message whenever the store is modified. create a new file — stores.js — inside your src directory. give it the following content: import { writable } from 'svelte/store' export const alert = writable('welcome to the to-do list app!') note: stores can be defined and used outside of svelte components, so you can organize them in any way you please. in the above code we import the writable() function from svelte/store and use it to create a new store called alert with an initial value of "welcome to the ...
...And 27 more matches

Performance best practices for Firefox front-end engineers
script to cause delays in event processing or painting. that means that the more code we can get off of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user. you might want to consider using a worker if you need to do some computation 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 requestidlecallb...
...pplied 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 does a great job of explaining it. to achieve a 60 fps frame rate, all of the above has to happen in 16 mill...
...l 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 does a great job of explaining it. to achieve a 60 fps frame rate, all of the above has to happen in 16 milliseconds or less, every frame. note that requestanimationframe() lets you queue up javascript to run right before the style flush occurs. ...
...And 26 more matches

Web Replay
replaying processes preserve all the same js behavior, dom structures, graphical updates, and most other behaviors that occurred while recording. devtools' debugger and console can be used to inspect and control the replay. getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay". ...
...ger and console can be used to inspect and control the replay. getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay". web replay's features can only be used in a tab that is recording or replaying. there are a few ways to start recording a tab: record current tab open the developer tools and click the button indicated below. this will refresh the tab and start recording. the button will be colored blue when the tab is being recorded. it can be clicked again to stop recording. open a new tab in recording mode click the 'tools -> web developer -> web replay -> reload and record tab' menu item. this has the same effect as above but can be used when the developer tools are not open. open a saved recording in ...
...en the rewind button. while replaying old behavior, the tab can't be interacted with. to resume recording and interacting with the tab, press the pause button and then the play button to run forward to the end of the recording. save recording and replay on the same machine clicking the 'tools -> web developer -> web replay -> save recording' menu item when a recording tab is open will allow the entire recording to be saved to a file. clicking the 'tools -> web developer -> web replay -> load recording in new tab' menu item will start a new tab which replays the recording to the end. the developer tools can be used to interact with this tab in the same way as a recording tab, though playing forward to the end will pause the tab instead of allowing further recording. save recording...
...And 26 more matches

Migrating from Firebug - Firefox Developer Tools
for the latest developer tools and features, try firefox developer edition. download firefox developer edition general activation firebug's activation is url based respecting the same origin policy. that means that when you open a page on the same origin in a different tab, firebug gets opened automatically. ...
.../ cmd+opt+c. the devtools share the same shortcuts, but also provide shortcuts for the different panels. e.g. the network monitor can be opened via ctrl+shift+q / cmd+opt+q, the web console via ctrl+shift+k / cmd+opt+k and the debugger via ctrl+shift+s / cmd+opt+s. web console the web console is the equivalent of firebug's console panel. it shows log information associated with a web page and allows you to execute javascript expressions via its command line. the display between both is somewhat different. this may be changed in bug 1269730. filter log messages firebug offers two ways to filter log messages, via the options menu and via the filter buttons within the toolbar. the developer tools console offers similar functionality via the filter buttons inside its toolbar — centralized a...
...ge. the developer tools share the same api, so your console.* statements will continue to work. persist logs in firebug you can click the persist button within the toolbar to keep the logged messages between page navigations and reloads. in the devtools this option is called enable persistent logs and is available within the toolbox options panel. server logs firebug extensions like firephp allow to log server-side messages to the firebug console. this functionality is already integrated into the devtools using the chromelogger protocol and doesn't require any extensions to be installed. command history the command history available through a button in firebug's command line, is available by pressing ↑/↓ within the devtools command line. inspect object properties by clicking on an...
...And 26 more matches

Using Feature Policy - HTTP
the feature-policy header is still in an experimental state, and is subject to change at any time. ...
... the feature-policy header is still in an experimental state, and is subject to change at any time. ...
... the feature-policy header is still in an experimental state, and is subject to change at any time. ...
...And 26 more matches

Expressions and operators - JavaScript
this section describes the operators and contains information about operator precedence. ...
...example, x++ or ++x. assignment operators an assignment operator assigns a value to its left operand based on the value of its right operand. the simple assignment operator is equal (=), which assigns the value of its right operand to its left operand. that is, x = y assigns the value of y to x. ...
...t attempts to convert them to an appropriate type for the comparison. this behavior generally results in comparing the operands numerically. the sole exceptions to type conversion within comparisons involve the === and !== operators, which perform strict equality and inequality comparisons. these operators do not attempt to convert the operands to compatible types before checking equality. the following table describes the comparison operators in terms of this sample code: var var1 = 3; var var2 = 4; comparison operators operator description examples returning true equal (==) returns true if the operands are equal. 3 == var1 "3" == var1 3 == '3' not equal (!=) returns true if the operands are not equal. var1 != 4 var2 != "3" ...
...And 26 more matches

Theme changes in Firefox 2 - Archive of obsolete content
browsing/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 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. file description of change browser/bookmarks/addbookmark.css updated to include microsummary-related css changes. browser/bookmarks/bookmarksproperties.css new file; includes microsummary-related css. ...
... indicates a site may be fraudulent. browser/safebrowsing/close16x16.png new file; this is the icon displayed in the safe browsing warning window as a close box for the window. browser/safebrowsing/dim.png new file; this is a graphic overlaid on top of the contents of the window to "dim" it when the safe browsing warning window is displayed. it should use translucency to allow the window contents to be visible through it. browser/safebrowsing/tail.png new file; this is the "tail" of the talk-bubble style window used to indicate that a site may be fraudulent. browser/safebrowsing/warning16x16.png new file; this is the 16x16 pixel version of the warning icon displayed in the url bar when the safe browsing warning window is displayed. brow...
...rowser/search-provider-bkgnd.png new file; the background drawn behind the search provider icon when it's located at the right end of the search bar. global/about.css new file; css used in the application's about box. global/alltabs-box-bkgnd.png new file; the background for the "all tabs" drop-down menu at the right side of the tab bar. global/alltabs-box-overflow-bkgnd.png new file; the background for the "all tabs" drop-down menu when there are enough tabs to activate tab bar scrolling. global/browser.css revised to support new styles for the main browser window. global/globalbindings.xml updated to support changes to the tab bar, including per-tab close buttons. global/icons/alltabs.png not actually used; left over...
...And 25 more matches

Starting WebLock
the xpcom shutdown observation, asubject and adata are not defined, and atopic is defined as the string "xpcom-shutdown". if your object would like to register for this or other events, it first must implement the nsiobserver interface. once you do this, the observer service implementing nsiobserverservice can notify your object of registered events by means of this interface, as in the figure below. the observer interfaces the above figure shows the observer service maintaining a list of all registered nsiobserver objects. when the notification is made, the nsiobserverservice broadcasts the notification from the caller of the notifyobserver() to the nsiobserver object's observe() method. this is a very useful decoupling of different objects. the nsiobserver is a generic interface for pa...
...l decoupling of different objects. the nsiobserver is a generic interface for passing messages between two or more objects without defining a specific frozen interface, and it's one of the ways in which extensibility is built into xpcom. the implementation of the nsiobserver interface in the weblock component is similar to the implementation for the nsifactory interface. xxx what is example 2?following example 2, you change the class definition to support the nsiobserver interface and change ns_impl_isupports1 so that the queryinterface implementation knows that the component also supports nsiobserver. the weblock class definition with support for startup observation is below. class weblock: public nsiobserver { public: weblock(); virtual ~weblock(); ns_decl_isupports ns_...
..., we want to have the component start up every time the application does). this is where a new service that manages sets of related data comes in handy. this service, the nsicategoryservice, is what xpcom and gecko embedding applications use to persist lists of nsiobserver components that want to have startup notification. the nsicategoryservice maintains sets of name-value pairs like the one below. the category manager every category is identified by a string that represents the name of the category. each category contains a set of name-value pairs. for example, you might have a category named "important people" in which the name-value pairs would be names and phone numbers. the format of the name-value pair is left up to you. this data structure is more than enough to support the per...
...And 25 more matches

Block and Line Layout Cheat Sheet - Archive of obsolete content
the details of block and line layout are tricky; this document serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on. it's a work-in-progress, with questions in red highlight. if you know the answer, please pass it along to me so i can update the document. ...
...cument serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on. it's a work-in-progress, with questions in red highlight. if you know the answer, please pass it along to me so i can update the document. objects this section presents some of the classes involved in block and line reflow, along with important members of each object that control reflow processing. nsframe the base class for all frames. mflags flags set on the frame to indicate its state. these flags can be grouped into two categories: flags which affect all frames ("public" flags), and flags that are reserved for an individual frame's private use ("private" flags). ns_frame_in_reflow this bit is set when the frame is being actively being reflowed. by default it is set ...
...g. nsframe the base class for all frames. mflags flags set on the frame to indicate its state. these flags can be grouped into two categories: flags which affect all frames ("public" flags), and flags that are reserved for an individual frame's private use ("private" flags). ns_frame_in_reflow this bit is set when the frame is being actively being reflowed. by default it is set in willreflow(), and unset in didreflow(). many frames' reflow() method verifies that the bit is set with an assertion. ns_frame_first_reflow this flag is set on a newly created frame, and later cleared by the frame's reflow() method when the frame has had its initial reflow. ns_frame_sync_frame_and_view ns_frame_outside_children this flag is set if the combined area of a frame's children extend past the...
...And 24 more matches

Secure Development Guidelines
the 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. introduction provide developers with information on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying architecture, using x86 as an example 6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modif...
...modified using call or jump instructions attacks usually rely on obtaining control over the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer get altered introduction: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a result of un-validated input always perform input validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the input doesn’t have to be > 512, cut it off there if the i...
...nput should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code injection attack typically occurs in web applications injection of arbitrary data into an html document from another site victim’s browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking... xss: example the following snippet of javascript: document.write("welcome to " + document.location); ... is exploitable (in some browsers) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding &amp; → & &lt; → < &gt; → > &quot; → " &apos; → ' url...
...And 24 more matches

Using IndexedDB - Web APIs
iar 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). basic pattern the basic pattern that indexeddb encourages is the following: open a database. create an object store in the database. start a transaction and make a request to do some database operation, 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 co...
... 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: window.idbtransaction = window.idbtransaction || windo...
...therefore, it is not recommended to use it in production code. it may be preferable to not support a browser than to claim to support it and fail: if (!window.indexeddb) { console.log("your browser doesn't support a stable version of indexeddb. such and such feature will not be available."); } opening a database we start the whole process like this:...
...And 24 more matches

Web video codec guide - Web media technologies
ess codecs do exist, but they are typically used for archival and storage for local playback rather than for use on a network. this guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video. common codecs the following video codecs are those which are most commonly used on the web. for each codec, the containers (file types) that can support them are also listed. each codec provides a link to a section below which offers additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of. codec name (short) full codec name container support...
...contents on the encoded video quality and size feature effect on quality effect on size color depth (bit depth) the higher the color bit depth, the higher the quality of color fidelity is achieved in the video. additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors. depending on the codec, higher color depths may result in larger compressed file sizes. the determining factor is what internal storage format is used for the compressed data. frame rate primarily affects the perceived smoothness of the motion in the ima...
...epths may result in larger compressed file sizes. the determining factor is what internal storage format is used for the compressed data. frame rate primarily affects the perceived smoothness of the motion in the image. to a point, the higher the frame rate, the smoother and more realistic the motion will appear. eventually the point of diminishing returns is reached. see frame rate below for details. assuming the frame rate is not reduced during encoding, higher frame rates cause larger compressed video sizes. motion compression of video typically works by comparing frames, finding where they differ, and constructing records containing enough information to update the previous frame to approximate the appearance of the following frame. the more successive frames di...
...And 24 more matches

Legacy layout methods - Learn web development
derstanding 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 layout let's start with the simplest possible example — a...
...jects 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 layout let's start with the simplest possible example — a two column layout. ...
...lly 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 layout let's start with the simplest possible example — a two column layout. you can follow along by creating a new index.html file on your computer, filling it with a simple html template, and inserting the below code into it at the appropriate places. at the bottom of the section you can see a live example of what the final code should look like. first of all, we need some content to put into our columns. replace whatever is inside the body currently with the following: <h1>2 column layout example</h1> <div> <h2>first column</h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla lu...
...And 23 more matches

Introducing a complete toolchain - Learn web development
dy the toolchain that we are creating in this article will be used to build and deploy a mini site that lists data (taken from one of nasa's open apis) concerning potentially hazardous space objects that threaten our existence on earth! it looks like this: you can see a live version of the site at near-misses.netlify.com. tools used in our toolchain in this article we're going to use the following tools and features: jsx, a react-related set of syntax extensions that allow you to do things like defining component structures inside javascript. you won't need to know react to follow this tutorial, but we've included this to give you an idea of how a non-native web language could be integrated into a toolchain. the latest built-in javascript features (at time of writing), such as impor...
...ntribute to our toolchain, we mentioned two web services in the above list of tools. let's take this opportunity to make sure we are set up with them before we continue. you will need to create accounts with each of github and netlify if you wish to complete the tutorial. as mentioned previously, github is a source code repository service that adds community features such as issue tracking, following project releases and much more. in the next chapter we will push to a github code repository, which will cause a cascade effect that (should) deploy all the software to a home on the web. netlify is a hosting service for static websites (that is, websites that entirely consist of files that do not change in real time), which lets us deploy multiple times a day and freely hosts static sites of...
...t is, websites that entirely consist of files that do not change in real time), which lets us deploy multiple times a day and freely hosts static sites of all kinds. netlify is what provides the "home on the web" mentioned above — free hosting for us to deploy our test app to. once you've signed up for github (click the sign up link on the homepage if you don't already have an account, and follow the instructions), you can use your github account for authentication on netlify (click sign up, then choose github from the "sign up with one of the following" list), so technically you only need to create one new account. later on you'll need to connect your netlify account to your github repository to deploy this project; we'll see how to do that in the next chapter. three stages of tools a...
...And 23 more matches

display - CSS: Cascading Style Sheets
some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box model specification. see the table at the end of this document for all of the individual specifications. ...
...some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box model specification. see the table at the end of this document for all of the individual specifications. ...
...s. syntax the css display property is specified using keyword values. ...
...And 23 more matches

filter - CSS: Cascading Style Sheets
if they have different lengths, the missing ...
...if they have different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their lacuna values, the...
...ions are interpolated according to their specific rules. if one filter is none, it is replaced with the filter functions list of the other one using the filter function default values, then all filter functions are interpolated according to their specific rules. otherwise, discrete interpolation is used. functions the filter property is specified as none or one or more of the functions listed below. if the parameter for any function is invalid, the function returns none. except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34). when a single filter property has two or more functions it's results will be different from when two or more filter properties are separately applied with the same functions...
...And 23 more matches

Autoplay guide for media and Web Audio APIs - Web media technologies
t affected by autoplay blocking. autoplay and autoplay blocking the term 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. ...
...g 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. that means that both of the following are considered autoplay behavior, and are therefore subject to the browser'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 availabi...
...g: 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. ...
...And 23 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
ters 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 default set of preferences. this centralized preference file can lock preferences (lockpref) or initialize them (defaultpref) based on environment variables (user,...
...ppropriate .js file dedicated to autoconfig (here autoconf.js). the name of the file can be anything you want because it is named by a general.config preference that should be added at the end of file mozilla_home/default/pref/autoconf.js or mozilla_home/greprefs/autoconf.js: pref("general.config.filename", "mozilla.cfg");. file api that centralized preference file uses a javascript api that allows us to do what we need. that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7499 sat nov 05 09:21:34 cet 2011 defaults/autoconfig/prefcalls.js traditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js. the presence of pref("gen...
...ef/tb-autoconf.js // 20100526 - modification autoconfig jehan. // pref("general.config.obscure_value", 0); // for mcd .cfg files pref('general.config.filename', 'thunderbird.cfg'); // for mcd .cfg files it used to be in previous releases (up until 7.0) in /usr/lib/thunderbird-x.0/default/pref/autoconf.js the first pref just tells us that we won't encode the file (no more rotary 13 or 7 cf below), the second pref is the name of the file to be read: /usr/lib/thunderbird/thunderbird.cfg. (or firefox.cfg if for firefox...) file encoding if needed, the encoding can be done with the perl script: moz-byteshift.pl available at http://www.alain.knaff.lu/howto/mozi...z-byteshift.pl. for netscape 4.x the convert function from the client customization kit (cck) could also do that (and other thin...
...And 22 more matches

Client-side form validation - Learn web development
, 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 data to be submitted to the server and (usually) saved in a database; if the information isn't correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again. we want to make filling out web forms as easy as possible. so why do we insist on validating our forms? there are three main reasons: we want to get the right data, in the rig...
...form can be submitted. minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and max: specifies the minimum and maximum values of numerical input types type: specifies whether the data needs to be a number, an email address, or some other specific preset type. pattern: specifies a regular expression that defines a pattern 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, prov...
... if the user tries to send the data, the browser will block the form and display an error message. ...
...And 22 more matches

Video and Audio APIs - Learn web development
back, seeking, etc. this article shows you how to do common tasks such as creating custom playback controls. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use browser apis to control video and audio playback. html5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages. as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player in...
...e controls in most browsers aren't very keyboard-accessible. you can solve both these problems by hiding the native controls (by removing the controls attribute), and programming your own with html, css, and javascript. in the next section we'll look at the basic tools we have available to do this. ...
...if you downloaded our examples repo, you'll find it in javascript/apis/video-audio/start/ at this point, if you load the html you should see a perfectly normal html5 video player, with the native controls rendered. ...
...And 22 more matches

Handling common JavaScript problems - Learn web development
ality browser-sniffing code, feature-detection code, and vendor prefix usage block browsers from running code they could otherwise use just fine. when developers make use of new/nascent javascript features (for example ecmascript 6 / ecmascript next features, modern web apis...) in their code, and find that such features don't work in older browsers. we'll explore all these problems and more below. fixing general javascript problems as we said in the previous article on html/css, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues. if you are not already familiar with the basics of troubleshooting javascript, you should study that article before moving on. there are a number of common javascript problems that you will want to be...
... html and css, you can ensure better quality, less error-prone javascript code using a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more relaxed in their error/warning reporting. the javascript/ecmascript linters we'd recommend are jshint and eslint; these can be used in a variety of ways, some of which we'll detail below. online the jshint homepage provides an online linter, which allows you to enter your javascript code on the left and provides an output on the right, including metrics, warnings, and errors. code editor plugins it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. what you really want is a linter that will fit into your standa...
...many code editors have linter plugins, for example github's atom code editor has a jshint plugin available. to install it: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. ...
...And 22 more matches

Index
val jsapi reference, obsolete, spidermonkey boolean_to_jsval converts a bool argument, b, to a boolean jsval. 19 double_to_jsval jsapi reference, obsolete, spidermonkey double_to_jsval is the inverse of js::tonumber. 20 int_fits_in_jsval jsapi reference, obsolete, spidermonkey determines if a specified c integer value, i, lies within the range allowed for integer jsvals. if so, int_fits_in_jsval returns true, and i can be cast to jsval by calling int_to_jsval(i). otherwise, int_fits_in_jsval returns false. in this case, the application can still convert i to a jsval using js_newnumbervalue. 21 int_to_jsval jsapi reference, obsolete, spidermonkey int_to_jsval converts a c integer, i, to a jsval. 22 js::add*root...
...m a text string chars, bytes, or srcbuf. 33 js::compileoffthread jsapi reference, reference, référence(2), spidermonkey js::compileoffthread compiles a script, chars for execution. 34 js::compileoptions jsapi reference, reference, référence(2), spidermonkey some methods of js::owningcompileoptions and js::compileoptions return the instance itself to allow method chain. 35 js::construct jsapi reference, reference, référence(2), spidermonkey js::construct calls a specified function as a constructor, fun. 36 js::createerror jsapi reference, reference, référence(2), spidermonkey js::createerror creates an error object with specified properties. 37 js::currentglobalornull jsapi reference, ref...
... jsapi reference, reference, référence(2), spidermonkey here, ptr represents the private member of js::rooted<t>, typed with t. 67 js::setlargeallocationfailurecallback jsapi reference, reference, référence(2), spidermonkey if a large allocation fails when calling pod_{calloc,realloc}cangc, the js engine may call the large-allocation- failure callback, if set, to allow the embedding to flush caches, possibly perform shrinking gcs, etc. to make some room. the allocation will then be retried (and may still fail.) 68 js::setoutofmemorycallback jsapi reference, reference, référence(2), spidermonkey unlike the error reporter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called im...
...And 22 more matches

JIT Optimization Strategies
browsable documentation of optimization strategies, how they work, how they are defeated, and options for how to re-enable them. spidermonkey's optimizing jit, ionmonkey, uses various strategies to optimize operations. the most commonplace operations that are relevant for fast program execution are property accesses and function calls. optimization information is currently collected for the following operations: getproperty (obj.prop) setproperty (obj.prop = val) getelement (obj[elemname]) setelement (obj[elemname] = val) call (func(...)) at each operation site, ionmonkey tries a battery of strategies, from the most optimized but most restrictive to the least optimized but least restrictive. for each strategy attempted, its outcome is tracked. an outcome is either success or a rea...
...ide, what kind of program characteristics can prevent them from being used, and common ways to enable the engine to utilize that optimization. getproperty getproperty_argumentslength attempts to optimize an arguments.length property access. this optimization only works if the arguments object is used in well-understood ways within the function. the function containing the arguments.length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions. call a function...
...ation will be suppressed. in particular, arguments cannot be returned from the function, or passed as an argument into calls (except for the apply case above). getprop_argumentscallee attempts to optimize an arguments.callee property access. this optimization only works if the arguments object is used in well-understood ways within the function. the function containing the arguments.callee is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions. call a function...
...And 22 more matches

Feature-Policy - HTTP
the http feature-policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in content within any <iframe> elements in the document. this header is still in an experimental state, and is subject to change at any time. be wary of this when implementing it on your website. the header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change. for more information, see the main feature policy article. header type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to. ...
...been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change. for more information, see the main feature policy article. header type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to. see directives below for a list of the permitted directive names. ...
...his article will eventually be updated to reflect that change. for more information, see the main feature policy article. header type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to. see directives below for a list of the permitted directive names. ...
...And 22 more matches

Functions - JavaScript
elationship between the input and the output. to use a function, you must define it somewhere in the scope from which you wish to call it. see also the exhaustive reference chapter about javascript functions to get to know the details. defining functions function declarations a function definition (also called a function declaration, or function statement) consists of the function keyword, followed by: the name of the function. a list of parameters to the function, enclosed in parentheses and separated by commas. the javascript statements that define the function, enclosed in curly brackets, {...}. for example, the following code defines a simple function named square: function square(number) { return number * number; } the function square takes one parameter, called number. t...
...functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function. if you pass an object (i.e. ...
...ove is syntactically a statement, functions can also be created by a function expression. such a function can be anonymous; it does not have to have a name. for example, the function square could have been defined as: const square = function(number) { return number * number } var x = square(4) // x gets the value 16 however, a name can be provided with a function expression. ...
...And 22 more matches

Grammar and types - JavaScript
ou use variables as symbolic names for values in your application. the names of variables, called identifiers, conform to certain rules. a javascript identifier must start with a letter, underscore (_), or dollar sign ($). subsequent characters can also be digits (0–9). because javascript is case sensitive, letters include the characters "a" through "z" (uppercase) as well as "a" through "z" (lowercase). you can use most of iso 8859-1 or unicode letters such as å and ü in identifiers. (for more details, see this blog post.) you can also use the unicode escape sequences as characters in identifiers. some examples of legal names are number_hits, temp99, $credit, and _name. declaring variables you can declare a variable in two ways: with the keyword var. for example, var x = 42. thi...
...umber_hits, temp99, $credit, and _name. declaring variables you can declare a variable in two ways: with the keyword var. for example, var x = 42. this syntax can be used to declare both local and global variables, depending on the execution context. with the keyword const or let. for example, let y = 13. this syntax can be used to declare a block-scope local variable. (see variable scope below.) you can also simply assign a value to a variable for example, x = 42. this form creates an undeclared global variable. it also generates a strict javascript warning. undeclared global variables can often lead to unexpected behavior. thus, it is discouraged to use undeclared global variables. evaluating variables a variable declared using the var or let statement with no assigned value speci...
... var or let statement with no assigned value specified has the value of undefined. ...
...And 22 more matches

Understanding WebAssembly text format - WebAssembly
format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some executable code to this module. all code in a webassembly module is grouped into functions, which have the following pseudo-code structure: ( func <signature> <locals> <body> ) the signature declares what the function takes (parameters) and returns (return values). the locals are like vars in javascript, but with explicit types declared. the body is just a linear list of low-level instructions. so this is similar to functions in other languages, even if it looks different because it is an s-expressio...
...it is worth noting here that: the absence of a (result) means the function doesn’t return anything. ...
... return type declarations. it is worth noting here that: the absence of a (result) means the function doesn’t return anything. in the current iteration, there can be at most 1 return type, but later this will be relaxed to any number. each parameter has a type explicitly declared; wasm currently has four available number types (plus reference types; see the reference types) section below): i32: 32-bit integer i64: 64-bit integer f32: 32-bit float f64: 64-bit float a single parameter is written (param i32) and the return type is written (result i32), hence a binary function that takes two 32-bit integers and returns a 64-bit float would be written like this: (func (param i32) (param i32) (result f64) ... ) after the signature, locals are listed with their type, for examp...
...And 22 more matches

CSS values and units - Learn web development
in this lesson we will take a look at some of the most common values and units in use. 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 about the different types of values and units used in css properties. ...
... type, it is really just a fancy way of saying value. note: yes, css values tend to be denoted using angle brackets, to differentiate them from css properties (e.g. the color property, versus the <color> data type). you might get confused between css data types and html elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts. in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values. this means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rg...
... for <color> you will see that the browser compatibility section lists different types of color value and support for them. let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values. numbers, lengths, and percentages there are various numeric data types that you might find yourself using in css. the following are all classed as numeric: data type description <integer> an <integer> is a whole number such as 1024 or -55. <number> a <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2. <dimension> a <dimension> is a <number> with a unit attached to it, for exampl...
...And 21 more matches

Floats - Learn web development
rned to its original purpose, as this article explains. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats. the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it. the kind of thing you might get in a newspaper layout. but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps. floats have commonly been...
...get in a newspaper layout. but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps. floats have commonly been used to create entire web site layouts featuring multiple columns of information floated so they sit alongside one another (the default behavior would be for the columns to sit below one another, in the same order as they appear in the source). there are newer, better layout techniques available and so use of floats in this way should be regarded as a legacy technique. in this article we'll just concentrate on the proper uses of floats. a simple float example let's explore how to use floats. we'll start with a really simple example involving floating a block of text around...
...e order as they appear in the source). there are newer, better layout techniques available and so use of floats in this way should be regarded as a legacy technique. in this article we'll just concentrate on the proper uses of floats. a simple float example let's explore how to use floats. we'll start with a really simple example involving floating a block of text around an element. ...
...And 21 more matches

OS.File for the main thread
this page details how to use file i/o from the main thread. for other uses of os.file, please see the corresponding page. using os.file from a jsm to import os.file into your chrome code, add the following line at the start of your script: components.utils.import("resource://gre/modules/osfile.jsm") promises before using os.file from the main thread, you need some understanding of the promise library. see the promise object documentation for details. also, os.file plays very nicely with task.jsm. example: read the contents of a file as text the following snippet opens a file "file.txt" and read its contents as a string, using the default encoding (utf-8). the content is read asynchronously. the result is a promise. let decoder = new textdecoder(); // this decoder can...
...coder = new textdecoder(); // this decoder can be reused for several reads let promise = os.file.read("file.txt"); // read the complete file as an array promise = promise.then( function onsuccess(array) { return decoder.decode(array); // convert this array to a text } ); this example requires firefox 18 or a more recent version. example: write a string to a file the following snippet writes the text "this is some text" to a string "file.txt", using the default encoding (utf-8). it uses an atomic write to ensure that the file is not modified if, for some reason, the write cannot complete (typically because the computer is turned off, the battery runs out, or the application is stopped.) let encoder = new textencoder(); // this enco...
... // this encoder can be reused for several writes let array = encoder.encode("this is some text"); // convert the text to an array let promise = os.file.writeatomic("file.txt", array, // write the array atomically to "file.txt", using as temporary {tmppath: "file.txt.tmp"}); // buffer "file.txt.tmp". ...
...And 21 more matches

Variable fonts guide - CSS: Cascading Style Sheets
be contained in a single file. that file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. the advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately. this allows for common typographic techniques such as setting different size headings in different weights for better readability at each size, or using a slightly narrower width for data-dense displays. for comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication — giving a much wider range of styles than cu...
...e 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. bold and italic and bold italic), rather than relying upon the browser to synthesize them. the reason for this is that most typefaces have very specific designs for bolder weights and italics that often include completely different characters (lower-case 'a' and 'g' are often quite different in italics, for example). in order to most accurately reflect the typeface design and avoid differences between browsers and how they may or may not synthesize the different styles, it's more accurate to load the specific font files where needed when using a non-variable font. you may also find that some variable fonts come split into two files: one f...
...ions. this is sometimes done to reduce the overall file size in cases where the italics aren't needed or used. in all cases, it is still possible to link them with a common font-family name so you can call them using the same font-family and appropriate font-style. introducing the 'variation axis' the heart of the new variable fonts format is the concept of an axis of variation describing the allowable range of that particular aspect of the typeface design. so the 'weight axis' describes how light or how bold the letterforms can be; the 'width axis' describes how narrow or how wide they can be; the 'italic axis' describes if italic letterforms are present and can be turned on or off accordingly, etc. note that an axis can be a range or a binary choice. weight might range from 1–999, where...
...And 20 more matches

Eclipse CDT
s complete). therefore, it is not recommended for use if your machine only has 4 gb of ram. installing eclipse regarding llvm4eclipsecdt, do not install or select this toolchain for mozilla development. this plugin is intended mainly for managed projects but we use an unmanaged project for mozilla (since it has its own build system). using this plugin will result in parts of the ui described below being hidden or disabled. download "eclipse ide for c/c++ developers" (not eclipse ide for enterprise java developers) from the eclipse download page, install it, and add the directory containing the eclipse binary to your path (/applications/eclipse.app/contents/eclipse/ on mac). (while package managers like snap sometimes provide an eclipse package, they do not include the c++ developer tool...
...you must increase its memory limits. when eclipse's indexer tries to process the mozilla source, eclipse will need considerably more memory than the limits imposed by its default configuration. you can increase eclipse's memory limits using the eclipse.ini that lives alongside the eclipse binary. set an initial heap space of 1 gb and max heap space of 5 gb, say, by modifying the values of the following two lines in eclipse.ini: -xms1g -xmx5g if you fail to increase these limits, then you will likely find that eclipse either hangs when it tries to index the mozilla source or else that the code intelligence is very broken after the indexing "completes". express setup for the eclipse indexer to work well you must first build mozilla, so that it includes headers from the objdir etc. these ca...
...ually, use the context menu in the project explorer tab on the left side of the window. to rebuild for changes in an individual directory (for example, to take account of some changes that you yourself made) select "index > freshen all files" on that directory. to rebuild the entire index (for example when you pull from mozilla-central) select "index > rebuild" on the project root. usage tips below are some of the more useful user tips. (if you're thinking of adding tips, please first consider how widely useful they'll be before adding to this already lengthy page.) for further documentation see the official eclipse user guide and eclipse cdt user guide. keyboard shortcuts regarding key bindings (keyboard shortcuts), the bindings given below are the defaults. you can change the key bindin...
...And 19 more matches

NSS Tools modutil
. for information on certificate database and key database management, see using the certificate database tool. availability this tool is known to build on solaris 2.5.1 (sunos 5.5.1) and windows nt 4.0. syntax to run the security module database tool, type the command modutil option [arguments] where option and arguments are combinations of the options and arguments listed in the following section. each command takes one option. each option may take zero or more arguments. to see a usage string, issue the command without options. options and arguments options specify an action. option arguments modify an action. the options and arguments for the modutil command are defined as follows: options -create create new secmod.db, key3.db, and cert8.db files. use the -dbdir ...
...le library-file specify a path to the dll or other library file containing the implementation of the pkcs #11 interface module that is being added to the database. -ciphers cipher-enable-list enable specific ciphers in a module that is being added to the database. the cipher-enable-list is a colon-delimited list of cipher names. enclose this list in quotation marks if it contains spaces. the following cipher is currently available: fortezza. -mechanisms mechanism-list specify the security mechanisms for which a particular module will be flagged as a default provider. the mechanism-list is a colon-delimited list of mechanism names. enclose this list in quotation marks if it contains spaces. the module becomes a default provider for the listed mechanisms when those mechanisms are enabled. i...
...e will be flagged as a default provider. the mechanism-list is a colon-delimited list of mechanism names. enclose this list in quotation marks if it contains spaces. the module becomes a default provider for the listed mechanisms when those mechanisms are enabled. if more than one module claims to be a particular mechanism's default provider, that mechanism's default provider is undefined. ...
...And 19 more matches

WebGL best practices - Web APIs
oes_element_index_uint oes_standard_derivatives oes_vertex_array_object webgl_debug_renderer_info webgl_lose_context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low. ...
...ay_object webgl_debug_renderer_info webgl_lose_context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low. ...
...gs 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 the liveness of objects, so 'deleting' them at the api level only releases the handle that refers to the actual object. (conceptually releasing the...
...And 19 more matches

Web audio codec guide - Web media technologies
their encoding and decoding of media, and may support additional codecs as well, for optimal cross-platform support of video and audio conferencing, and to integrate better with legacy telecommunication solutions. 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 code...
..., the more closely the sampled sound will match the source material. the effect of source audio format on encoded audio output because encoded audio inherently uses fewer bits to represent each sample, the source audio format may actually have less impact on the encoded audio size than one might expect. however, a number of factors do still affect the encoded audio quality and size. the table below lists a number of key source audio file format factors and their impact on the encoded audio. the effect of source audio format and contents on the encoded audio quality and size feature effect on quality effect on size channel count the number of channels affects only the perception of directionality, not the quality. each channel may substantially increase th...
...essed audio than lossless codecs do. generally speaking, the most common reasons to choose lossless audio are because you require archival-quality storage, or because the audio samples will be remixed and recompressed, and you wish to avoid the amplification of artifacts in the audio due to recompression. for real-time streaming of audio, a lossy codec is usually required in order to ensure the flow of data can keep up with the audio playback rate regardless of network performance. maximum number of channels the audio delivered to each speaker in a sound system is provided by one audio channel in a stream. monaural sound is a single channel. stereo sound is two. 5.1 surround sound has five audio channels, plus one low frequency enhancement (lfe) channel. lfe channels are specifically desi...
...And 19 more matches

Practical positioning examples - Learn web development
he corresponding panel when a tab is pressed, and style the tab itself. you won't need to understand the javascript itself at this stage, but you should think about learning some basic javascript as soon as possible — the more complex your ui features become, the more likely it is that you'll need some javascript to implement your desired functionality. ...
...t to implement your desired functionality. general setup to begin with, add the following between your opening and closing <style> tags: html { font-family: sans-serif; } * { box-sizing: border-box; } body { margin: 0; } this is just some general setup to set a sans-serif font on our page, use the border-box box-sizing model, and get rid of the default <body> margin. next, add the following just below your previous css: .info-box { width: 450px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick. previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs...
...ntent in our tabs. it also looks a bit jarring to have different tabs at different heights. styling our tabs now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. ...
...And 18 more matches

Fundamental text and font styling - Learn web development
objective: to learn the fundamental properties and techniques needed to style text on web pages. what is involved in styling text in css? as you'll have already experienced in your work with html and css, text inside an element is laid out inside the element's content box. it starts at the top left of the content area (or the top right, in the case of rtl language content), and flows towards the end of the line. once it reaches the end, it goes down to the next line and continues, then the next line, until all the content has been placed in the box. text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually usin...
..., before carrying on. the css properties used to style text generally fall into two categories, which we'll look at separately in this article: font styles: properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc. text layout styles: properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box. note: bear in mind that the text inside an element is all affected as one single entity. you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (...
...y 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 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 compute...
...And 18 more matches

Making decisions in your code — conditionals - Learn web development
e: to understand how to use conditional structures in javascript. ...
... (perhaps the outcome of "ate one cookie" might be "still felt hungry", and the outcome of "ate two cookies" might be "felt full, but mom scolded me for eating all the cookies".) if...else statements let's look at by far the most common type of conditional statement you'll use in javascript — the humble if...else statement. basic if ... else syntax basic if...else syntax looks like the following in pseudocode: if (condition) { code to run if condition is true } else { run some other code instead } here we've got: the keyword if followed by some parentheses. a condition to test, placed inside the parentheses (typically "is this value bigger than this other value?", or "does this value exist?"). the condition makes use of the comparison operators we discussed in the last modul...
...set of curly braces, inside which we have some more code — this can be any code we like, and it only runs if the condition is not true — or in other words, the condition is false. this code is pretty human-readable — it is saying "if the condition returns true, run code a, else run code b" you should note that you don't have to include the else and the second curly brace block — the following is also perfectly legal code: if (condition) { code to run if condition is true } run some other code however, you need to be careful here — in this case, the second block of code is not controlled by the conditional statement, so it always runs, regardless of whether the condition returns true or false. this is not necessarily a bad thing, but it might not be what you want — often yo...
...And 18 more matches

Handling common HTML and CSS problems - Learn web development
(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 couple of modern browsers on desktop/mobile, to make sure your code is working generally, before going on to concentrate on the cro...
...nside the widget with this class, so conflicts are less likely. for example .audio-player ul a. validation for html, validation involves making sure all your tags are properly closed and nested, you are using a doctype, and you are using tags for their correct purpose. a good strategy is to validate your code regularly. one service that can do this is the w3c markup validation service, which allows you to point to your code, and returns a list of errors: css has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on. the w3c has a css validator available too, for this purpose. linters another good option to choose is a ...
...so-called linter application, which not only points out errors, but can also flag up warnings about bad practices in your css, and other points besides. linters can generally be customized to be stricter or more relaxed in their error/warning reporting. there are many online linter applications, the best of which are probably dirty markup (html, css, javascript), and css lint (css only). these allows you to paste your code into a window, and it will flag up any errors with crosses, which can then be hovered to get an error message informing you what the problem is. dirty markup also allows you to make fixes to your markup using the clean button. however, it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. what you really wa...
...And 18 more matches

Command line crash course - Learn web development
ou can read a bit of the history on wikipedia’s entry for computer terminal. since then, the terminal has remained a constant feature of all operating systems — from desktop machines, to servers tucked away in the cloud (it’s not really a cloud), to microcomputers like the raspberry pi zero, and even to mobile phones. it provides direct access to the computer’s underlying file system and low-level features, and is therefore incredibly useful for performing complex tasks rapidly, if you know what you are doing. it is also useful for automation — for example to write a command to update the titles of hundreds of files instantly, say from “ch01-xxxx.png” to “ch02-xxxx.png”. if you updated the file names using your finder or explorer gui app, it would take you a long time. a...
...if you know what you are doing. it is also useful for automation — for example to write a command to update the titles of hundreds of files instantly, say from “ch01-xxxx.png” to “ch02-xxxx.png”. if you updated the file names using your finder or explorer gui app, it would take you a long time. anyway, the terminal is not going away anytime soon. what does the terminal look like? below you can see some of the different flavours of programs that are available that can get you to a terminal. the next images show the command prompts available in windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name. and below, you can see the macos terminal application. how do you access the t...
...on most systems. in this section, we’ll look at how to get access to the terminal on your chosen system. linux/unix as hinted at above, linux/unix systems have a terminal available by default, listed among your applications. macos macos has a system called darwin that sits underneath the graphical user interface. darwin is the unix-like system, which provides the terminal, and access to the low-level tools. macos darwin mostly has parity with unix, certainly good enough to not cause us any worries as we work through this article. the terminal is available on macos at applications/utilities/terminal. windows as with some other programming tools, using the terminal (or command line) on windows has traditionally not been as simple or easy as on other operating systems. but things are ge...
...And 18 more matches

Creating localizable web applications
in some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity. cheatsheet don't hardcode english text, formats (numbers, dates, addresses, etc.), word order or sentence structure. don't put text or numbers in images. ...
...in some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity. cheatsheet don't hardcode english text, formats (numbers, dates, addresses, etc.), word order or sentence structure. don't put text or numbers in images. ...
...rintf() (or equivalents) and use variables in the english strings. write semantic code (e.g. don't use text and <img/> for decorations; instead, use css). document your code so that localizers know what they're translating (e.g. in gettext use comments and contexts). app logic detect the locale correctly be smart about detecting the user's locale correctly. you can use one or more of the following techniques: http accept-language headers, the ua string, ip geolocation. see examples of the addons.mozillaorg code at /addons/trunk/site/app/config/language.php and /addons/trunk/site/app/config/language.inc.php. the language_config class expects arrays of valid languages & supported languages. always give the user a possibility to change the locale (e.g. by adding locale dropdown men...
...And 18 more matches

Bytecode Descriptions
give us. format: jof_ic other expressions globalthis stack: ⇒ this push the global this value. not to be confused with the globalthis property on the global. this must be used only in scopes where this refers to the global this. newtarget stack: ⇒ new.target push the value of new.target. the result is a constructor or undefined. this must be used only in scripts where new.target is allowed: non-arrow function scripts and other scripts that have a non-arrow function script on the scope chain. implements: getnewtarget. dynamicimport stack: moduleid ⇒ promise dynamic import of the module specified by the string value on the top of the stack. implements: import calls. importmeta stack: ⇒ import.meta push the import.meta object. this must be used only in module code. obje...
...rmat: jof_class_ctor derivedconstructor operands: (uint32_t nameindex, uint32_t sourcestart, uint32_t sourceend) stack: proto ⇒ constructor create and push a default constructor for a derived class. a default derived-class constructor behaves like constructor(...args) { super(...args); }. implements: classdefinitionevaluation for classtail, steps 10.a. and 12-17. sourcestart and sourceend follow the same rules as for jsop::classconstructor. format: jof_class_ctor functionproto stack: ⇒ %functionprototype% pushes the current global's functionprototype. kind must be in range for jsprotokey (and must not be jsproto_limit). calls call, calliter, funapply, funcall, callignoresrv operands: (uint16_t argc) stack: callee, this, args[0], ..., args[argc-1] ⇒ rval invoke callee with thi...
...unction ("x[symbol.iterator] is not a function"). the argc operand must be 0 for this variation. jsop::funapply hints to the vm that this is likely a call to the builtin method function.prototype.apply, an easy optimization target. jsop::funcall similarly hints to the vm that the callee is likely function.prototype.call. jsop::callignoresrv hints to the vm that the return value is ignored. this allows alternate faster implementations to be used that avoid unnecesary allocations. implements: evaluatecall steps 4, 5, and 7. format: jof_argc, jof_invoke, jof_typeset, jof_ic spreadcall stack: callee, this, args ⇒ rval like jsop::call, but the arguments are provided in an array rather than a span of stack slots. used to implement spread-call syntax: f(...args). args must be an array object co...
...And 18 more matches

Mozilla internal string guide
]string is the base of the string classes (since it imposes fewer requirements) and ns[c]string is a class derived from it. functions taking strings as parameters should generally take one of these four types. in order to avoid unnecessary copying of string data (which can have significant performance cost), the string classes support different ownership models. ...
...not be thought of as different types. nsliteral[c]string which should rarely be constructed explicitly but usually through the ""_ns and u""_ns user-defined string literals. nsliteral[c]string is trivially constructible and destructible, and therefore does not emit construction/destruction code when stored in statics, as opposed to the other string classes. the major string classes the list below describes the main base classes. once you are familiar with them, see the appendix describing what class to use when. nsastring/nsacstring: the abstract base class for all strings. it provides an api for assignment, individual character access, basic manipulation of characters in the string, and string comparison. this class corresponds to the xpidl astring parameter type. nsastring is not nec...
.... nsastring/nsacstring: the abstract base class for all strings. it provides an api for assignment, individual character access, basic manipulation of characters in the string, and string comparison. this class corresponds to the xpidl astring parameter type. nsastring is not necessarily null-terminated. nsstring/nscstring: builds on nsastring by guaranteeing a null-terminated storage. this allows for a method (.get()) to access the underlying character buffer. the remainder of the string classes inherit from either nsastring or nsstring. thus, every string class is compatible with nsastring. since every string derives from nsastring (or nsacstring), they all share a simple api. common read-only methods: .length() - the number of code units (bytes for 8-bit string classes and char16...
...And 18 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
ased format, which must be encoded using utf-8. where you can use spaces you can also use tabs. there is also a small api available to represent and manage these tracks and the data needed to perform the playback of the text at the correct times. webvtt files the mime type of webvtt is text/vtt. a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. webvtt body the structure of a webvtt consists of the following components, some of them optional, in this order: an optional byte order mark (bom). the string "webvtt". an optional text header to the right of webvtt. there must be at least one...
..., which is the ending time for showing the associated text. we can then have one or more lines that start with a hyphen (-), each containing part of the text track to be shown. we can also place comments in our .vtt file, to help us remember important information about the parts of our file. these should be on separate lines, starting with the string note. you'll find more about these in the below section. it is important to not use "extra" blank lines within a cue, for example between the timings line and the cue payload. webvtt is line based; a blank line will close the cue. webvtt comments comments are an optional component that can be used to add information to a webvtt file. comments are intended for those reading the file and are not seen by users. comments may contain newlines bu...
...udo-element. within site css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip". in addition, text boldfaced using the <b> element are colored "peachpuff". ...
...And 18 more matches

Lexical grammar - JavaScript
e space characters, line terminator characters are used to improve the readability of the source text. however, in some cases, line terminators can influence the execution of javascript code as there are a few places where they are forbidden. line terminators also affect the process of automatic semicolon insertion. line terminators are matched by the \s class in regular expressions. only the following unicode code points are treated as line terminators in ecmascript, other line breaking characters are treated as white space (for example, next line, nel, u+0085 is considered as white space). line terminator characters code point name abbreviation description escape sequence u+000a line feed <lf> new line character in unix systems. \n ...
... wikipedia comments comments are used to add hints, notes, suggestions, or warnings to javascript code. this can make it easier to read and understand. they can also be used to disable code to prevent it from being executed; this can be a valuable debugging tool. javascript has two long-standing ways to add comments to code. the first way is the // comment; this makes all text following it on the same line into a comment. for example: function comment() { // this is a one line javascript comment console.log('hello world!'); } comment(); the second way is the /* */ style, which is much more flexible. for example, you can use it on a single line: function comment() { /* this is a one line javascript comment */ console.log('hello world!'); } comment(); you can also...
...h #! and is only valid at the absolute start of a script or module. note also that no whitespace of any kind is permitted before the #!. the comment consists of all the characters after #! up to the end of the first line; only one such comment is permitted. the hashbang comment specifies the path to a specific javascript interpreter that you want to use to execute the script. an example is as follows: #!/usr/bin/env node console.log("hello world"); note: hashbang comments in javascript mimic shebangs in unix used to run files with proper interpreter. although bom before hashbang comment will work in a browser it is not advised to use bom in a script with hasbang. bom will not work when you try to run the script in unix/linux. so use utf-8 without bom if you want to run scripts direct...
...And 18 more matches

Layout System Overview - Archive of obsolete content
presentation, where the width of the presentation is constrained by the dimensions of the printed output (paper) and the height of each page is fixed. this paged presentation presents several challenges not present in the galley presentation, namely how to break up elements that are larger than a single page, and how to handle changes to page dimensions. the original design of the layout system allowed for multiple, possibly different, presentations to be supported simultaneously from the same content model. in other words, the same html or xml document could be viewed as a normal galley presentation in a browser window, while simultaneously being presented in a paged presentation to a printer, or even an aural presentation to a speech-synthesizer. to date the only real use of this multiple p...
... have been better to use a copy of the content model for each presentation, and to remove the complexity of managing separate presentations - analysis is needed here). the idea of supporting a non-visual presentation is interesting. layout's support for aural presentations is undeveloped, though conceptually, it is possible and supported by the architecture. how layout does its job: frames and reflow so, layout is concerned with providing a presentation, in galley or paged mode. given a content model, how does the layout system actually create the presentation? through the creation and management of frames. frames are an encapsulation of a region on the screen, a region that contains geometry (size and location, stacking order). generally frames correspond to the content elements, though ther...
...odule looks at the 'display' field of the style context to determine what kind of frame to create (block, inline, table, etc.). the style context is associated with the frame via a reference because it is needed for many other computations during the formatting of the frames. once a frame is created for a content element, it must be formatted. ...
...And 17 more matches

Space Manager High Level Design - Archive of obsolete content
overview the space manager and associated classes and structures are used by block and line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them. when elements are floated to the left or right in a layout, they take up space and influence where other elements can be placed. the space manager is responsible for keeping track of where space is taken up and where it is available. this information is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits. the space manager works in concert with several other classes to do its job. the classes that are considered part...
... are considered part of the space manager are: nsspacemanager nsbanddata nsblockbanddata bandrect / bandlist (private structs) frameinfo (private struct) nsbandtrapezoid outside of the space manager itself, the clients of the space manager also play an important part in the management of he available and used space. ...
...rivate struct) nsbandtrapezoid outside of the space manager itself, the clients of the space manager also play an important part in the management of he available and used space. the primary classes that interact with the space manager are: nsblockreflowstate nsblockframe nsboxtoblockadaptor the general interaction model is to create a space manager for a block frame in the context of a reflow, and to associate it with the blockreflowstate so it is passed down to child frames' reflow methods. after reflow, the space manager is destroyed. during reflow, the space manager stores the space taken up by floats (updatespacemanager in nsblockframe) and provides information about the space available for other elements (getavailablespace in nsblockreflowstate). additionally, there is a need to ...
...And 17 more matches

Getting started with HTML - Learn web development
tructure 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, consider the following line of text: my cat is very grumpy if we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (<p>) element: <p>my cat is very grumpy</p> note: tags in html are case-insensitive. this means they can be written in uppercase or lowercase. for example, a <title> tag could be written as <title>, <title>, <title>, <title>, etc., and it wi...
...text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (<p>) element: <p>my cat is very grumpy</p> note: tags in html are case-insensitive. this means they can be written in uppercase or lowercase. for example, a <title> tag could be written as <title>, <title>, <title>, <title>, etc., and it will work. however, it is best practice to write all tags in lowercase for consistency, readability, and other reasons. anatomy of an html element let's further explore our paragraph element from the previous section: the anatomy of our element is: the opening tag: this consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. this opening tag marks where the element begins or starts to take...
...the paragraph text. the content: this is the content of the element. in this example, it is the paragraph text. the closing tag: this is the same as the opening tag, except that it includes a forward slash before the element name. this marks where the element ends. failing to include a closing tag is a common beginner error that can produce peculiar results. the element is the opening tag, followed by content, followed by the closing tag. active learning: creating your first html element edit the line below in the input area by wrapping it with the tags <em> and </em>. to open the element, put the opening tag <em> at the start of the line. to close the element, put the closing tag </em> at the end of the line. doing this should give the line italic text formatting! see your changes upda...
...And 17 more matches

What is JavaScript? - Learn web development
s it?" and "what can you do with it?", and making sure you are comfortable with javascript's purpose. prerequisites: basic computer literacy, a basic understanding of html and css. objective: to gain familiarity with what javascript is, what it can do, and how it fits into a web site. a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc. — you can bet that javascript is probably involved. it is the third layer of the layer cake of standard web technologies, two of ...
...content = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)! javascript can do a lot more than that — let's explore what in more detail. so what can it really do? the core client-side javascript language consists of some common programming features that allow you to do things like: store useful values inside variables. in the above example for instance, we ask for a new name to be entered then store that name in a variable called name. operations on pieces of text (known as "strings" in programming). in the above example we take the string "player 1: " and join it to the name variable to create the complete text label, e.g. ''player 1: chris". ru...
...le above to detect when the button is clicked and then run the code that updates the text label. and much more! what is even more exciting however is the functionality built on top of the client-side javascript language. so-called application programming interfaces (apis) provide you with extra superpowers to use in your javascript code. apis are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find...
...And 17 more matches

Web Console remoting - Firefox Developer Tools
introduction this document describes the way web console remoting works. the web console is split between a client with its user interface, and the server which has listeners for all the things that happen in the tab. for communication between the server and the client we use the remote debugging protocol. this architecture allows you to connect a web console client instance to a server running on b2g, fennec or some other firefox instance. to better understand the architecture of the web console we recommend learning about the debugger architecture. the remote web console is a feature introduced in firefox 18. this document describes the latest protocol, with changes that have been made since then. the webconsoleactor and the webconsoleclient the webconsoleactor lives in dbg-w...
...it/devtools/webconsole folder. the webconsoleclient lives in webconsoleclient.jsm (in toolkit/devtools/webconsole) and it is used by the web console when working with the web console actor. to see how the debugger is used in the web console code, look in browser/devtools/webconsole/webconsole.js, and search for webconsoleconnectionproxy. ...
...n browser/devtools/webconsole/webconsole.js, and search for webconsoleconnectionproxy. the new web console actors are: the webconsoleactor allows js evaluation, autocomplete, start/stop listeners, etc. the networkeventactor is used for each new network request. the client can request further network event details - like response body or request headers. to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor, listeners, onattachconsole) the listeners argument is an array which specifies listeners you want to start in the web console. these can be: page errors, window.console api messages, network activity, and file activity. for example: ["pageerror", "consoleapi", "networkacti...
...And 17 more matches

Drag Operations - Web APIs
the following describes the steps that occur during a drag and drop operation. the drag operations described in this document use the datatransfer interface. this document does not use the datatransferitem interface nor the datatransferitemlist interface. the draggable attribute in a web page, there are certain cases where a default drag behavior is used. these include text selections, images, and links. when an image or link is dragged, the url of the image or link is set as the drag data, and a drag begins. for other elements, they must be part of a selection for a default drag to occur. to see this in effect, select an area of a webpage, and then click and hold the mouse and drag the selection. ...
...ude text selections, images, and links. when an image or link is dragged, the url of the image or link is set as the drag data, and a drag begins. for other elements, they must be part of a selection for a default drag to occur. to see this in effect, select an area of a webpage, and then click and hold the mouse and drag the selection. an os-specific rendering of the selection will appear and follow the mouse pointer as the drag occurs. however, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged. in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default. to make other html elements draggable, three things must be done: set the draggable="true" on the element that you wish to make dra...
...the data to be dragged. in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default. to make other html elements draggable, three things must be done: set the draggable="true" on the element that you wish to make draggable. add a listener for the dragstart event. set the drag data in the above listener. here is an example which allows a section of content to be dragged. <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged. </p> the draggable attribute is set to "true", so this element becomes draggable. if this attribute were omitted or set to "false", the element would not be dragged, and instead the text would be selected. the...
...And 17 more matches

Using CSS transitions - CSS: Cascading Style Sheets
transitions provide a way to control animation speed when changing css properties. instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. for example, if you change the color of an element from white to black, usually the change is instantaneous. with css transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized. animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. css transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the ...
...as the states in between the start and final states are implicitly defined by the browser. css transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end). which css properties can be transitioned? the web author can define which property has to be animated and in which way. this allows the creation of complex transitions. as it doesn't make sense to animate some properties, the list of animatable properties is limited to a finite set. note: the set of properties that can be animated is changing as the specification develops. the au...
...the browser and its version, and should be avoided. defining transitions css transitions are controlled using the shorthand transition property. this is the best way to configure transitions, as it makes it easier to avoid out of sync parameters, which can be very frustrating to have to spend lots of time debugging in css. you can control the individual components of the transition with the following sub-properties: (note that these transitions loop infinitely only for the purpose of our examples; css transitions only visualize a property change from start to finish. if you need visualizations that loop, look into the css animation property.) transition-property specifies the name or names of the css properties to which transitions should be applied. only properties listed here are an...
...And 17 more matches

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
play property. what happens when we change the value of the display property? one of the first things we learn about css is that some elements are block-level and some are inline-level. for example, an <h1> or a <p> are block-level by default, and a <span> is inline-level. using the display property we can switch between block and inline. for example to make a heading inline we would use the following css: h1 { display: inline; } more recently we have gained css grid layout and flexbox. to access these we also use values of the display property — display: grid and display: flex. only when the value of display is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications. changing an element's display value cha...
... in a flex formatting context. you can see this if you take a <span> — normally an inline-level element — and apply display: flex to it. the <span> becomes a block-level element. it behaves as block-level things do in relationship to other boxes in the layout. it’s as if you had applied display: block to the span, however we also get the changed behavior of the children. the live example below has a <span> with display: flex applied. it has become a block-level box taking up all available space in the inline direction. you can now use justify-content: space-between; to put this space between the two flex items. we can create inline flex containers. if you create a flex container using the single value of inline-flex you will have an inline-level box with flex children. the children ...
...e-flex you will have an inline-level box with flex children. the children behave in the same way as the flex children of a block-level container. the only thing that has changed is that the parent is now an inline-level box. it therefore behaves like other inline-level things, and doesn't take up the full width (or size in the inline dimension) that a block-level box does. this means that some following text could come up alongside the flex container. the same is true when working with grid layout. using display: grid will give you a block-level box, which creates a grid formatting context for the direct children. using display: inline-grid will create an inline-level box, which creates a grid formatting context for the children. the two-value syntax as you can see from the above explana...
...And 17 more matches

The "codecs" parameter in common media types - Web media technologies
ere, this format was once commonly used on the web but no longer is, since it required a plugin to use. however, each of these mime types is vague. all of these file types support a variety of codecs, and those codecs may have any number of profiles, levels, and other configuration factors. for this reason, you can add the codecs parameter to the media type. to do so, append a semicolon (;) followed by codecs= and then the string describing the format of the contents of the file. some media types only let you specify the names of the codecs to use, while others allow you to specify various constraints on those codecs as well. you can specify multiple codecs by separating them with commas. audio/ogg; codecs=vorbis an ogg file containing a vorbis audio track. video/webm; codecs="vp8, vo...
...nsions. you can use the javascript encodeuri() function to encode the parameter list; similarly, you can use decodeuri() to decode a previously encoded parameter list. when the codecs parameter is used, the specified list of codecs must include every codec used for the contents of the file. the list may also contain codecs not present in the file.= codec options by container the containers below support extended codec options in their codecs parameters: 3gp av1 iso bmff mpeg-4 quicktime webm several of the links above go to the same section; that's because those media types are all based on iso base media file format (iso bmff), so they share the same syntax. av1 the syntax of the codecs parameter for av1 is defined the av1 codec iso media file format binding specification,...
...s because those media types are all based on iso base media file format (iso bmff), so they share the same syntax. av1 the syntax of the codecs parameter for av1 is defined the av1 codec iso media file format binding specification, section 5: codecs parameter string. av01.p.llt.dd[.m[.ccc[.cp[.tc[.mc[.f]]]]]] this codec parameter string's components are described in more detail in the table below. each component is a fixed number of characters long; if the value is less than that length, it must be padded with leading zeros. av1 codec parameter string components component details p the one-digit profile number: av1 profile numbers profile number description 0 "main" profile; su...
...And 17 more matches

CSS3 - Archive of obsolete content
nd :first-line becomes ::first-line. the new general sibling combinator ( h1~pre ). the next iteration of the selectors specification is already in progress, though it still hasn't reached the first public working draft stage. ...
...detection of ecmascript support, using the script media features is also proposed. ...
...ia 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. at risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, ...
...And 16 more matches

How CSS is structured - Learn web development
in the example above, the css file is in the same folder as the html document, but you could place it somewhere else and adjust the path. here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link rel="stylesheet...
...esheet an internal stylesheet resides within an html document. to create an internal stylesheet, you place css inside a <style> element contained inside the html <head>. the html for an internal stylesheet might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful. for example, perhaps you're working with a content management system where you are blocked from modifying external css files. but for sites w...
...uire edits to multiple web pages. inline styles inline styles are css declarations that affect a single html element, contained within a style attribute. the implementation of an inline style in an html document might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">hello world!</h1> <p style="color:red;">this is my first css example</p> </body> </html> avoid using css in this way when possible. it is the opposite of a best practice. first, it is the least efficient implementation of css for maintenance. one styling change might require multiple edits within in a single web page. second, inline css also mixes (css) presentati...
...And 16 more matches

Styling lists - Learn web development
for reference.</p> <ul> <li>hummus</li> <li>pita</li> <li>green salad</li> <li>halloumi</li> </ul> <h2>recipe (ordered) list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ol> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> <h2>ingredient description list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <dl> <dt>hummus</dt> <dd>a thick dip/sauce ge...
.... handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { line-height: 1.5; } /* description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; } the first rule sets a sitewide font and a baseline font size of 10px. these are inherited by everything on th...
...know about to start with, which can be set on <ul> or <ol> elements: list-style-type: sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list. list-style-position: sets whether the bullets appear inside the list items, or outside them before the start of each item. ...
...And 16 more matches

UI pseudo-classes - Learn web development
hen the return/enter key is being pressed down in the case of a keyboard activation). these basic pseudo-classes should be familiar to you now. more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful targetting conditions that you can take advantage of. we'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: :required and :optional: targets required or optional form controls. :valid and :invalid, and :in-range and :out-of-range: target form controls that are valid/invalid according to form validation constraints set on them, or in-range/out-of-range. :enabled and :disabled, and :read-only and :read-write: target enabled or disabled form contro...
... <label for="email">email address (include if you want a response): </label> <input id="email" name="email" type="email"> </div> <div><button>submit</button></div> </fieldset> </form> here, the first name and last name are required, but the email address is optional. you can match these two states using the :required and :optional pseudo-classes. for example, if we apply the following css to the above html: input:required { border: 1px solid black; } input:optional { border: 1px solid silver; } the required controls would have a black border, and the optional control will have a silver border, like so: you can also try submitting the form without filling it in, to see the client-side validation error messages browsers give you by default. the above form isn't bad...
... placed relative to an element's formatting box, but form inputs work more like replaced elements and therefore don't have one), we will add an empty <span> to hang the generated content on: <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> the immediate problem with this was that the span was dropping onto a new line below the input because the input and label are both set with width: 100%. to fix this we style the parent <div> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long: fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines because they are both wi...
...And 16 more matches

React interactivity: Events and state - Learn web development
in this article we'll do this, digging into events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
...ttribute 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 like. it should...
...named addtask() which has a single parameter of name: function addtask(name) { alert(name); } next, we'll pass addtask() into <form /> as a prop. the prop can have whatever name you want, but pick a name you’ll understand later. something like addtask works, because it matches the name of the function as well as what the function will do. ...
...And 16 more matches

Getting started with Vue - Learn web development
erstand the basics of how it works. a clearer vue vue is a modern javascript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use vue to enhance existing html. this lets you use vue as a drop-in replacement for a library like jquery. that being said, you can also use vue to write entire single page applications (spas). this allows you to create markup managed entirely by vue, which can improve developer experience and performance when dealing with complex applications. it also allows you to take advantage of libraries for client-side routing and state management when you need to. additionally, vue takes a "middle ground" approach to tooling like client-side routing and state management. while the vue core team maintains s...
...like most frameworks, vue lets you create reusable blocks of markup via components. ...
...de routing and state management when you need to. additionally, vue takes a "middle ground" approach to tooling like client-side routing and state management. while the vue core team maintains suggested libraries for these functions, they are not directly bundled into vue. this allows you to select a different routing/state management library if they better fit your application. ...
...And 16 more matches

Eclipse CDT Manual Setup
ld be integrated back into that page, but a large amount of it is now taken care of by the mach project generation code. for now it's stored here until that integration happens in order that the eclipse cdt page isn't hugely cluttered with mostly redundant information, make setting up eclipse look much more complicated than it is nowadays. setup time some points in the rest of this document below are old and taken care of by the mach commands described above (although some of the project configuration is not done automatically yet). some of it like the section on building the index and usage tips are still relevant, and other parts still may provide useful background information to understand it in more detail on how eclipse works. you can expect it to take an hour or so to work through...
...s. you can expect it to take an hour or so to work through these instructions if you're doing so for the first time. (this assumes that you already have a copy of the mozilla source, and that you have also built the source so that you have a pre-existing object directory. if that is not the case, then get your build going now so that it can be running while you continue with the instructions below. ...
...xisting object directory. if that is not the case, then get your build going now so that it can be running while you continue with the instructions below. faq: wait, why does eclipse need an object directory?) code assistance out of the box, eclipse can provide some code assistance for the mozilla source, but it will be incomplete and often just plain broken. if you set up eclipse as detailed below, you will experience much better results. important background to help you make sense of the instructions that follow (and so that you can modify them to meet your own needs if necessary), this section provides some background on what ides need in order to provide advanced code assistance, and what eclipse cdt needs in particular. to be able to provide really good code assistance for a project...
...And 16 more matches

NSS API Guidelines
e you with some of the ways things can be done in the nss code. this will help you understand existing nss code. it should also help you understand how to write new code, and where to place it. some of the guidelines in this document, are more forward-looking than documentary. these rules are here to help us all immediately achieve more consistent and usable code, but some existing code won't follow all these rules. nss api structure this section explains the structure and relationships of the nss libraries. the layering section explains how the nss code is layered, and how higher-level functions wrap low-level functions. the libraries section descibes the nss libraries, the functionality each provides, and the layer in which the library (mostly) operates. layering each separate comp...
...that is, access to these functions should only be provided by the api directly above them. the nss apis are layered, as shown in this diagram: the boxes in the gray section, towards the center, are exported only through pkcs #11. ...
... are layered, as shown in this diagram: the boxes in the gray section, towards the center, are exported only through pkcs #11. pkcs #11 is only exported through the wrappers. the areas which need the most work (both here and throughout the code) is: the relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #7, and pkcs #11) splitting low key and high key components more clearly the crypto wrappers (pkcs #11 wrappers) and high key pkcs #12 and pkcs #5 libraries nss compiles into the libraries described below. the layer indicates the main layer, seen in the previous diagram, in which the library operates. the directory is the location of the library code in the nss source tree. the public headers is a list of header files ...
...And 16 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to track what's happening inside mozilla. they need to know about focus changes and other events, and it needs to know what objects are contained in the current document or dialog box. ...
...finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. ...
...finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. ...
...And 16 more matches

HTTP headers - HTTP
whitespace before the value is ignored. custom proprietary headers have historically been used with an x- prefix, but this convention was deprecated in june 2012 because of the inconveniences it caused when nonstandard fields became standard in rfc 6648; others are listed in an iana registry, whose original content was defined in rfc 4229. iana also maintains a registry of proposed new http headers. ...
...n 9.1.1 of [css2]) on the device. device-memory technically a part of device memory api, this header represents an approximate amount of ram client has. save-data a boolean that indicates the user agent's preference for reduced data usage. viewport-width a number that indicates the layout viewport width in css pixels. the provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). if viewport-width occurs in a message more than once, the last value overrides all previous occurrences. width the width request header field is a number that indicates the desired resource width in physical pixels (i.e. intrinsic size of an image). the provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value...
...er with the set-cookie header. set-cookie send cookies from the server to the user-agent. cookie2 contains an http cookie previously sent by the server with the set-cookie2 header, but has been obsoleted. use cookie instead. set-cookie2 sends cookies from the server to the user-agent, but has been obsoleted. use set-cookie instead. cors learn more about cors here. ...
...And 16 more matches

Working with objects - JavaScript
teristics of the object. you access the properties of an object with a simple dot-notation: objectname.propertyname like all javascript variables, both the object name (which could be a normal variable) and property name are case sensitive. you can define a property by assigning it a value. ...
...ect are undefined (and not null). mycar.color; // undefined properties of javascript objects can also be accessed or set using a bracket notation (for more details see property accessors). objects are sometimes called associative arrays, since each property is associated with a string value that can be used to access it. so, for example, you could access the properties of the mycar object as follows: mycar['make'] = 'ford'; mycar['model'] = 'mustang'; mycar['year'] = 1969; an object property name can be any valid javascript string, or anything that can be converted to a string, including the empty string. however, any property name that is not a valid javascript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using...
...ng the empty string. however, any property name that is not a valid javascript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. this notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). ...
...And 16 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
y, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels. this has a lot of advantages in that the layout will adapt to different viewport dimensions. let's look at an example. we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery. you can then view previously-captured images and delete them. other articles will discuss the functionality in more detail, but here we're interested in the layout. note: you can find the snapshot app on github; check out the code and help improve it. you can also see snapshot running live. note th...
...ery, respectively. the markup is very simple: <x-deck selected-index="0"> <x-card> … </x-card> <x-card> … </x-card> <x-card> … </x-card> </x-deck> note: these weird x- elements may be unfamiliar; they are part of brick, mozilla's ui element library for mobile web apps. we have used brick to create the mobile layout for snapshot, which you will read more about below. ...
...ected-index="0"> <x-card> … </x-card> <x-card> … </x-card> <x-card> … </x-card> </x-deck> note: these weird x- elements may be unfamiliar; they are part of brick, mozilla's ui element library for mobile web apps. we have used brick to create the mobile layout for snapshot, which you will read more about below. to get these sitting side-by-side we have used the following rules: x-card { width: 100%; } x-card:nth-child(1), x-card:nth-child(2) { width: 30%; float: left; padding: 2rem; } x-card:nth-child(3) { width: 40%; float: left; height: 100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left. this way they end up side-by-side, and their prop...
...And 16 more matches

Content type - SVG: Scalable Vector Graphics
for properties defined in css2, an angle unit identifier must be provided. ...
...or properties defined in css2, an angle unit identifier must be provided. for angle values in svg-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. if not provided, the angle value is assumed to be in degrees. in presentation attributes for all properties, whether defined in svg1.1 or in css2, the angle identifier, if specified, must be in lower case. when angles are used in an svg attribute, <angle> is instead defined as follows: angle ::= number ("deg" | "grad" | "rad")? the unit identifiers in such <angle> values must be in lower case. in the svg dom, <angle> values are represented using svgangle or svganimatedangle objects. anything <anything> the basic type <anything> is a sequence of zero or more characters. spe...
...:= "h" | "min" | "s" | "ms" hours ::= digit+; any positive number minutes ::= 2digit; range from 00 to 59 seconds ::= 2digit; range from 00 to 59 fraction ::= digit+ timecount ::= digit+ 2digit ::= digit digit digit ::= [0-9] for timecount values, the default metric suffix is "s" (for seconds). ...
...And 16 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
r an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks. ...
...vesdropping, tampering, and impersonation attacks. encryption and decryption allow two communicating parties to disguise information they send to each other. the sender encrypts, or scrambles, information before sending it. the receiver decrypts, or unscrambles, the information after receiving it. while in transit, the encrypted information is unintelligible to an intruder. tamper detection allows the recipient of information to verify that it has not been modified in transit. any attempt to modify data or substitute a false message for a legitimate one will be detected. authentication allows the recipient of information to determine its origin-that is, to confirm the sender's identity. nonrepudiation prevents the sender of information from claiming at a later date that the information ...
...y that it has not been modified in transit. any attempt to modify data or substitute a false message for a legitimate one will be detected. authentication allows the recipient of information to determine its origin-that is, to confirm the sender's identity. nonrepudiation prevents the sender of information from claiming at a later date that the information was never sent. the sections that follow introduce the concepts of public-key cryptography that underlie these capabilities. certificates and authentication managing certificates certificates and authentication a certificate identifies someone or something authentication confirms an identity how certificates are used contents of a certificate how ca certificates are used to establish trust a certificate identifies someone...
...And 15 more matches

Backgrounds and borders - Learn web development
in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties. background colors the background-color property defines the background color on any element in css. the property accepts any valid <color>. a background-color extends underneath the content and padding box of the element. ...
... this example demonstrates two things about background images. ...
...example above to see that in action. controlling background-repeat the background-repeat property is used to control the tiling behavior of images. the available values are: no-repeat — stop the background from repeating altogether. repeat-x — repeat horizontally. repeat-y — repeat vertically. repeat — the default; repeat in both directions. try these values out in the example below. we have set the value to no-repeat so you will only see one star. try out the different values — repeat-x and repeat-y — to see what their effects are. sizing the background image in the example above, we have a large image that has ended up being cropped as it is larger than the element it is a background of. in this case we could use the background-size property, which can take length ...
...And 15 more matches

The box model - Learn web development
html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the css box model, what makes up the box model and how to switch to the alternate model. block and inline boxes in css we broadly have two types of boxes — block boxes and inline boxes. these characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line. the box will extend in the inline direction to fill the space available in its container. in most cases this means that the box will become as wide as its container, filling up 100% of the space available. the width and height properties are ...
... display. aside: inner and outer display types at this point, we'd better also explain inner and outer display types. as mentioned above, boxes in css have an outer display type, which details whether the box is block or inline. boxes also have an inner display type, however, which dictates how elements inside that box are laid out. by default, the elements inside a box are laid out in normal flow, which means that they behave just like any other block and inline elements (as explained above). we can, however, change the inner display type by using display values like flex. if we set display: flex; on an element, the outer display type is block, but the inner display type is changed to flex. any direct children of this box will become flex items and will be laid out according to the rules...
...xes work in block and inline layout, take a look at the mdn guide to block and inline layout. when you move on to learn about css layout in more detail, you will encounter flex, and various other inner values that your boxes can have, for example grid. block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as normal flow, because without any other instruction, our boxes lay out as block or inline boxes. examples of different display types let's move on and have a look at some examples. below we have three different html elements, all of which have an outer display type of block. the first is a paragraph, which has a border added in css. the browser renders this as a block box, so the paragraph begins on a new l...
...And 15 more matches

Flexbox - Learn web development
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 achieve with such tools, in any kind of convenient, flexible way: vertically centering a block of content inside its parent. making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available. making all columns in a multiple column layout adopt the ...
... terms being used. columns or rows? flexbox provides a property called flex-direction that specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to row, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an english browser). try adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css. before you move on, delete this declaration from your example. note: you can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. experiment with these values too! wrapping one iss...
...ch like they were before we added any css. before you move on, delete this declaration from your example. note: you can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. ...
...And 15 more matches

The HTML5 input types - Learn web development
prerequisites: basic computer literacy, and a basic understanding of html. ...
...d 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. ...
...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. ...
...And 15 more matches

Third-party APIs - Learn web development
displaying your twitter stream on your blog) or services (e.g. using facebook login to log in your users). this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the latter. ...
...ter. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how third-party apis work, and how to use them to enhance your websites. what are third party apis? third party apis are apis provided by third parties — generally companies such as facebook, twitter, or google — to allow you to access their functionality via javascript and use it on your site. one of the most obvious examples is using mapping apis to display custom maps on your pages. let's look at a simple mapquest api example, and use it to illustrate how third-party apis differ from browser apis. note: you might want to just get all our code examples at once, in which case you can then just search the repo ...
...ally require api keys security for browser apis tends to be handled by permission prompts, as discussed in our first article. the purpose of these is so that the user knows what is going on in the websites they visit and is less likely to fall victim to someone using an api in a malicious way. ...
...And 15 more matches

Server-side web frameworks - Learn web development
er-side web application. prerequisites: basic computer literacy. basic understanding of how server-side code handles and responds to http requests (see client-server overview). objective: to understand how web frameworks can simplify development/maintenance of server-side code and to get readers thinking about selecting a framework for their own development. the following sections illustrate some points using code fragments taken from real web frameworks. don't be concerned if it doesn't all make sense now; we'll be working you through the code in our framework-specific modules. overview server-side web frameworks (a.k.a. "web application frameworks") are software frameworks that make it easier to write, maintain and scale web applications. they provide tools...
...cusses some of the functionality that is often provided by web frameworks (not every framework will necessarily provide all of these features!). work directly with http requests and responses as we saw in the last article, web servers and browsers communicate via the http protocol — servers wait for http requests from the browser and then return information in http responses. web frameworks allow you to write simplified syntax that will generate server-side code to work with these requests and responses. this means that you will have an easier job, interacting with easier, higher-level code rather than lower level networking primitives. the example below shows how this works in the django (python) web framework. every "view" function (a request handler) receives an httprequest object con...
...to store information both to be shared with users, and about users. web frameworks often provide a database layer that abstracts database read, write, query, and delete operations. this abstraction layer is referred to as an object-relational mapper (orm). using an orm has two benefits: you can replace the underlying database without necessarily needing to change the code that uses it. this allows developers to optimize for the characteristics of different databases based on their usage. basic validation of data can be implemented within the framework. this makes it easier and safer to check that data is stored in the correct type of database field, has the correct format (e.g. an email address), and isn't malicious in any way (crackers can use certain patterns of code to do bad things s...
...And 15 more matches

Strategies for carrying out testing - Learn web development
oroughly and provide full support. b grade: older/less capable browsers — known not to be capable. test, and provide a more basic experience that gives full access to core information and services. c grade: rare/unknown browsers — don't test, but assume they are capable. serve the full site, which should work, at least with the fallbacks provided by our defensive coding. throughout the following sections, we'll build up a support chart in this format. note: yahoo first made this approach popular, with their graded browser support approach. educated guesses you could call these "assumptions", or "gut feelings". this is not an accurate, scientific approach, but as someone who has experience with the web industry you'll have a pretty good idea of at least some of the browsers you sh...
...latest versions of ios safari, the last couple of versions of the old android stock browser, and chrome and firefox for ios and android. you should ideally test these on both a phone and a tablet, to make sure that responsive designs are working ok. you might also know that a number of people still use ie 9. this is old and less capable, so let's put it in the b grade tier. ...
...ve finished filling in everything, press the get tracking id button, then accept the terms of service that appear. the next page provides you with some code snippets and other instructions. for a basic website, what you need to do is copy the website tracking code block and paste it into all the different pages you want to track using google analytics on your site. you could place the snippets below your closing </body> tag, or somewhere else appropriate that keeps it from getting muddled up with your application code. upload the changes to the development server, or wherever else you need your code. that's it! your site should now be ready to start reporting analytics data. studying analytics data now you should be able to go back to the analytics web homepage, and start looking at the...
...And 15 more matches

Key Values - Web APIs
corresponding virtual keycodes for common platforms are included where available. 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. ...
...key_iso_level5_lock (0xfe13) qt::key_altgr (0x01001103 qt::key_mode_switch (0x0100117e) "capslock" the caps lock key. toggles the capital character lock on and off for subsequent input. vk_capital (0x14) kvk_capslock (0x39) gdk_key_caps_lock (0xffe5) qt::key_capslock (0x01000024) keycode_caps_lock (115) "control" the control, ctrl, or ctl key. ...
...often handled in hardware so that events aren't generated for this key. ...
...And 15 more matches

Migrating from webkitAudioContext - Web APIs
d provide examples on how to port such code to standards based audiocontext, which will work across different browser engines. note: there is a library called webkitaudiocontext monkeypatch, which automatically fixes some of these changes to make most code targetting webkitaudiocontext to work on the standards based audiocontext out of the box, but it currently doesn't handle all of the cases below. please consult the readme file for that library to see a list of apis that are automatically handled by it. changes to the creator methods three of the creator methods on webkitaudiocontext have been renamed in audiocontext. creategainnode() has been renamed to creategain. createdelaynode() has been renamed to createdelay. createjavascriptnode() has been renamed to createscriptprocessor...
...audiocontext have been renamed in audiocontext. creategainnode() has been renamed to creategain. createdelaynode() has been renamed to createdelay. createjavascriptnode() has been renamed to createscriptprocessor. these are simple renames that were made in order to improve the consistency of these method names on audiocontext. ...
...ainon()/noteoff() methods were the original way to start/stop output in these nodes, and in the newer versions of the specification, the noteon() and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method. in order to port your code, you can just rename the method that you're using. ...
...And 15 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
zontal and left-to-right writing modes. modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right hand side, with new lines appearing one under the other. you can read more about the relationship between flexbox and the writing modes specification in a later article; however, the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in. if the flex-direction is row and i am working in english, then the start edge of the main axis will be on the left, the end edge on the right. if i were to work in arabic, then the start edge of my main axis would be on the right and the end...
...e on the right and the end edge on the left. in both cases the start edge of the cross axis is at the top of the flex container and the end edge at the bottom, as both languages have a horizontal writing mode. after a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as css grid layout which follow the same patterns. the flex container an area of a document laid out using flexbox is called a flex container. to create a flex container, we set the value of the area's container's display property to flex or inline-flex. as soon as we do this the direct children of that container become flex items. as with all properties in css, some initial values are defined, so when creating a flex contain...
...ument laid out using flexbox is called a flex container. to create a flex container, we set the value of the area's container's display property to flex or inline-flex. as soon as we do this the direct children of that container become flex items. as with all properties in css, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way. items display in a row (the flex-direction property's default is row). the items start from the start edge of the main axis. the items do not stretch on the main dimension, but can shrink. the items will stretch to fill the size of the cross axis. the flex-basis property is set to auto. the flex-wrap property is set to nowrap. the result of this is that your items will all line ...
...And 15 more matches

A re-introduction to JavaScript (JS tutorial) - JavaScript
character is represented by either 1 or 2 code units. if you want to represent a single character, you just use a string consisting of that single character. ...
...alue hasn't even been assigned yet. we'll talk about variables later, but in javascript it is possible to declare a variable without assigning a value to it. if you do this, the variable's type is undefined. undefined is actually a constant. javascript has a boolean type, with possible values true and false (both of which are keywords.) any value can be converted to a boolean according to the following rules: false, 0, empty strings (""), nan, null, and undefined all become false. all other values become true. you can perform this conversion explicitly using the boolean() function: boolean(''); // false boolean(234); // true however, this is rarely necessary, as javascript will silently perform this conversion when it expects a boolean, such as in an if statement (see below). for t...
...ts a boolean, such as in an if statement (see below). for this reason, we sometimes speak simply of "true values" and "false values," meaning values that become true and false, respectively, when converted to booleans. alternatively, such values can be called "truthy" and "falsy", respectively. boolean operations such as && (logical and), || (logical or), and ! ...
...And 15 more matches

Loops and iteration - JavaScript
over the others. the statements for loops provided in javascript are: for statement do...while statement while statement labeled statement break statement continue statement for...in statement for...of statement for statement a for loop repeats until a specified condition evaluates to false. the javascript for loop is similar to the java and c for loop. a for statement looks as follows: for ([initialexpression]; [conditionexpression]; [incrementexpression]) statement when a for loop executes, the following occurs: the initializing expression initialexpression, if any, is executed. this expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. this expression can also declare variables. the conditionexpre...
...s execute. if the value of condition is false, the for loop terminates. (if the condition expression is omitted entirely, the condition is assumed to be true.) the statement executes. to execute multiple statements, use a block statement ({ ... }) to group those statements. if present, the update expression incrementexpression is executed. control returns to step 2. example in the example below, the function contains a for statement that counts the number of selected options in a scrolling list (a <select> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. <form ...
... (a <select> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...And 15 more matches

JavaScript modules - JavaScript
ality natively, and this is what this article is all about. this can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips. ...
...bpage, and then draw (and report information about) different shapes on the canvas. these are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly. note: if you want to download the examples and run them locally, you'll need to run them through a local web server. ...
...cally, you'll need to run them through a local web server. basic example structure in our first example (see basic-modules) we have a file structure as follows: index.html main.js modules/ canvas.js square.js note: all of the examples in this guide have basically the same structure; the above should start getting pretty familiar. the modules directory's two modules are described below: canvas.js — contains functions related to setting up the canvas: create() — creates a canvas with a specified width and height inside a wrapper <div> with a specified id, which is itself appended inside a specified parent element. returns an object containing the canvas's 2d context and the wrapper's id. createreportlist() — creates an unordered list appended inside a specifie...
...And 15 more matches

Performance fundamentals - Web Performance
ts (possibly multiple ones) in response to user inputs. for example, when a user taps the screen, they expect the pixels to change in a certain way. for this interaction, the responsiveness metric is the time elapsed between the tap and the pixel change. responsiveness sometimes involves multiple stages of feedback. application launch is one particularly important case discussed in more detail below. responsiveness is important simply because people get frustrated and angry when they're ignored. your app is ignoring the user every second that it fails to respond to the user's input. framerate framerate is the rate at which the system changes pixels displayed to the user. this is a familiar concept: everyone prefers, say, games that display 60 frames per second over ones that display 10 fr...
...le meeting other upp goals. that doesn't mean the system should waste memory. when a system uses more memory than necessary to maintain some particular user state, the system is wasting a resource it could use to retain some other user state. in practice, no system can maintain all user states. intelligently allocating memory to user state is an important concern that we go over in more detail below. power usage the final metric discussed here is power usage. like memory usage, users perceive power usage only indirectly, by how long their devices can maintain all other upp goals. in service of meeting upp goals, the system must use only the minimum power required. the remainder of this document will discuss performance in terms of these metrics. platform performance optimizations this s...
...ive power usage only indirectly, by how long their devices can maintain all other upp goals. in service of meeting upp goals, the system must use only the minimum power required. the remainder of this document will discuss performance in terms of these metrics. ...
...And 15 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
a string which is passed to the search component. autofill obsolete since gecko 1.9.1 type: boolean note: applies to: thunderbird and seamonkeyif set to true, the best match will be filled into the textbox as the user types. if false, the default, the value will not be filled in until the user selects an item. as of gecko 1.9.1, this attribute is now always specified in lower case. autofillaftermatch obsolete since gecko 1.9.1 type: boolean if set to true, the entire text of the best match will be displayed at the end of the input. if false, only the text that hasn't been entered yet will be filled in. the textbox.autofill attribute must be set to true to use this feature. as of gecko 1.9.1, this attribute is superseded by the completedefaultindex attribute...
...boolean this attribute is not used and is only provided for compatibility with the menulist element. disableautocomplete obsolete since gecko 1.9.1 type: boolean if true, the autocomplete behavior will be disabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. as of gecko 1.9.1, this attribute is now always specified in lower case. disableautocomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the autocomplete behavior will be disabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disab...
... disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disable...
...And 14 more matches

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
organizations implement internal procedural standards so they are able to operate efficiently. they may also incorporate external procedural and/or technical standards. technical standards have traditionally been pioneered through consortiums or standards bodies. ...
...be either public, standards-based or a proprietary de facto standard. the purpose of this document is to discuss and emphasize the importance of conforming to open technology standards that are external to the organization. let’s begin the discussion, however, by looking inward to internal procedures, processes and standards. why should organizations have standard procedures at every level? following standards is certainly not a new organizational phenomenon; organizations require their employees to follow common rules, or a common set of standards all the time. memos, time cards, and accounting procedures are all standardized across groups. in the development world, there is a need for standards because applications are designed across multiple development groups. many organizations publ...
... may decide that c++, java, and javascript will be the primary coding languages. they may require that each project be comprised of marketing requirements documents, product requirements documents, functional requirements documents, quality assurance test plans, and certification documents. as organizations mature, they discover that they need more processes to give them greater control, which allows them to more easily plan and predict. with processes, organizations can make release schedules, implement marketing plans, analyze resource allocations, and make adjustments when needed. adherence to standards and processes can actually provide a level of flexibility because development does become predictable. in addition to predictability, standard processes improve understanding and streamlin...
...And 14 more matches

Useful string methods - Learn web development
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 of length, or let a user know that a username they have entered into a form field is too long if it is over a certain length. ret...
... variable name. inside the square brackets you include the number of the character you 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 gene...
...wsertype.indexof('zilla'); this gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2 — so 3 characters in) inside "mozilla". such code could be used to filter strings. for example, we may have a list of web addresses and only want to print out the ones that contain "mozilla". this can be done in another way, which is possibly even more effective. try the following: browsertype.indexof('vanilla'); this should give you a result of -1 — this is returned when the substring, in this case 'vanilla', is not found in the main string. you could use this to find all instances of strings that don't contain the substring 'mozilla', or do, if you use the negation operator, as shown below. you could do something like this: if(browsertype.indexof('mozill...
...And 14 more matches

Ember interactivity: Events, classes and state - Learn web development
s and use events to control interactivity, and keep track of app state using a service. adding interactivity now we've got a refactored componentized version of our todo app, lets walk through how we can add the interactivity we need to make the app functional. when beginning to think about interactivity, it's good to declare what each component's goals and responsibilities are. in the below sections we’ll do this for each component, and then walk you through how the functionality can be implemented. creating todos for our card-header / todo input, we'll want to be able to submit our typed in todo task when we press the enter key and have it appear in the todos list. we want to be able to capture the text typed into the input. we do this so that our javascript code knows what we...
...e able to capture the text typed into the input. we do this so that our javascript code knows what we typed in, and we can save our todo and pass that text along to the todo list component to display. we can capture the keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see this explanation if needed). add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on 'keydown' this.onkeydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax. the first argument passed to on is the type of event to respond to (keydown), and the last argument is the...
...t's this. we can define what is available inside this by generating a component class to go along with your component. this is a vanilla javascript class and has no special meaning to ember, other than extending from the component super-class. ...
...And 14 more matches

Getting started with Svelte - Learn web development
es to learn how to build something slightly more in-depth. it should take you about 30 minutes to complete. use cases svelte can be used to develop small pieces of an interface or whole applications. you can either start from scratch letting svelte drive your ui or you can incrementally integrate it into an existing application. nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power devices: applications built with svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power. less code means less kb to download, parse, execute, and keep hanging around in memory. highly interactive pages or complex visualizations: if you are building data-visualizations that n...
...execute, and keep hanging around in memory. highly interactive pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive. onboarding people with basic web development knowledge: svelte has a shallow learning curve. web developers with basic html, css, and javascript knowledge can easily grasp svelte specifics in a short time and start building web applications. moreover, with the help of sapper (a framework based on svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. and then there's also svel...
...d features like server-side rendering, code splitting, file-based routing and offline support. and then there's also svelte native, which lets you build native mobile applications. how does svelte work? being a compiler, svelte can extend html, css, and javascript, generating optimal javascript code without any runtime overhead. to achieve this, svelte extends vanilla web technologies in the following ways: it extends html by allowing javascript expressions in markup and providing directives to use conditions and loops, in a fashion similar to handlebars. it extends css by adding a scoping mechanism, allowing each component to define their own styles without the risk of clashing with other component's styles. it extends javascript by reinterpreting specific directives of the language t...
...And 14 more matches

Gecko info for Windows accessibility vendors
istive technology vendors. events such as focus changes must be tracked through msaa events, rather than dom events. xul: extensible user-interface language the xml-based language used by firefox and mozilla to develop the ui. similar to html in that it can be combined with css and javascript to make powerful applications. contains more desktop-style widgets than html and follows a box layout model, rather than being text-flow based. ajax: asynchronous javascript and xml ajax is a method of building interactive web applications that process user requests, user actions immediately in real time, unlike an http request, during which users must wait for a whole page to reload or for a new page to load. data is therefore stored and retrieved dynamically ...
...msaa) xul-based clients make full use of the gecko architecture, not only for html content, as well as for menus, dialogs and the entire user interface via an xml language called xul (extensible user-interface language). none of the user interface contains standard windows controls -- not even the menus! this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). firefox (please use version 1.1 alpha builds or later) thunderbird (please use version 1.1 alpha builds or later) mozilla seamonkey (please use 1.8 alpha builds or later) how to find the content window and load the document screen readers need to find the content window so that they know where to start grabbing the msaa tree, i...
...ozilla seamonkey (please use 1.8 alpha builds or later) how to find the content window and load the document screen readers need to find the content window so that they know where to start grabbing the msaa tree, in order to load the current document into a buffer in their own process. the content window always has the class mozillacontentwindowclass. ...
...And 14 more matches

Experimental features in Firefox
ox along with information on how to activate them, if necessary. you can test your web sites and applications before these features get released and ensure everything will still work with the latest web technology capabilities. to test these experimental features, you need to download firefox nightly or firefox developer edition. which you need is described alongside each feature's description below. editor's note: when adding features to these tables, please try to include a link to the relevant bug or bugs using the bug macro: {{bug(bug-number)}}. html element: <dialog> the html <dialog> element and its associated dom apis provide support for html-based modal dialog boxes. the current implementation is a little inelegant but is basically functional. see bug 840640 for more details. ...
... see bug 1223880 for more details. release channel version added enabled by default? nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients coni...
...and sunken initial letters are displayed. see bug 1223880 for more details. release channel version added enabled by default? nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients conic gradients expand css gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. see bug 1175958 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.web...
...And 14 more matches

sslcrt.html
mes nss_cmpcertchainwcanames cert_verifycertnow checks that the current date is within the certificate's validity period and that the ca signature on the certificate is valid. syntax #include <cert.h> secstatus cert_verifycertnow( certcertdbhandle *handle, certcertificate *cert, prbool checksig, seccertusage certusage, void *wincx); parameters this function has the following parameters: handle a pointer to the certificate database handle. cert a pointer to the certificate to be checked. checksig indicates whether certificate signatures are to be checked. pr_true means certificate signatures are to be checke...
...esslserverwithstepup certusagesslca certusageemailsigner certusageemailrecipient certusageobjectsigner certusageusercertimport certusageverifyca certusageprotectedobjectsigner wincx the pin argument value to pass to pk11 functions. see description below for more information. returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to obtain the error code. description the cert_verifycertnow function must call one or more pk11 functions to obtain the services of a pkcs #11 module. some of the pk11 functions require a pin argument (see ssl_setpkcs11pin...
...tails), which must be specified in the wincx parameter. to obtain the value to pass in the wincx parameter, call ssl_revealpinarg. cert_verifycertname compares the common name specified in the subject dn for a certificate with a specified hostname. syntax #include <cert.h> secstatus cert_verifycertname( certcertificate *cert, char *hostname); parameters this function has the following parameters: cert a pointer to the certificate against which to check the hostname referenced by hostname. hostname the hostname to be checked. returns the function returns one of these values: if the common name in the subject dn for the certificate matches the domain...
...And 14 more matches

An Overview of XPCOM
to the basic concepts and technologies in xpcom and component development. the brief sections in this chapter introduce the concepts at a very high level, so that we can discuss and use them with more familiarity in the tutorial itself, which describes the creation of a mozilla component called weblock. ...
...ore familiarity in the tutorial itself, which describes the creation of a mozilla component called weblock. the xpcom solution the cross platform component object module (xpcom) is a framework which allows developers to break up monolithic software projects into smaller modularized pieces. these pieces, known as components, are then assembled back together at runtime. the goal of xpcom is to allow different pieces of software to be developed and built independently of one another. in order to allow interoperability between components within an application, xpcom separates the implementation of a component from the interface, which we discuss in interfaces. but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help th...
...ing web browsers and other applications. xpcom is the means of accessing gecko library functionality and embedding or extending gecko. this book focuses on the latter - extending gecko - but the fundamental ideas in the book will be important to developers embedding gecko as well. gecko is used in many internet applications, mostly browsers and most notably mozilla firefox. components xpcom allows you to break up large software projects into smaller pieces known as components. they are usually contained in reusable binary libraries (a dll on windows, for example, or a dso on unix), which can include one or more components. when two or more related components are grouped together in a binary library, the library is referred to as a module. modular, component-based programming makes softwa...
...And 14 more matches

Mozilla
the articles below include content about downloading and building mozilla code. in addition, you'll find helpful articles about how the code works, how to build add-ons for mozilla applications and the like. a bird's-eye view of the mozilla framework the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework. accessibility and mozilla accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. ...
...al overview of the architecture of the extensible, object-based mozilla application framework. accessibility and mozilla accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. mozilla strives to make its software accessible; the documents below cover the ways in which we do so. add-ons add-ons allow developers to extend and modify the functionality of firefox. adding a new css property this page describes how to add a new css property to the style system. the style system is the part of the code in gecko that is responsible for producing a computed value for every prop...
... hacking mozilla this guide introduces the mozilla project and provides an overview for developers interested in contributing to or exploring the various parts of the codebase. android-specific test suites there are several android-specific test suites that run on the firefox for android codebase: api change rules until further notice, the following rules govern api changes: application cache implementation overview this happens in nshttpchannel::opencacheentry(). all top level document loading (navigation) channels are set chooseapplicationcache flag, which happens in nsdocshell::douriload(). channels having that flag set are searching for nsiapplicationcache object prior inspecting normal h...
...And 14 more matches

Console messages - Firefox Developer Tools
most of the web console is occupied by the message display pane: each message is displayed as a separate row: time the time the message was recorded. this is not shown by default: you can opt to see timestamps by selecting show timestamps in the console settings menu (gear icon in the console toolbar). icon not all console messages contain icons. the following icons may be used: informational message warning error blocked; for network messages in addition, a disclosure triangle indicates that further information is available; clicking it displays or collapses that information. message the message itself. number of occurrences if a line that generates a warning or error is executed more than...
...ole api messages, the message can be traced to a specific line of code. the console then provides a link to the filename and line number that generated the message. by default, the console is cleared each time you navigate to a new page or reload the current page. to override this behavior, enable persist logs in the console settings menu (gear icon). the context menu options listed below are available on all message categories. additional context menu options are described in the subsection for the message category they apply to. copy message copies the selected message to the clipboard. select all selects all messages available in the message display pane. export visible messages to clipboard copies all messages available in the display pane to the clipboard. file ...
...r source generates will show up in the web console with a link back to the original source, not the compressed version. async stack frames stack traces show stack frames for async functions separately from those for synchronous functions. when you run code containing an async function, its traces (console.trace or thrown error) are shown with an async: prefix. ...
...And 14 more matches

Regular expressions - JavaScript
are used with the exec() and test() methods of regexp, and with the match(), matchall(), replace(), replaceall(), search(), and split() methods of string. this chapter describes javascript regular expressions. ...
...one of two ways: using a regular expression literal, which consists of a pattern enclosed between slashes, as follows: let re = /ab+c/; regular expression literals provide compilation of the regular expression when the script is loaded. if the regular expression remains constant, using this can improve performance. or calling the constructor function of the regexp object, as follows: let re = new regexp('ab+c'); using the constructor function provides runtime compilation of the regular expression. use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input. writing a regular expression pattern a regular expression pattern is composed of simple...
...bstring "abc". there is no match in the string "grab crab" because while it contains the substring "ab c", it does not contain the exact substring "abc". using special characters when the search for a match requires something more than a direct match, such as finding one or more b's, or finding white space, you can include special characters in the pattern. for example, to match a single "a" followed by zero or more "b"s followed by "c", you'd use the pattern /ab*c/: the * after "b" means "0 or more occurrences of the preceding item." in the string "cbbabbbbcdebc", this pattern will match the substring "abbbbc". the following pages provide lists of the different special characters that fit into each category, along with descriptions and examples. assertions assertions include boundarie...
...And 14 more matches

Codecs used by WebRTC - Web media technologies
abilities and requirements, there are a few overall requirements that must be met by any codec configuration used with webrtc. unless the sdp specifically signals otherwise, the web browser receiving a webrtc video stream must be able to handle video at at least 20 fps at a minimum resolution of 320 pixels wide by 240 pixels tall. it's encouraged that video be encoded at a frame rate and size no lower than that, since that's essentially the lower bound of what webrtc generally is expected to handle. sdp supports a codec-independent way to specify preferred video resolutions (rfc 6236. this is done by sending an a=imageattr sdp attribute to indicate the maximum resolution that is acceptable. the sender is not required to support this mechanism, however, so you have to be prepared to receive ...
...ort this mechanism, however, so you have to be prepared to receive media at a different resolution than you requested. beyond this simple maximum resolution request, specific codecs may offer further ways to ask for specific media configurations. supported video codecs webrtc establishes a baseline set of codecs which all compliant browsers are required to support. some browsers may choose to allow other codecs as well. below are the video codecs which are required in any fully webrtc-compliant browser, as well as the profiles which are required and the browsers which actually meet the requirement. mandatory video codecs codec name profile(s) browser compatibility vp8 — chrome, edge, firefox, safari (12.1+) avc / h.264 constrained baseline ...
..., firefox[1], safari [1] firefox for android 68 and later do not support avc (h.264) anymore. this is due to a change in google play store requirements that prevent firefox from downloading and installing the openh264 codec needed to handle h.264 in webrtc connections. see this article on sumo for details. for details on webrtc-related considerations for each codec, see the sub-sections below by following the links on each codec's name. complete details of what video codecs and configurations webrtc is required to support can be found in rfc 7742: webrtc video processing and codec requirements. it's worth noting that the rfc covers a variety of video-related requirements, including color spaces (srgb is the preferred, but not required, default color space), recommendations for webcam...
...And 14 more matches

Using the WebAssembly JavaScript API - WebAssembly
(func (export "exported_func") i32.const 42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func. we need to reflect this two-level namespace in javascript when writing the object to be imported into the wasm module. create a <script></script> element in your html file, and add the following code to it: var importobject = { imports: { imported_func: arg => console.log(arg) } }; streaming the webassembly module new in firefox 58 is the ability to compile and instantiate webassembly modules directly from underlying sources. this is achieved using the webassembly.compilestreaming() and webassembly.instantiatestreaming() methods. these methods are easier than their non-stream...
... directly into module/instance instances, cutting out the need to separately put the response into an arraybuffer. this example (see our instantiate-streaming.html demo on github, and view it live also) shows how to use instantiatestreaming() to fetch a wasm module, import a javascript function into it, compile and instantiate it, and access its exported function — all in one step. ...
...tance instances, cutting out the need to separately put the response into an arraybuffer. this example (see our instantiate-streaming.html demo on github, and view it live also) shows how to use instantiatestreaming() to fetch a wasm module, import a javascript function into it, compile and instantiate it, and access its exported function — all in one step. add the following to your script, below the first block: webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the net result of this is that we call our exported webassembly function exported_func, which in turn calls our imported javascript function imported_func, which logs the value provided inside the webassembly instance (42) to the console. if you save your exa...
...And 14 more matches

Appendix: What you should know about open-source software licenses - Archive of obsolete content
mit from the copyright holder, or must be assigned partial rights by the author. this use permit for a copyrighted work is called a license. when we talk about a driver’s license, we mean a permit to drive a car. when we talk about a license to kill, we mean james bond. a license on a copyrighted work is a use permit that says “it’s ok to use this work within this scope, as long as you follow these conditions.” those conditions could be something like “if you pay me money” or “you can print up to 10,000 copies.” software licenses software is subject to copyright law. in order to use it (in the authorial sense), you need permission from the copyright holder. how software licenses work in order to duplicate, distribute, or modify software, you need a use permit. duplicati...
... use within permitted scope fixme: wow, the table is weird! so what’s an oss license? so now you’re wondering, what conditions does an oss license place on software? this can be briefly answered by the open source definition, which was determined by the open source initiative (osi). this covers three rights and six conditions. what is important to us now is the following three rights: open source rights: a user can create and distribute copies of the source code; a user can obtain a program’s source code; a user can modify the source code. any oss license will include these rights. the user is free to use (duplicate, distribute, and modify) the source code, following certain conditions. this means that the author is granting users the use of the work...
.... the user is free to use (duplicate, distribute, and modify) the source code, following certain conditions. this means that the author is granting users the use of the work in the strong, authorial sense, and when i write “use” in the rest of this document it is generally in that sense. these conditions will vary from one license to the next, but the open source definition stipulates the following minimum conditions: the integrity of the author’s source code must be preserved; no discrimination may be made against individuals or organizations; no discrimination may be made based on field of endeavor; no additional licensing can be required when redistributing; license must not be specific to a product; license must not interfere with other software. the “no discrimination ...
...And 13 more matches

HTML: A good basis for accessibility - Learn web development
e. good for seo — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers. let's get on and look at accessible html in more detail. note: it is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below. see our screen readers guide for more details. good semantics we've already talked about the importance of proper semantics, and why we should use the right html element for the job. this cannot be ignored, as it is one of the main places that accessibility is badly broken if not handled properly. out there on the web, the truth is that people do some very strange things with html markup. so...
...t on your page (such as ad banners) over which you have no control. the goal isn't "all or nothing." however, — every improvement you can make will help the cause of accessibility. text content one of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc. an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document. i'd love people to be able to find this content!</p> <h2>my 2nd subheading</h2> <p>this is the second subsection of my content. ...
...at this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document. <br><br> i'll add another paragraph here too. <br><br> 1. here is <br><br> 2. a list for <br><br> 3. you to read <b...
...And 13 more matches

HTML: A good basis for accessibility - Learn web development
e. good for seo — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers. let's get on and look at accessible html in more detail. note: it is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below. see our screen readers guide for more details. good semantics we've already talked about the importance of proper semantics, and why we should use the right html element for the job. this cannot be ignored, as it is one of the main places that accessibility is badly broken if not handled properly. out there on the web, the truth is that people do some very strange things with html markup. so...
...t on your page (such as ad banners) over which you have no control. the goal isn't "all or nothing." however, — every improvement you can make will help the cause of accessibility. text content one of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc. an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document. i'd love people to be able to find this content!</p> <h2>my 2nd subheading</h2> <p>this is the second subsection of my content. ...
...at this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document. <br><br> i'll add another paragraph here too. <br><br> 1. here is <br><br> 2. a list for <br><br> 3. you to read <b...
...And 13 more matches

Other form controls - Learn web development
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 <input> is an empty element with no closing tag — any default value is put inside the value attribute. note that even though you can put anyth...
...d 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 article of the series (see the source code also). controlling multi-line rendering <textarea> accepts...
...mitted is not wrapped but the text rendered by the browser is wrapped; hard (the cols attribute must be specified when using this value), which means both the submitted and rendered texts are wrapped, and off, which stops wrapping. controlling textarea resizability the ability to resize a <textarea> is controlled with the css resize property. ...
...And 13 more matches

CSS property compatibility table for form controls - Learn web development
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. ...
...perties 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. ...
...rowsers 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 fields see the text, search, and password input types. property n t note css box model width yes yes height partial[1][2] yes webkit browser...
...And 13 more matches

From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio. at this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the <iframe>, <embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in ...
... this module. objective: to learn how to embed items into web pages using <object>, <embed>, 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 m...
...embedding these technologies was achieved through elements like <object>, and the lesser-used <embed>, and they were very useful at the time. ...
...And 13 more matches

HTML table basics - Learn web development
s 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 a long time, as evidenced by this us census document from 1800: it is therefore no wonder that the creators of...
...ty, and have been for a long time, as evidenced by this us census document from 1800: it is therefore no wonder that the creators of html provided a means by which to structure and present tabular data on the web. how does a table work? the point of a table is that it is rigid. information is easily interpreted by making visual associations between row and column headers. look at the table below for example and find a jovian gas giant with 62 moons. you can find the answer by associating the relevant row and column headers. data about the planets of our solar system (planetary facts taken from nasa's planetary fact sheet - metric. name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (106km) mean temper...
...ooter, 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 read out the contents to the user. because tables are not the right tool for layout, and the markup is more complex than with css layout techniques, the screenreaders' output will be confusing to their users. tables produce tag soup: as menti...
...And 13 more matches

Graceful asynchronous programming with Promises - Learn web development
this is useful for setting up a sequence of async operations to work correctly. this article shows you how promises work, how you'll see them in use with web apis, and how to write your own. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand promises and how to use them. ...
...t example, we'll use the fetch() method to fetch an image from the web, the blob() method to transform the fetch response's raw body contents into a blob object, and then display that blob inside an <img> element. this is very similar to the example we looked at in the first article of the series, but we'll do it a bit differently as we get you building your own promise-based code. note: the following example will not work if you just run it directly from the file (i.e. via a file:// url). you need to run it through a local testing server, or use an online solution such as glitch or github pages. first of all, download our simple html template and the sample image file that we'll fetch. add a <script> element at the bottom of the html <body>. inside your <script> element,...
...will not work if you just run it directly from the file (i.e. via a file:// url). you need to run it through a local testing server, or use an online solution such as glitch or github pages. first of all, download our simple html template and the sample image file that we'll fetch. add a <script> element at the bottom of the html <body>. inside your <script> element, add the following line: let promise = fetch('coffee.jpg'); this calls the fetch() method, passing it the url of the image to fetch from the network as a parameter. this can also take an options object as an optional second parameter, but we are just using the simplest version for now. we are storing the promise object returned by fetch() inside a variable called promise. as we said before, this object rep...
...And 13 more matches

Fetching data from the server - Learn web development
isplayed on your computer. the trouble with this model is that whenever you want to update any part of the page, for example, to display a new set of products or load a new page, you've got to load the entire page again. this is extremely wasteful and results in a poor user experience, especially as pages get larger and more complex. ...
...erience, especially as pages get larger and more complex. enter ajax this led to the creation of technologies that allow web pages to request small chunks of data (such as html, xml, json, or plain text) and display them only when needed, helping to solve the problem described above. this is achieved by using apis like xmlhttprequest or — more recently — the fetch api. these technologies allow web pages to directly handle making http requests for specific resources available on a server and formatting the resulting data as needed before it is displayed. note: in the early days, this general technique was known as asynchronous javascript and xml (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 xm...
...or 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 the following code. this stores a reference to the <select> and <pre> elements in constants and defines an onchange event handler function so that when the select's value is changed, its value is passed to an invoked function updatedisplay() as a parameter. const versechoose = document.queryselector('select'); const poemdisplay = document.queryselector('pre'); versechoose.onchange = function() { const...
...And 13 more matches

Object building practice - Learn web development
finished this article you'll be interested in exploring them more. along the way we'll make use of some nifty objects, and show you a couple of nice techniques like bouncing balls off walls, and checking whether they have hit each other (otherwise known as collision detection). getting started to begin with, make local copies of our index.html, style.css, and main.js files. these contain the following, respectively: a very simple html document featuring an <h1> element, a <canvas> element to draw our balls on, and elements to apply our css and javascript to our html. some very simple styles, which mainly serve to style and position the <h1>, and get rid of any scrollbars or margin around the edge of the page (so that it looks nice and neat). some javascript that serves to set up the <c...
...anvas'); const ctx = canvas.getcontext('2d'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; this script gets a reference to the <canvas> element, then calls the getcontext() method on it to give us a context on which we can start to draw. the resulting constant (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d shapes on it. next, we set constants called width and height, and the width and height of the canvas element (represented by the canvas.width and canvas.height properties) to equal the width and height of the browser viewport (the area that the webpage appears on — this can be gotten from the window.innerwidth and window.innerheight properties). note that we are chaining multip...
...ed by the canvas.width and canvas.height properties) to equal the width and height of the browser viewport (the area that the webpage appears on — this can be gotten from the window.innerwidth and window.innerheight properties). note that we are chaining multiple assignments together, to get the variables all set quicker — this is perfectly ok. the last bit of the initial script looks as follows: function random(min, max) { const num = math.floor(math.random() * (max - min + 1)) + min; return num; } this function takes two numbers as arguments, and returns a random number in the range between the two. modeling a ball in our program our program will feature lots of balls bouncing around the screen. since these balls will all behave in the same way, it makes sense to represent the...
...And 13 more matches

Introduction to client-side frameworks - Learn web development
solutions with others. this shared ecosystem of libraries helped shape the growth of the web. now, javascript is an essential part of the web, used on 95% of all websites, and the web is an essential part of modern life. users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. the web allows us to do things that used to be possible only in native applications installed on our computers. these modern, complex, interactive websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions all...
...talled on our computers. these modern, complex, interactive websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. javascript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its ...
...gevity of software. javascript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its front end. what frameworks are out there? there are many frameworks out there, but currently the "big four" are considered to be the following. ember ember was initially released in december 2011 as a continuation of work that started in the sproutcore project. it is an older framework that has less users than more modern alternatives such as react and vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles. start learning ember angular angular is an open-s...
...And 13 more matches

Handling common accessibility problems - Learn web development
t 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 article does. that said, this article will cover cross browser and testing issues surrounding people with disabilit...
...ly as sites get more complex. instead, it is more about making a reasonable effort to make as much of your content accessible to as many people as possible via defensive coding and sticking to best practices. common accessibility issues in this section we'll detail some of the main issues that arise around web accessibility, connected with specific technologies, along with best practices to follow, and some quick tests you can do to see if your sites are going in the right direction. note: accessibility is morally the right thing to do, and good for business (numbers of disabled users, users on mobile devices, etc. present significant market segments), but it is also a legal requirement in many parts of the world to make web content accessible to people with disabilities. read accessibil...
...then restart the browser. click the gear icon that will appear, then select css > disable all styles. edge: select view > style > no style from the main menu. using native keyboard accessibility certain html features can be selected using only the keyboard — this is default behavior, available since the early days of the web. the elements that have this capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>. you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted def...
...And 13 more matches

IME handling guide
pical japanese ime can input two or more words into a composition string. when a user converts from hiragana characters to chinese characters the composition string, japanese ime separates the composition string into multiple clauses. ...
... (in the following screenshots, the composition string has a wavy underline and the only one clause is called "raw input clause"). when a user presses convert key, japanese ime separates the composition string as "わたしの" (my), "なまえは" (name is) and "なかのです" (nakano). then, converts each clause with chinese characters: "私の", "名前は" and "中野です" (in the following screenshot each clause is underlined and not connected adjacently. these clauses are called "converted clause"). if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow keys and look for the expected result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause"). ...
...represented with selection in the editor. from chrome script, you can check it with nsiselectioncontroller. in native code, you can access it with either nsiselectioncontroller or mozilla::selectiontype (the latter is recommended because of type safer). and editor sets these ime selections from mozilla::textrangetype which are sent by mozilla::widgetcompositionevent as mozilla::textrangearray. following table explains the mapping between them. selection types of each clause of composition string or caret nsiselectioncontroller mozilla::selectiontype mozilla::textrangetype caret selection_normal enormal ecaret raw text typed by the user selection_ime_raw_input eimerawclause erawclause selected clause of raw text typed by the...
...And 13 more matches

IPDL Tutorial
ipdl, short for "inter-process-communication protocol definition language", is a mozilla-specific language allowing c++ code to pass messages between processes or threads in an organized and secure way. all messages for multi-process plugins and tabs in firefox are declared in the ipdl language. to experiment with adding a new ipdl protocol, see creating a new protocol. all ipdl messages are sent between parent and a child end points, called actors. an ipdl protocol declares how actors communicate: it declares the possible messages that may be sent between actors, as well as a state machine describing when messages are allowed to be sent. the parent actor is typically the more permanent side of the conversation: parent/child actors parent child ipc ta...
...ns content process plugin process each protocol is declared in a separate file. the ipdl compiler generates several c++ headers from each ipdl protocol. this generated code manages the details of the underlying communication layer (sockets and pipes), constructing and sending messages, ensuring that all actors adhere to their specifications, and handling many error conditions. the following ipdl code defines a very basic interaction of browser and plugin actors: async protocol pplugin { child: async init(nscstring pluginpath); async shutdown(); parent: async ready(); }; this code declares the pplugin protocol. two messages can be sent from the parent to the child, init() and shutdown(). one message can be sent from the child to the parent, ready(). ipdl protocols start...
...ction specifies whether the message can be sent from-parent-to-child, from-child-to-parent, or both ways. three keywords serve as direction specifiers; child was introduced above. the second is parent, which means that the messages declared under the parent label can only be sent from-child-to-parent. the third is both, which means that the declared messages can be sent in both directions. the following artificial example shows how these specifiers are used and how these specifiers change the generated abstract actor classes. // pdirection.ipdl async protocol pdirection { child: async foo(); // can be sent from-parent-to-child parent: async bar(); // can be sent from-child-to-parent both: async baz(); // can be sent both ways }; // pdirectionparent.h class pdirectionparent { prote...
...And 13 more matches

CustomizableUI.jsm
manage the areas in which these widgets are shown. ...
...with customizable buttons and items in firefox's main window ui. it is available in the firefox window as the customizableui property on the window. if you want to use it from a jsm or another context without a window reference, you need to import it yourself: components.utils.import("resource:///modules/customizableui.jsm"); introduction the module is intended for two primary purposes: allow adding, moving and removing customizable widgets. manage the areas in which these 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 place...
...rea. for each area, customizableui keeps track of a list of the widgets they contain, generally refered to as 'placements'. this is analogous to the old currentset attribute. if consumers make a change to the placements in an area, customizableui will update the actual nodes in each area instance for them. toolbars generally function the same way they always have. however, they can now be 'overflowable', that is, if there are too many widgets to fit in the toolbar's horizontal space, the excess widgets will be placed in a panel accessible from an anchor (chevron) in the toolbar. in order to register such a toolbar, set the 'overflowable' property to true, and provide the id of the anchor in the 'anchor' property. widgets widget is the term that customizableui uses for each of the items in...
...And 13 more matches

QA phase
kip ahead to the seeing your work section. if you're not using one of these tools, let's walk you through building your own language pack manually. note: remember all of those pre-requisite tools we asked you to install in the initial setup? here's where you'll need almost all of them. if you haven't installed them yet, now is the time to do it. ...
...directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file directly from en-us before you can build. this is due to a bug in the build logic. ...
...e")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file directly from en-us before you can build. this is due to a bug in the build logic. please either follow the above structure closely or adjust the commands below according to your custom setup. ...
...And 13 more matches

Shell global objects
rc/shell/js.cpp (around shell_functions) for more. this page lists variables and functions available on spidermonkey 53. there may be some difference between each versions. you can get the list of functions by help() function in js shell. variables scriptargs an array that contains arguments passed to js shell. scriptpath a string that is a path of script. console an object that has following property: log evaluate and print expressions to stdout. this function is an alias of the print() function. timesaccessed returns a number that indicates how many times this variable is accessed perfmeasurement see perfmeasurement.jsm. shell only functions functions always available version([number]) get or force a script compilation version number. options([option ...]) ...
...if the property is omitted or v is null, don't attribute the source to any dom element. elementattributename if present and not undefined, the name of property of element that holds this code. this is what debugger.source.p...
... warning. clearlastwarning() clear the last warning. elapsed() execution time elapsed for the current thread. decompilefunction(func) decompile a function. decompilethis() decompile the currently executing script. thisfilename() return the filename of the current script newglobal([options]) return a new global object in a new compartment. if options is given, it may have any of the following properties: samezoneas the compartment will be in the same zone as the given object (defaults to a new zone) invisibletodebugger the global will be invisible to the debugger (default false) principal if present, its value converted to a number must be an integer that fits in 32 bits; use that as the new compartment's principal. shell principals are toys, meant only for testing; o...
...And 13 more matches

nsIDOMWindowUtils
of the window. the attribute's value must be one of the animationmode values from imgicontainer. imeisopen boolean returns the ime open state. true if it's open, otherwise false. this attribute only works when imestatus is ime_status_enabled. read only. imestatus unsigned long returns the current ime status. values correspond to the ime_status_* constants defined below. read only. ismozafterpaintpending boolean returns true if a mozafterpaint event has been queued but not yet fired. read only. layermanagertype astring what type of layer manager the widget associated with this window is using. "basic" is unaccelerated; other types are accelerated. throws an error if there is no widget associated with this window. read only. ...
..._momentum 0x0002 used for aoptions of sendwheelevent(). if this is set, the synthesized wheel event emulates momentum scroll event. wheel_event_customized_by_user_prefs 0x0004 used for aoptions of sendwheelevent(). if this is set, the synthesized wheel event emulates an event whose delta values are computed from user prefs in widget level. ...
...his is set, the synthesized wheel event emulates momentum scroll event. wheel_event_customized_by_user_prefs 0x0004 used for aoptions of sendwheelevent(). if this is set, the synthesized wheel event emulates an event whose delta values are computed from user prefs in widget level. ...
...And 13 more matches

nsIWindowMediator
nsisimpleenumerator getenumerator(in wstring awindowtype); nsidomwindow getmostrecentwindow(in wstring awindowtype); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); nsisimpleenumerator getxulwindowenumerator(in wstring awindowtype); pruint32 getzlevel(i...
...dowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only! nsisimpleenumerator getenumerator(in wstring awindowtype); nsidomwindow getmostrecentwindow(in wstring awindowtype); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); nsisimpleenumerator getxulwindowenumerator(in wstring awindowtype); pruint32 getzlevel(in nsixulwindow awindow); native code only! nsi...
... zlevelbotto...
...And 13 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
api was built to be built upon. if you are about to embark on building something more complex, tone.js would be a good place to start. however, we want to demonstrate how to build such a demo from first principles, as a learning exercise. note: you can find the source code on github as step-sequencer; see the step-sequencer running live also. the interface consists of master controls, which allow us to play/stop the sequencer, and adjust the bpm (beats per minute) to speed up or slow down the "music". there are four different sounds, or voices, which can be played. each voice has four buttons, which represent four beats in one bar of music. when they are enabled the note will sound. when the instrument plays, it will move across this set of beats and loop the bar. each voice also has lo...
...equencer, and adjust the bpm (beats per minute) to speed up or slow down the "music". there are four different sounds, or voices, which can be played. each voice has four buttons, which represent four beats in one bar of music. when they are enabled the note will sound. when the instrument plays, it will move across this set of beats and loop the bar. each voice also has local controls, which allow you to manipulate the effects or parameters particular to each technique we are using to create those voices. the techniques we are using are: name of voice technique associated web audio api feature "sweep" oscillator, periodic wave oscillatornode, periodicwave "pulse" multiple oscillators oscillatornode "noise" random noise buffer, b...
...requency.value = 440; osc.connect(audioctx.destination); osc.start(); osc.stop(audioctx.currenttime + 1); } controlling amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...And 13 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
ttribute defines the relationship between a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found. ...
...e space-separated keywords, which are listed in the following table. every keyword within a space seperated value should be unique within that value. values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations 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. ...
...<area> <form> alternate alternate representations 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 ...
...And 13 more matches

<input type="email"> - HTML: Hypertext Markup Language
can be a list of properly-formed comma-separated e-mail addresses. any trailing and leading whitespace is removed from each address in the list. see validation for details on how e-mail addresses are validated to ensure that they're formatted properly. ...
...e following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid multiple whether or not to allow multiple, comma-separated, e-mail addresses to be entered pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how ...
... input will fail constraint validation if the length of the text entered into the field is fewer than minlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. multiple a boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. see allowing multiple e-mail addresses for an example, or html attribute: multiple for more details. note: normally, if you specify the required attribute, the user must enter a valid e-mail address for the field to be considered valid. however, if you add the multiple attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. in other words, the ...
...And 13 more matches

<input type="search"> - HTML: Hypertext Markup Language
eve this using the htmlinputelement.value property in javascript. searchterms = mysearch.value; if no validation constraints are in place for the input (see validation for more details), the value can be any text string or an empty string (""). ...
...ower or wider than the specified number of characters, depending on the characters and the font (font settings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. ...
...roximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. spellcheck non-standard attributes the following non-standard attributes are available to search input fields. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect whether or not to allow autocorrect while editing this input field. safari only. incremental whether or not to send repeated search events to allow updating live search results while the user is still editing the value of the field. webkit and blink only (safari, chrome, opera, etc.). mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return...
...And 13 more matches

Using the application cache - HTML: Hypertext Markup Language
to use service workers instead (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 t...
..., the browser implicitly adds every page that the user visits and that has the manifest attribute set to the application cache. some browsers (e.g., firefox) display a notification bar the first time a user loads an application that uses the application cache. the notification bar displays a message such as: this website (example.com) is asking to store data on your computer for offline use. [allow] [never for this site] [not now] the term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities. loading documents the use of an application cache modifies the normal process of loading a document: if an application cache exists, the browser loads the document and its associated resources directly from the cache,...
...e browser then checks to see if the cache manifest has been updated on the server. if the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. this is done in the background and does not affect performance significantly. the process for loading documents and updating the application cache is specified in greater detail below: when the browser visits a document that includes the manifest attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache. subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application ...
...And 13 more matches

async function - JavaScript
nc function's body, you will get a syntaxerror. the purpose of async/await is to simplify the syntax necessary to consume promise-based apis. the behavior of async/await is similar to combining generators and promises. async functions always return a promise. if the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise. for example, the following: async function foo() { return 1 } ...is equivalent to: function foo() { return promise.resolve(1) } the body of an async function can be thought of as being split by zero or more await expressions. top-level code, up to and including the first await expression (if there is one), is run synchronously. in this way, an async function without an await expression will run synchronously...
.... for example: async function foo() { await 1 } ...is equivalent to: function foo() { return promise.resolve(1).then(() => undefined) } code after each await expression can be thought of as existing in a .then callback. in this way a promise chain is progressively constructed with each reentrant step through the function. the return value forms the final link in the chain. in the following example, we successively await two promises. progress moves through function foo in three stages. the first line of the body of function foo is executed synchronously, with the await expression configured with the pending promise. progress through foo is then suspended and control is yielded back to the function that called foo. some time later, when the first promise has either been fulfi...
...esult2 = await new promise((resolve) => settimeout(() => resolve('2'))) } foo() note how the promise chain is not built-up in one go. instead, the promise chain is constructed in stages as control is successively yielded from and returned to the async function. as a result, we must be mindful of error handling behavior when dealing with concurrent asynchronous operations. for example, in the following code an unhandled promise rejection error will be thrown, even if a .catch handler has been configured further along the promise chain. this is because p2 will not be "wired into" the promise chain until control returns from p1. async function foo() { const p1 = new promise((resolve) => settimeout(() => resolve('1'), 1000)) const p2 = new promise((_,reject) => settimeout(() => reject('2...
...And 13 more matches

jpm - Archive of obsolete content
jpm is a command-line tool that enables you to test, run, and package add-ons. this is the reference page for jpm. see also jpm tutorial for getting started. jpm usage is: jpm [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm. installing npm there are two ways to get npm. download and install node.js from nodejs.org. node.js includes npm. or, if you have a package manager like apt, install npm via that. for example, in an ubuntu or debian terminal window, enter sudo apt-get install nod...
...nding on your setup, you might need to run this as an administrator: sudo npm install jpm --global installing jpm locally if you do not wish to, or are unable to, install jpm globally, you may instead install it locally: cd $home && npm install jpm to run jpm from a terminal when installed locally, you must add the directory "$home/node_modules/.bin/" to your terminal's path first. ...
...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 commands: jpm init create a skeleton add-on as a starting point for your add-on. jpm run launch an instance of firefox with your add-on installed. jpm test runs your add-on's unit tests. jpm xpi package your add-on as an xpi file, which is the install file format for firefox add-ons. jpm post package your add-on as an xpi file, and t...
...And 12 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
ational models in mind. in the next section we will introduce inner-browsing as an extension to the traditional model. let's start defining what we mean by inner-browsing. in this model, when a request goes to the web server, the current page is updated rather than replaced. without leaving the page, the user browses new information and preserves the page's context. this new navigational method allows us to make html user interfaces behave similarly to non-web based applications such as contact management software. the basic implementation uses a resource such as the web page or the web application to control the navigation system. in other words, the page is the browsing device during the experience, and the user is "immersed" in that browsing device. what does this mean, practically speakin...
... does it look like? good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page. see the table below for a description of how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing approach. some examples: web page with ticker it is common to see web pages with a ticker element, often used to rotate news or stock quotes updates. a simple ticker element implemented in dhtml statically includes the data in the page. if the data changes, it will n...
...if the data changes, it will not update unless you reload the web page. this article includes a ticker example demonstrating that the inner-browsing model can be used to dynamically request new data from the server side and provide updates to the ticker. spell check suppose you have a web publishing system for a portal, and a spell check application on your server. today, this publishing system allows your users to modify content for the portal, but in order to have their text spell checked they must click somewhere and wait for the response page. the inner-browsing model is able to provide users with automatic spell check without leaving the page being edited, a similar experience to a word processor application. the incorrect words are highlighted while the user is typing. forms with nested...
...And 12 more matches

jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd5643b926795852a2026710d4"};var native=function(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect; var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterimplement||function(){};var d=f||i;h=h!==false;d.constructor=native;d.$family={name:"native"}; if(i&&f){d.prototype=i.prototype;}d.prototype.constructor=d;if(a){var e=a.tolowercase();d.prototype.$family={name:e};native.typize(d,e);}var j=function(n,l,o,m){if(!b||m||!n.prototype[l]){n.prototype[l]=o; }if(h){native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(typeof n=="string"){var o=this.prototype[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(typeof m=="string"){return ...
...,initialize:a[h],protect:true}); }var d={"boolean":boolean,"native":native,object:object};for(var c in d){native.typize(d[c],c);}var f={array:["concat","indexof","join","lastindexof","pop","push","reverse","shift","slice","sort","splice","tostring","unshift","valueof"],string:["charat","charcodeat","concat","indexof","lastindexof","match","replace","search","slice","split","substr","substring","tolowercase","touppercase","valueof"]}; for(var e in f){for(var b=f[e].length;b--;){native.genericize(a[e],f[e][b],true);}}})();var hash=new native({name:"hash",initialize:function(a){if($type(a)=="hash"){a=$unlink(a.getclean()); }for(var b in a){this[b]=a[b];}return this;}});hash.implement({foreach:function(b,c){for(var a in this){if(this.hasownproperty(a)){b.call(c,this[a],a,this); }}},getclean:funct...
...n $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)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(naviga...
...And 12 more matches

XUL accessibility guidelines - Archive of obsolete content
accessibility is not difficult, but does require a basic understanding of the different types of disabilities, commonly used assistive technologies, and special accessibility features built into the xul languages. most of all, accessibility requires a conscious effort on your part, and a desire to include everyone. ...
...ible operations. the column picker and column headers in xul trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. it is therefore necessary to provide a keyboard accessible alternative for accessing this functionality. the firefox "bookmarks manager" provides an example of how to make trees more accessible. the bookmark manager allows users to sort bookmarks by a particular column of information and choose which columns to display. because column headers and the column picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a keyboard. in the bookmark manager this functionality is available under the view menu which is accessible to a keyboard user. toolbarbuttons by default, to...
... keyboard access. there are many ways to provide keyboard shortcuts. they are well documented in the xul tutorial:keyboard shortcuts. careful attention should be taken when setting keyboard shortcuts. when creating an extension (for firefox or another xul application), make sure the keyboard shortcuts you assign do not interfere with those already defined by the base application. refer to the following resources when setting keyboard shortcuts. learn more keyboard shortcuts and accesskeys mozilla keyboard planning faq and cross reference. an excellent guide for determining unused key combinations and cross platform issues. mozilla keyboard shortcuts. a full list of keyboard shortcuts for the various mozilla applications. mozilla's accesskey faq. a short reference...
...And 12 more matches

Building up a basic demo with the PlayCanvas engine - Game development
nd one. there is one helper variable already included, which will store a reference to the <canvas> element. before reading on, copy this code to a new text file and save it in your working directory as index.html. playcanvas application to begin developing our game we have to create the playcanvas application first (using the given <canvas> element), and then start the update loop. add the following code to the bottom of your second <script> element: var app = new pc.application(canvas); app.start(); the pc global object contains all the playcanvas functions available in the engine. next, we'll set the canvas to fill the window, and automatically change its resolution to be the same as the canvas size. again, add the following lines at the bottom of your script. app.setcanvasfillmode...
... var camera = new pc.entity(); camera.addcomponent("camera", { clearcolor: new pc.color(0.8, 0.8, 0.8) }); app.root.addchild(camera); camera.setposition(0, 0, 7); the code above will create a new entity. ...
...object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source. then it adds a camera component to it with the light gray clearcolor — the color will be visible as the background. next, the camera object is added to the root of our application and positioned to be 7 units away from the center of the scene on the z axis. this allows us to make some space to visualize the objects that we will create later on. note: the distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. try saving the file and loading it in your browser. you should now see a gray window. congratulations! geometry now the ...
...And 12 more matches

Building up a basic demo with Three.js - Game development
l renderer, setting its size to fit the whole available space on the screen, and appending the dom structure to the page. you might have noticed the antialias parameter in the first line — this renders the edges of shapes more smoothly. the setclearcolor() method sets our background to a light gray colour, instead of the default black one. ...
...ground to a light gray colour, instead of the default black one. add this code into our second <script> element, just below the javascript comment. scene a scene is the place where everything happens. when creating new objects in the demo, we add them all inside the scene to become visible on the screen. in three.js, the scene is represented by a scene object. let's create it, by adding the following line below our previous lines: var scene = new three.scene(); later, we will be using the .add() method, to add objects to this scene. camera we have the rendered scene, but we still need to add a camera to view our handiwork — imagine a movie set without any cameras. ...
...ble on the screen. in three.js, the scene is represented by a scene object. let's create it, by adding the following line below our previous lines: var scene = new three.scene(); later, we will be using the .add() method, to add objects to this scene. camera we have the rendered scene, but we still need to add a camera to view our handiwork — imagine a movie set without any cameras. the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added. there are other types of camera available (cube, orthographic), but the simplest is persp...
...And 12 more matches

CSS and JavaScript accessibility best practices - Learn web development
or they can significantly harm accessibility if misused. this article outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and understanding of what accessibility is. objective: to gain familiarity with using css and javascript appropriately in your web documents to maximise accessibility and not detract from it. ...
...igate a page via heading elements if the developer hasn't appropriately used heading elements to markup the content. by the same token, a heading loses its visual purpose if you style it so it doesn't look like a heading. the rule of thumb is that you can update the styling of a page feature to fit in your design, but don't change it so much that it no longer looks or behaves as expected. the following sections summarize the main html features to consider. "standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; } you should: select se...
...</strong>.</p> you might want to add some simple coloring to your emphasised text: strong, em { color: #a60000; } you will however rarely need to style emphasis elements in any significant way. the standard conventions of bold and italic text are very recognisable, and changing the style can cause confusion. for more on emphasis, see emphasis and importance. abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this. for more on a...
...And 12 more matches

Styling tables - Learn web development
r table let's work through styling our table example together. to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer. next, create a new file called style.css and save it in the same directory as your other files. ...
... computer. next, create a new file called style.css and save it in the same directory as your other files. ...
...normally, table columns tend to be sized according to how much content they contain, which produces some strange results. ...
...And 12 more matches

JavaScript basics - Learn web development
e 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. third-party frameworks and libraries that you can apply to html to accelerate the work of building sites and 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 too...
...y frameworks and libraries that you can apply to html to accelerate the work of building sites and 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 comfort...
...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 examine how to add javascript to your page for creating a hello world! example. (hello world! is the standard for introductory programming examples.) important: if you haven't been following along with the rest of our course, download this example code and use it as a starting point. go to your test site and create a new folder named scripts. within the scripts folder, create a new file called main.js, and save it. in your index.html file, enter this code on a new line, just before the closing </body> tag: <script src="scripts/main.js"></script> this is doing the same jo...
...And 12 more matches

HTML text fundamentals - Learn web development
ad passed, when all of a sudden the specter sat bolt upright and exclaimed, "please have mercy on my soul!"</p> it's really up to you what the elements involved represent, as long as the hierarchy makes sense. you just need to bear in mind a few best practices as you create such structures: preferably, you should use a single <h1> per page—this is the top level heading, and all others sit below this in the hierarchy. make sure you use the headings in the correct order in the hierarchy. don't use <h3> elements to represent subheadings, followed by <h2> elements to represent sub-subheadings—that doesn't make sense and will lead to weird results. of the six heading levels available, you should aim to use no more than three per page, unless you feel it is necessary. documents with many ...
...ngs, your page will perform poorly in terms of seo (search engine optimization). severely visually impaired people often don't read web pages; they listen to them instead. this is done with software called a screen reader. this software provides ways to get fast access to given text content. among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. if headings are not available, they will be forced to listen to the whole document read out loud. to style content with css, or make it do interesting things with javascript, you need to have elements wrapping the relevant content, so css/javascript can effectively target it. we therefore need to give our content structural markup. act...
...rced to listen to the whole document read out loud. to style content with css, or make it do interesting things with javascript, you need to have elements wrapping the relevant content, so css/javascript can effectively target it. we therefore need to give our content structural markup. active learning: giving our content structure let's jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it using the reset button. if you get stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label"...
...And 12 more matches

Looping code - Learn web development
s being associated with popular breakfast cereals, roller coasters, and musical production, they are also a critical concept in programming. programming loops are all to do with doing the same thing over and over again — which is termed iteration in programming speak. let's consider the case of a farmer that is making sure he has enough food to feed his family for the week. he might use the following loop to achieve this: a loop usually has one or more of the following features: a counter, which is initialized with a certain value — this is the starting point of the loop ("start: i have no food", above). a condition, which is a true/false test to determine whether the loop continues to run, or stops — usually when the counter reaches a certain value. this is illustrated by "h...
...but we could think about the farmer being able to collect say 2 portions of food per hour. after each hour, the amount of food he has collected is incremented by two, and he checks whether he has enough food. if he has reached 10 portions (the point where the condition is no longer true, so the loop exits), he can stop collecting and go home. in pseudocode, this would look something like the following: loop(food = 0; foodneeded = 10) { if (food >= foodneeded) { exit loop; // we have enough food; let's go home } else { food += 2; // spend an hour collecting 2 more food // loop will then run again } } so the amount of food needed is set at 10, and the amount the farmer currently has is set at 0. in each iteration of the loop, we check whether the amount of food the far...
...the width and height of the inner browser window. you should get the basic idea — we are using a loop to run 100 iterations of this code, each one of which draws a circle in a random position on the page. the amount of code needed would be the same whether we were drawing 100 circles, 1000, or 10,000. only one number has to change. if we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw: ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); this would get very boring and difficult to maintain very quickly. loops really are the best. the standard for loop let's start exploring some specific loop constructs. the first, which you'll use most of the time, is...
...And 12 more matches

Manipulating documents - Learn web development
centering around security. imagine if a web site could 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 win...
...l node (other markup vocabularies like svg and custom xml will have different root elements). child node: a node directly inside another node. for example, img is a child of section in the above example. descendant node: a node anywhere inside another node. for example, img is a child of section in the above example, and it is also a descendant. img is not a child of body, as it is two levels below it in the tree, but it is a descendant of body. parent node: a node which has another node inside it. for example, body is the parent node of section in the above example. sibling nodes: nodes that sit on the same level in the dom tree. for example, img and p are siblings in the above example. text node: a node containing a text string. it is useful to familiarize yourself with this terminol...
...tion to start learning about dom manipulation, let's begin with a practical example. take a local copy of the dom-example.html page and the image that goes along with it. add a <script></script> element just above the closing </body> tag. to manipulate an element inside the dom, you first need to select it and store a reference to it inside a variable. inside your script element, add the following line: const link = document.queryselector('a'); now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like htmlanchorelement in the case of <a> element, its more general parent interface htmlelement, and node — which represents all nodes in a dom). first of all, let's change the...
...And 12 more matches

What went wrong? Troubleshooting JavaScript - Learn web development
have your own version of the game example that doesn't work, which you might want to fix! we'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. then you can go back and try to fix your example. at this point, let's consult the developer console to see if it reports any syntax errors, then try to fix them. you'll learn how below. fixing syntax errors earlier on in the course we got you to type some simple javascript commands into the developer tools javascript console (if you can't remember how to open this in your browser, follow the previous link to find out how). what's even more useful is that the console gives you error messages whenever a syntax error exists inside the javascript being fed into the browser's java...
...from left to right, we've got: a red "x" to indicate that this is an error. ...
...ght, we've got: a red "x" to indicate that this is an error. an error message to indicate what's gone wrong: "typeerror: guesssubmit.addeventlistener is not a function" a "learn more" link that links through to an mdn page that explains what this error means in greater detail. the name of the javascript file, which links through to the debugger tab of the developer tools. if you follow this link, you'll see the exact line where the error is highlighted. the line number where the error is, and the character number in that line where the error is first seen. in this case, we've got line 86, character number 3. if we look at line 86 in our code editor, we'll find this line: guesssubmit.addeventlistener('click', checkguess); the error message says "guesssubmit.addeven...
...And 12 more matches

Getting started with Ember - Learn web development
ue, and angular. the service side provides long-lived shared state, behavior, and an interface to integrating with other libraries or systems. for example, the router (which will be mentioned later in this tutorial) is a service. components and services make up the majority of any emberjs application. use cases generally, emberjs works well for building apps that desire either or both of the following traits: single page applications, including native-like web apps, and progressive web apps (pwas) ember works best when it is the entire front end of your application. increasing cohesion among many team's technology stacks community-backed "best practices" allow for faster long-term development speed. ember has clear conventions that are useful for enforcing consist...
...ations without having to completely relearn the architecture, patterns, conventions, etc. as you work through this series of tutorials, you'll notice ember's opinions — such as strict naming conventions of component files. how does ember relate to vanilla javascript? ember is built on javascript technologies and is a thin layer on top of traditional object-oriented programming, while still allowing developers to utilize functional programming techniques. ember makes use of two main syntaxes: javascript (or optionally, typescript) ember's own templating language, which is loosely based on handlebars. the templating language is used to make build and runtime optimizations that otherwise wouldn't be possible. most importantly, it is a superset of html — meaning that anyone who know...
...mplates without any knowledge of javascript, and interactivity can be added later. this language also enables lighter asset payloads due to compiling the templates into a "byte code" that can be parsed faster than javascript. the glimmer vm enables extremely fast dom change tracking without the need to manage and diff a cached virtual representation (which is a common approach to mitigating the slow i/o of dom changes). for more information on the technical aspects of the glimmer vm, the github repository has some documentation — specifically, references and validators may be of interest. everything else in ember is just javascript. in particular, javascript classes. this is where most of the "framework" parts come into play, as there are superclasses, where each type of thing has a diff...
...And 12 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-side javascript frameworks next now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app. in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: learn and put into practice some basic svelte concepts, like creating components, passing data using props, render javascript expressions into ou...
...making it a bit more dynamic. we'll take the tasks information from the markup and store it in a todos array. we'll also create two variables to keep track of the total number of tasks and the completed tasks. the state of our component will be represented by these three top-level variables. ...
...item. also, a key expression can be provided, which will uniquely identify each item. svelte will use it to diff the list when data changes, rather than adding or removing items at the end, and it's a good practice to always specify one. finally, an :else block can be provided, which will be rendered when the list is empty. let's give it a try. replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input type="checkbox" checked={todo.completed}/> {index}. {todo.name} (id: {todo.id}) </li> {:else} nothing to do here! {/each} </ul> go back to the app; you'll see something like this: now we've seen that this is working, let's generate a complete todo item with ea...
...And 12 more matches

Package management basics - Learn web development
the form of a package registry. the registry is a central place that a package is published to and thus can be installed from. npm, as well as being a package manager, is also the name of the most commonly-used package registry for javascript packages. the npm registry exists at npmjs.com. npm is not the only option. you could manage your own package registry — products like microsoft azure allow you to create proxies to the npm registry (so you can override or lock certain packages), github also offers a package registry service, and there will be likely more options appearing as time goes on. what is important is that you ensure you've chosen the best registry for you. many projects will use npm, and we’ll stick to this in our examples throughout the rest of the module. using the pa...
...xperimental app. setting up the app as an npm package first of all, create a new directory to store our experimental app in, somewhere sensible that you’ll find again. ...
...all it whatever you like: mkdir parcel-experiment cd parcel-experiment next, let's initialise our app as an npm package, which creates a config file — package.json — that allows us to save our configuration details in case we want to recreate this environment later on, or even publish the package to the npm registry (although this is somewhat beyond the scope of this article). type the following command, making sure you are inside the parcel-experiment directory: npm init you will now be asked some questions; npm will then create a default package.json file based on the answers: name: a name to identify the app. just press return to accept the default parcel-experiment. version: the starting version number for the app: again, just press return to accept the default 1.0.0. descr...
...And 12 more matches

Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
...t model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, widgets presentation has media type, dimensions, etc. ...
...tyle resolution compute stylistic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs. ...
...And 12 more matches

source-editor.jsm
changes, the "dirtychanged" event is sent. editorelement element the element containing the editor. when using the default orion editor, this is a xul <xul:iframe> element. read only. lastfind object an object describing the result of the last find operation performed using the find(), findnext(), or findprevious() method. read only. this object has the following properties: property type description str string the last string that was searched for. index number an integer value indicating the result of the most recent find operation; this is the index into the text at which str was found, or -1 if the string wasn't found. ...
...tring that was searched for. index number an integer value indicating the result of the most recent find operation; this is the index into the text at which str was found, or -1 if the string wasn't found. lastfound number the index of the previous location at which str was found, for multiple find operations (such as find() followed by findnext()). this can be -1 if the string was never found. ignorecase boolean true if the search was case sensitive; otherwise false. readonly boolean set this value to true to make the editor read only, thereby preventing the user from making changes. set it to false to allow editing. constants preference name c...
...the search string. aoptions optional an optional object containing properties customizing the search operation. see find options for details. return value returns an integer indicating the offset into the text at which the first character of the found string is located, or -1 if the string wasn't found. find options the aoptions object can customize the search operation. it may have the following properties: property type description backwards boolean if true, the search begins at start (or the end of the text, if start is not specified) and progresses toward the beginning of the text. otherwise the search progresses forward. the default is false. ignorecase boolean if true, the search is performed in a case-insensitive manner; otherwise ca...
...And 12 more matches

Application Translation with Mercurial
and that the translated texts fit into the available, the translation progress should be tracked. this can be done in a text editor or word processor or any other tool in which you can attach different kind of states to the individual texts to translate. the firefox extension scrapbook is used in this guide. install it into your default firefox profile (you will have more than one profile when following this guide). getting the current texts in english and your locale obtaining the english texts with the source code get the source code by downloading the following file: firefox desktop or firefox for android: download the mozilla-<branch>.hg file (e.g. mozilla-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/firefox/bundles/ the file is not small, but after initially downloading ...
...y repacks of the application (changing the localization of the program), and compiling the application likely won't work. you are now in the mozilla development environment which emulates a linux environment. now go to the directory where you want to put the source code. it's highly recommended to put it onto the fastest hard drive in the device. file paths here work starting with a slash (/) followed by the drive letter, and then the directory structure like on windows, but using slashes (/) instead of backslashes (\). so let's go to c:\mozilla by typing cd /c/mozilla/ create a new directory for the source code: mkdir mozilla-aurora initialize the new directory as new repository: hg init mozilla-aurora go into the new directory: cd mozilla-aurora unpack the source code: hg unb...
... hg update obtaining the texts of your localization go back to the parent folder of mozilla-aurora: cd .. find the localization repository for your branch and language on http://hg.mozilla.org/ e.g. for aurora and german (language code 'de'), it is http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ copy that url to the clipboard. copy the repository to your computer by running the following command: hg clone http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ de-mozilla-aurora this should proceed pretty fast. on windows, you can paste the url by calling the paste command from the window menu in the upper left corner of the window. configuring your mercurial user settings still in the command prompt, go to your home directory in the file system, e.g. for a windows user...
...And 12 more matches

Profiling with the Firefox Profiler
/. in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web developers, but does not include as much information as the firefox profiler web app. it is available from the menu at tools > web developer > performance. understanding profiles the firefox profiler has more current documentation available at profiler.firefox.com/docs/. however the following could have some potentially useful information for gecko-specific problems. you can check out some frequently asked questions about the firefox profilers. reporting a performance problem has a step-by-step guide for obtaining a profile when requested by firefox developers. interface 1. timeline the timeline has several rows of tracing markers (colored segments) which indicate interesti...
... gecko-specific problems. you can check out some frequently asked questions about the firefox profilers. reporting a performance problem has a step-by-step guide for obtaining a profile when requested by firefox developers. interface 1. timeline the timeline has several rows of tracing markers (colored segments) which indicate interesting events. hover over them to see more information. below the tracing markers are rows corresponding with activity on a variety of threads. tip: threads that are annotated with "[default]" are in the parent (aka "ui", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the web content (aka "child") processes. tip: long-running tasks in the parent process will block all input or drawing with the browser ui (aka "ui jank...
...re annotated with "[default]" are in the parent (aka "ui", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the web content (aka "child") processes. tip: long-running tasks in the parent process will block all input or drawing with the browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz. tracing markers red: these indicate that the event loop is being unresponsive. note that high priority events such as vsync are not included here. also note that this indicates what would have happened had there been an event waiting and not necessarily that there was an event pending for that long. black: these indicate synchronous ipc call...
...And 12 more matches

NSS PKCS11 Functions
d_closeuserdb pk11_findcertfromnickname pk11_findkeybyanycert pk11_getslotname pk11_gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc secmod_loadusermodule load a new pkcs #11 module based on a modulespec. syntax #include "secmod.h" extern secmodmodule *secmod_loadusermodule(char *modulespec, secmodmodule *parent, prbool recurse); parameters this function has the following parameters: modulespec is a pkcs #11 modulespec. parent is the moduledb that presented this module spec. for applications this value should be null. recurse is a boolean indicates whether or not the module should also launch additional pkcs #11 modules. this is only applicable if the loaded module is actually a moduledb rather than a pkcs #11 module (see pkcs11_module_specs). returns the func...
... available at pkcs11_module_specs. nss parameters may be specified in module specs used by secmod_loadusermodule. module will continue to function in the nss infrastructure until unloaded with secmod_unloadusermodule. secmod_unloadusermodule unload a pkcs #11 module. syntax #include "secmod.h" extern secstatus secmod_unloadusermodule(secmodmodule *module); parameters this function has the following parameters: module is the module to be unloaded. returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. description secmod_unloadusermodule detaches a module from the nss trust domain and unloads it. the module should have previously been loaded by secmod_loadusermodule. secmod_closeuserdb close an already opened user database. note: the dat...
...ermodule. secmod_closeuserdb close an already opened user database. note: the database must be in the internal token, and must be one created with secmod_openuserdb(). once the database is closed, the slot will remain as an empty slot until it's used again with secmod_openuserdb(). syntax #include <pk11pub.h> secstatus secmod_closeuserdb(pk11slotinfo *slot) parameters this function has the following parameter: slot a pointer to a slot info structure. this slot must a a slot created by secmod_openuserdb() at some point in the past. returns the function returns one of these values: if successful, secsuccess). if unsuccessful, secfailure. secmod_openuserdb open a new database using the softoken. syntax #include "pk11pub.h" pk11slotinfo *secmod_openuserdb(const char *modulespec) paramet...
...And 12 more matches

Debugger - Firefox Developer Tools
the debugger object when called as a constructor, the debugger object creates a new debugger instance. new debugger([global, …]) create a debugger object, and apply its adddebuggee method to each of the givenglobal objects to add them as the initial debuggees. accessor properties of the debugger prototype object a debugger instance inherits the following accessor properties from its prototype: enabled a boolean value indicating whether this debugger instance’s handlers, breakpoints, and the like are currently enabled. it is an accessor property with a getter and setter: assigning to it enables or disables this debugger instance; reading it produces true if the instance is enabled, or false otherwise. this property is initially true in a freshly created debugger insta...
...igning to it enables or disables this debugger instance; reading it produces true if the instance is enabled, or false otherwise. this property is initially true in a freshly created debugger instance. this property gives debugger code a single point of control for disentangling itself from the debuggee, regardless of what sort of events or handlers or “points” we add to the interface. allowunobservedasmjs a boolean value indicating whether asm.js code running inside this debugger instance’s debuggee globals is invisible to debugger api handlers and breakpoints. setting this to false inhibits the ahead-of-time asm.js compiler and forces asm.js code to run as normal javascript. this is an accessor property with a getter and setter. it is initially false in a freshly created debug...
...to false inhibits the ahead-of-time asm.js compiler and forces asm.js code to run as normal javascript. this is an accessor property with a getter and setter. it is initially false in a freshly created debugger instance. setting this flag to true is intended for uses of subsystems of the debugger api (e.g, debugger.source) for purposes other than step debugging a target javascript program. allowwasmbinarysource a boolean value indicating whether webassembly sources will be available in binary form. the webassembly text generation will be disabled. collectcoverageinfo a boolean value indicating whether code coverage should be enabled inside each debuggee of this debugger instance. changing this flag value will recompile all jit code to add or remove code coverage instrumentation. cha...
...And 12 more matches

Applying styles and colors - Web APIs
to black (css color value #000000). note: when you set the strokestyle and/or fillstyle property, the new value becomes the default for all shapes being drawn from then on. for every shape you want in a different color, you will need to reassign the fillstyle or strokestyle property. the valid strings you can enter should, according to the specification, be css <color> values. each of the following examples describe the same color. // these all set the fillstyle to 'orange' ctx.fillstyle = 'orange'; ctx.fillstyle = '#ffa500'; ctx.fillstyle = 'rgb(255, 165, 0)'; ctx.fillstyle = 'rgba(255, 165, 0, 1)'; a fillstyle example in this example, we once again use two for loops to draw a grid of rectangles, each in a different color. the resulting image should look something like the screensh...
...t) to 1.0 (fully opaque). this value is 1.0 (fully opaque) by default. the globalalpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors. because the strokestyle and fillstyle properties accept css rgba color values, we can use the following notation to assign a transparent color to them. // assigning transparent colors to stroke and fill style ctx.strokestyle = 'rgba(255, 0, 0, 0.5)'; ctx.fillstyle = 'rgba(255, 0, 0, 0.5)'; the rgba() function is similar to the rgb() function but it has one extra parameter. the last parameter sets the transparency value of this particular color. the valid range is again between 0.0 (fully tra...
... linewidth = value sets the width of lines drawn in the future. linecap = type sets the appearance of the ends of lines. linejoin = type sets the appearance of the "corners" where lines meet. miterlimit = value establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes. getlinedash() returns the current li...
...And 12 more matches

Using Service Workers - Web APIs
ll provide a terrible user experience if you can’t download it. there have been various attempts to create technologies to solve this problem, and some of the issues have been solved. but the overriding problem is that there still isn’t a good overall control mechanism for asset caching and custom network requests. the previous attempt — appcache — seemed to be a good idea because it allowed you to specify assets to cache really easily. however, it made many assumptions about what you were trying to do and then broke horribly when your app didn’t follow those assumptions exactly. read jake archibald's (unfortunately-titled but well-written) application cache is a douchebag for more details. note: as of firefox 44, when appcache is used to provide offline support for a page a wa...
...used to provide offline support for a page a warning message is now displayed in the console advising developers to use service workers instead (bug 1204581.) service workers should finally fix these issues. service worker syntax is more complex than that of appcache, but the trade off is that you can use javascript to control your appcache-implied behaviors with a fine degree of granularity, allowing you to handle this problem and many more. using a service worker you can easily set an app up to use cached assets 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. setting up to p...
...nable service workers; restart browser. you’ll also need to serve your code via https — service workers are restricted to running across https for security reasons. github is therefore a good place to host experiments, as it supports https. in order to facilitate local development, localhost is considered a secure origin by browsers as well. 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(). if successful, the service worker is executed in a serviceworkerglobalscope; this is basically a special kind of worker context, running off the main script execution thread, with no dom access. the service worker is now ready to process events. installat...
...And 12 more matches

Signaling and video calling - Web APIs
a connection is established through a discovery and negotiation process called signaling. this tutorial will guide you through building a two-way video-call. webrtc is a fully peer-to-peer technology for the real-time exchange of audio, video, and data, with one central caveat. a form of discovery and media format negotiation must take place, as discussed elsewhere, in order for two devices on different networks to locate one another. this process is called signaling and involves both devices connecting to a third, mutually agreed-upon server. through this third server, the two devices can locate one another, and exchange negotiation messages. ...
... channel the information back and forth. the contents don't matter at all to the signaling server. readying the chat server for signaling our chat server uses the websocket api to send information as json strings between each client and the server. the server supports several message types to handle tasks, such as registering new users, setting usernames, and sending public chat messages. to allow the server to support signaling and ice negotiation, we need to update the code. we'll have to allow directing messages to one specific user instead of broadcasting to all connected users, and ensure unrecognized message types are passed through and delivered, without the server needing to know what they are. this lets us send signaling messages using this same server, instead of needing a separa...
... } } } this code now looks at the pending message to see if it has a target property. if that property is present, it specifies the username of the client to which the message is to be sent, and we call sendtooneuser() to send the message to them. otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user. as the existing code allows the sending of arbitrary message types, no additional changes are required. our clients can now send messages of unknown types to any specific user, letting them send signaling messages back and forth as desired. that's all we need to change on the server side of the equation. now let's consider the signaling protocol we will implement. designing the signaling protocol now that we've built a ...
...And 12 more matches

Inputs and input sources - Web APIs
nput sources for both targeting and selection. squeezable triggers or glove grip pads to provide squeeze actions. voice commands using speech recognition. spatially-tracked articulated hands, such as haptic gloves can provide both targeting and squeeze actions, as well as selection if outfitted with buttons or other sources of selection actions. single-button click devices. gaze tracking (following the movements of the eye to choose targets). input sources each source of webxr input data is represented by an xrinputsource object which describes the input source and its current state. the information for each input source includes which hand it's held in (if applicable), what targeting method it uses, xrspaces that can be used to draw the targeting ray and to find the targeted object o...
...direction. if the controller were instead positioned to the left of and closer to the user than the world space origin (or possibly behind the user, if the user is located at the origin, although that's an uncomfortable way to hold a controller), the coordinates would have a negative value for x, but a positive value for z. ...
... left of and closer to the user than the world space origin (or possibly behind the user, if the user is located at the origin, although that's an uncomfortable way to hold a controller), the coordinates would have a negative value for x, but a positive value for z. the value of y would still be positive unless the controller was moved below the world space origin. this is shown in the diagram below, in which the controller is located down and to the left of the world space's origin, with the controller also moved to be closer to us than the origin. as a result, the values of x and y are both negative, while z is positive. mapping a grip space to the world origin when the controller is positioned below and to the left of the world origin, and closer to us than the world origin is. ga...
...And 12 more matches

Web Audio API - Web APIs
basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. several sources — with different types of channel layout — are supported even within a single context. ...
...basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. several sources — with different types of channel layout — are supported even within a single context. ...
...iplying the samples by a value to make them louder or quieter (as is the case with gainnode). once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination (audiocontext.destination), which sends the sound to the speakers or headphones. this last connection is only necessary if the user is supposed to hear the audio. a simple, typical workflow for web audio would look something like this: create audio context inside the context, create sources — such as <audio>, oscillator, stream create effects nodes, such as reverb, biquad filter, panner, compressor choose final destination of audio, for example your system speakers connect the sources up to the effects, and the effects to the destination. timing is controlled with high ...
...And 12 more matches

ARIA Test Cases - Accessibility
pass 2. fail - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nv...
...an be directly checked. also, as a clever feature for at testing, the firing of events (like event_object_statechange) can be invoked from the examples. finally, a list of currently non-mapped aria roles is given. documenting and filing bugs review the information on how to file a bug on an aria implementation. when documenting an issue, please also list it in the relevant compatibility table below. when possible provide a link to the bug in the database so that its status can be reviewed. widget test cases alert simple alert complex alert real alert example with aria-required and aria-invalid -- type in a email address without an at sign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes visible. a screen magnifier s...
...when pressing space, new state should be announced automatically. markup used: role="checkbox" aria-checked="true" or "false" notes: need testcase where aria-checked attribute is removed instead of set to false results: at firefox ie opera safari jaws 9 - - n/a n/a j...
...And 12 more matches

Web Accessibility: Understanding Colors and Luminance - Accessibility
iterion 1.4.3: contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that color is received by the viewer. how the viewer perceives color after it gets to his eyes is yet another matter, and can be affected by overall health. luckily, css media queries level 5 will be a game-changer in accessibility initiatives, because it will allow users to select settings that accomodate their needs best. color, contrast, and luminance are among the most central and critical concepts to creating accessible web content with color. luminance is of particular importance, however, because at the end of the day, understanding of what it is and how it is employed enables accessibility for those who are color-blind, as well as those who can per...
...s behind the evolution of digital technology set the standards, and these standards still retain a powerful presence today. this is evolving, and new methods for measuring color involve measurements using other color spaces, but color measurements in the rgb color space still predominates, and this includes video production. the rgb color model is extended to include “alpha” -- rgba -- to allow specification of the opacity of a color. there's movement towards adopting the use of hsl color values rather than rgb values is css color module 3 (see section 4.2.4), the rationale being that rgb is hardware-oriented, reflecting the use of crts, and that rgb is non-intuitive. that said, hsl colors incorporate lightness, not luminance, and this is a significant consideration. note that in tha...
... in addition, the "shape" of the text itself will matter. thin letters will be harder to read than thick ones; all type faces need space to "breathe" for human perception. in general, for accessibility purposes, the more contrast the better. that changes with animation. "safer" animation means images with less contrast, not more. for more on color contrast in animation, see three flashes or below threshold understanding sc 2.3.1 icons also need sufficient contrast for perception. see wcag 2.1 technique g207 luminance it is the difference in the luminance of a color that enables us to see contrast. here is the definition of relative luminance as defined by the w3c: "the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white" this...
...And 12 more matches

Visual formatting model - CSS: Cascading Style Sheets
such as a computer screen and paged media such as a book or document printed by browser print functions. most of the information applies equally to continuous and paged media. in the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. the layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree. external information (e.g., viewport size, intrinsic dimensions of images, etc.). much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have added to this information. when reading specifications you will often find references to the model as ...
... then, for each element, css generates zero or more boxes as specified by that element’s display property value. note: boxes are often referred to by their display type — e.g. a box generated by an element with display: block is called a "block box" or just a "block". note however that block boxes, block-level boxes and box containers are all subtly different; see the block boxes section below for more details. the principal box when an element generates one or more boxes, one of them is the principal box, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme. some elements may generate additional boxes in addition to the principal box, for example display: list-item generates more than one box (e.g. a prin...
...lumns; these also cannot be styled or otherwise targetted. table layout will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with display: table-row. line boxes line boxes are the boxes that wrap each line of text. ...
...And 12 more matches

position - CSS: Cascading Style Sheets
and left properties determine the final location of positioned elements. 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. syntax the position property is specified as a single keyword chosen from the list of values below. values static the element is positioned according to the normal flow of the document. the top, right, bottom, left, and z-index properties have no effect. this is the default value. relative the element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. the offset does not affect the position ...
...t does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. this value creates a new stacking context when the value of z-index is not auto. its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined. absolute the element is removed from the normal document flow, and no space is created for the element in the page layout. it is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. its final position is determined by the values of top, right, bottom, and left. this value creates a new stacking context when the value of z-index is not auto. the margins of absolutely positioned box...
...losest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. its final position is determined by the values of top, right, bottom, and left. this value creates a new stacking context when the value of z-index is not auto. the margins of absolutely positioned boxes do not collapse with other margins. fixed the element is removed from the normal document flow, and no space is created for the element in the page layout. it is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in which case that ancestor behaves as the containing block. (note that there are browser inconsistencies...
...And 12 more matches

Audio and Video Delivery - Developer guides
king 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 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.createe...
...udio.setattribute('src','audiofile.ogg'); } myaudio.currenttime = 5; myaudio.play(); we set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it. note: play will be ignored by most browsers unless issued by a user-initiated event. it's also possible to feed an <audio> element a base64 encoded wav file, allowing to generate audio on the fly: <audio id="player" src="data:audio/x-wav;base64,uklgrvc..."></audio> speak.js employs this technique. try the demo. javascript video var myvideo = document.createelement('video'); if (myvideo.canplaytype('video/mp4')) { myvideo.setattribute('src','videofile.mp4'); } else if (myvideo.canplaytype('video/webm')) { myvideo.setattribute('src','videofile.webm')...
...you take the stream you receive from getusermedia, pass ...
...And 12 more matches

Block formatting context - Developer guides
floats (elements where float isn't none). absolutely positioned elements (elements where position is absolute or fixed). inline-blocks (elements with display: inline-block). ...
... captions (elements with display: table-caption, which is the default for html table captions). anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for html tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table. block elements where overflow has a value other than visible. display: flow-root. elements with contain: layout, content, or paint. flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves. grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves. mu...
...ext, which is similar to block formatting context except layout. there's no floating children avaliable inside a flex/grid container, but exclude external floats and suppress margin collapsing still works. examples contain internal floats make float content and alongside content the same height. let's have a look at a couple of these in order to see the effect creating a new bfc. ...
...And 12 more matches

HTML5 - Developer guides
html5 is the latest evolution of the standard that defines html. the term represents two different concepts. it is a new version of the language html, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful web sites and applications. this set is sometimes called html5 & friends and often shortened to just html5. ...
...aviors, and a larger set of technologies that allows the building of more diverse and powerful web sites and applications. this set is sometimes called html5 & friends and often shortened to just html5. designed to be usable by all open web developers, this reference page links to numerous resources about html5 technologies, classified into several groups based on their function. semantics: allowing you to describe more precisely what your content is. connectivity: allowing you to communicate with the server in new and innovative ways. offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently. multimedia: making video and audio first-class citizens in the open web. ...
... styling: letting authors write more sophisticated themes. ...
...And 12 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
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 theoretically you can use as many <iframe>s as you like, check for performance problems. content categories flow content, phrasing content, embedded content, interactive content, palpable content. permitted content none. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts embedded content. implicit aria role no corresponding role permitted aria roles application, document, img, none, present...
.... tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts embedded content. implicit aria role no corresponding role permitted aria roles application, document, img, none, presentation dom interface htmliframeelement attributes this element includes the global attributes. ...
... permitted aria roles application, document, img, none, presentation dom interface htmliframeelement attributes this element includes the global attributes. allow specifies a feature policy for the <iframe>. see the article privacy, permissions, and information security for details on security issues and how <iframe> works with feature policy to keep systems safe. allowfullscreen set to true if the <iframe> can activate fullscreen mode by calling the requestfullscreen() method. this attribute is considered a legacy attribute and redefined as allow="fullscreen". ...
...And 12 more matches

Global attributes - HTML: Hypertext Markup Language
nts, even those not specified in the standard. that means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer html5-compliant. for example, html5-compliant browsers hide content marked as <foo hidden>...</foo>, even though <foo> is not a valid html element. in addition to the basic html global attributes, the following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes. the multiple aria-* attributes, used for improving accessibility. the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, ...
...ist of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer keyboard layout. autocapitalize controls whether and how text input is automatically capitalized as it is entered/edited by the user. ...
... for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer keyboard layout. autocapitalize controls whether and how text input is automatically capitalized as it is entered/edited by the user. ...
...And 12 more matches

Digital audio concepts - Web media technologies
sound wave. this analog signal is then converted into digital form by a circuit that captures the incoming wave's amplitude at regular intervals, converting that data into a number in a form that is understood by the audio recording system. each of these captured moments is a sample. by chaining all the samples together, you can approximately represent the original wave, as seen in the diagram below. in this example, the blue line represents the samples taken from the audio waveform, which is black. at regular intervals, the a/d converter circuitry reads the voltage of the signal as a value between (in this case) -1.0 and +1.0. since the amplitude varies over the duration of that time slice, the a/d converter must choose a value to represent that slice, whether by simply taking the value ...
...e to audio codecs used on the web. audio channels and frames there are two types of audio channel. standard audio channels are used to present the majority of the audible sound. the sound for the left and right main channels, as well as all of your surround sound speakers (center, left and right rear, left and right sides, ceiling channels, and so forth) are all standard audio channels. special low frequency enhancement (lfe) channels provide the signal for special speakers designed to produce the low frequency sounds and vibration to create a visceral sensation when listening to the audio. the lfe channels typically drive subwoofers and similar devices. monophonic audio has one channel, stereo sound has two channels, 5.1 surround sound has 6 channels (five standard and one lfe), and so fo...
...minimum "high fidelity" sampling rate. the nyquist-shannon sampling theorem dictates that to reproduce a sound accurately, it must be sampled at twice the rate of the sound's frequency. since the range of human hearing is from around 20 hz to 20,000 hz, reproducing the highest-pitched sounds people can generally hear requires a sample rate of more than 40,000 hz. to provide additional room for a low-pass filter in order to avoid distortion caused by aliasing, an additional 2.05 khz transition band is added to the pre-sampling frequency (resulting in 22,050 hz). doubling that per the nyquist theorem results in a final minimum frequency of (you guessed it) 44.1 khz. high-resolution (96 khz) audio is used in some high-end audio systems, and it and ultra-high resolution (192 khz) audio are usef...
...And 12 more matches

platform/xpcom - Archive of obsolete content
om there. implementing xpcom interfaces this module exports a class called unknown which implements the fundamental xpcom interface nsisupports. by subclassing unknown, either using standard javascript inheritance or using the sdk's heritage module, you can provide your own implementations of xpcom interfaces. "unknown" is named after the "iunknown" interface in com. for example, the add-on below implements the nsiobserver interface to listen for and log all topic notifications: var { class } = require('sdk/core/heritage'); var { unknown } = require('sdk/platform/xpcom'); var { cc, ci } = require('chrome') var observerservice = cc['@mozilla.org/observer-service;1']. getservice(ci.nsiobserverservice); var starobserver = class({ extends: unknown, interfaces: [...
...{ console.log('star observer:', subject, topic, data); } }); var starobserver = starobserver(); starobserver.register(); implementing xpcom factories the xpcom module exports a class called factory which implements the nsifactory interface. you can use this class to register factories for xpcom components you have defined. ...
...er.register(); implementing xpcom factories the xpcom module exports a class called factory which implements the nsifactory interface. you can use this class to register factories for xpcom components you have defined. for example, this add-on defines a subclass of unknown called helloworld that implements a function called hello. by creating a factory and passing it the contract id for the helloworld component and the helloworld constructor, we enable xpcom clients to access the helloworld component, given its contract id. in this example the helloworld component is available to javascript only, so we use the technique documented under the "using wrappedjsobject" section of how to build an xpcom component in javascript. var { class } = require('sdk/core/heritage'); var { unknown, factor...
...And 11 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
« previousnext » this document was authored by hiroshi shimoda of clear code inc. and was originally published in japanese for the firefox 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. ...
...lues) as a size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3). <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom). use the ordinal attribute to alter their order. the ordinal attribute takes positive integer values, which are used to order the box’s layout—in the example in listing 5, the buttons would be laid out in the order button3, button2, button1 (figure 4). if multiple elements have the same ordinal value, t...
...6. if you are creating elements that can grow using the flex attribute, you can also set minimums and maximums using minwidth, minheight, maxwidth, and maxheight. these all use pixels as the unit of size. <button label="button" width="200" height="100"/> listing 6: setting the size of a button also, as shown in listing 7, you can embed css inline into elements via the style attribute, which allows you to set sizes using units other than pixels. <button label="button" style="min-width: 10em;"/> listing 7: setting the size of a button using css markup hidden and collapsed the hidden and collapsed attributes act as switches to turn off the display of elements. setting hidden="true" disables display of that element. this has the same effect as setting display: none in css. you would use...
...And 11 more matches

The Essentials of an Extension - Archive of obsolete content
code, starting with the install.rdf file. you can open it with any text editor. the file is formatted in a special flavor of xml called rdf. rdf used to be the central storage mechanism for firefox, but it is now being replaced for a simpler database system. we'll discuss both of these storage systems further ahead in the tutorial. now let's look at the important parts of the file. <em:id>helloworld@xulschool.com</em:id> this is the unique identifier for the extension. firefox needs this to distinguish your extension from other extensions, so it is required that you have an id that is unique. there are two accepted standards for add-on ids. one is the email-like format in the hello world example, which should be something like <project-name>@<yourdomain>. the other standard practice ...
...s installed, that you can see in the add-ons manager. there are many other tags that can be added, for contributors and translators. the full specification of the install.rdf file has all the details. since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. a localized description and name can be added with the following code: <em:localized> <description> <em:locale>es-es</em:locale> <em:name>xul school hola mundo</em:name> <em:description>bienvenido a xul school!</em:description> </description> </em:localized> the es-es locale string indicates that this is the spanish (es) localization for spain (es). you can add as many <em:localized> sections as you need. for firefox 2, localizing this...
...nsion that works on multiple applications and versions. for example, if you create a firefox extension, it would normally take little effort to port it to seamonkey, which has very similar features and ui. the min and max version specify the version range in which the extension can be installed. here's more about the version format. if the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state. users can disable version checks through preferences or installing add-ons like the add-on compatibility reporter. beginning with firefox 11, add-ons will default to compatible and firefox will mostly ignore the version range. testing your add-ons with every firefox version is always recommended, though. this is ...
...And 11 more matches

MMgc - Archive of obsolete content
jects more concisely: using namespace mmgc; ... gc* gc = gc::getgc(this); gcobject* gcobject; gc class the class mmgc::gc is the main class of the gc. it represents a full, self-contained instance of the garbage collector. it may be multiply instantiated; you may have multiple instances of the garbage collector running at once. each instance manages its own set of objects; objects are not allowed to reference objects in other gc instances. the gc typically is constructed early in your program's initialization, and then passed to operations like operator new for allocating gc objects. there are a few methods that you may need to call directly, such as alloc and free. gc::alloc, gc::free the alloc and free methods are garbage-collected analogs for malloc and free. memory allocated with al...
...delete operator. only do this if you know for certain that there are no other references, and you want to help the gc along: // optimization: get rid of myobject now, because we know there are no other // references, so no need to wait for gc to clean it up. delete myobject; the destructor for a gcobject will never be called (unless the object is also a descendant of gcfinalizedobject... see below.) class myobject : public mmgc::gcobject { ~myobject() { assert(!"this will never be hit (unless we also descend from gcfinalizedobject)"); } }; gcobject::getweakref gcweakref *getweakref() const; the getweakref method returns a weak reference to the object. normally, a pointer to the object is considered a hard reference -- any such reference will prevent the object from being destroyed. som...
...finalizer. if you don't subclass gcfinalizedobject or rcfinalizedobject, any c++ destructor on your garbage collected class will basically be ignored. only if you subclass gcfinalizedobject or rcfinalizedobject will mmgc know that you want finalization behavior on your class. ...
...And 11 more matches

What is RSS - Archive of obsolete content
stood for rich site summary. in july of 1999 netscape's rss 0.91 was released. like rss 0.90, netscape's rss 0.91 was also a format for providing a summary of a website, and not really a syndication format (as it is today). netscape's rss 0.91 was created to simplify things. rss 0.90 was rdf-based, which many found to be overly complex. netscape's rss 0.91 was only xml-based and added a dtd to allow several entities (commonly found in html). so at this point netscape deprecated the rdf-based rss 0.90 and told everyone to use netscape's rss 0.91, which was xml-based. in june of 2000 userland's rss 0.91 was released. (and yes, that means that there are 2 different version of rss 0.91.) the difference between the two different versions of rss 0.91 -- netscape's rss 0.91 and userland's rss 0.9...
...<guid ispermalink="false">c1795324-d5ea-44fa-95b1-b5ce2090d4f1</guid> <pubdate>sun, 15 may 2005 13:02:08 -0700</pubdate> <link>http://news.example.com/artcle/552</link> </item> </channel> </rss> bloggers use rss to provide everyone with a list of their newest blog posts. ...
...d> <pubdate>sun, 15 may 2005 13:02:08 -0700</pubdate> <link>http://news.example.com/artcle/552</link> </item> </channel> </rss> bloggers use rss to provide everyone with a list of their newest blog posts. ...
...And 11 more matches

Introduction to SSL - Archive of obsolete content
sport and routing of data over the internet. other protocols, such as the hypertext transport protocol (http), lightweight directory access protocol (ldap), or internet messaging access protocol (imap), run "on top of" tcp/ip in the sense that they all use tcp/ip to support typical application tasks such as displaying web pages or running email servers. the ssl protocol runs above tcp/ip and below higher-level protocols such as http or imap. it uses tcp/ip on behalf of the higher-level protocols, and in the process allows an ssl-enabled server to authenticate itself to an ssl-enabled client, allows the client to authenticate itself to the server, and allows both machines to establish an encrypted connection. these capabilities address fundamental concerns about communication over the inte...
...ssl-enabled client software can use standard techniques of public-key cryptography to check that a server's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the client's list of trusted cas. ...
...e standard techniques of public-key cryptography to check that a server's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the client's list of trusted cas. this confirmation might be important if the user, for example, is sending a credit card number over the network and wants to check the receiving server's identity. ssl client authentication allows a server to confirm a user's identity. using the same techniques as those used for server authentication, ssl-enabled server software can check that a client's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the server's list of trusted cas. this confirmation might be important if the server, for example, is a bank sending confidential financial...
...And 11 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
have a look to the more current article writing forward-compatible websites to find modern informations. improper browser detection can lead to web maintenance nightmares. rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser web content. ...
...embers of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey. gecko was designed from the ground up to be compliant with the w3c html, w3c css, w3c xml, w3c dom, and ecmascript (javascript) standards. ...
...unfortunately, no other browser supports web standards as completely as gecko. this means web developers and authors are forced to continue to support other browsers which do not comply with the standards as fully. fortunately, other browsers such as opera (versions 7 & later) and to a lesser extent, internet explorer (versions 5.5 & later) also support the standards to a degree. ...
...And 11 more matches

RDF in Mozilla FAQ - Archive of obsolete content
f statements ("microtheories") together. statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular website comes from the "browser global history" datasource, and the "shortcut keyword" that you can type to reach that website comes from the "browser bookmarks" datasource. both datasources refer to "website" by url: this is the "key" that allows the datasources to be "merged" effectively. for a more detailed account of how to write a datasource, refer to the rdf datasource how-to. how does mozilla manage datasources? the rdf service manages a table of all loaded datasources. the table is keyed by the datasource's "uri", which is either the url of an rdf/xml file, or a "special" uri starting with rdf: that refers to a built-in datasou...
...ces.nsirdfservice); // ...and from it, get the datasource. make sure that your web server // dishes it up as text/xml (recommended) or text/rdf! var ds = rdf.getdatasource("http://www.mozilla.org/some-rdf-file.rdf"); // note that ds will load asynchronously, so assertions will not // be immediately available alternatively, you can create one directly using the xpcom component manager, as the following code fragment illustrates: // create an rdf/xml datasource using the xpcom component manager var ds = components .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"] .createinstance(components.interfaces.nsirdfdatasource); // the nsirdfremotedatasource interface has the interfaces // that we need to setup the datasource. var remote = ds.queryinterface(components.interfaces.n...
...n't loaded, but it's loading now!"); } say the datasource wasn't loaded, and is loading asynchronously. using this api and javascript's settimeout(), one could set up a polling loop that would continually check the loaded property. ...
...And 11 more matches

Accessible multimedia - Learn web development
="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> accessible audio and video controls implementing controls for web-based audio/video shouldn't be a problem, right? let's investigate. the problem with native html5 controls html5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box. for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio. here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="v...
... however, there are problems with these controls: they are not keyboard accessible in most browsers, i.e. you can't tab between the controls inside the native player. opera and chrome provide this to some degree, but it still isn't ideal. different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide. to remedy this, we can create our own custom controls. let's look at how. creating custom audio and video controls html5 video and audio share an api — html media element — which allows you to map custom functionality to buttons and other controls — both of which you define yourself. let's take the video example from above and add custom controls to them. basic set...
...html5 video. ...
...And 11 more matches

WAI-ARIA basics - Learn web development
wai-aria is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. here we'll show how to use it at a basic level to improve accessiblity. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course. ...
...others that describe different pages structures, such as role="banner", role="search", role="tabgroup", role="tab", etc., which are commonly found in uis. properties — these define properties of elements, which can be used to give them extra meaning or semantics. as an example, aria-required="true" specifies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">. as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing info...
...rs when an area of content is updated, e.g. via xmlhttprequest, or dom apis. enhancing keyboard accessibility: there are built-in html elements that have native keyboard accessibility; when other elements are used along with javascript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. where this is unavoidable, wai-aria provides a means to allow other elements to receive focus (using tabindex). accessibility of non-semantic controls: when a series of nested <div>s along with css/javascript is used to create a complex ui-feature, or a native control is greatly enhanced/changed via javascript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. ...
...And 11 more matches

Cascade and inheritance - Learn web development
d your css. this can seem like a set of tricky concepts to understand. as you get more practice writing css, however, the way it works will become more obvious to you. the cascade stylesheets cascade — at a very simple level this means that the order of css rules matter; when two rules apply that have equal specificity the one that comes last in the css is the one that will be used. in the below example, we have two rules that could apply to the h1. the h1 ends up being colored blue — these rules have an identical selector and therefore carry the same specificity, so the last one in the source order wins. specificity specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element. it is basically a mea...
...the last one in the source order wins. specificity specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element. ...
...ame element. it is basically a measure of how specific a selector's selection will be: an element selector is less specific — it will select all elements of that type that appear on a page — so will get a lower score. a class selector is more specific — it will select only the elements on a page that have a specific class attribute value — so will get a higher score. example time! below we again have two rules that could apply to the h1. the below h1 ends up being colored red — the class selector gives its rule a higher specificity, and so it will be applied even though the rule with the element selector appears further down in the source order. we'll explain specificity scoring and other such things later on. inheritance inheritance also needs to be understood in this c...
...And 11 more matches

HTML basics - Learn web development
ge; it is a markup language that defines the structure of your content. html consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. ...
...this states where the element begins or starts to take effect — in this case where the paragraph begins. ...
...re the element ends — in this case where the paragraph ends. failing to add a closing tag is one of the standard beginner errors and can lead to strange results. the content: this is the content of the element, which in this case, is just text. the element: the opening tag, the closing tag and the content together comprise the element. elements can also have attributes that look like the following: attributes contain extra information about the element that you don't want to appear in the actual content. here, class is the attribute name and editor-note is the attribute value. the class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. an attribute...
...And 11 more matches

Introduction to events - Learn web development
the handler is the code that is run in response to it happening. note: web events are not part of the core javascript language — they are defined as part of the apis built into the browser. a simple example let's look at a simple example of what we mean here. you've already seen events and event handlers used in many of the examples, but let's recap just to cement our knowledge. ...
... therefore, event handlers available. we are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body> background-color equal to it. this code is run whenever the click event fires on the <button> element, that is, whenever a user selects it. the example output is as follows: it's not just web pages another thing worth mentioning at this point is that events are not unique to javascript — most programming languages have some kind of event model, and the way the model works often differs from javascript's way. in fact, the event model in javascript for web pages differs from the event model for javascript as it is used in other environments. for example, node.
...ler property being used in this situation. it is essentially a property like any other available on the button (e.g. btn.textcontent, or btn.style), but it is a special type — when you set it to be equal to some code, that code is run when the event fires on the button. you could also set the handler property to be equal to a named function name (like we saw in build your own function). the following works just the same: const btn = document.queryselector('button'); function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } btn.onclick = bgchange; there are many different event handler properties available. let's experiment. first, make a local copy of random-color-eventhandlerproperty.ht...
...And 11 more matches

Introduction to web APIs - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, javascript basics (see first steps, building blocks, javascript objects). objective: to gain familiarity with apis, what they can do, and how you can use them in your code. what are apis? application programming interfaces (apis) are constructs made available in programming languages to allow developers to create complex functionality more easily. they abstract more complex code away from you, providing some easier syntax to use in its place. as a real-world example, think about the electricity supply in your house, apartment, or other dwellings. if you want to use an appliance in your house, you simply plug it into a plug socket and it works. you don't try to wire it directly into t...
... to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt. image source: overloaded plug socket by the clear communication people, on flickr. in the same way, if you want to say, program some 3d graphics, it is a lot easier to do it using an api written in a higher-level language such as javascript or python, rather than try to directly write low level code (say c or c++) that directly controls the computer's gpu or other graphics functions. 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 ...
...ser 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 do the actual audio processing. but again, this complexity is abstracted away from you by the api. third-party apis are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the web. for example, the twitter api allows you to do things like displaying your latest tweets on your website. it provide...
...And 11 more matches

Arrays - Learn web development
ady be annoying, but what about 100 items, or 1000? we'll return to this example later on in the article. as in previous articles, let's learn about the real basics of arrays by entering some examples into browser developer console. creating arrays arrays consist of square brackets and elements that are separated by commas. suppose we want to store a shopping list in an array. paste the following code into the console: let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; shopping; in the above example, each element is a string, but in an array we can store various data types — strings, numbers, objects, and even other arrays. we can also mix data types in a single array — we do not have to limit ourselves to storing only numbers in one array, and in another only st...
... to storing only numbers in one array, and in another only strings. for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['tree', 795, [0, 1, 2]]; before proceeding, create a few example arrays. accessing and modifying array items you can then access individual items in the array using bracket notation, in the same way that you accessed the letters in a string. enter the following into your console: shopping[0]; // returns "bread" you can also modify an item in an array by simply giving a single array item a new value. try this: shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] note: we've said it before, but just as a reminder — computers start counting from 0! note that an array inside an a...
...do something like this: random[2][2]; try making some more modifications to your array examples before moving on. play around a bit, and see what works and what doesn't. finding the length of an array you can find out the length of an array (how many items are in it) in exactly the same way as you find out the length (in characters) of a string — by using the length property. try the following: shopping.length; // should return 5 this has other uses, but it is most commonly used to tell a loop to keep going until it has looped through all the items in an array. so for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; for (let i = 0; i < sequence.length; i++) { console.log(sequence[i]); } you'll learn about loops properly later on (in our looping code article), but briefly, this ...
...And 11 more matches

Working with JSON - Learn web development
ng json. prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to understand how to work with data stored in json, and create your own json objects. no, really, what is json? json is a text-based data format following javascript object syntax, which was popularized by douglas crockford. even though it closely resembles javascript object literal syntax, it can be used independently from javascript, and many programming environments feature the ability to read (parse) and generate json. json exists as a string — useful when you want to transmit data across a network. it needs to be converted to a native ja...
...ile, which is basically just a text file with an extension of .json, and a mime type of application/json. json structure as described above, a json is a string whose format very much resembles javascript object literal format. you can include the same basic data types inside json as you can in a standard javascript object — strings, numbers, arrays, booleans, and other object literals. ...
...selector('section'); we have made our json data available on our github, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json. we are going to load it into our page, and use some nifty dom manipulation to display it, like this: obtaining the json to obtain the json, we use an api called xmlhttprequest (often called xhr). this is a very useful javascript object that allows us to make network requests to retrieve resources from a server via javascript (e.g. images, text, json, even html snippets), meaning that we can update small sections of content without having to reload the entire page. this has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail. to start with, we store the url of...
...And 11 more matches

Aprender y obtener ayuda - Learn web development
ation about each sub-topic should you wish.. effective learning let's move straight on and think about effective learning. different learning methods it is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning: focused learning is what you might more traditionally associate with academic subjects. you concentrate deeply on a low-level topic and solving the specific problems that it brings. you are focused on a narrow area. diffuse learning is more to do with high-level thinking around a wider area. you let your mind wander more widely, and seemingly make random connections between different things. this is more the kind of thinking you do while you are in the shower, or during a coffee break. from the studies that neu...
...effective for you to learn with. textual articles you'll find a lot of written articles on the web to teach you about web design. like most of this course, for example. some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the css background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember. there are also several other great resources on the web, some...
...u may have forgotten (such as "what is the syntax of the css background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember. there are also several other great resources on the web, some of which we'll mention below. note: the above text should have given you an important fact — you aren't expected to remember everything! professional web developers use tools like mdn web docs to look up things they have forgotten all the time. as you'll discover, learning web development is more about problem-solving and learning patterns than it is about learning lots of syntaxes. videos there are also a number of s...
...And 11 more matches

Client-Server Overview - Learn web development
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 example, to get a file or to save or update some data). the different methods/verbs and their associated actions are listed below: get: get a specific resource (e.g. an html file containing information about a product, or a list of products). post: create a new resource (e.g. add a new article to a wiki, add a new contact to a database). head: get the metadata information about a specific resource without getting the body like get would. you might for example use a head request to find out the last time a reso...
...of a successful response to a get request would contain the requested resource. when an html page is returned it is rendered by the web browser. as part of processing the browser may discover links to other resources (e.g. an html page usually references javascript and css pages), and will send separate http requests to download these files. ...
... the format of http messages is defined in a "web standard" (rfc7230). you don't need to know this level of detail, but at least now you know where this all came from! the request each line of the request contains information about it. ...
...And 11 more matches

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
tanding of modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them. objective: to continue our learning about components classes, start looking at conditional rendering, and wire up some of our footer functionality. ...
...r functionality. connecting the behavior in the footer to get the footer working, we need to implement the following thre areas of functionality: a pending todo counter. filters for all, active, and completed todos. a button to clear the completed todos. because we need access to our service from the footer component, we need to generate a class for the footer. ...
...r. filters for all, active, and completed todos. a button to clear the completed todos. because we need access to our service from the footer component, we need to generate a class for the footer. ...
...And 11 more matches

Vue conditional rendering: editing existing todos - Learn web development
we'll also look at adding functionality to delete todo items. ...
...ures of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn how to do conditional rendering in vue. creating an editing component we can start by creating a separate component to handle the editing functionality. in your components directory, create a new file called todoitemeditform.vue. ...
...this is a useful way to help reinforce everything you've learned so far. this code sets up the core of the edit functionality. we create a form with an <input> field for editing the name of our to-do. there is a "save" button and a "cancel" button: when the "save" button is clicked, the component emi...
...And 11 more matches

Implementing feature detection - Learn web development
p 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. therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in navigator) { navigator.geolocation.getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time. modernizr is the industry st...
...nd basic-styling.css files. save them in a new directory. we will add the html5 shiv to our example too so that the html5 semantic elements will style properly in older versions of ie. download the latest version (see manual installation), unzip the zip file, copy the html5shiv-printshiv.min.js and html5shiv.min.js files into your example directory, and link to one of the files by putting the following under your <title> element: <script src="html5shiv.min.js"></script> have a look at your example css files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels. you can look at the different effects these two files have b...
...ve by manually changing the css file referred to by the second <link> element, but let's instead implement some javascript to automatically swap them as needed. first, remove the contents of the second <link> element's href attribute. we will fill this in dynamically later on. next, add a <script></script> element at the bottom of your body (just before the closing </body> tag). ...
...And 11 more matches

Introduction to NSPR
the netscape portable runtime (nspr) api allows compliant applications to use system facilities such as threads, thread synchronization, i/o, interval timing, atomic operations, and several other low-level services in a platform-independent manner. this chapter introduces key nspr programming concepts and illustrates them with sample code. the current implementation of nspr allows developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix. nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
...trates them with sample code. the current implementation of nspr allows developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix. nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
...with sample code. the current implementation of nspr allows developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix. nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
...And 11 more matches

sslerr.html
has been requested." the application has attempted to configure ssl to use an unknown cipher suite. ssl_error_no_ciphers_supported -12265 "no cipher suites are present and enabled in this program." possible causes: (a) all cipher suites have been configured to be disabled, (b) the only cipher suites that are configured to be enabled are those that are disallowed by cipher export policy, (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected. ssl_error_bad_block_padding -12264 "ssl received a record with bad block padding." ssl was using a block cipher, and the last block in an ssl record had incorrect padding information...
...this probably indicates a flaw in the remote peer's implementation. ...
...this probably indicates a flaw in the remote peer's implementation. ssl_error_rx_malformed_hello_request -...
...And 11 more matches

Hacking Tips
pan 9 getting the bytecode of a function (from gdb) in jsopcode.cpp, a function named js::disassembleatpc can print the bytecode of a script. some variants of this function such as js::dumpscript etc are convenient for debugging. printing the js stack (from gdb) in jsobj.cpp, a function named js::dumpbacktrace prints a backtrace à la gdb for the js stack. the backtrace contains in the following order, the stack depth, the interpreter frame pointer (see js/src/vm/stack.h, stackframe class) or (nil) if compiled with ionmonkey, the file and line number of the call location and under parentheses, the jsscript pointer and the jsbytecode pointer (pc) executed. $ gdb --args js […] (gdb) b js::reportoverrecursed (gdb) r js> function f(i) { if (i % 2) f(i + 1); else f(i + 3); } js> f(0...
... since spidermonkey 48, we have a gdb unwinder. this unwinder is able to read the frames created by the jit, and to display the frames which are after these jit frames. $ gdb --args out/dist/bin/js ./foo.js […] spidermonkey unwinder is disabled by default, to enable it type: enable unwinder .* spidermonkey (gdb) b js::math_cos (gdb) run […] #0 js::math_cos (...
...erjitdata&) (cx=0x14f2640, data=...) at js/src/jit/baselinejit.cpp:150 note, when you enable the unwinder, the current version of gdb (7.10.1) does not flush the backtrace. therefore, the jit frames do not appear until you settle on the next breakpoint. ...
...And 11 more matches

Component Internals
next chapter, where the weblock component tutorial takes you step by step through the component creation process. xxx mediawiki...xxx sucks creating components in c++ let's start by examining how xpcom components are written in c++. the most common type of component is one that is written in c++ and compiled into a shared library (a dll on a windows system or a dso on unix). the illustration below shows the basic relationship between the shared library containing the component implementation code you write and the xpcom framework itself. in this diagram, the outer boundary is that of the module, the shared library in which a component is defined. a component in the xpcom framework when you build a component or module and compile it into a library, it must export a single method named n...
...the application startup itself. a web browser that embeds gecko, for example, may initialize xpcom at startup through the embedding apis. another application may delay this startup until xpcom is needed for the first time. in either case, the initialization sequence within xpcom is the same. xpcom starts when the application makes a call to initialize it. ...
... if there are new components, xpcom registers them: xpcom calls autoregistration start. xpcom registers new components. ...
...And 11 more matches

Creating the Component Code
. this object provides basic abstraction of the xpcom object itself. as you can see in onion peel view of xpcom component creation, the main accessor for the xpcom object is createinstance, which is expected to return the object that matches a given cid and iid pair. moving another layer outward is the nsimodule. this interface provides yet another abstraction of the nsifactory object, and may allow for multiple nsifactory objects. the key to this interface is that the return type of getclassobject does not have to be an nsifactory. instead, the nsimodule can ask for implementation details about the xpcom object. this is very useful if the caller is required to know information about the component like its threading module, whether or not it's a singleton, its implementation language, and so...
...s instances of your component to clients. these three interface implementations - for the component functionality, nsimodule interface, and for the nsifactory interface - are the basic pieces of code you need to write to create an xpcom component. basic structure of the weblock component source weblock1.cpp that defines these classes and the code you need to create a basic component has the following structure: * required includes and constants * weblock: public iweblock * weblockfactory: public nsifactory * weblockmodule: public nsimodule in xpcom, all of these classes also derive from the nsisupports base interface. digging in: required includes and constants let's take a look at the first several lines of code in the component and discuss what they mean in xpcom. the i...
...an in xpcom. the includes and definitions at the top of an xpcom source file can give you an idea about some of the data types and techniques we'll be discussing more in the upcoming chapters. for example, mozilla_strict_api is a variable that shields you from certain private, non-xpcom headers. for example, including nsicomponentmanager.idl without mozilla_strict_api defined will include the following headers, which are not supported across versions (unfrozen): nscomponentmanagerutils.h nscomponentmanagerobsolete.h these variables are picked up by files that do not specify themselves as mozilla_strict_api. includes and constants in weblock1.cpp #include <stdio.h> // may be defined at the project level // in the makefile #define mozilla_strict_api #include "nsimodule.h" #include "n...
...And 11 more matches

Introduction to XPCOM for the DOM
set of methods that manipulate an object (often represented by a class), without worrying about the details of the implementation. if you know a class implements an interface, just use the methods in the interface, and you don't have to care if the implementation of the interface (the concrete class) changes. xpcom pushes this concept to the extreme. pure virtual methods are declared with the following syntax: virtual nsresult functionfoo() = 0; an interface is thus simply a c++ class where all the member functions are declared as pure virtual functions. an interface can also be defined using xpidl. this is described in section 1.e, "how to add an interface". since an interface doesn't have any implementation, it has to be implemented by a non-abstract class -- a concrete class. if the i...
...ons. an interface can also be defined using xpidl. this is described in section 1.e, "how to add an interface". since an interface doesn't have any implementation, it has to be implemented by a non-abstract class -- a concrete class. if the interface is called nsifoo and the class is called nsfoo, we say that "nsfoo implements nsifoo", or that "nsfoo inherits from nsifoo". the c++ code is the following: class nsfoo : public nsifoo for those unfamiliar with object-oriented c++, this means that nsfoo is declared as "derived from" nsifoo, and that nsifoo is a "base class" of nsfoo. for this introduction you don't need to know more about object-oriented c++. however the section 1.f provides a more detailed discussion about it, and is necessary to understand most of the dom code. an instance ...
...l never change anymore. the good thing is that your code will (in the best condition) last forever. the bad thing is that we have to find a way to improve those interfaces, and freezing them obliges implementers to create new interfaces. in summary, manipulate an interface rather than its implementation whenever possible! a pointer to an interface nsifoo implemented by nsfoo can be declared as follows nsifoo *fooptr = new nsfoo; a pointer such as fooptr is then called a "pointer to an interface nsifoo implemented by an instance of the nsfoo class", or "pointer to nsifoo" in short. from now on, when i speak of a "pointer to an interface", i really mean a "pointer to an interface implemented by an instance of a concrete c++ class". the important thing to note is that a pointer to nsifoo can ...
...And 11 more matches

Plug-in Basics - Plugins
gives you an overview of the way that plug-ins operate in the browser. when gecko starts, it looks for plugin modules in particular places on the system. for more information about where gecko looks for plugin modules on different systems, see how gecko finds plug-ins. when the user opens a page that contains embedded data of a media type that invokes a plug-in, the browser responds with the following sequence of actions: check for a plug-in with a matching mime type load the plug-in code into memory initialize the plug-in create a new instance of the plug-in gecko can load multiple instances of the same plug-in on a single page, or in several open windows at the same time. if you are browsing a page that has several embedded realaudio clips, for example, the browser will create as ...
...s these stages in more detail. understanding the runtime model plug-ins are dynamic code modules that are associated with one or more mime types. when the browser starts, it enumerates the available plug-ins (this step varies according to platform), reads resources from each plug-in file to determine the mime types for that plug-in, and registers each plug-in library for its mime types. the following stages outline the life of a plug-in from loading to deletion: when gecko encounters data of a mime type registered for a plug-in (either embedded in an html page or in a separate file), it dynamically loads the plug-in code into memory, if it hasn't been loaded already, and it creates a new instance of the plug-in. gecko calls the plug-in api function np_initialize when the plug-in code ...
...n to generate additional threads to handle processing at any stage in its lifespan, you should be careful to isolate these from plug-in api calls. see initialization and destruction for more information about using these methods. plug-in detection gecko looks for plug-ins in various places and in a particular order. the next section, how gecko finds plug-ins, describes these rules, and the following section, checking plug-ins by mime type, describes how you can use javascript to locate plug-ins yourself and establish which ones are to be registered for which mime types. how gecko finds plug-ins when a gecko-based browser starts up, it checks certain directories for plug-ins, in this order: windows directory pointed to by moz_plugin_path environment variable. %appdata%\mozilla\plugi...
...And 11 more matches

Using the CSS Painting API - Web APIs
ive the worklet — this is the name we will use in our css as the parameter of the paint() function when we want to apply this styling to an element. the second parameter is the class that does all the magic, defining the context options and what to paint to the two-dimensional canvas that will be our image. registerpaint('headerhighlight', class { /* define if alphatransparency is allowed alpha is set to true by default. if set to false, all colours used on the canvas will be fully opaque */ static get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context a subset of the html5 canvas api. */ paint(ctx) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect(0, 15, 200, 20); ...
... } /* ctx is the 2d drawing context a subset of the html5 canvas api. */ paint(ctx) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect(0, 15, 200, 20); /* order: x, y, w, h */ } }); in this class example we have defined a single context option with the contextoptions() function: we returned a simple object stating alpha transparency is allowed. we have then used the paint() function to paint to our canvas. a paint() function can take three arguments. here we have provided one argument: the rendering context (we'll look at more in due course), often refered to by the variable name ctx. the 2d rendering context is a subset of the html5 canvas api; the version available to houdini (called the paintrenderingcontext2d) is a further subs...
...ndering context is a subset of the html5 canvas api; the version available to houdini (called the paintrenderingcontext2d) is a further subset containing most of the features available in the full canvas api with the exception of the canvasimagedata, canvasuserinterface, canvastext, and canvastextdrawingstyles apis. we define the fillstyle as being hsla(55, 90%, 60%, 1.0), which is a shade of yellow, and then call fillrect() to create a rectangle of that color. the fillrect() parameters are, in order, x-axis origin, y-axis origin, width, and height. fillrect(0, 15, 200, 20) results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box. we can use the css background-size and background-position pr...
...And 11 more matches

Using Fetch - Web APIs
oss-site cookies; you can’t can establish a cross site session using fetch. set-cookie headers from other sites are silently ignored. fetch won’t send cookies, unless you set the credentials init option. (since aug 25, 2017. the spec changed the default credentials policy to same-origin. firefox changed since 61.0b13.) a basic fetch request is really simple to set up. have a look at the following code: fetch('http://example.com/movies.json') .then(response => response.json()) .then(data => console.log(data)); here we are fetching a json file across the network and printing it to the console. the simplest use of fetch() takes one argument — the path to the resource you want to fetch — and returns a promise containing the response (a response object). this is just an http res...
...nd response objects.) note: the body mixin also has similar methods to extract other types of body content; see the body section for more. fetch requests are controlled by the connect-src directive of content security policy rather than the directive of the resources it's retrieving. supplying request options the fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings: see fetch() for the full options available, and more details. // example post method implementation: async function postdata(url = '', data = {}) { // default options are marked with * const response = await fetch(url, { method: 'post', // *get, post, put, delete, etc. mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache',...
...ch(url, { method: 'post', // *get, post, put, delete, etc. ...
...And 11 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
in this guide we will be exploring the three properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis. fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox. ...
... .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. ...
... 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 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 wor...
...And 11 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
#d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="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 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 without causing an overflow. you can however control the size of these rows with the property grid-auto-rows. to cause all created rows to be 100 pixels tall for example you would use: * {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; pa...
... <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content. <br>max is auto <br>so the row expands. </div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } you can also pass in a track listing, this will repeat. the following track listing will create an initial implicit row track as 100 pixels and a second as 200px. this will continue for as long as content is added to the implicit 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: #ff...
...And 11 more matches

Using CSS gradients - CSS: Cascading Style Sheets
n in a clockwise direction. negative angles run in the counterclockwise direction. declaring colors & creating effects all css gradient types are a range of position-dependent colors. the colors produced by css gradients can vary continuously with position, producing smooth color transitions. it is also possible to create bands of solid colors, and hard transitions between two colors. ...
...to fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. ...
...nsition to the adjacent color stop's color through the adjacent color stop's first position. ...
...And 11 more matches

text-transform - CSS: Cascading Style Sheets
the text-transform css property specifies how to capitalize an element's text. it can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. it also can help improve legibility for ruby. 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 text-transform property takes into account language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i. in german (de), the ß b...
... the ij digraph becomes ij, even with text-transform: capitalize, which only puts the first letter of a word in uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ). ...
... in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ). in greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. when applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context. in irish (ga), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example text-transform: uppercase will change ar aon tslí to ar aon tslÍ and not, as one might expect, ar aon tslÍ (firefox only). in some cases, a hyphen is also removed upon upperca...
...And 11 more matches

HTML attribute reference - HTML: Hypertext Markup Language
accesskey global attribute keyboard shortcut to activate or add focus to the element. action <form> the uri of a program that processes the information submitted via the form. align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element. allow <iframe> specifies a feature-policy for the iframe. alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed. async <script> executes the script asynchronously. autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <...
...e element. decoding <img> indicates the preferred method to decode the image. default <track> indicates that the track should be enabled unless the user's preferences indicate something different. defer <script> indicates that the script should be executed after the page has been parsed. dir global attribute defines the text direction. allowed values are ltr (left-to-right) or rtl (right-to-left) dirname <input>, <textarea> disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> indicates whether the user can interact with the element. download <a>, <area> indicates that the hyperlink is to be used for downloading a resource. dragga...
...ements listed here. for all other elements, use the css height property. note: in some instances, such as <div>, this is a legacy attribute, in which case the css height property should be used instead. hidden global attribute prevents rendering of given element, while keeping child elements, e.g. script elements, active. high <meter> indicates the lower bound of the upper range. href <a>, <area>, <base>, <link> the url of a linked resource. hreflang <a>, <area>, <link> specifies the language of the linked resource. http-equiv <meta> defines a pragma directive. icon <command> specifies a picture which represents the command. id global attribute often used with css to sty...
...And 11 more matches

Date and time formats used in HTML - HTML: Hypertext Markup Language
601, so there can be subtle differences in how date and time strings are expected to look. character set dates and times in html are always strings which use the ascii character set. year numbers in order to simplify the basic format used for date strings in html, the specification requires that all years be given using the modern (or proleptic) gregorian calendar. while user interfaces may allow entry of dates using other calendars, the underlying value always uses the gregorian calendar. while the gregorian calendar wasn't created until the year 1582 (replacing the similar julian calendar), for html's purposes, the gregorian calendar is extended back to the year 1 c.e. make sure any older dates account for this. for the purposes of html dates, years are always at least four digits lon...
...s to the algorithm (taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days). scientists occasionally add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of earth's rotation. while month 02, february, normally has 28 days, it has 29 days in leap years. months of the year there are 12 months in the year, numbered 1 through 12. they are always represented by a two-digit ascii string whose value ranges from 01 through 12. see the table in the section days of the month for the month numbers and their corresponding names (and lengths in days). d...
...cii string whose value ranges from 01 through 12. see the table in the section days of the month for the month numbers and their corresponding names (and lengths in days). days of the month month numbers 1, 3, 5, 7, 8, 10, and 12 are 31 days long. months 4, 6, 9, and 11 are 30 days long. month 2, february, is 28 days long most years, but is 29 days long in leap years. this is detailed in the following table. the months of the year and their lengths in days month number name (english) length in days 01 january 31 02 february 28 (29 in leap years) 03 march 31 04 april 30 05 may 31 06 june 30 07 july 31 o8 august 31 09 september 30 ...
...And 11 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
s so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy. use both width and height to set the intrinsic size 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. a complete guide to image formats supported by web browsers is available.
... 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. 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. abbreviation file format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari...
..."tainted". if the crossorigin attribute is not specified, then a non-cors request is sent (without the origin request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> elements. ...
...And 11 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
favicon.ico"> 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 fea...
... 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 that is body-ok. for example, the stylesheet link type is body-ok, and therefore <link rel="stylesheet"> is permitted in the body. however, this isn't a good practice to follow; it makes more sense to separate your <link> elements from your body content, putting them in the <head>. when using <link> to establish a favicon for a site, and your site uses a content security policy (csp) to enhance its security, the policy applies to the favicon. if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is no...
...butes. as this attribute is only used when rel="preload" or rel="prefetch" has been set on the <link> element. it specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct accept request header. furthermore, rel="preload" uses this as a signal for request prioritization. the table below lists the valid values for this attribute and the elements or resources they apply to. value applies to audio <audio> elements document <iframe> and <frame> elements embed <embed> elements fetch fetch, xhr this value also requires <link> to contain the crossorigin attribute. ...
...And 11 more matches

Evolution of HTTP - HTTP
the http protocol used in those early phases was very simple, later dubbed http/0.9, and sometimes as the one-line protocol. http/0.9 – the one-line protocol the initial version of http had no version number; it has been later called 0.9 to differentiate it from the later versions. http/0.9 is extremely simple: requests consist of a single line and start with the only possible method get followed by the path to the resource (not the url as both the protocol, server, and port are unnecessary once connected to the server). get /mypage.html the response is extremely simple too: it only consisted of the file itself. <html> a very simple html page </html> unlike subsequent evolutions, there were no http headers, meaning that only html files could be transmitted, but no other type of docu...
...ml file was 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 header...
...o transmit other documents than plain html files has been added (thanks to the content-type header). ...
...And 11 more matches

An overview of HTTP - HTTP
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. ...
...os). the web browser then mixes these resources to present to the user a complete document, the web page. scripts executed by the browser can fetch more resources in later phases and the browser updates the web page accordingly. a web page is a hypertext document. this means some parts of displayed text are links which can be activated (usually by a click of the mouse) to fetch a new web page, allowing the user to direct their user-agent and navigate through the web. the browser translates these directions in http requests, and further interprets the http responses to present the user with a clear response. the web server on the opposite side of the communication channel, is the server, which serves the document as requested by the client. a server appears as only a single machine virtuall...
... can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. proxies may perform numerous functions: caching (the cache can be public or private, like the browser cache) filtering (like an antivirus scan or parental controls) load balancing (to allow multiple servers to serve the different requests) authentication (to control access to different resources) logging (allowing the storage of historical information) basic aspects of http http is simple http is generally designed to be simple and human readable, even with the added complexity introduced in http/2 by encapsulating http messages into frames. http messages can be read and under...
...And 11 more matches

Modules - Archive of obsolete content
host application to provide us with this functionality. applications such as firefox and thunderbird are based on xulrunner. xulrunner adds a built-in object, known as components, to the global scope. this object forms the central access point for all functionality provided by the host application. a complete explanation of how to use components is out of scope for this document. ...
...unction loadscript(url) { loader.loadsubscript(url); } when a script is loaded, it is evaluated in the scope of the global object of the script that loaded it. any property defined on the global object will be accessible from both scripts: // index.js: loadscript("www.foo.com/a.js"); foo; // => 3 // a.js: foo = 3; exporting names the script loader we obtained from the components object allows us load scripts from other locations, but its api is rather limited. for instance, it does not know how to handle relative urls, which is cumbersome if you want to organize your project hierarchically. a more serious problem with the loadscript function, however, is that it evaluates all scripts in the scope of the same global object. this becomes a problem when two scripts try to define the sam...
...s", since it is overwritten by "b.js". to prevent scripts from interfering with each other, loadscript should evaluate each script to be loaded in the scope of their own global object, and then return the global object as its result. in effect, any properties defined by the script being loaded on its global object are exported to the loading script. ...
...And 10 more matches

Extension Versioning, Update and Compatibility - Archive of obsolete content
add-on versioning add-ons should specify their versions using the toolkit version format. as a rough overview this is a version string split by periods, some examples: 2.0 1.0b1 3.0pre1 5.0.1.2 note: before firefox 1.5 the more basic firefox version format was used: major.minor.release.build[+] where only digits were allowed. the toolkit version format supports the firefox version format but allows greater flexibility. how applications determine compatibility when installing add-ons applications look at the targetapplication entries in the add-on's install.rdf. an entry must exist with an id matching the id of the application. additionally the minversion and maxversion of this entry must be a range that includes the version of the running application. if the application ha...
...updateurl. if the install.rdf contains any targetplatform entries then the platform of the currently running application must be listed or the installation will be rejected. firefox 3 note in applications based on gecko 1.9 you can also use a targetapplication entry with an id toolkit@mozilla.org and minversion and maxversion that match the toolkit version of the running application. this allows you to say that your add-on will install into any toolkit based application. overriding compatibility checking for testing purposes you can tell the application to somewhat ignore compatibility checks when installing add-ons. simply create the boolean preference extensions.checkcompatibility and set it to false. note: before firefox 1.5 the preference app.extensions.version could be used t...
...cation. overriding compatibility checking for testing purposes you can tell the application to somewhat ignore compatibility checks when installing add-ons. simply create the boolean preference extensions.checkcompatibility and set it to false. note: before firefox 1.5 the preference app.extensions.version could be used to override the version that the application believed itself to be to allow normally incompatible extensions to install. choosing minversion and maxversion minversion and maxversion should specify the range of versions of the application you have tested with. in particular you should never specify a maxversion that is larger than the currently available version of the application since you do not know what api and ui changes are just around the corner. with compatibili...
...And 10 more matches

Tabbed browser - Archive of obsolete content
in the onload handler will be a 'tab' xul element). see tabbrowser for getbrowserfortab(). note that the code above does not work inside of the electrolysis (e10s) enabled tabs. opening a url in the correct window/tab there are methods available in chrome://browser/content/utilityoverlay.js that make it easy to open url in tabs such as openuilinkin and openuilink. ...
...the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. xul: <menuitem oncommand="myextension.foo(even...
...the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="...
...And 10 more matches

Creating a Help Content Pack - Archive of obsolete content
original doc: http://www.mozilla.org/projects/help.../content_packs i hesitate to call it "original", tho, because i've basically rewritten the entire thing so that it's easier and faster to use to create help content. the previous document had a lot of places where ideas were simply introduced without explanation, and i've tried to go through things a bit more slowly with better descriptions. this is still very much a work in progress, tho, and i need to complete the rest of it soon (where "complete" means "use what's there that's good, build on the stuff that's not as good, and add other useful information as necessary". this document describes how to integrate html help documentation into your application using the mozilla help viewer. documentation contained in the help viewer ca...
... actually an advantage - if you make an error you'll know immediately, and you should be able to easily figure out what the problem is by directly loading the file in firefox. later, when we get to actually writing content, you'll need to know xhtml, but for now knowledge of the syntax should be enough. open up your favorite text editor and create the file content-pack.rdf. insert into it the following text: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> </rdf:rdf> if you're familiar with html or xml, you might recognize this as the container element for the whole document. it serves as a wrapper around the entire contents of the file, marking it as rdf. next, you'll need to insert a rdf:descri...
...nt. it serves as a wrapper around the entire contents of the file, marking it as rdf. next, you'll need to insert a rdf:description element into the file, inside the rdf:rdf element just created: <rdf:description rdf:about="urn:root" nc:title="" nc:defaulttopic="" nc:base=""> </rdf:description> fill in the attributes as follows: rdf:about must be urn:root or your pack won't work. this attribute marks the start point in the rdf graph described by the file, and the help viewer searches for this element in order to query for further information (stored in child elements) about the content pack being parsed. nc:title is where you specify the title (e.g., "mozilla firefox help") for the help window. this attribute is re...
...And 10 more matches

splitter - Archive of obsolete content
state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy element inside the splitter when it is used for collapsing. none no collapsing occurs. before when the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that i...
... before the splitter in the same parent is collapsed so that its width or height is 0. after when the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0. both either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter. resizeafter type: one of the values below this attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned. closest the element immediately to the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the rig...
...imum size due to the position of the splitter. resizeafter type: one of the values below this attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned. closest the element immediately to the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size. flex the closest flexible element resizes. ...
...And 10 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
ent was started on july 27, 2012 so it will take some time to completely fill in and some issues still need to have solutions written for them. operating system specific issues windows 7 windows 7 aero missing right-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar. please see the following threads on mozillazine 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 follo...
...s 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 and this mozillazine thread. ...
...olor: -moz-dialog!important; } } for 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. ...
...And 10 more matches

Windows Media in Netscape - Archive of obsolete content
. an advantage of the client-side approach is that it is also possible to detect if windows media player is installed. client-side detection using javascript objects internet explorer implements the activexobject object to create new instances of activex controls. netscape 7.1 introduces geckoactivexobject which can be used in a similar way to create instances of the windows media player. the following javascript illustrates one approach using object detection of activexobject and geckoactivexobject to determine if the windows media activex control is supported and available for use. javascript will dynamically write out what browser you are running, and what kind of windows media player technology you may have. example 1: client-side detection scripts browser architecture supports: netsc...
...at browser you are running, and what kind of windows media player technology you may have. example 1: client-side detection scripts browser architecture supports: netscapeplugin windows media player installed: true windows media scriptable: false windows media version: pluginversion a complete source code listing showing how that detection was done can be found here (devedge-temp). ...
...mplayer.ocx.7 as an argument to both these apis creates a fully usable reference to the windows media player 7 or 9 control, with all the methods and properties exposed to javascript. furthermore, you know for certain that you are working with the windows media 7 or 9 control -- there is no comparable instantiation for the windows media player 6 control. ...
...And 10 more matches

Grids - Learn web development
cally 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 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 fo...
...we use the grid value of the display property. as with flexbox, this switches on grid layout, and all of the direct children of the container become grid items. add this to the css inside your file: .container { display: grid; } unlike flexbox, the items will not immediately look any different. declaring display: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. to see something that looks more grid-like, we will need to add some columns to the grid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. .container { display: grid; grid-template-columns: 200px 200px 200px; } add the 2nd declaration to your css rule, then reload the page, and you sh...
... <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and percentages, we can use the fr unit to flexibly size grid rows and columns. this unit represents one fraction of the available space in the grid container. change your track listing to the following definition, creating three 1fr tracks. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } you should now see that you have flexible tracks. the fr unit distributes space in proportion, therefore you can give different positive values to your tracks, for example if you change the definition like so: .container { display: grid; grid-template-columns: 2fr 1fr 1fr...
...And 10 more matches

Choosing the right approach - Learn web development
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 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 disp...
...rt full support compatibility unknown compatibility unknownsee implementation notes.see implementation notes. further information cooperative asynchronous javascript: timeouts and intervals, in particular settimeout() settimeout() reference setinterval() setinterval() is a method that allows you to run a function repeatedly with a set interval of time between each execution. not as efficient as requestanimationframe(), but allows you to choose a running rate/frame rate. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes no (unless it is the same one) no code ex...
... function repeatedly with a set interval of time between each execution. not as efficient as requestanimationframe(), but allows you to choose a running rate/frame rate. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes no (unless it is the same one) no code example the following function creates a new date() object, extracts a time string out of it using tolocaletimestring(), and then displays it in the ui. we then run it once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring(); documen...
...And 10 more matches

Basic math in JavaScript — numbers and operators - Learn web development
d decimal places, for example 12.5, and 56.7786543. doubles are a specific type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places). we even have different types of number systems! decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like: binary — the lowest level language of computers; 0s and 1s. octal — base 8, uses 0–7 in each column. hexadecimal — base 16, uses 0–9 and then a–f in each column. you may have encountered these numbers before when setting colors in css. before you start to get worried about your brain melting, stop right there! for a start, we are just going to stick to decimal numbers throughout this course; you'll ...
...rs you are dealing with in javascript, you handle them in exactly the same way. note: actually, javascript has a second number type, bigint, used for very, very large integers. but for the purposes of this course, we'll just worry about number values. it's all numbers to me let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need. enter the commands listed below into your developer tools javascript console. first of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: let myint = 5; let myfloat = 6.667; myint; myfloat; number values are typed in without quote marks — try declaring and initializing a couple more variables...
...ack in to check that everything is in order: let myint = 5; let myfloat = 6.667; myint; myfloat; number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on. now let's check that both our original variables are of the same datatype. there is an operator called typeof in javascript that does this. enter the below two lines as shown: typeof myint; typeof myfloat; you should get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. phew! useful number methods the number object, an instance of which represents all standard numbers you'll use in your javascript, has a number of useful...
...And 10 more matches

Ember app structure and componentization - Learn web development
planning out the layout of the todomvc app in the last article we set up a new ember project, then added and configured our css styles. at this point we add some html, planning out the structure and semantics of our todomvc app. the landing page html of our application is defined in app/templates/application.hbs. this already exists, and its contents currently look like so: {{!-- the following component displays ember's default welcome message. --}} <welcomepage /> {{!-- feel free to remove this! --}} {{outlet}} <welcomepage /> is a component provided by an ember addon that renders the default welcome page we saw in the previous article, when we first navigated to our server at localhost:4200. however, we don't want this. instead, we want it to contain the todomvc app structure...
...el free to remove this! --}} {{outlet}} <welcomepage /> is a component provided by an ember addon that renders the default welcome page we saw in the previous article, when we first navigated to our server at localhost:4200. however, we don't want this. instead, we want it to contain the todomvc app structure. to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out. this is useful in such cases where we have an <input> being used with no corresponding...
...r class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> </section> the rendered output should now be as follows: this looks pretty complete, but remember that this is only a static prototype. now we need to break up our html code into dynamic components; later we'll turn it into a fully interactive app. looking at the code next to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the comp...
...And 10 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
we'll look at conditional ui rendering along the way. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
...<todo /> components as a prop in the same way we did with deletetask: const tasklist = tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed} key={task.id} toggletaskcompleted={toggletaskcompleted} deletetask={deletetask} edittask={edittask} /> )); now open todo.js. we’re going to do some refactoring. ...
...ng. a ui for editing in order to allow users to edit a task, we have to provide a user interface for them to do so. first, import usestate into the todo component like we did before with the app component, by updating the first import statement to this: import react, { usestate } from "react"; we'll now use this to set an isediting state, the default state of which should be false. ...
...And 10 more matches

Deploying our app - Learn web development
nd colleagues. deploying to hosting tends to be at the tail-end of the project life cycle, but with services such as netlify bringing down the cost of deployments (both in financial terms and also the time required to actually deploy) it's possible to deploy during development to either share work in progress or to have a pre-release for some other purpose. netlify, amongst other things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be performed inside of netlify and if the build is successful, the website changes will be deployed. although netlify offers a drag and drop deployment service, we are intending to trigger a new deployment to netlify each time we push to a github repo. it's exactly these kinds of connected...
...ice to get into the habit of setting up — across all our projects, we can then rely on npm run build to always do the complete build step, without needing to remember the specific build command arguments for each project. open the package.json file in your project's root directory, and find the scripts property. we'll add a build command that we can run to build our code. ...
... project's root directory, and find the scripts property. we'll add a build command that we can run to build our code. add the following line to your project now: "scripts": { ... "build": "parcel build src/index.html" } note: if the scripts property already has a command inside it, put a comma at the end of it. keep the json valid. ...
...And 10 more matches

Mozilla’s UAAG evaluation report
not rated na: not applicable document under construction guideline 1. support input and output device-independence. checkpoint title status notes/plans 1.1 full keyboard access. (p1) vg we have some remaining bugs, and some keyboard usability issues, but in general mozilla now has keyboard equivalents for almost everything. most browsers do not allow the user to select text with the keyboard alone. we intend to do this with a caret browsing feature. 1.2 activate event handlers. (p1) p onmouseover, onmousedown, onmouseup, onmousemove, onclick, ondbclick: no keyboard support onfocus and onblur: cannot be activated with pointer 1.3 provide text messages. (p1) c status line and alert boxes used to convey messages...
...t: supported abbr element: supported abbr attribute for td/th: not supported summary for table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.4 allow time-independent interaction. (p1) nr need to look into this 2.5 make captions, transcripts available. (p1) na this relates to multimedia players 2.6 respect synchronization cues. (p1) na this relates to multimedia players 2.7 repair missing content. (p2) p no alt repair strategies in place. reasons: the title attribute is almost never presen...
... title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.10 toggle placeholders. (p3) ni 2.11 alert unsupported language. (p3) nr ? guideline 3. allow configuration not to render some content that may reduce accessibility. checkpoint title status notes/plans 3.1 toggle background images. (p1) c preferences, appearance, colors - "use my chosen colors, ignoring the colors and background image specified" 3.2 toggle audio, video, animated images. (p1) p animated images can be made still with the escap...
...And 10 more matches

Configuring Build Options
note: do not make substantive changes to this document without consulting benjamin smedberg <benjamin@smedbergs.us> or one of the build-config peersthis document details how to configure firefox builds. most of the time a mozconfig file is not required. the default options are the most well-supported, so it is preferable to add as few options as possible. please read the following directions carefully before building, and follow them in order. skipping any step may cause the build to fail, or the built software to be unusable. build options, including options not usable from the command-line, may appear in "confvars.sh" files in the source tree. using a mozconfig configuration file the choice of which mozilla application to build and other configuration options can be configured in ...
...zconfig file: echo "# my first mozilla config" > mozconfig if your mozconfig isn't in your source directory, you can also use the mozconfig environment variable to specify the path to your mozconfig. the path you specify must be an absolute path or else client.mk will not find it. this is useful if you choose to have multiple mozconfig files for different applications or configurations (see below for a full example). note that in the export example below the filename was not mozconfig. regardless of the name of the actual file you use, we refer to this file as the mozconfig file in the examples below. setting the mozconfig path: export mozconfig=$home/mozilla/mozconfig-firefox calling the file .mozconfig (with a leading dot) is also supported, but this is not recommended because it m...
...s are not intermingled in your directory system and you can build multiple applications (e.g., firefox and thunderbird) from the same source tree. if you do not specify a moz_objdir, it will be automatically set to @topsrcdir@/obj-@config_guess@. if you need to re-run configure, the easiest way to do it is using ./mach configure; running configure manually is strongly discouraged. adding the following line to your mozconfig allows you to change the objdir: mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ it is a good idea to have your objdir name start with obj so that mercurial ignores it. sometimes it can be useful to build multiple versions of the source (such as with and without diagnostic asserts). to avoid the time it takes to do a full rebuild, you can create multiple moz...
...And 10 more matches

Multiple Firefox profiles
mizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox. you can find details about profiles on mozilla's end-user support site. reasons to have multiple profiles the casual user may want to have different profiles for work and personal use, or different family members. having different profiles would help separate work and personal life, or allow each family member to have his or her own set of bookmarks, settings, and add-ons. web developers might want a secondary profile for testing websites, apps, or other projects on different firefox channels. for example, you might want to have some extensions installed for web development, but not for general-purpose web browsing. while using the nightly channel, you may encounter some add-ons tha...
...add any helpful tools you discover to the list! mac os x multifirefox by dave martorana profile management determining the profile while firefox is running to determine the profile of a currently-running firefox instance in windows, macos or linux, type about:profiles into the browser url search bar. the page presents a list of all of your profiles, each beginning with "profile: " followed by its name. the one being run by this firefox instance will include the bold text "this is the profile in use" for example, if you find that text beneath the entry for "profile: suzie", then you are running in a profile named suzie. launching firefox into a desired profile although it is possible in some cases to have multiple instances of firefox running in different profiles, to avoid co...
...ou find that text beneath the entry for "profile: suzie", then you are running in a profile named suzie. launching firefox into a desired profile although it is possible in some cases to have multiple instances of firefox running in different profiles, to avoid confusion, you might want to first exit/quit/terminate all running instances of firefox, firefox developer edition or nightly. then follow the instructions below, applicable to your operating system. from profile manager inside firefox if you already have firefox instance running, you can open another profile from the integrated profile manager on any platform: type about:profiles into the browser url search bar. find the profile you want to use. press the “launch profile in new browser” button next to it. windows wind...
...And 10 more matches

DMD
active while running it, you just need to set the environment variable dmd=1 when running. for instance, on osx, you can run something like: dmd=1 /applications/firefox\ nightly.app/contents/macos/firefox you can tell it is working by going to about:memory and looking for "save dmd output". if dmd has been properly enabled, the "save" button won't be grayed out. look at the "trigger" section below to see the full list of ways to get a dmd report once you have it activated. note that stack information you get will likely be less detailed, due to being unable to symbolicate. you will be able to get function names, but not line numbers. desktop firefox (linux) build build firefox with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs...
...md button (depending on how old your build is, it might be labelled "save" or "analyze reports" or "dmd"). the button won't be present in non-dmd builds, and will be grayed out in dmd builds if dmd isn't enabled at start-up. if you wish to trigger dmd dumps from within c++ or javascript code, you can use nsimemoryinfodumper.dumpmemorytotempdir. for example, from javascript code you can do the following. const cc = components.classes; let mydumper = cc["@mozilla.org/memory-info-dumper;1"] .getservice(ci.nsimemoryinfodumper); mydumper.dumpmemoryinfototempdir(identifier, anonymize, minimize); this will dump memory reports and dmd output to the temporary directory. identifier is a string that will be used for part of the filename (or a timestamp will be used if it is an emp...
...utput to the temporary directory. identifier is a string that will be used for part of the filename (or a timestamp will be used if it is an empty string); anonymize is a boolean that indicates if the memory reports should be anonymized; and minimize is a boolean that indicates if memory usage should be minimized first. (linux only) you can send signal 34 to the firefox process, e.g. with the following command. $ killall -34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing commentary like this: dmd[5222] opened /tmp/dmd-1414556492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list... dmd[5222] constructing the stack trace table... dmd[5222] constructing the stack frame table... dmd[5...
...And 10 more matches

Scripting Java
we can test java classes by writing scripts. we can also aid our java development by using scripting for exploratory programming. exploratory programming is the process of learning about what a library or api can do by writing quick programs that use it. as we will see, scripting makes this process easier. note that the ecma standard doesn't cover communication with java (or with any external object system for that matter). ...
...packages and classes external packages and classes can also be used as in rhino. make sure your .jar or .class file is on you classpath then you may import them into your javascript application. these packages are likely not in the java package, so you'll need to prefix the package name with "packages." for example, to import the org.mozilla.javascript package you could use importpackage() as follows: $ java org.mozilla.javascript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the importpackage() method. this is also acceptable, it just takes more typing. using a fully qualified name, the abo...
...cript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the importpackage() method. this is also acceptable, it just takes more typing. ...
...And 10 more matches

How to build an XPCOM component in JavaScript
ersion of xpcomviewer that works with firefox 1.5 from mozdev mirrors. if an interface exists that meets your needs, then you do not need to write an idl, or compile a typelib, and may skip to the next section. if you don't find a suitable pre-existing interface, then you must define your own. xpcom uses a dialect of idl to define interfaces, called xpidl. here's the xpidl definition for our helloworld component: helloworld.idl #include "nsisupports.idl" [scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsihelloworld : nsisupports { string hello(); }; note that you must generate a new uuid for each xpcom component that you create. see generating guids for more information. compiling the typelib your interface definition must be compiled into a binary format (xpt) i...
...6 within the zip into the bin directory of the gecko sdk. note: the mac version of the sdk provided for download is powerpc-only. if you need an intel version, you'll need to compile it yourself as described on that page. execute this command to compile the typelib. here, {sdk_dir} is the directory in which you unpacked the gecko sdk. {sdk_dir}/bin/xpidl -m typelib -w -v -i {sdk_dir}/idl -e helloworld.xpt helloworld.idl note: on windows you must use forward slashes for the include path. note: (the -i flag is an uppercase i, not a lowercase l.) this will create the typelib file helloworld.xpt in the current working directory. for a new component in firefox/thunderbird/b2g if you are adding a new feature to applications in the mozilla-central repository, you can create a makefile listi...
...the imported library contains functions for gen...
...And 10 more matches

Index - Firefox Developer Tools
singly "tall," projecting outward from the bottom of the page. this view makes it easy to visualize the nesting of your content. 3 accessibility inspector accessibility, accessibility inspector, devtools, guide, tools the accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. this article takes you through the main features of the accessibility inspector and how to use it. 4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page...
...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 code, tools, internals, organisation, source there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspe...
... tree map view the tree map view provides a visual representation of the snapshot, that helps you quickly get an idea of which objects are using the most memory. 45 migrating from firebug firebug, migration when migrating from firebug to the firefox developer tools, you may wonder where the features you loved in firebug are available in the developer tools. the following list aims to help firebug users to find their way into the developer tools. 46 network monitor debugging, dev tools, firefox, guide, networking, tools, l10n:priority the network monitor shows you all the network requests firefox makes (for example, when it loads a page, or due to xmlhttprequests), how long each request takes, and details of each request. 47 insp...
...And 10 more matches

BiquadFilterNode() - Web APIs
the biquadfilternode() constructor of the web audio api creates a new biquadfilternode object, which represents a simple low-order filter, and is created using the audiocontext.createbiquadfilter() method. syntax var biquadfilternode = new biquadfilternode(context, options) parameters inherits parameters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional options are as follows: type: one of "lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass". the meaning of the other options depends on the value of this one. ...
... biquadfilternode(context, options) parameters inherits parameters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional options are as follows: type: one of "lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass". the meaning of the other options depends on the value of this one. the defaults for all are as follows: q: 1 detune: 0 frequency: 350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. p...
...it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. ...
...And 10 more matches

WebGL model view projection - Web APIs
o make them useful for rendering complicated 3d scenes. these composed matrices ultimately move the original model data around into a special coordinate space called clip space. this is a 2 unit wide cube, centered at (0,0,0), and with corners that range range from (-1,-1,-1) to (1,1,1). this clip space is compressed down into a 2d space and rasterized into an image. the first matrix discussed below is the model matrix, which defines how you take your original model data and move it around in 3d world space. the projection matrix is used to convert world space coordinates into clip space coordinates. a commonly used projection matrix, the perspective projection matrix, is used to mimic the effects of a typical camera serving as the stand-in for the viewer in the 3d virtual world. the view ma...
...into clip space coordinates. a commonly used projection matrix, the perspective projection matrix, is used to mimic the effects of a typical camera serving as the stand-in for the viewer in the 3d virtual world. the view matrix is responsible for moving the objects in the scene to simulate the position of the camera being changed, altering what the viewer is currently able to see. the sections below offer an in-depth look into the ideas behind and implementation of the model, view, and projection matrices. these matrices are core to moving data around on the screen, and are concepts that transcend individual frameworks and engines. clip space in a webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader transforms those points into a sp...
... put our data into the clip space coordinate system directly. normally model data is used that is in some arbitrary coordinate system, and is then transformed using a matrix, converting the model coordinates into the clip space coordinate system. for this example, it's easiest to illustrate how clip space works by simply using model coordinate values ranging from (-1,-1,-1) to (1,1,1). the code below will create 2 triangles that will draw a square on the screen. the z depth in the squares determines what gets drawn on top when the squares share the same space. the smaller z values are rendered on top of the larger z values. webglbox example this example will create a custom webglbox object that will draw a 2d box on the screen. note: the code for each webglbox example is available in this...
...And 10 more matches

Basic concepts behind Web Audio API - Web APIs
d how the features of the web audio api work, to help you make informed decisions while designing how audio is routed through your app. it won't turn you into a master sound engineer, but it will give you enough background to understand why the web audio api works like it does. audio graphs the web audio api involves handling audio operations inside an audio context, and has been designed to allow modular routing. basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. several sources — with different types of channel layout — are supported even within a single context. this modular design provides the flexibility to create complex audio functions with dynamic effects. audio nodes are linked via their inputs and outputs, forming...
.... this modular design provides the flexibility to create complex audio functions with dynamic effects. audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination. although, you don't have to provide a destination if you, say, just want to visualize some audio data. a simple, typical workflow for web audio would look something like this: create the audio context. inside the context, create sources — such as <audio>, oscillator, or stream. create effects nodes, such as reverb, biquad filter, panner, or compressor. choose the final destination for the audio, such as the user's computer speakers. establish connections from the audio sources through zero or more effects, eventual...
...eventually ending at the chosen destination. channel notation the number of audio channels available on a signal is frequently presented in a numeric format, such as 2.0 or 5.1. this is called channel notation. the first number is the number of full frequency range audio channels that the signal includes. the number after the period indicates the number of those channels which are reserved for low-frequency effect (lfe) outputs; these are often referred to as subwoofers. each input or output is composed of one or more audio channels, which together represent a specific audio layout. any discrete channel structure is supported, including mono, stereo, quad, 5.1, and so on. audio sources can be obtained in a number of ways: sound can be generated directly in javascript by an audio ...
...And 10 more matches

Using XMLHttpRequest - Web APIs
s data exchange were xml handling responses there are several types of response attributes defined by the living standard specification for the xmlhttprequest() constructor. these tell the client making the xmlhttprequest important information about the status of the response. some cases where dealing with non-text response types may involve some manipulation and analysis are outlined in the following sections. analyzing and manipulating the responsexml property if you use xmlhttprequest to get the content of a remote xml document, the responsexml property will be a dom object containing a parsed xml document. this could prove difficult to manipulate and analyze. there are four primary ways of analyzing this xml document: using xpath to address (or point to) parts of it. manually pars...
...pe = "arraybuffer"; oreq.send(); for more examples check out the sending and receiving binary data page monitoring progress xmlhttprequest provides the ability to listen to various events that can occur while the request is being processed. this includes periodic progress notifications, error notifications, and so forth. support for dom progress event monitoring of xmlhttprequest transfers follows the specification for progress events: these events implement the progressevent interface. the actual events you can monitor to determine the state of an ongoing transfer are: progress the amount of data that has been retrieved has changed. load the transfer is complete; all data is now in the response var oreq = new xmlhttprequest(); oreq.addeventlistener("progress", updateprogress); o...
...f bytes transferred so far in the event's total and loaded fields. however, if the lengthcomputable field is false, the total length is not known and will be zero. progress events exist for both download and upload transfers. the download events are fired on the xmlhttprequest object itself, as shown in the above sample. the upload events are fired on the xmlhttprequest.upload object, as shown below: var oreq = new xmlhttprequest(); oreq.upload.addeventlistener("progress", updateprogress); oreq.upload.addeventlistener("load", transfercomplete); oreq.upload.addeventlistener("error", transferfailed); oreq.upload.addeventlistener("abort", transfercanceled); oreq.open(); note: progress events are not available for the file: protocol. note: starting in gecko 9.0, progress events can now be...
...And 10 more matches

Web accessibility for seizures and physical reactions - Accessibility
f venetian blinds. certain visual patterns, especially stripes of contrasting colors. that same article continues that many factors must combine to trigger the photosensitive reaction. of note is that it includes the wavelength of light as a possible factor; wavelengths in the red part of the spectrum seem to be especially problematic. in the article, "understanding wcag 2.0 three flashes or below threshold" notes generally that: “individuals who have photosensitive seizure disorders can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes” and goes on to note, very specifically that: “people are even more sensitive to red flashing than to other colors, so a special test is provided for saturated red flashing”. you don't even need an ...
...sical response possible from flashing, flickering, blnking, and other such stimuli. in 1997, a japanese cartoon featured an animated "virus bomb". some of the children watching the cartoon reacted by having seizures, others by suffering nausea, shaking, and vomitting blood. the reactions from the children were so severe, they had to be rushed to the emergency room. the physical disorders listed below are all possible consequences: each of these physical reactions may be so severe as to be incapacitating. seizures vestibuler disordera migraines nausea vomiting flashing, blinking, & flickering although "flashing" and "blinking" are sometimes used interchangably, they are not the same. according to the w3c, blinking is a distraction problem, whereas flashing refers to content that occu...
... flashing, blinking, & flickering although "flashing" and "blinking" are sometimes used interchangably, they are not the same. according to the w3c, blinking is a distraction problem, whereas flashing refers to content that occurs more than 3 times per second, is large enough, and bright enough. section 508 prohibits flickering effects with a frequency greater than 3 hz (flickers per second) and lower than 55 hz. the epilepsy foundation's article "take advantage of media queries with <style> in setting up media queries, you are enabling controls by the user; these controls are made available in the browser or in the os. see the mdn document, "accessibility: what users can to to browse more safely" to see more details of how a user accesses the controls. prefers-reduced-motion support for ...
...And 10 more matches

Constraint validation - Developer guides
what is done on the client side. intrinsic and basic constraints in html5, basic constraints are declared in two ways: by choosing the most semantically appropriate value for the type attribute of the <input> element, e.g., choosing the email type automatically creates a constraint that checks whether the value is a valid e-mail address. by setting values on validation-related attributes, allowing basic constraints to be described in a simple way, without the need for javascript. semantic input types the intrinsic constraints for the type attribute are: input type constraint description associated violation <input type="url"> the value must be an absolute url, as defined in the url living standard. typemismatch constraint violation <input t...
...ny of these do not satisfy the condition described here, the type mismatch constraint violation is triggered. note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. ...
... associated violation pattern text, search, url, tel, email, password a javascript regular expression (compiled with the ecmascript 5 global, ignorecase, and multiline flags disabled) the value must match the pattern. patternmismatch constraint violation min range, number a valid number the value must be greater than or equal to the value. ...
...And 10 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
wser; 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 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 ...
...ore 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 hand side brings up a date picker to allow you to choose a date; you have to enter the time manually. the edge datetime-local control looks like the below; clicking the date and the time parts of the value bring up two separate pickers for you, so you can easily set both the date and the time. this is somewhat like having date and time widgets b...
...ontrol.value = '2017-06-01t08:30'; there are several methods provided by javascript's date that can be used to convert numeric date information into a properly-formatted string, or you can do it manually. for example, the date.toisostring() method can be used for this purpose. additional attributes in addition to the attributes common to all <input> elements, datetime-local inputs offer the following attributes: attribute description max the latest date and time to accept min the earliest date and time to accept step the stepping interval to use for this input, such as when clicking arrows on spinner controls or performing validation max the latest date and time to accept. if the value entered into the element is later than this ...
...And 10 more matches

<input type="month"> - HTML: Hypertext Markup Language
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. ...
...rome/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 using a browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera. clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year. the microsoft edge month control looks like this: value a domstring representing a month and year, or empty. events change and input supported common attributes autocomplete, list, readonly, and step...
...nting a month and year, or empty. events change and input supported common attributes autocomplete, list, readonly, and step. idl attributes value methods select(), stepdown(), stepup(). value a domstring representing the value of the month and year entered into the input, in the form yyyy-mm (four or more digit year, then a hyphen ("-"), followed by the two-digit month). the format of the month string used by this input type is described in format of a valid local month string in date and time formats used in html. you can set a default value for the input control by including a month and year inside the value attribute, like so: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bd...
...And 10 more matches

<input type="text"> - HTML: Hypertext Markup Language
ntered into the text field. you can retrieve this using the value property in javascript. let thetext = mytextinput.value; if no validation constraints are in place for the input (see validation for more details), the value may be an empty string (""). ...
...a global attribute which is used to indicate whether or not to enable spell checking for an element. it can be used on any editable content, but here we consider specifics related to the use of spellcheck on <input> elements. the permitted values for spellcheck are: false disable spell checking for this element. true enable spell checking for this element. "" (empty string) or no value follow the element's default behavior for spell checking. this may be based upon a parent's spellcheck 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 setti...
...pell checking. this may be based upon a parent's spellcheck 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 retur...
...And 10 more matches

CSP: script-src - HTTP
urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the script-src policy: content-security-policy: script-src <source>; content-security-policy: script-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a...
...: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
...es shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' ...
...And 10 more matches

CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the style-src policy: content-security-policy: style-src <source>; content-security-policy: style-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all leg...
...: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
...es shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' ...
...And 10 more matches

Introduction to using XPath in JavaScript - XPath
of the document object. document.evaluate this method evaluates xpath expressions against an xml based document (including html documents), and returns a xpathresult object, which can be a single node or a set of nodes. the existing documentation for this method is located at document.evaluate, but it is rather sparse for our needs at the moment; a more comprehensive examination will be given below. var xpathresult = document.evaluate( xpathexpression, contextnode, namespaceresolver, resulttype, result ); parameters the evaluate function takes a total of five parameters: xpathexpression: a string containing the xpath expression to be evaluated. contextnode: a node in the document against which the xpathexpression should be evaluated, including any and all of its child nodes. the doc...
...section in the appendix for details. resulttype: a constant that specifies the desired result type to be returned as a result of the evaluation. the most commonly passed constant is xpathresult.any_type which will return the results of the xpath expression as the most natural type. there is a section in the appendix which contains a full list of the available constants. they are explained below in the section "specifying the return type." result: if an existing xpathresult object is specified, it will be reused to return the results. specifying null will create a new xpathresult object. return value returns xpathresult, which is an xpathresult object of the type specified in the resulttype parameter. the xpathresult interface is defined here. implementing a default namespace resolv...
... return type the returned variable xpathresult from document.evaluate can either be composed of individual nodes (simple types), or a collection of nodes (node-set types). ...
...And 10 more matches

Enhanced Extension Installation - Archive of obsolete content
the state of the world install locations in firefox 1.0 extensions can be installed into only two locations: the firefox user's profile directory directory, e.g. ~/.mozilla/firefox/abcdefgh.default/extensions/ the firefox application directory, e.g. c:\program files\mozilla firefox\extensions extension metadata the extension system stores metadata in both of the two locations, in the following files: <location>/extensions/extensions.rdf - an xml/rdf datasource listing all the extensions installed at that location. <location>/extensions.ini - an ini manifest listing the directories for all the extensions and themes at the location (used by the component manager, preferences system, chrome registry etc to locate files during the startup process). in the profile directory, the fi...
... fully, rather than awaiting the next restart, since themes do not supply xpcom components, preferences defaults etc. for extensions, on the next startup, the startup system notices the presence of the .autoreg file and starts the extension manager with a "dirty" flag, telling it to finish any install operations that may be pending. the extension manager loads the xml/rdf datasources (this is allowable and necessary because a major change has happened) and gets a list of all items that need to be installed (tracked using a tobeinstalled flag on the item in the datasource). it locates the staged copy of the xpi file, extracts its contents (logging file additions as it goes into {guid}/uninstall/uninstall), loads the install manifest file and copies all metadata into the appropriate datasourc...
...ds and the needs of other applications may vary in the future, since we've already effectively generalized the concept of an install location, we can make this set configurable by applications and extensions. to this end, we scan the category extension-install-locations as the extension system is started (after profile initialization) and add these to our internal set. extension metadata the following files are now used to hold metadata: <profile>/extensions.ini -active items this file contains a list of active extension directories (i.e. directories to extensions that are enabled only), to be used by the xredirprovider during startup to locate components, preferences and chrome manifests. the format here is similar to firefox 1.0 except there is no longer a count value that needs to b...
...And 9 more matches

JavaScript crypto - Archive of obsolete content
. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. using the mozilla crypto object from javascript mozilla defines a special javascript object to allow web pages access to certain cryptographic-related services. these services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. most of these services are available via the dom window object as window.crypto. services are provided to enable: smart card events, generating certificate requests, importing user certs, generating random...
... tell the crypto system you are interested by setting window.crypto.enablesmartcardevents to true. you can then register event handlers for these events with the document.addeventlistener() method. two smart card related events are generated: smartcard-insert when smartcards are inserted, and smartcard-remove when smartcards are removed. web sites which use ssl clientauth login could use the following code to refresh the page on token insertions and removals: <!doctype html> <p>... <script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() {...
...rdchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with the above example, your web site will automatically reload anytime a smartcard is inserted or removed. this allows the page to automatically login and logout based on the presence of the smartcard. generating keys and issuing user certificates there are several crypto object methods used in generating keys for certificates: generatecrmfrequest(), importusercertificates(). the generatecrmfrequest() function generates a key and creates a crmf request object. this object can be passed to a ca using a webform...
...And 9 more matches

Tamarin build documentation - Archive of obsolete content
tamarin source versions the following instructions are for obtaining and building the tamarin central source code. for instructions on tamarin tracing, please see tamarin tracing build documentation. supported platforms tamarin currently supports the following operating systems and/or architectures. windows 32 and 64 bit mac osx 10.4, 10.5 on ppc mac osx 10.5, 10.6 on intel linux 32 and 64 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central. active development source resides at tamarin redux. in this document replace instances of tamarin-central with tamarin-redux to operate in the redux repository. ...
...c osx 10.5, 10.6 on intel linux 32 and 64 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central. active development source resides at tamarin redux. in this document replace instances of tamarin-central with tamarin-redux to operate in the redux repository. use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-central tamarin-central tips for working with mercurial can be found here. building tamarin building tamarin will create all the libraries for the avmplus and garbage collector (mmgc), and create a standalone executable (shell) for executing files in the abc file format. running the shell without ...
... $ ../configure.py --mac-sdk=105 --target=x86_64-darwin if asc is not set, you will need to add asc.jar to the utils directory in tamarin-redux (bug 631641). download ftp://ftp.mozilla.org/pub/js/tamarin/builds/asc/latest/asc.jar put it in utils/ building tamarin for android 2.3.3 on mac public sdk/ndk setup to build tamarin for android you will need an sdk/ndk. the setup procedure below creates an android sdk/ndk entirely from publicly available sources. this sdk/ndk *must* be used if you've cloned tamarin at changeset 5844:92ad3ca84a0b or later and will be using the cross-compile build method. steps to create a public sdk/ndk tree on a mac: - create an sdk/ndk top folder under your main volume named /android-public. - download the android 2.3.3 mac sdk zip file from http://d...
...And 9 more matches

Document Object Model - Archive of obsolete content
in a browser context, the window is the global object, and the same is also true for xul. naturally, this global object will be different for each window. each frame will also have a separate window object. the window is often referred to using the window property, although this is optional. sometimes, this is done just to clarify the scope of the method you are referring to. ...
... function gettext(){ return "message"; } alert(gettext()); alert(window.gettext()); thus, if you want to access variables or call a function declared in a script used by another window, you just need to access it using the other window's window object. ...
...(window.gettext()); thus, if you want to access variables or call a function declared in a script used by another window, you just need to access it using the other window's window object. for example, if we combined the last two examples into a single file, we might want to call the gettext() function from within the other window (for example, the test.xul window). to do this, we can do the following: alert(window.opener.gettext()); each window has an opener property which holds the window object that opened this one. in this example, we retrieve the opener window and call the gettext() function declared in a script used there. note that we qualified the property with the 'window' identifier just to be clearer. the window's open() method also returns a reference to the new window so yo...
...And 9 more matches

Templates - Archive of obsolete content
th mozilla such as bookmarks, history and mail messages. more details on these will be provided in the later section. usually, elements such as treeitems and menuitems will be populated with data. however, you can use other elements if you want although they are more useful for specialized cases. nevertheless, we'll start with these other elements because trees and menus require more code. to allow the creation of elements based on rdf data, you need to provide a simple template which will be duplicated for each element that is created. essentially, you provide only the first element and the remaining elements are constructed based on the first one. the template is created using the template element. inside it, you can place the elements that you want to use for each constructed element. t...
...can be used to get the data. this example will only get the top-level bookmarks (or bookmark folders) as we're going to create buttons. for child bookmarks, we would need to use an element that displays a hierarchy such as a tree or menu. this example and any others that reference internal rdf datasources will only work if you load them from a chrome url. for security reasons, mozilla doesn't allow access to them from other sources. to view this example, you will need to create a chrome package and load the file from there (you can do this easily, see manifest files). you can then enter the chrome url into the browser url field. example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/n...
...n the image that the set of buttons has been created, one for each bookmark. try adding a bookmark in the browser while you have the example window open. you'll notice that the buttons in the example get updated instantly. (you may have to focus the window for it to change.) container and datasources the template itself is placed inside a vertical box. the box has two special attributes that allow it to be used for templates, which are used to specify where the data comes from. the first attribute on the box is the datasources attribute. this is used to declare what rdf datasource will be providing the data to create the elements. in this case, rdf:bookmarks is used. you can probably guess that this means to use the bookmarks datasource. this datasource is provided by mozilla. to use your ...
...And 9 more matches

XUL element attributes - Archive of obsolete content
for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. ...
...on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...
...ents are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. class type: string the style class of the element. multiple classes may be specified by separating them with spaces. ...
...And 9 more matches

Building up a basic demo with Babylon.js - Game development
d one. there is one helper variable already included, which will store a reference to the <canvas> element. before reading on, copy this code to a new text file and save it in your working directory as index.html. initialising the babylon.js engine we have to create a babylon.js engine instance first (passing it the <canvas> element to render on) before we start developing our game. add the following code to the bottom of your second <script> element: var engine = new babylon.engine(canvas); the babylon global object contains all the babylon.js functions available in the engine. creating a scene a scene is the place where all the game content is displayed. while creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. let's create a...
...f your second <script> element: var engine = new babylon.engine(canvas); the babylon global object contains all the babylon.js functions available in the engine. creating a scene a scene is the place where all the game content is displayed. while creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. let's create a scene by adding the following lines just below our previous code: var scene = new babylon.scene(engine); scene.clearcolor = new babylon.color3(0.8, 0.8, 0.8); thus, the scene is created and the second line sets the background color to light gray. creating a rendering loop to make the scene actually visible we have to render it. add these lines at the end of the <script> element, just before the closing </script>. var...
...nderloop); we're using the engine's runrenderloop() method to execute the renderloop() function repeatedly on every frame — the loop will continue to render indefinitely until told to stop. creating a camera now the setup code is in place we need to think about implementing the standard scene components: camera, light and objects. let's start with the camera — add this line to your code below the scene creation and the line where we defined the clearcolor. var camera = new babylon.freecamera("camera", new babylon.vector3(0, 0, -10), scene); there are many cameras available in babylon.js; freecamera is the most basic and universal one. to initialize it you need to pass it three parameters: any name you want to use for it, the coordinates where you want it to be positioned in the 3d ...
...And 9 more matches

Advanced styling effects - Learn web development
s, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters. prerequisites: html basics (study introduction to html) and an idea of how css works (study css first steps.) objective: to get an idea about how to use some of the advanced styling effects available in modern browsers. box shadows box-shadow allows you to apply one or more drop shadows to an element's box. like text shadows, box shadows are supported pretty well across browsers, including ie9+ and edge. users of older ie versions might just have to cope with no shadows, so just test your designs to make sure your content is legible without them. you can find the examples in this section at box-shadow.html (see the source code too). a sim...
... the second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is n...
...the button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on opposite corners of the button to give it a nice shading effect. when the button is pressed in, the active state causes the first box shadow to be swapped for a very dark inset sh...
...And 9 more matches

Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". 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. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. prerequisites: html basics (study introduction to html), and an idea of ho...
... 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 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...
...a type in your media query then the media query will default to being for all media types. media feature rules after specifying the type, you can then target a media feature with a rule. width and height the feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features. these features are used to create layouts that respond to different screen sizes. for example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. @media screen and (width: 600px) { body { color: red; } } open this ...
...And 9 more matches

Getting started with CSS - Learn web development
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 linking a css document to an html file, and be able to do simple text formatting with css. starting with some html our starting point is an html document. you can copy the code from below if you want to work on your own computer. save the code below as index.html in a folder on your machine. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text. in the text is a <span>span element</span> and also a <a href="http://example.com">link</a...
...ttp://example.com">link</a>.</p> <p>this is the second paragraph. it contains an <em>emphasized</em> element.</p> <ul> <li>item one</li> <li>item two</li> <li>item <em>three</em></li> </ul> </body> </html> note: if you are reading this on a device or an environment where you can't easily create files, then don't worry — live code editors are provided below to allow you to write example code right here in the page. adding css to our document the very first thing we need to do is to tell the html document that we have some css rules we want it to use. there are three different ways to apply css to an html document that you'll commonly come across, however, for now, we will look at the most usual and useful way of doing so — linking css from the ...
...there are three different ways to apply css to an html document that you'll commonly come across, however, for now, we will look at the most usual and useful way of doing so — linking css from the head of your document. create a file in the same folder as your html document and save it as styles.css. the .css extension shows that this is a css file. ...
...And 9 more matches

Web fonts - Learn web development
prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. ...
... prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. ...
...nt 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. ...
...And 9 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. how to open the devtools in your browser the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: how do you pull it up? three ways: keyboard: ctrl + shift + i, except internet explor...
...s context menu: press-and-hold/right-click an item on a webpage (ctrl-click on the mac), and choose inspect element from the context menu that appears. (an added bonus: this method straight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot. this tool shows what the html on your page looks like at runtime, as well as what css is applied to each element on the page. it also allows you to instantly modify the html and css and see the results of your changes reflected live in the browser viewport. if you don't see the inspector, tap/click the inspector tab. in internet explorer, tap/click dom explorer, or press ctr...
...rent element. edit as html (sometimes add attribute/edit text). lets you change the html and see the results on the fly. very useful for debugging and testing. :hover/:active/:focus. forces element states to be toggled on, so you can see what their styling would look like. copy/copy as html. copy the currently selected html. some browsers also have copy css path and copy xpath available, to allow you to copy the css selector or xpath expression that would select the current html element. try editing some of your dom now. double-click an element, or right-click it and choose edit as html from the context menu. you can make any changes you'd like, but you cannot save your changes. exploring the css editor by default, the css editor displays the css rules applied to the currently selecte...
...And 9 more matches

Advanced form styling - Learn web development
tter for compatibility. if you look at the reference page you'll see a lot of different possible values listed for -webkit-appearance, however by far the most helpful value, and probably the only one you'll use, is none. this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css. ...
... 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 agains...
...evel 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 makes css styling a bit easier, but isn't really essential. in a couple of cases — search and radio buttons/checkboxes, it becomes way mo...
...And 9 more matches

How to build custom form controls - Learn web development
to spend time in the design stage; if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. if you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to perform user tests. this process is called ux design. if you want to learn more about this topic, you should check out the following helpful resources: uxmatters.com uxdesign.com the ux design section of smashingmagazine note: also, in most systems there is a way to open the <select> element with the keyboard to look at all the available choices (this is the same as clicking the <select> element with a mouse). this is achieved with alt + down on windows. we didn't implement this in our example, but it would be easy...
...nted for the click event. defining the html structure and (some) semantics now that the control's basic functionality has been decided upon, it's time to start building it. the first step is to define its html structure and to give it some basic semantics. here is what we need to rebuild a <select> element: <!-- this is our main container for our control. the tabindex attribute is what allows the user to focus the control. we'll see later that it's better to set it through javascript. --> <div class="select" tabindex="0"> <!-- this container will be used to display the current value of the control --> <span class="value">cherry</span> <!-- this container will contain all the options available for our control. because it's a list, it makes sense to use the ul eleme...
...cy styles used to make it look the way we want. required styles the required styles are those necessary to handle the three states of our control. .select { /* this will create a positioning context for the list of options; adding this to .select:focus-within will be a better option when fully supported */ position: relative; /* this will make our control become part of the text flow and sizable at the same time */ display : inline-block; } we need an extra class active to define the look and feel of our control when it is in its active state. because our control is focusable, we double this custom style with the :focus pseudo-class in order to be sure they will behave the same. .select .active, .select:focus { outline: none; /* this box-shadow property is not exactl...
...And 9 more matches

Responsive images - Learn web development
learn. prerequisites: you should already know the basics of html and how to add static images to a web page. objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites. why responsive images? let's examine a typical scenario. a typical website may contain a header image and some content images below the header. the header image will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css much in this lesson, except to say that: the body conte...
...xample: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css much in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and centers itself in the available space. in viewports below that width, the body will stay at 100% of the width of the viewport. the header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. if the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, and the excess is lost off either side. it is 200px high. the c...
...at width the heading is set at. if the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, and the excess is lost off either side. it is 200px high. the content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it. however, issues arise when you start to view the site on a narrow screen device. the header below looks ok, but it's starting to take up a lot of the screen height for a mobile device. and at this size, it is difficult to see the people within the first content image. an improvement would be to display a cropped version of the image which displays the important details of the image wh...
...And 9 more matches

Introduction to the server side - Learn web development
r-side programming is, what it can do, and how it differs from client-side programming. most large-scale websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g. html and javascript). ...
...all of these capabilities enable much deeper engagement with users. in the modern world of web development, learning about server-side development is highly recommended. ...
...arrive, and reply to the web browser with an http response message. the response contains a status line indicating whether or not the request succeeded (e.g. "http/1.1 200 ok" for success). the body of a successful response to a request would contain the requested resource (e.g. a new html page, or an image, etc...), which could then be displayed by the web browser. static sites the diagram below shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested). when a user wants to navigate to a page, the browser sends an http "get" request specifying its url. the server retrieves the requested document from its file system and returns an http response containing the documen...
...And 9 more matches

Getting started with React - Learn web development
self-contained, logical pieces of code that describe a portion of the user interface. these components can be composed together to create a full ui, and react abstracts away much of the rendering work, leaving you to concentrate on the ui design. use cases unlike the other frameworks covered in this module, react does not enforce strict rules around code conventions or file organization. this allows teams to set conventions that work best for them, and to adopt react in any way they would like to. react can handle a single button, a few pieces of an interface, or an app's entire user interface. while react can be used for small pieces of an interface, it's not as easy to "drop into" an application as a library like jquery, or even a framework like vue — it is more approachable when you b...
...s of an interface, it's not as easy to "drop into" an application as a library like jquery, or even a framework like vue — it is more approachable when you build your entire app with react. in addition, many of the developer-experience benefits of a react app, such as writing interfaces with jsx, require a compilation process. adding a compiler like babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. react arguably has a heavy tooling requirement, but it can be learned. this article is going to focus on the use case of using react to render the entire user interface of an application, using tooling provided by facebook’s own create-react-app tool. how does react use javascript? react utilizes features of modern javascript for ...
... from javascript comes with the use of jsx syntax. jsx extends javascript's syntax so that html-like code can live alongside it. for example: const heading = <h1>mozilla developer network</h1>; this heading constant is known as a jsx expression. react can use it to render that <h1> tag in our app. suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? the jsx approach allows us to nest our elements within each other, just like we do with html: const header = ( <header> <h1>mozilla developer network</h1> </header> ); note: the parentheses in the previous snippet aren't unique to jsx, and don’t have any effect on your application. they're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. you could ...
...And 9 more matches

Software accessibility: Where are we today?
these operating systems were not designed with the needs of people with disabilities in mind. ...
...eact to sounds played. this tends to be somewhat less of a limitation in that most software doesn't rely exclusively on audio to relay feedback. if a person was unable to do one of the above-listed tasks, they found themselves unable to use many popular computer applications. here are some of the groups of people that have problems doing some of those tasks: print disabled: blind, deaf-blind, low vision, obstructed vision, dyslexic, cognitively disabled and illiterate individuals. physically disabled: users have amputations, paralysis, repetitive stress, cerebral palsy, muscular dystrophy, parkinson's or other problems limiting mobility. hearing impaired we must also consider the increasing numbers of aging baby boomers that are beginning to experience problems with their sight, visi...
...er to this problem, many small accessibility hardware and software vendors created products and software which helped people who could not perform one of the four basic tasks to use common computer applications. ...
...And 9 more matches

How Mozilla's build system works
for many developers, typing mach build to build the tree is sufficient to work with the source tree. this document explains how the build system works. note: this document is not intended for developers who just want to build mozilla. for that, see the build documentation. ...
...curses into all referenced files and directories. as the moz.build files are read, data structures describing the overall build system definition are emitted. these data structures are then read by a build backend generator, which then converts them into files, function calls, and so on. in the case of a make backend, the generator writes out makefiles. when config.status runs, you'll see the following output: reticulating splines... finished reading 1096 moz.build files into 1276 descriptors in 2.40s backend executed in 2.39s 2188 total backend files. 0 created; 1 updated; 2187 unchanged total wall time: 5.03s; cpu time: 3.79s; efficiency: 75% what this is saying is that a total of 1,096 moz.build files were read. altogether, 1,276 data structures describing the build configuration were d...
...ols is used to install tests and other support tools. when make is invoked, it starts at the export sub-tier of the first tier, and traverses all the directories in that tier. then, it does the same thing for the libs sub-tier and, subsequently, the tools sub-tier. it then moves on to the next tier and continues until no tiers remain. to view information about the tiers, you can execute the following special make targets: command effect make echo-tiers show the final list of tiers. make echo-dirs show the list of non-static source directories to iterate over, as determined by the tier list. make echo-variable-static_dirs show the list of static source directories to iterate over, as determined by the tier list. moz.build files moz.bu...
...And 9 more matches

Error codes returned by Mozilla APIs
ns_error_not_initialized (0xc1f30001) an attempt was made to use a component or object which has not yet been initialized. these components usually provide an initialization method, often called init, which must be called before other methods are used. ...
...es list errors that can occur when calling various mozilla apis. each error is listed by its name and an error code in parentheses. an error will typically be displayed on the error console, but can be captured using a try-catch block in javascript. these constants can be accessed through components.results. for example, by using components.results.ns_error_not_initialized general errors the following errors are general and can occur when using any component. ns_error_not_initialized (0xc1f30001) an attempt was made to use a component or object which has not yet been initialized. these components usually provide an initialization method, often called init, which must be called before other methods are used. ns_error_already_initialized (0xc1f30002) an attempt is made to initialize a c...
...n which was not expected. this error occurred rather than continuing. ns_error_out_of_memory (0x8007000e) this error occurs when there is not enough memory available to carry out an operation, or an error occurred trying to allocate memory. ns_error_illegal_value (0x80070057) an argument supplied to a method was not valid, for instance a null value was supplied as an argument which does not allow null values, or a value was out of range. ns_error_no_aggregation (0x80040110) ns_error_not_available (0x80040111) an operation could not be completed because some other necessary component or resource was not available. ns_error_factory_not_registered (0x80040154) returned when a service could not be found. ns_error_factory_register_again (0x80040155) this error is returned when regist...
...And 9 more matches

How to implement a custom autocomplete search component
utocomplete sources, including: history: search the browser's url history (firefox: 1.0+; seamonkey: 1.1+) form-history: search the values that the user has entered into form fields. (firefox: 1.0+; seamonkey: 2.0+) file: search file names (firefox: 2.0+; thunderbird: 2.0+; seamonkey: 1.1+; gtk builds only). the component uses the autocompletesearchparam attribute or searchparam property to allow the developer to define the default directory otherwise only paths beginning with / or ~/ will be autocompleted. building your custom autocomplete search components sometimes, you may want to build your own autocomplete source. to do so you need the following: create an xpcom component that implements the nsiautocompletesearch interface. make sure the contract id of your xpcom component follo...
...oper to define the default directory otherwise only paths beginning with / or ~/ will be autocompleted. building your custom autocomplete search components sometimes, you may want to build your own autocomplete source. to do so you need the following: create an xpcom component that implements the nsiautocompletesearch interface. make sure the contract id of your xpcom component follows the following form: "@mozilla.org/autocomplete/search;1?name=xxx", where "xxx" is the name of your autocomplete source. implement the list of matched strings using the nsiautocompleteresult interface. the simplest way to make an xpcom component is to build an xpcom javascript component (this cannot be done with a javascript module). how to build an xpcom component in javascript will step you through the p...
...ed strings using the nsiautocompleteresult interface. the simplest way to make an xpcom component is to build an xpcom javascript component (this cannot be done with a javascript module). how to build an xpcom component in javascript will step you through the process. because creating an xpcom component in order to build a custom autocomplete source can be enough to discourage some developers, below is an example javascript xpcom component called "simple-autocomplete" that implements the necessary interfaces. note: when copying the examples below, change the uuid that uniquely identifies the component, otherwise you might have problems if your component gets installed along another component derived from those same examples. that can happen! so, get a uuid from http://www.famkruithof.net/u...
...And 9 more matches

Bootstrapping a new locale
lease see those documents. in mozilla, we use the the mercurial version control system (hg) to help manage our localizations. when a localization team is registered and your hg repository is set up for a locale, you can then clone the existing mozilla release branch (i.e. where active development of the upcoming release of firefox occurs) and then begin the necessary work for translation. hg allows localizers to work locally on their machines and then "push" changes to their official mozilla repository. installing mercurial depending on your operating system, you will need to install the correct version of hg on your machine. this document will give you the basic information on how to do that. install the compare-locales utility the next step is to install compare-locales. $ sudo eas...
...tep is to download a copy of the source code to your local system, using mercurial. you will need to "hg clone" the existing release branch for mozilla so you have all the files locally for you to begin localization. make sure to have the directory where you intend to work as the current path on your terminal. ...
... create a bare-bones localization next, create a base localization. this is done by cloning the en-us (united states english) files into your localization. ...
...And 9 more matches

Localizing without a specialized tool
from the create a new localization document, an interested localizer can follow a technical step-by-step process that starts the localization process by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code. with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation. repeating the process allows a localizer to create a testable package to see his or her work as they progress to a final version. if you choose to localize mozilla with nothing more than a text editing application and not a specialized tool, this document (along with create a new localization) will ena...
...fault points to the google search. if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines... there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar. ...
... document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all commands in the documentation as needed by your custom set-up. get the source change your current directory to your working directory with the following command: $ cd /path/to/your/working/directory first, you will need to check out the sources of mozilla-1.9.2 together with the en-us strings. ...
...And 9 more matches

Mozilla DOM Hacking Guide
own property on the object (window, in our case). in getproperty(), we check if the property being set is "location". if that is the case, we call nsidomlocation::sethref(). in fact, when setting window.location, we really set window.location.href. this is all possible thanks to the magic of the interaction between xpconnect and the dom. the second example is the history object. other browsers allow the history object to be used like an array, e.g. history[1]. the behavior "act as an array" cannot be reflected in the idl itself. fortunately, xpconnect provides us with a way to make our class available as an array in javascript. i'm talking about the "scriptable flags". the nsixpcscriptable interface, implemented by the nsdomclassinfo class (see section) defines several flags, one of which is...
...y, e.g. history[1]. the behavior "act as an array" cannot be reflected in the idl itself. fortunately, xpconnect provides us with a way to make our class available as an array in javascript. i'm talking about the "scriptable flags". the nsixpcscriptable interface, implemented by the nsdomclassinfo class (see section) defines several flags, one of which is the want_getproperty flag. when set, it allows us to define a getproperty() function on nshistorysh (the helper class for the history object), which will handle the array behavior. indeed, it will forward the call history[1] to history.item(1), which is defined in the idl and easily coded. the relevant code is at nsdomclassinfo.cpp, around line 4520. these two examples demonstrate the power of the dom combined with xpconnect and the javascr...
... can easily see the interfaces available from js through interface flattening by looking at the code. the interesting part is in nsdomclassinfo::init(). there we have a long list of macros. there is one set of macros per dom class. there you can see, for each object, what interfaces are part of the "flattened" set. as an example, on the window object, we can call all the methods defined on the following interfaces: nsidomwindow, nsidomjswindow, nsidomeventreciever, nsidomeventtarget, nsidomviewcss, and nsidomabstractview. again, without caring on what interface the method is defined. see section 1.5 for more information about the init() method. for the w3c dom (level 1, 2, 3) objects, for each object there is one "standards-compliant" interface, which is exactly the same as the w3c one, name...
...And 9 more matches

NSS Tools certutil
cate and key database management. for information security module database management, see using the security module database tool. availability see the release notes for the platforms this tool is available on. ...
...til option [arguments ] where options and arguments are combinations of the options and arguments listed in the following section. each command takes one option. each option may take zero or more arguments. to see a usage string, issue the command without options, or with the -h option. options and arguments options specify an action and are uppercase. option arguments modify an action and are lowercase. certificate database tool command options and their arguments are defined as follows: options -n create new certificate and key databases. -s create an individual certificate and add it to a certificate database. -r create a certificate-request file that can be submitted to a certificate a...
...g the values of the -t argument. -h display a list of the options and arguments used by the certificate database tool. -w change the password to a key database. -u list all available modules or print a single named module. arguments -a use ascii format or allow the use of ascii format for input or output. this formatting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of thevalidity-time argument is "yymmddhhmmss[+hhmm|-h...
...And 9 more matches

Rhino Debugger
note that this debugger will not work with javascript scripts run in the mozilla browser since rhino is not the engine used in such environments. current limitations: no breakpoint menu using the rhino javascript debugger the mozilla rhino javascript engine includes a source-level debugger for debugging javascript scripts. the debugger is itself a java program which you may run as java org.mozilla.javascript.tools.debugger.main [options] [filename.js] [script-arguments] where the options are the same as the shell. ...
... running scripts you may select the file->run menu item on the menu bar to execute javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to execute. the loaded script will be run in a new thread and control will be given to the debugger on its first instruction. controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the toolbar press the f11 key on the keyboard execution will resume. if the current line in the script contains a function call contro...
...into button on the toolbar press the f11 key on the keyboard execution will resume. if the current line in the script contains a function call control will return to the debugger upon entry into the function. otherwise control will return to the debugger at the next line in the current function. ...
...And 9 more matches

SpiderMonkey Build Documentation
28, you'll additionally need nspr. and of course, you'll need to get the spidermonkey source code. non-developer (optimized) build use these steps if you want to install spidermonkey for production use or run performance benchmarks. (if you want to use spidermonkey as a library in your c++ application, or work on improving spidermonkey itself, do a developer/debug build instead, as described below.) cd js/src # this name should end with "_opt.obj" to make the version control system ignore it. mkdir build_opt.obj cd build_opt.obj /bin/sh ../configure.in # use "mozmake" on windows make a few notes about this: the most common build problems are dependency problems. see the build prerequisites page for your platform. spidermonkey does not support building in your source directo...
...h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include. refer the release notes under command line tools -> new features the release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.14.pk this builds an executable named js in the directory build-release/dist/bin. you can test it with dist/bin/js --help, which displays a help page. at this point, you're ready to run and try out the shell. on mac, linux, or unix, you can install spidermonkey on your system with the additional ...
...command make install. this installs the shared library to /usr/local/lib, the c header files to /usr/local/include, and the js executable to/usr/local/bin. developer (debug) build for developing and debugging spidermonkey itself, it is best to have both a debug build (for everyday debugging) and an optimized build (for performance testing), in separate build directories. thus, in addition to following the steps above, you should also create a debug build using these steps: cd js/src # this name should end with "_dbg.obj" to make the version control system ignore it. mkdir build_dbg.obj cd build_dbg.obj /bin/sh ../configure.in --enable-debug --disable-optimize # use "mozmake" on windows make you can also build debug builds of spidermonkey with the js_gc_zeal option, which adds a new buil...
...And 9 more matches

JSAPI reference
_newcompartmentandglobalobject added in spidermonkey 1.8.1 obsolete since jsapi 16 js_entercrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 js_leavecrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 locale callbacks: struct jslocalecallbacks js_getlocalecallbacks js_setlocalecallbacks locale callback types: jslocaletouppercase jslocaletolowercase jslocalecompare jslocaletounicode scripts just running some javascript code is straightforward: class js::compileoptions added in spidermonkey 17 class js::owningcompileoptions added in spidermonkey 31 class js::readonlycompileoptions added in spidermonkey 31 class js::sourcebufferholder added in spidermonkey 31 js::evaluate added in spidermonkey 17 js_evaluatescript obsolet...
...rmatstring added in spidermonkey 17 class jserrorreport class js::autosaveexceptionstate added in spidermonkey 31 enum jsexntype added in spidermonkey 17 js_reporterror js_reportwarning js_reporterrornumber js_reporterrornumberuc js_reporterrorflagsandnumber js_reporterrorflagsandnumberuc js_reporterrornumberucarray added in spidermonkey 24 js_reportoutofmemory js_reportallocationoverflow added in spidermonkey 1.8 js_geterrorreporter js_seterrorreporterobsolete since jsapi 52 js_errorfromexception js_geterrorprototype jsreport_is_exception jsreport_is_strict jsreport_is_warning jsreport_is_strict_mode_error the following functions allow c/c++ functions to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpend...
...see js::value for their modern replacements. jsval_is_null obsolete since jsapi 32 jsval_is_void obsolete since jsapi 32 jsval_is_boolean obsolete since jsapi 32 jsval_is_number obsolete since jsapi 32 jsval_is_int obsolete since jsapi 32 jsval_is_double obsolete since jsapi 32 jsval_is_string obsolete since jsapi 32 jsval_is_object obsolete since jsapi 15 jsval_is_p...
...And 9 more matches

Setting up the Gecko SDK
« previousnext » this chapter provides basic setup information for the gecko software development kit (sdk) used to build the weblock component in this tutorial. the following four sections tell the developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created. downloading and setting the sdk the gecko sdk provides all of the tools, headers, and libraries that you need to build xpcom components. the sdk is available for windows, linux, and mac operating systems, and versions for other operating systems are being developed, and can be retrieved from as a single archive from the following platform-specific locations (need correction for last version (now 1.9.2.8). there is now separate archive with gecko-sdk, ju...
...la.org/pub/mozi...illa/releases/ gecko versions after 1.8: http://ftp.mozilla.org/pub/mozi...nner/releases/ once you download the sdk, you can expand it into any convenient location. in this appendix, we set up the windows gecko sdk in c:\gecko-sdk\. if you choose some other location, remember to adjust the settings described here (e.g., in the building a microsoft visual cpp project section below) to point to this new location. when you extract the sdk, it should have the layout seen below: layout of the extracted sdk the directories represent different modules in the sdk. for example, the headers for networking are all located in the necko directory, and the headers that xpcom requires are in the xpcom directory. this directory structure makes build scripts slightly more complicated...
...e subdirectories: module subdirectories the bin directory contains static libraries, dynamic libraries, and in some cases tools that may be useful in development. the idl directory contains the public idl files exported by the module. the includes directory contains c++ header files used by your component. xpcom exports a number of binaries that should be mentioned at this point. the table below refers to the windows file names for the executables. application name description of functionality regxpcom.exe registers or unregisters components with xpcom xpidl.exe generates typelib and c++ headers from xpidl xpt_dump.exe prints out information about a given typelib xpt_link.exe combines multiple typelibs into a single typelib ...
...And 9 more matches

Using XPCOM Utilities to Make Things Easier
s that can replace a lot of the code in weblock1.cpp. much of the code created to get the software recognized and registered as a component can be reduced to a small data structure and a single macro. xpcom macros the xpcom framework includes a number of macros for making c++ development easier. though they overlap somewhat (e.g., high-level macros expand to other macros), they fall into the following general categories. generic xpcom module macros the work in the previous chapter was useful in setting up the generic component code. but there are only a few places in that code that are unique to the weblock component, and it was a lot of typing. to write a different component library, you could copy the listing at the end of the chapter, change very little, and paste it into a new project...
...to a new project. to avoid these kinds of redundancies, to regulate the way generic code is written, and to save typing, xpcom providesgeneric module macros that expand into the module code you've already seen. since these macros expand into "generic" implementations, they may not offer as much flexibility as you have when you are writing your own implementation. but they have the advantage of allowing much more rapid development. to get an idea about how much can be handled with the macros described in this section, compare the code listing in weblock2.cpp at the end of the chapter with weblock1.cpp in the previous chapter. the module macros include one set of macros that define the exported nsgetmodule entry point, the required nsimodule implementation code and another that creates a gene...
...when the module is created and/or destroyed. xpcom module macros lists the macros discussed in this section. xpcom module macros macro description ns_impl_nsgetmodule(name, components) implements the nsimodule interface with the module name of name and the component list in components. ns_impl_nsgetmodule_with_ctor(name, components, ctor) same as above but allows for a special function to be called when the module is created. ns_impl_nsgetmodule_with_dtor(name, components, dtor) same as the first macro but allows for a special function to be called when the module is destroyed. ns_impl_nsgetmodule_with_ctor_dtor(name, components, ctor, dtor) this combines the last two macros so that you can define functions to be called at the con...
...And 9 more matches

nsIAccessibleRole
upported automatically by ms windows. role_menubar 2 represents the menu bar (positioned beneath the title bar of a window) from which menus are selected by the user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it. role_sound 5 represents a system sound, which is associated with various system events. role_cursor 6 represents the system mouse pointer. role_caret 7 represents the system caret. the role is supported for caret. role_alert ...
...pp_root. role_document 15 represents a document window. a document window is always contained within an application window. it is used for role="document". role_pane 16 represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. it is used for the first child of a or iframe. role_chart 17 represents a graphical image used to represent data. role_dialog 18 represents a dialog box or message box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not always a ...
...w that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. it is used for xul:statusbar. role_table 24 represents a table that contains rows and columns of cells, and optionally, row headers and column headers. it is used for html:table, role="grid". also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. role_columnheader 25 represents a column header, providing a visual label for a column in a table. it is used for xul tree column headers, html:th, role="colheader". also refer to role_table. role_rowheader 26 represents a row header, which provides a visual label for a table row. it is used for role="rowheader". a...
...And 9 more matches

nsIDocShell
y); native code only! void preparefornewcontentmodel(); void resumerefreshuris(); void setchildoffset(in unsigned long offset); native code only! ...
...set); native code only! ...
...id suspendrefreshuris(); void tabtotreeowner(in boolean forward, out boolean tookfocus); attributes attribute type description allowauth boolean certain dochshells (like the message pane) should not throw up auth dialogs because it can act as a password trojan. allowdnsprefetch boolean attribute that determines whether dns prefetch is allowed for this subtree of the docshell tree. defaults to true. setting this will make it take effect starting with the next document loaded in the docshell. ...
...And 9 more matches

nsIFile
void append(in astring node); void appendnative(in acstring node); native code only! void appendrelativenativepath(in acstring relativefilepath); void appendrelativepath(in astring relativefilepath); nsifile clone(); boolean contains(in nsifile infile); void copyto(in nsifile newparentdir, in astring newname); void copytofollowinglinks(in nsifile newparentdir, in astring newname); void copytofollowinglinksnative(in nsifile newparentdir, in acstring newname); native code only! void copytonative(in nsifile newparentdir, in acstring newname); native code only! void create(in unsigned long type, in unsigned long permissions); void createunique(in unsigned long type, in unsigned long permi...
... the size of the symbolic link referenced by this nsifile. if this nsifile does not reference a symbolic link, then the value of this attribute is undefined. the value of this attribute is the number of bytes corresponding to the data represented by the symbolic link. any meta data, such as a resource fork on the mac, is not included in the measurement of the file size. read only. followlinks prbool determines whether or not the nsifile will automatically resolve symbolic links. by default, this value is false on all non-unix systems. as of mozilla 1.7, this attribute is ignored on unix systems. lastmodifiedtime print64 this attribute exposes the time when the file referenced by this nsifile was last modified. the value of this attribute is...
...ile has undefined behavior. persistentdescriptor acstring on some platforms, the value of nsifile.path may be insufficient to uniquely identify the file on the local file system. the persistent descriptor is intended to be used whenever a nsifile needs to be serialized to disk and later recovered. this string is not intended for display to users. note: the value of the followlinks attribute is not encoded in the persistent descriptor. target astring this attribute exposes the full target of the nsifile - the full path with any symbolic links dereferenced. accessor to the string path. the native version of these strings are not guaranteed to be a usable path to pass to nspr or the c stdlib. there are problems that affect platforms on which ...
...And 9 more matches

nsINavHistoryService
fox 22 / thunderbird 22 / seamonkey 2.19) implemented by: "@mozilla.org/browser/nav-history-service;1". ...
...: "@mozilla.org/browser/nav-history-service;1". ...
...oruri(in nsiuri auri); astring setcharsetforuri(in nsiuri auri, in astring acharset); attributes attribute type description hashistoryentries boolean true if there is any history. this can be used in ui to determine whether the "clear history" button should be enabled or not. ...
...And 9 more matches

XPIDL
efs, native types, or interfaces. interfaces may furthermore contain typedefs, natives, methods, constants, or attributes. most declarations can have properties applied to them. types there are three ways to make types: a typedef, a native, or an interface. in addition, there are a few built-in native types. the built-in native types are those listed under the type_spec production above. ...
...s type but astring. array<t> const nstarray<t>& nstarray<t>& array the c++-exposed type t will be an owned variant. (e.g. ns[c]string, refptr<t>, or uint32_t) string, wstring, [ptr] native and [ref] native are unsupported as element types. ...
... nsiidref const nsiid& nsiid* ? nscidref const nscid& nscid* ? nsidptr const nsid* nsid** ? nsiidptr const nsiid* nsiid** ? ns...
...And 9 more matches

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
make manipulation of the content tree difficult in unexpected ways, depending on where it is located. this article explores when difficulties can occur, and looks at what can be done to mitigate resulting problems. what is whitespace? whitespace is any string of text composed only of spaces, tabs or line breaks (to be precise, crlf sequences, carriage returns or line feeds). these characters allow you to format your code in a way that will make it easily readable by yourself and other people. in fact, much of our source code is full of these whitespace characters, and we only tend to get rid of it in a production build step to reduce code download sizes. html largely ignores whitespace? in the case of html, whitespace is largely ignored — whitespace in between words is treated as a sin...
...uch of our source code is full of these whitespace characters, and we only tend to get rid of it in a production build step to reduce code download sizes. html largely ignores whitespace? in the case of html, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored. ...
...ace? they don't just disappear, however. any whitespace characters that are outside of html elements in the original document are represented in the dom. this is needed internally so that the editor can preserve formatting of documents. this means that: there will be some text nodes that contain only whitespace, and some text nodes will have whitespace at the beginning or end. ...
...And 9 more matches

Element - Web APIs
svgelement interface is the basis for all svg elements. most functionality is specified further down the class hierarchy. languages outside the realm of the web platform, like xul through the xulelement interface, also implement element. ...
... the element. element.namespaceuri read only the namespace uri of the element, or null if it is no namespace. note: in firefox 3.5 and earlier, html elements are in no namespace. in later versions, html elements are in the http://www.w3.org/1999/xhtml namespace in both html and xml trees. nondocumenttypechildnode.nextelementsibling read only is an element, the element immediately following the given one in the tree, or null if there's no sibling node. element.outerhtml is a domstring representing the markup of the element including its content. when used as a setter, replaces the element with nodes parsed from the given string. element.part represents the part identifier(s) of the element (i.e. set using the part attribute), returned as a domtokenlist. element.prefix read o...
...ed with the element. element.undoscope is a boolean indicating if the element is an undo scope host, or not. note: dom level 3 defined namespaceuri, localname and prefix on the node interface. in dom4 they were moved to element. this change is implemented in chrome since version 46.0 and firefox since version 48.0. properties included from slotable the element interface includes the following property, defined on the slotable mixin. slotable.assignedslotread only returns a htmlslotelement representing the <slot> the node is inserted in. event handlers element.onfullscreenchange an event handler for the fullscreenchange event, which is sent when the element enters or exits full-screen mode. this can be used to watch both for successful expected transitions, but also to wa...
...And 9 more matches

IDBKeyRange - Web APIs
the idbkeyrange interface of the indexeddb api represents a continuous interval over some data type that is used for keys. records can be retrieved from idbobjectstore and idbindex objects using keys or a range of keys. you can limit the range using lower and upper bounds. for example, you can iterate over all values of a key in the value range a–z. a key range can be a single value or a range with upper and lower bounds or endpoints. if the key range has both upper and lower bounds, then it is bounded; if it has no bounds, it is unbounded. ...
... key in the value range a–z. a key range can be a single value or a range with upper and lower bounds or endpoints. if the key range has both upper and lower bounds, then it is bounded; if it has no bounds, it is unbounded. a bounded key range can either be open (the endpoints are excluded) or closed (the endpoints are included). ...
...r and lower bounds or endpoints. if the key range has both upper and lower bounds, then it is bounded; if it has no bounds, it is unbounded. a bounded key range can either be open (the endpoints are excluded) or closed (the endpoints are included). ...
...And 9 more matches

Node - Web APIs
to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances. for example, attempting to add children to a node type that cannot have children will throw an exception. ...
... node.baseuriread only returns a domstring representing the base url of the document containing the node. node.baseuriobject read only (not available to web content.) the nsiuri object representing the base uri for the element. node.childnodesread only returns a live nodelist containing all the children of this node. nodelist bei...
...nt returns / sets the textual content of an element and all its descendants. obsolete properties node.localname read only returns a domstring representing the local part of the qualified name of an element. note: in firefox 3.5 and earlier, the property upper-cases the local name for html elements (but not xhtml elements). in later versions, this does not happen, so the property is in lower case for both html and xhtml. node.namespaceuri read only the namespace uri of this node, or null if it is no namespace. note: in firefox 3.5 and earlier, html elements are in no namespace. in later versions, html elements are in the http://www.w3.org/1999/xhtml/ namespace in both html and xml trees. node.nodeprincipal obsolete since gecko 46 a nsiprincipal representing the no...
...And 9 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
pendencies while we will not rely upon any 3d graphics frameworks such as three.js or the like for this example, we do use the glmatrix library for matrix math, which we've used in other examples in the past. this example also imports the webxr polyfill maintained by the immersive web working group, which is the team responsible for the webxr api's specification. by importing this polyfill, we allow the example to work on many browsers that don't yet have webxr implementations in place, and we smooth out any transient deviations from the specification that occur during these still somewhat experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. the code looks like th...
...that occur during these still somewhat experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. the code looks like this: const xrotationdegreespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second. yrotationdegreespersecond the number of degrees to rotate around the y axis each second. zrotationdegrees...
..._speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second. yrotationdegreespersecond the number of degrees to rotate around the y axis each second. zrotationdegreespersecond the number of degrees per second to rotate around the z axis. enablerotation a boolean indicating whether or not to enable the rotation of the cube at all. allowmouserotation if true, you can use the mouse to pitch and yaw the view angle. allowkeyboardmotion if true, the w, a, s, and d keys move the viewer forward, left, backward, and to the right, while the up and down arrow keys move up and down. if false, only xr device changes to the view are permitted. enableforcepolyfill if this boolean is true, the example will attempt to use the webxr polyfil...
...And 9 more matches

WindowOrWorkerGlobalScope.setInterval() - Web APIs
by the windoworworkerglobalscope mixin. syntax var intervalid = scope.setinterval(func, [delay, arg1, arg2, ...]); var intervalid = scope.setinterval(function[, delay]); var intervalid = scope.setinterval(code, [delay]); parameters func a function to be executed every delay milliseconds. the function is not passed any arguments, and no return value is expected. ...
... arg1, ..., argn optional additional arguments which are passed through to the function specified by func once the timer expires. note: passing additional arguments to setinterval() in the first syntax does not work in internet explorer 9 and earlier. ...
...nd that clearinterval() and cleartimeout() can technically be used interchangeably. for clarity, however, you should try to always match them to avoid confusion when maintaining your code. note: the delay argument is converted to a signed 32-bit integer. this effectively limits delay to 2147483647 ms, since it's specified as a signed integer in the idl. examples example 1: basic syntax the following example demonstrates setinterval()'s basic syntax. var intervalid = window.setinterval(mycallback, 500, 'parameter 1', 'parameter 2'); function mycallback(a, b) { // your code here // parameters are purely optional. console.log(a); console.log(b); } example 2: alternating two colors the following example calls the flashtext() function once a second until the stop button is pressed. <...
...And 9 more matches

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
w.settimeout()) sets a timer which executes a function or specified piece of code once the timer expires. syntax var timeoutid = scope.settimeout(function[, delay, arg1, arg2, ...]); var timeoutid = scope.settimeout(function[, delay]); var timeoutid = scope.settimeout(code[, delay]); parameters function a function to be executed after the timer expires. code an alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. this syntax is not recommended for the same reasons that make using eval() a security risk. delay optional the time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. if this parameter is omitted, a value of 0 is used, meaning e...
...curity risk. delay optional the time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. if this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle. note that 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 ...
...imeout() and clearinterval() can technically be used interchangeably. for clarity, however, you should try to always match them to avoid confusion when maintaining your code. it is guaranteed that a timeout id will never be reused by a subsequent call to settimeout() or setinterval() on the same object (a window or a worker). however, different objects use separate pools of ids. example the following example sets up two simple buttons in a web page and hooks them to the settimeout() and cleartimeout() routines. pressing the first button will set a timeout which calls an alert dialog after two seconds and stores the timeout id for use by cleartimeout(). you may optionally cancel this timeout by pressing on the second button. html <p>live example</p> <button onclick="delayedalert();">show ...
...And 9 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
above demonstrate how row and row-reverse work in a left-to-right language such as english. if you are working in a right-to-left language like arabic then row would start on the right, row-reverse on the left. this can seem like a neat way to display things in reverse order however you should be mindful that the items are only visually displayed in reverse order. ...
...se on the left. this can seem like a neat way to display things in reverse order however you should be mindful that the items are only visually displayed in reverse order. the specification says the following on this matter: “note: the reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. this allows authors to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order. if you are...
...order that these items appear in the document source — not your visual order. if you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. the specification continues with a warning not to use reordering to fix issues in your source: “authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers. this has now been fixed. you should always take the source order as the logical order of the document as all up-to-d...
...And 9 more matches

OpenType font features guide - CSS: Cascading Style Sheets
hs or character styles contained within an opentype font. these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. this article provides you with all you need to know about using opentype font features in css. some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specific scenarios. in addition to broad feature sets l...
...using opentype font features in css. some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specific scenarios. in addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages. in the latter case, these alterations are actually necessary to properly express the language, so they go be...
... for east asian languages. in the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other opentype features. caution: there are many css attributes defined to leverage font features, but unfortunately many are not fully implemented. they are all defined and shown here, but many will only work using the lower-level font-feature-settings property. it's possible to write css to work both ways but this can become cumbersome. the issue with simply using font-feature-settings for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with font-variation-settings). discovering availability of feature...
...And 9 more matches

Value definition syntax - CSS: Cascading Style Sheets
css value definition syntax, a formal grammar, is used for defining the set of valid values for a css property or function. in addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive). the definition syntax describes which values are allowed and the interactions between them. a component can be a keyword, some characters considered as a literal, or a value of a given css data type or of another css property. component value types keywords generic keywords a keyword with a predefined meaning appears literally, without quotation marks. for example: auto, smaller or ease-in. the specific case of inherit, initial and unset all css properties accept the keywords inherit, initial and unset, that ar...
...of their definition. in this case, the definition is usually physically very close to the definition of the property using them. component value combinators brackets brackets enclose several entities, combinators, and multipliers, then transform them as a single component. they are used to group components to bypass the precedence rules. bold [ thin && <length> ] this example matches the following values: bold thin 2vh bold 0 thin bold thin 3.5em but not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it. juxtaposition placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. all juxtaposed components are mandatory and should appear in the e...
... not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it. juxtaposition placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. all juxtaposed components are mandatory and should appear in the exact order. ...
...And 9 more matches

<color> - CSS: Cascading Style Sheets
the <color> css data type represents a color in the srgb color space. a <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background. a <color> can be defined in any of the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <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...
...word rgb hex value live keyword css level 1 black #000000 silver #c0c0c0 gray #808080 white #ffffff maroon #800000 red #ff0000 purple #800080 fuchsia #ff00ff green #008000 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua #00ffff css level 2 (revision 1) orange #ffa500 css color module level 3 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd4 azure #f0ffff beige #f5f5dc bisque...
...uamarine #7fffd4 azure #f0ffff beige #f5f5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a burlywood #deb887 cadetblue #5f9ea0 chartreuse #7fff00 chocolate #d2691e coral #ff7f50 cornflowerblue #6495ed cornsilk #fff8dc crimson #dc143c cyan (synonym of aqua) #00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod #b8860b darkgray #a9a9a9 darkgreen #006400 darkgrey #a9a9a9 darkkhaki #bdb76b darkmagenta ...
...And 9 more matches

Adding captions and subtitles to HTML5 video - Developer guides
s if you are not sure what they are. they are however implemented in the same way technically, so the material in this article will apply to both. for this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people. ...
...l in this article will apply to both. for this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people. the <track> element html5 allows us to specify subtitles for a video using the <track> element. the various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information. webvtt the files that contain the actual subtitle data are simple text files that follow a specified format, in this case the web video text tracks (webvtt) format. the webvtt specification is still being worked on, b...
... src is assigned a valid url pointing to the relevant ...
...And 9 more matches

Creating a cross-browser video player - Developer guides
<source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video ...
...e="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the pl...
...ip-medium.mp4">download mp4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript. doing things this way still allows users who have javascript turned off (for whatever reason) to still have access to the browser's native controls. a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file. this provides the player with data such as video duratio...
...And 9 more matches

Challenge solutions - Developer guides
it also supports some more exotic color names like chartreuse, fuschia, or burlywood. see css color value for a complete list as well as other ways of specifying colors. ...
...it also supports some more exotic color names like chartreuse, fuschia, or burlywood. see css color value for a complete list as well as other ways of specifying colors. ...
...rial describe style rules and declarations in greater detail. selectors second paragraph blue challenge without changing your html file, add a single rule to your css file that keeps all the initial letters the same color as they are now, but makes all the other text in the second paragraph blue. solution add a rule with an id selector of #second and a declaration color: blue;, as shown below: #second { color: blue; } a more specific selector, p#second also works. both paragraphs blue challenge now change the rule you have just added (without changing anything else), to make the first paragraph blue too. solution change the selector of the new rule to be a tag selector using p: p { color: blue; } the rules for the other colors all have more specific selectors, so they...
...And 9 more matches

Indexed collections - JavaScript
does not have an explicit array data type. however, you can use the predefined array object and its methods to work with arrays in your applications. the array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. it has a property for determining the array length and other properties for use with regular expressions. creating an array the following statements create equivalent arrays: let arr = new array(element0, element1, ..., elementn) let arr = array(element0, element1, ..., elementn) let arr = [element0, element1, ..., elementn] element0, element1, ..., elementn is a list of values for the array's elements. when these values are specified, the array is initialized with them as the array's elements. the array's length property is ...
...pecified, the array is initialized with them as the array's elements. the array's length property is set to the number of arguments. the bracket syntax is called an "array literal" or "array initializer." it's shorter than other forms of array creation, and so is generally preferred. see array literals for details. to create an array with non-zero length, but without any items, either of the following can be used: // this... let arr = new array(arraylength) // ...results in the same array as this let arr = array(arraylength) // this has exactly the same effect let arr = [] arr.length = arraylength note: in the above code, arraylength must be a number. otherwise, an array with a single element (the provided value) will be created. calling arr.length will return arraylength, but the ar...
...tes an array with only one element: // the number 42. let arr = array(42) // creates an array with no elements // and arr.length set to 42. // // this is equivalent to: let arr = [] arr.length = 42 calling array(n) results in a rangeerror, if n is a non-whole number whose fractional portion is non-zero. the following example illustrates this behavior. let arr = array(9.3) // rangeerror: invalid array length if your code needs to create arrays with single elements of an arbitrary data type, it is safer to use array literals. alternatively, create an empty array first before adding the single element to it. in es2015, you can use the array.of static method to create arrays with single element. let wis...
...And 9 more matches

Inheritance and the prototype chain - JavaScript
re dynamic "bags" of properties (referred to as own properties). javascript objects have a link to a prototype object. when trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end 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 ...
...); // 5 // when p.m is called, 'this' refers to p. // so when p inherits the function m of o, // 'this.a' means p.a, the property 'a' of p using prototypes in javascript let's look at what happens behind the scenes in a bit more detail. in javascript, as mentioned above, functions are able to have properties. all functions have a special property named 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...
... ƒ dosomething(), __proto__: { constructor: ƒ object(), hasownproperty: ƒ hasownproperty(), isprototypeof: ƒ isprototypeof(), propertyisenumerable: ƒ propertyisenumerable(), tolocalestring: ƒ tolocalestring(), tostring: ƒ tostring(), valueof: ƒ valueof() } } we can add properties to the prototype of dosomething(), as shown below. function dosomething(){} dosomething.prototype.foo = "bar"; console.log( dosomething.prototype ); this results in: { foo: "bar", constructor: ƒ dosomething(), __proto__: { constructor: ƒ object(), hasownproperty: ƒ hasownproperty(), isprototypeof: ƒ isprototypeof(), propertyisenumerable: ƒ propertyisenumerable(), tolocalestring: ƒ tolo...
...And 9 more matches

eval() - JavaScript
the eval() function evaluates javascript code represented as a string. 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. syntax eval(string) parameters string a string representing a javascript expression, statement, or sequence of statements. ...
...ion as a string, you can use eval() to evaluate it at a later time. for example, suppose you have a variable x. you can postpone evaluation of an expression involving x by assigning the string value of the expression, say "3 * x + 2", to a variable, and then calling eval() at a later point in your script. if the argument of eval() is not a string, eval() returns the argument unchanged. in the following example, the string constructor is specified and eval() returns a string object rather than evaluating the string. eval(new string('2 + 2')); // returns a string object containing "2 + 2" eval('2 + 2'); // returns 4 you can work around this limitation in a generic fashion by using tostring(). var expression = new string('2 + 2'); eval(expression.tostring()); // retur...
...ges of the caller. if you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. more importantly, a third-party code can see the scope in which eval() was invoked, which can lead to possible attacks in ways to which the similar function is not susceptible. eval() is also slower than the alternatives, since it has to invoke the javascript interpreter, while many other constructs are optimized by modern js engines. additionally, modern javascript interpreters convert javascript to machine code. this means that any concept of variable naming gets obliterated. thus, any use of eval() will force the browser to do long expensive variable name lookups to figure out where th...
...And 9 more matches

XUL Migration Guide - Archive of obsolete content
outline how to decide whether your add-on is a good candidate for migration via a comparison of the benefits and limitations of the sdk versus xul development. next, we'll look at some of the main tasks involved in migrating: working with content scripts using the sdk's supported apis how to go beyond the supported apis when necessary, by: using third party modules using the sdk's low-level apis getting direct access to xpcom finally, we'll walk through a simple example. should you migrate? see this comparison of the benefits and limitations of sdk development and xul development. whether you should migrate a particular add-on is largely a matter of how well the sdk's supported apis meet its needs. if your add-on can accomplish everything it needs using on...
...is comparison of the benefits and limitations of sdk development and xul development. whether you should migrate a particular add-on is largely a matter of how well the sdk's supported apis meet its needs. if your add-on can accomplish everything it needs using only the supported apis, it's a good candidate for migration. if your add-on needs a lot of help from third party packages, low-level apis, or xpcom, then the cost of migrating is high, and may not be worth it at this point. if your add-on only needs a little help from those techniques, and can accomplish most 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...
.... 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 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/ ...
...And 8 more matches

Preferences - Archive of obsolete content
this article provides examples for extension developers that wish to use the mozilla preferences system. information here applies to the mozilla suite, firefox, thunderbird, and possibly other mozilla-based applications. for more details on preferences in mozilla, see preferences system. if you haven't yet, read other documents about mozilla preferences on mdn (links below in resources section). note: this article doesn't cover all available methods for manipulating preferences; please refer to the xpcom reference pages listed in resources section for the complete list of methods. the interfaces dealing with preferences are fairly well documented, so using the methods not mentioned here should be straightforward. xpcom interfaces for preferences system mozilla exposes its preferences sys...
...ng preferences; please refer to the xpcom reference pages listed in resources section for the complete list of methods. the interfaces dealing with preferences are fairly well documented, so using the methods not mentioned here should be straightforward. xpcom interfaces for preferences system mozilla exposes its preferences system through a few xpcom interfaces. look in the resources section below for the link to a list of preferences-related interfaces. two used interfaces are nsiprefservice and nsiprefbranch. the preferences service is instantiated in the same way you instantiate any xpcom service. to get an nsiprefbranch, either queryinterface() the pref service (that will give you the root branch) or call nsiprefservice.getbranch() to get a sub-branch. here are two examples: // get...
...xvalue(). you can look up their implementations in nsprefbranch.cpp. here are the idl definitions: void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqiresult avalue); void setcomplexvalue(in string aprefname, in nsiidref atype, in nsisupports avalue); as you can see, both of them take a parameter, atype, which can have one of the following values (to be precise, you should pass components.interfaces.nsiwhatever instead of just nsiwhatever, which is undefined). nsisupportsstring used to handle unicode strings in preferences. use this when the preference value may contain non-ascii characters (for example, a user's name). nsipreflocalizedstring almost the same as nsisupportsstring, but it is handled differently in getcomple...
...And 8 more matches

Mozilla Application Framework in Detail - Archive of obsolete content
for parallel development! unlike many other application frameworks, you are not limited to the widget set we provide, nor limited to the "look and feel" of the native os. you can create applications using our framework that either have a native look and feel for each os, or one which is identical on macs, pc's or unix operating systems. you may also further enhance the user interface by allowing 3rd parties to develop "themes" for your application. themes are simply collections of images and css which can augment or replace your current ui elements. xul provides an excellent answer for organizations with heterogeneous computing environments. customized xul applications with significant business logic can be written once, and used on the range of platforms that exist within the ...
...pplications with significant business logic can be written once, and used on the range of platforms that exist within the organization. in addition, if the organization maintains sophisticated, interactive websites, it will already possess a wealth of technical expertise that will be relevant for creating xul applications. in addition to the technologies already mentioned, we go even further by allowing you to even create your own custom interface widgets. don't feel limited by the widgets that the framework already contains! xbl (extensible binding language) allows you to expand your library of interface elements, and even construct your own xml language for defining your ui. for instance imagine that you wanted to create a chess style game. you could easily create xml elements such as <ches...
...e. you could easily create xml elements such as <chessboard> or <chesspiece> and via xbl map these to images and application logic. this is very powerful since you could make improvements to the underlying application logic without having to rewrite the higher level code. our platform also can take advantage of other internet standards such as xslt and rdf. rdf, a core element to the framework, allows you to define dynamic elements in your 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 ...
...And 8 more matches

New Security Model for Web Services - Archive of obsolete content
h they were loaded, any script loaded from one domain into another is prevented from accessing resources in the domain into which it has been loaded. this policy has generally been successful in sandboxing javascript and java applets across the web. if the sandbox is unable to distinguish the common uri substring of the domain to be trusted from similar uris of untrusted domains, then it could allow a script loaded from an indistinguishable domain to exploit firewall-protected resources. also, this technique prevents the script from accessing many legitimate external resources not provided in the same domain as the script. this prevents a script from accessing web services and data published from any domain besides its own. white-listing by creating a white list of trusted uris from which...
...ntly permitted for locally-saved scripts and signed scripts. this could be combined with the other options above such as whitelisting, signed scripts, etc. but the big problem with this is that the typical browser user really does not either understand or pay the consequences if he inadvertently opens a hole in his company's firewall. quite complex settings may be required to permit the user to allow access to desired external services without risking other resources. controlling resource access on the server access by untrusted scripts really needs to be under the control of the stake holder, which is the resource and server owner -- not the user -- to determine whether a resource should be insulated from web applications loaded from outside of the firewall. using a soap header for verifi...
...r resources. controlling resource access on the server access by untrusted scripts really needs to be under the control of the stake holder, which is the resource and server owner -- not the user -- to determine whether a resource should be insulated from web applications loaded from outside of the firewall. using a soap header for verification soap messages have a distinct processing model allowing a header to be added that the recipient is required to understand and accept, which identifies the untrusted source of a script making a request. soap services which have not been cleared for access by untrusted scripts will reject the requests. this is offered in the mozilla implementation of soap today. unfortunately, this does not prevent soap messages from being sent to non-soap addresses...
...And 8 more matches

URIs and URLs - Archive of obsolete content
warning: the content of this article may be out of date. it was last updated in 2002. overview handling network and locally retrievable resources is a central part of necko. ...
... in 2002. overview handling network and locally retrievable resources is a central part of necko. ...
... resource a resource can be anything that has identity. familiar examp...
...And 8 more matches

Positioning - Archive of obsolete content
horizontally, the left edge of the menu popup is aligned with the left edge of the menu or button. a submenu, however, is placed by default to the right of the parent menu item, such that the top edge of the menu is aligned with the top edge of the parent menu item. ...
...s placed by default to the right of the parent menu item, such that the top edge of the menu is aligned with the top edge of the parent menu item. however, the submenu will appear to the left instead for right to left locales. for both top level menus and submenus, they may appear above or to the left instead of their usual placement if there is not enough room to display the menu at full size below or to the right. if there is not enough room on either side, the menu will be shrunk down to fit. for popups attached using the popup or context attributes, the default position to appear is with the upper left corner (or upper right corner in right to left locales) at the position where the mouse was clicked. context menus will appear offset down and to the right a couple of pixels so that the ...
...set vertically by a small amount. the position attribute the position of all types of popups can be controlled in two ways. first, the position can be specified when using the popup's openpopup method. this is used when a popup is opened by a script. second, the position can be specified using several attributes placed on the menupopup, panel or tooltip element. these attributes are described below and function the same for all three elements. the position attribute specifies the alignment of the popup with respect to the element that the popup is attached to. for a menupopup placed inside a menu, button or toolbarbutton, the position attribute controls how the menupopup is anchored to the parent menu, button or toolbarbutton. for a menupopup or panel attached using the popup attribute...
...And 8 more matches

Skinning XUL Files by Hand - Archive of obsolete content
pplied to a whole application -- like the mozilla browser -- so that all the various windows and parts will look consistent. in the meantime, however, skinning a file requires some manual interaction. this article can help you get started understanding skins and creating skins for xul. it presumes you have at least basic understanding of xul and the application object model that xul describes. following the instructions here, you are going to create a skin for a xul file and apply it by specifying classes for all of the interested elements. the skin will reside in a single css file, appropriately named drxul.css. as you will see, css provides a lot of flexibility for defining styles to individual elements, to classes of elements, to pseudo-classes, and to anonymous classes. by the way, in co...
..., most of the behavior that buttons exhibit comes from styles and an event model based on javascript that dynamically switches between these styles. mozilla's current global skin defines this basic behavior for several classes of button. a button is styled by the global skin when its class attribute is set to a class which is defined in the global skin. for example, when a button is defined as follows: <button class="plain" label="push me" /> then the following very simple style definition applies to that button. button.plain { border: 0px !important; } the global skin, in which styles for these several button classes and dozens of other elements are defined, is described in the following section. if you want to use the classes already defined in mozilla's global skin to style your elem...
... be skinned, like mozilla, you probably want your xul file to pick up the global changes when the application is dynamically reskinned. to keep your xul looking consistent and to avoid breaking skins altogether (when your styles have some dependency on a part of the global skin that changes, such as an image), use the style rules in the global skin by importing it into your stylesheet with the following instruction: @import url("chrome://global/skin/"); refer to the document writing skinnable xul and css for guidelines on how to make your skins friendly to the global skin, to xul, and to mozilla. stylesheet syntax to familiarize yourself with the global skin, open up the text file called global.css in the chrome/classic.jar!/skin/classic/global directory of the mozilla application. in a ...
...And 8 more matches

textbox - Archive of obsolete content
disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused ...
...ute is true if the element is focused. emptytext deprecated since gecko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the placeholder attribute in gecko 2.0. the old name is retained for compatibility, but you should update your code. hidespinbuttons type: boolean if true, the number box does not have arrow buttons next to it to allow the user to adjust the value. the value may still be adjusted with the keyboard. the default value is false. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. label type: string if present and not empty, this w...
...agged). the default value is 1. label type: string if present and not empty, this will be exposed to screen readers through the label property. type: integer the maximum value that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. ...
...And 8 more matches

tree - Archive of obsolete content
r of columns. each row of the tree may contain child rows which are displayed indented from the parent. 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. there are several ways in which trees are used, as listed below. the second column lists the interfaces available via the tree's view property. the third column indicates whether treeitem element are used. if you would like to allow the tree to be horizontally scrolled, simply set the width attributes for each column to make the tree wider than its containing object. tree type view interfaces has dom nodes? description content tre...
... disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablek...
... more letters with select more specific items. this feature may be disabled by setting this attribute to true. editable type: boolean indicates that the cells of the tree may be edited. enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed. flags type: space-separated list of the values below a set of flags used for miscellaneous purposes. two flags are defined, which may be the value of this attribute. dont-test-empty: for template generated content, the builder will not check that a container is empty. dont-build-content: this flag may be used on a tree to indicate that content elements should not be generated. this results in a performance enhancement, but you will not be ab...
...And 8 more matches

treecol - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a column of a tree. it displays the column header and holds the size and other information about the column. you can also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. <tree flex="1" edi...
...on firefox 2.x and 3.x, all operating systems other than mac os x already use these styles by default. if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image. however, chrome://global/skin/checkbox/cbox-check.gif is available in seamonkey on mac os x.. treechildren::-moz-tree-checkbox { ...
...ecify a url to an image in your extension or elsewhere. */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } for example: create a css file. copy and paste the code above and link the css file to your xul file. reload the page to see the checkbox. if you want, you can also style the tree using css. attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in ri...
...And 8 more matches

Adobe Flash - Archive of obsolete content
c os x, there is an additional caveat: netscape gecko browsers such as camino (formerly chimera), the latest mozilla browsers, and future versions of netscape which are built using the mach-o binary format won't be able to use flash's scriptability features. until macromedia changes this from within the flash plugin, scriptability can not be used on mac os x browsers based on gecko. ...
...ra), the latest mozilla browsers, and future versions of netscape which are built using the mach-o binary format won't be able to use flash's scriptability features. until macromedia changes this from within the flash plugin, scriptability can not be used on mac os x browsers based on gecko. the example below shows a detection heuristic in action. example 1: verifying the flash plugin version below, javascript identifies the version of flash, and whether it is scriptable in netscape gecko: can we have javascript in a wiki page? <script type="text/javascript">identifyflash();</script> typically, javascript code that determines what version of the plugin is installed looks at the mimetypes array that is part of the navigator object. every plugin exposes a description string that typically ...
...r where major can be a major revision such as "5" or "6" and minor is the subsidiary version number. example 1 also creates a constant flashversionosxscriptable that declares (arbitrarily) that macromedia will fix flash to be scriptable in mach-o browsers (on os x) by version 12. this is currently not the case, but 12 is a sufficiently high version number (current versions are version 6r.79) to allow for some leeway for fixing this down the road. when information about when this problem on mac os x will be addressed becomes available, the constant can be updated to reflect something less arbitrary. a complete code listing which expands on the above approach can be found in the flashversion.js file used in the samples. performance and flash as is the case with any plug-in content, flash cont...
...And 8 more matches

Move the ball - Game development
, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. you can run a function over and over again using a javascript timing function such as setinterval() or requestanimationframe(). ...
... to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. you can run a function over and over again using a javascript timing function such as setinterval() or requestanimationframe(). delete all the javascript you currently have inside your html file except for the first two lines, and add the following below them. ...
... making it move you won't notice the ball being repainted constantly at the moment, as it's not moving. ...
...And 8 more matches

Player paddle and controls - Game development
with. rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the relevant image asset, and then do the magic. ...
...e following new load.image() call: function preload() { // ... game.load.image('ball', 'img/ball.png'); game.load.image('paddle', 'img/paddle.png'); } adding the paddle graphic just so we don't forget, at this point you should grab the paddle graphic from github, and save it in your /img folder. rendering the paddle, with physics next up, we will init our paddle by adding the following add.sprite() call inside the create() function — add it right at the bottom: paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle'); we can use the world.width and world.height values to position the paddle exactly where we want it: game.world.width*0.5 will be right in the middle of the screen. in our case the world is the same as the canvas, but for other types of...
...s you'll notice if you reload your index.html at this point, the paddle is currently not exactly in the middle. why? because the anchor from which the position is calculated always starts from the top left edge of the object. we can change that to have the anchor in the middle of the paddle's width and at the bottom of it's height, so it's easier to position it against the bottom edge. ...
...And 8 more matches

Handling different text directions - Learn web development
what are writing modes? a writing mode in css refers to whether the text is running horizontally or vertically. the writing-mode property lets us switch from one writing mode to another. you don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes. ...
...sentences run vertically. ...
...e below we have a heading displayed using writing-mode: vertical-rl. the text now runs vertically. vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your web design. the three possible values for the writing-mode property are: horizontal-tb: top-to-bottom block flow direction. sentences run horizontally. vertical-rl: right-to-left block flow direction. sentences run vertically. vertical-lr: left-to-right block flow direction. sentences run vertically. so the writing-mode property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. this then dictates the direction text flows in sentences. writing modes and block and inline layou...
...And 8 more matches

Images, media, and form elements - Learn web development
er elements. as we will see however, there are various things that css can do with an image. certain replaced elements, such as images and video, are also described as having an aspect ratio. this means that it has a size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default. ...
...zontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default. sizing images as you already know from following these lessons, everything in css generates a box. if you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than the box, or overflow the box. you need to make a decision about what happens with the overflow. ...
...he file by default. sizing images as you already know from following these lessons, everything in css generates a box. if you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than the box, or overflow the box. you need to make a decision about what happens with the overflow. in the example below we have two boxes, both 200 pixels in size: one contains an image which is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it. the other is larger than 200 pixels and overflows the box. so what can we do about the overflowing issue? as we learned in our previous lesson, a common technique is to make the max-width of an image 100%. this will enable the i...
...And 8 more matches

Responsive design - Learn web development
iew: css layout next in the early days of web design, pages were built to target a particular screen size. if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css bui...
...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 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. ...
...ticle, fluid grids (published in 2009 on a list apart). the second technique was the idea of fluid images. using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger. this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image. the third key component was the media query. media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css. rather than having one layout for all screen sizes, the layout could be changed. sidebars could be repositioned for the smaller screen, or ...
...And 8 more matches

How to structure a web form - Learn web development
u explicitly bind a control with a form even if it is not nested inside it. let's move forward and cover the structural elements you'll find nested in a form. the <fieldset> and <legend> elements the <fieldset> element is a convenient way to create groups of widgets that share the same purpose, for styling and semantic purposes. you can label a <fieldset> by including a <legend> element just below the opening <fieldset> tag. the text content of the <legend> formally describes the purpose of the <fieldset> it is included inside. many assistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label o...
...el to activate the corresponding widget. this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible. ...
...find this example in checkbox-label.html (see it live also). multiple labels strictly speaking, you can put multiple labels on a single widget, but this is not a good idea as some assistive technologies can have trouble handling them. in the case of multiple labels, you should nest a widget and its labels inside a single <label> element. ...
...And 8 more matches

Styling web forms - Learn web development
t we can now use css to style many form features, though we do need to take extra care to ensure we don't break usability. not all widgets are created equal when css is involved at present, some difficulties remain when using css with forms. these problems can be divided into three categories: the good some elements can be styled with few if any problems across platforms. these include the following elements: <form> <fieldset> and <legend> single-line text <input>s (e.g. type text, url, email...), except for <input type="search">. multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we descr...
...<select> that causes the options list to display) making up those widgets. if you want to thoroughly customize those widgets, 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 s...
... css font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). however, browser behavior is often inconsistent. by default, some widgets do not inherit font-family and font-size from their parents. many browsers use the system default appearance instead. to make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet: button, input, select, textarea { font-family: inherit; font-size: 100%; } the inherit property value causes the property value to match the computed value of the property of its parent element; inheriting the value of the parent. the screenshots below show the difference. on the left is the default rendering of an <input type="text">, <input type="date">, <sel...
...And 8 more matches

The web and web standards - Learn web development
eferred to as timbl) wrote a notebook program called enquire, which featured the concept of links between different nodes. sound familiar? fast forward to 1989, and timbl wrote information management: a proposal and hypertext at cern; these two publications together provided the background for how the web would work. ...
...ok, that's a very simple summary of what happened, but i did promise you a brief summary. ...
...ated. 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 1994, timbl founded the world wide web consortium (w3c), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. after that other technologies followed such as css and javascript, and the web started to look more like the web we know today. web standards web standards are the technologies 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 ...
...And 8 more matches

Build your own function - Learn web development
a custom function, and explain a few more useful associated details. active learning: let's build a function the custom function we are going to build will be called displaymessage(). it will display a custom message box on a web page and will act as a customized replacement for a browser's built-in alert() function. we've seen this before, but let's just refresh our memories. type the following in your browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box. try varying the string to change the message. the alert function is limited: you can alter the message, but you can't easily vary anything else, such as the color, icon, or anything else. we'll build one that wi...
...e. we'll build one that will prove to be more fun. note: this example should work in all modern browsers fine, but the styling might look a bit funny in slightly older browsers. we'd recommend you doing this exercise in a modern browser like firefox, opera, or chrome. the basic function to begin with, let's put together a basic function. note: for function naming conventions, you should follow the same rules as variable naming conventions. this is fine, as you can tell them apart — function names appear with parentheses after them, and variables don't. start by accessing the function-start.html file and making a local copy. you'll see that the html is simple — the body contains just a single button. we've also provided some basic css to style the custom message box, and an empt...
...s you can tell them apart — function names appear with parentheses after them, and variables don't. start by accessing the function-start.html file and making a local copy. you'll see that the html is simple — the body contains just a single button. we've also provided some basic css to style the custom message box, and an empty <script> element to put our javascript in. next, add the following inside the <script> element: function displaymessage() { } we start off with the keyword function, which means we are defining a function. this is followed by the name we want to give to our function, a set of parentheses, and a set of curly braces. any parameters we want to give to our function go inside the parentheses, and the code that runs when we call the function goes inside the cu...
...And 8 more matches

Handling text — strings in JavaScript - Learn web development
gs together. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to gain familiarity with the basics of strings in javascript. the power of words words are very important to humans — they are a large part of how we communicate. ...
...n familiarity with the basics of strings in javascript. the power of words words are very important to humans — they are a large part of how we communicate. since the web is a largely text-based medium designed to allow humans to communicate and share information, it is useful for us to have control over the words that appear on it. html provides structure and meaning to our text, css allows us to precisely style it, and javascript contains a number of features for manipulating strings, creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more. pretty much all of the programs we've shown you so far in the course have involved some string manipulation. strings — the basics strings are dealt with s...
...f the programs we've shown you so far in the course have involved some string manipulation. strings — the basics strings are dealt with similarly to numbers at first glance, but when you dig deeper you'll start to see some notable differences. let's start by entering some basic lines into the browser developer console to familiarize ourselves. ...
...And 8 more matches

Inheritance in JavaScript - Learn web development
person, but also includes: a new property, subject — this will contain the subject the teacher teaches. an updated greeting() method, which sounds a bit more formal than the standard greeting() method — more suitable for a teacher addressing some students at school. ...
...but also includes: a new property, subject — this will contain the subject the teacher teaches. an updated greeting() method, which sounds a bit more formal than the standard greeting() method — more suitable for a teacher addressing some students at school. ...
...the first parameter specifies the value of this that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked. ...
...And 8 more matches

Starting our Svelte Todo list app - Learn web development
ctive tasks, or completed tasks. edit tasks. mark all tasks as active/completed. remove all completed tasks. building our first component let's create a todos.svelte component — this will contain our list of todos. create a new folder — src/components. ...
...asks, or completed tasks. edit tasks. mark all tasks as active/completed. remove all completed tasks. building our first component let's create a todos.svelte component — this will contain our list of todos. create a new folder — src/components. ...
...ing our first component let's create a todos.svelte component — this will contain our list of todos. create a new folder — src/components. note: you can put your components anywhere inside the src folder, but the components folder is a recognized convention to follow, allowing you to find your components easily. ...
...And 8 more matches

Creating our first Vue component - Learn web development
ing a todoitem component let's create our first component, which will display a single todo item. we'll use this to build our list of todos. in your moz-todo-vue/src/components directory, create a new file named todoitem.vue. open the file in your code editor. create the component's template section by adding <template></template> to the top of the file. ...
...we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. ...
...a single root element — one element needs to wrap everything inside the template section (this will change when vue 3 comes out). we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. add an id to the checkbox, and a for attribute mapping the checkbox to the label, as shown below. <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working. let’s add it now. open up app.vue again. at the top of your <...
...And 8 more matches

Command line options
mmand line interface by pressing shift + f2. syntax rules but first, let's describe the syntax rules that apply for all options. command parameters containing spaces must be enclosed in quotes, such as "joel user". command actions are case insensitive. command parameters, except profile names, are case insensitive. blank spaces ( ) separate commands and parameters. ...
...if the option contains arguments, enter the argument after the option. ...
...nd newer: body=c:\path\to\file.txt separate multiple message options by comma (,), for example: "to=foo@nowhere.net,subject=cool page" . comma separators must not follow or precede spaces ( ). to assign multiple values to a field, enclose the values in single quotes ('), for example: "to='foo@nowhere.net,foo@foo.de',subject=cool page" . using command line options command line options follow the command to start the application. if the option contains arguments, enter the argument after the option. some options have abbreviations, for example, "-editor" can be abbreviated as "-edit" (available abbreviations are described in the text below). in some cases, option arguments must be enclosed in quotation marks (this is noted in the option descriptions below). multiple command line optio...
...And 8 more matches

HTTP Cache
oon be completely obsoleted and removed (bug 913828). nsicachestorageservice the http cache entry-point. accessible as a service only, fully thread-safe, scriptable. //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicachestorageservice.idl "@mozilla.org/netwerk/cache-storage-service;1" provides methods accessing “storage” objects – see nsicachestorage below – giving further access to cache entries – see nsicacheentry more below – per specific url. currently we have 3 types of storages, all the access methods return an nsicachestorage object: memory-only (memorycachestorage): stores data only in a memory cache, data in this storage are never put to disk disk (diskcachestorage): stores data on disk, but for existing...
...urge any intermediate memory structures: clear – after it returns, all entries are no longer accessible through the cache apis; the method is fast to execute and non-blocking in any way; the actual erase happens in background purgefrommemory – removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the intermediate cache below) nsiloadcontextinfo distinguishes the scope of the storage demanded 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 ano...
... immediately); there is currently no way to opt out of this feature (watch bug 938186). nsicacheentry //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentry.idl obtained asynchronously or pseudo-asynchronously by a call to nsicachestorage.asyncopenuri. provides access to a cached entry data and meta data for reading or writing or in some cases both, see below. lifetime of a new entry such entry is initially empty (no data or meta data is stored 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 ...
...And 8 more matches

Internationalized Domain Names (IDN) Support in Mozilla Browsers
introduction netscape 7.1 is the first commercial browser that has built-in support for internationalized domain name under the new ietf rfc's established in 2003. 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. there are many languages whose writing scripts are not based on latin alphabet at all. sp...
... 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 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...
...existing host name character restrictions. how mozilla browsers handle non-ascii domain names unicode and nameprep when mozilla receives idn input from the user via the location bar or a request to process non-ascii host name links, it first turns them into unicode, then normalizes the input string to make it conform to general uri requirement. ...
...And 8 more matches

Index
internationalization, localization when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate. 5 index localization found 42 pages: 6 l10n checks internationalization, localization, localization:tools, tools l10n checks is a python script and library similar to compare-locales. it allows mozilla localizers to easily check their work. 7 l10n testing with xcode firefox for ios, localization once you have your l10n testing environment set up in xcode, testing your firefox on ios localization is a breeze. 8 localization and plurals internationalization, localization you're likely here because you're localizing a .properties file and it had a...
...l setup! as a reward for your efforts, you get to move on to the very reason you've come here: to localize mozilla projects. 17 localization sign-off reviews guide, localization, mozilla this article presents an overview of why we do sign-off reviews of localizations, the details on the criteria used for the sign-off reviews, and the process for requesting a review and for following its progress. 18 localization technical reviews guide, localization, mozilla this guide provides details on what a localization technical review is, what criteria are used for the technical reviews, and the process for requesting one and following its progress. 19 localization: frequently asked questions faq, guide, internationalization, localization, mozill...
... this tutorial will guide you through making a couple of changes to firefox's user interface using koala, an add-on for komodo edit created to help localizing mozilla. 24 localizing with mercurial build documentation, internationalization, localization in mozilla, we use the the mercurial version control system (hg) to manage our source code and localizations. mercurial allows localizers to work locally (on their machines) and then push (an hg term) changes to a remote repository, which usually is hosted on the mozilla servers (hg.mozilla.org). localizing current versions of firefox, thunderbird and seamonkey includes working with mercurial. if the documentation is incomplete or you have questions, please drop by the #l10n or #hg channels on irc.mozilla.org. the mercu...
...And 8 more matches

MathML Accessibility in Mozilla
we started exposing generic accessible objects for mathml in bug 920547 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamonkey 2.24). mozilla and nvda developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries. mac: mathml support is provided by voiceover. in bug 1175269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions. ...
..._____ a raised to the b __________ a, superscript b a. superscript b a base b superscript scripted abc __________ a sub b to the c __________ a, subscript b, superscript c a. ...
...see webkit's bug 146407 a. underscript b overscript c a base b underscript c overscript scripted a __________ the square root of a __________ square root of a, end of root square root of a. root end. ...
...And 8 more matches

Mozilla Web Services Security Model
used as a tool for web sites to obtain priveleges that belong to the browser's user (such as being behind a firewall or getting the benefits of the user's cookies), web browsers restrict what web pages can do when accessing things in other domains. these restrictions apply to web services. however, web services can be designed to be accessed from other domains, or even from any domain. mozilla allows sites hosting such web services to tell mozilla that other sites can access the service. they do this by creating a file called web-scripts-access.xml in the root of the server that grants permission for other domains to access web services. for example, to determine what web sites can access a web service at http://www.example.com/dir1/dir2/service, mozilla would load the file http://www.exampl...
...eb sites can access a web service at http://www.example.com/dir1/dir2/service, mozilla would load the file http://www.example.com/web-scripts-access.xml, which may choose to delegate the decision to http://www.example.com/dir1/dir2/web...pts-access.xml. web-scripts-access.xml file format the web-scripts-access.xml file is an xml document. any errors in xml syntax, as well as many failures to follow the format, will cause the document to be ignored. the webscriptaccess element its root element must be a webscriptaccess element in the http://www.mozilla.org/2002/soap/security namespace. this element must have either one delegate element child or any number (0 or more) of allow element children. all of these children elements must be in the same namespace as the parent, and must be empty. t...
...e directory that the service is in. for example, when accessing a web service at http://www.example.com/dir1/dir2/service, if the access file at http://www.example.com/web-scripts-access.xml contains a delegate element, mozilla will instead use http://www.example.com/dir1/dir2/web...ipt-access.xml to determine whether access is permitted. if no such file exists, then access will be denied. ...
...And 8 more matches

Gecko Profiler FAQ
is it possible to locate hot spots occurring within a single function? the gecko profiler currently doesn’t have the ability to show you information about line numbers, neither for js code nor for native code. ...
... will be at the top, and those are the ones you usually want to look at if you caused a regression. in this view, the timestamps of individual samples / stacks will not be meaningful. profiler.firefox.com does not have a comparison view at the moment. i can help you add one, though. there is documentation for the gecko profile format. is it worth slowing down cpu to increase the profiler resolution? it depends on what you are trying to profile to some extent. usually you should be really careful when changing the characteristics of the environment that you are trying to measure to avoid measuring the wrong thing. if the issue you are trying to avoid is not profiling on fast machines that mozilla developers typically us...
...to profile to some extent. usually you should be really careful when changing the characteristics of the environment that you are trying to measure to avoid measuring the wrong thing. if the issue you are trying to avoid is not profiling on fast machines that mozilla developers typically use to build firefox on, a better solution may be using a less high-end machine that actually has lower spec’d hardware instead of artificially slowing down just the cpu. another approach to get more precision is also raising the sampling frequency to sub-millisecond ranges (it won’t work on windows.) high frequency sampling may also be an area where native profilers are a useful alternative tool to try. how do we profile "leaks" that show up after running firefox fo...
...And 8 more matches

An overview of NSS Internals
rtability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards. ...
...rder to allow interoperability between software and devices that perform cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. ...
...ifferent numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base l...
...And 8 more matches

NSS 3.12.6 release notes
nss 3.12.6 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.6 release is nss_3_12_6_rtm. nss 3.12.6 requires nspr 4.8.4. ...
...nd shared libraries, which nss 3.12.6 requires. nspr 4.8.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.8.4/. ...
...tiation indication extension (rfc 5746) by default, nss 3.12.6 uses the new tls renegotiation indication extension for tls renegotiation but allows simple ssl/tls connections (without renegotiation) with peers that don't support the tls renegotiation indication extension. the behavior of nss for renegotiation can be changed through api function calls, or with the following environment variables: nss_ssl_enable_renegotiation values: [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5 release. [1|u|u]: ssl_renegotiate_unrestricted ...
...And 8 more matches

How to embed the JavaScript engine
see also jsapi user guide. in particular, it has more and better code examples! a bare bones tutorial hello world sample embedding application the following code is a very simple application that shows how to embed spidermonkey and run a simple javascript script. see the instructions for building and running the sample below the code. the code differs for each spidermonkey version, please choose right version for your spidermonkey. spidermonkey 24 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object. */ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumerates...
...*/ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, nullptr, nul...
...*/ static jsclass global_class = { "global", jsclass_global_flags, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; in...
...And 8 more matches

JSAPI User Guide
posed to scripts. hello world using the spidermonkey library to build spidermonkey from source, see spidermonkey build documentation. some systems (such as debian) provide spidermonkey as a prebuilt package. build it from source instead. your program will be easier to debug. c++ code accesses spidermonkey via the jsapi, by including the header "jsapi.h". an overview of jsapi functionality follows. for more details, see the jsapi reference. the spidermonkey universe in order to run any javascript code in spidermonkey, an application must have three key elements: a jsruntime, a jscontext, and a global object. this section describes what these things are. the next section explains how to set them up, using jsapi functions. runtimes. a jsruntime, or runtime, is the space in which the java...
..., it is accessing a global property, in this case window. jsapi applications have full control over what global properties scripts can see. the application starts out by creating an object and populating it with the standard javascript classes, like array and object. then it adds whatever custom classes, functions, and variables (like window) the application wants to provide; see custom objects below. each time the application runs a js script (using, for example, js_evaluatescript), it provides the global object for that script to use. as the script runs, it can create global functions and variables of its own. all of these functions, classes, and variables are stored as properties of the global object. a minimal example each of the three key elements described in the previous section requ...
...maximum ecmascript standard compliance, applications should also use js_setoptions to enable jsoption_varobjfix. to get the latest javascript language features, applications may use js_setversion. error reporting is also per-context and is enabled using js_seterrorreporter. the global object: to create this object, you first need a jsclass with the jsclass_global_flags option. the example below defines a very basic jsclass (named global_class) with no methods or properties of its own. use js_newglobalobject to create a global object. use js_initstandardclasses to populate it with the standard javascript globals. this may seem like a lot of pieces for a simple application. it amounts to about 80 lines of code, as shown below. but the jsapi is designed to scale to applications that ne...
...And 8 more matches

History Service Design
irefox bookmarks and history systems using storage. this system provides additional performance, flexibility, and querying capabilities over the old one, for both end users and extensions developers. view the service interface definition: nsinavhistoryservice.idl. objectives the primary objectives of the new history service implementation in places are: improve access to browsing history allow association of useful metadata with urls flexible query system for both end-users and add-ons developers clean architecture for ease of code reuse and maintainability the most known and visible feature of history are views. the user can query his visits based on a date range, meta contents or revisit behavior. this involves storing informations on all of the user's visits, including visit tim...
...of history are views. the user can query his visits based on a date range, meta contents or revisit behavior. this involves storing informations on all of the user's visits, including visit time, type of visit and meta data. ...
...ring informations on all of the user's visits, including visit time, type of visit and meta data. old history system was instead only storing first and last visit date, and a generic visits counter, creating some problem due to the impossibility to represent real history flow in a timeframe. history views must be organized and as concise as possible. each visit is associated with a favicon, to allow for better recognizability and groupable by common timeframes or domains. ...
...And 8 more matches

XPCOM string functions
xpcom provides these low-level string functions to let you work with strings; however, it's often better to use one of the string classes rather than directly using these functions. ns_cstringappenddatathe ns_cstringappenddata function appends data to the existing value of a nsacstring instance. ...
... xpcom provides these low-level string functions to let you work with strings; however, it's often better to use one of the string classes rather than directly using these functions. ns_cstringappenddatathe ns_cstringappenddata function appends data to the existing value of a nsacstring instance. ...
...ed by a nscstringcontainer instance.ns_cstringcontainerinitthe ns_cstringcontainerinit function initializes a nscstringcontainer instance for use as a nsacstring.ns_cstringcontainerinit2the ns_cstringcontainerinit2 function initializes a nscstringcontainer instance for use as a nsacstring.ns_cstringcopythe ns_cstringcopy function copies the value from one nsacstring instance to another. ...
...And 8 more matches

Getting Started Guide
ence has relinquished its claim. not all references need to be owning references. in fact, if two objects somehow end up owning each other (even transitively) it becomes difficult for either of those object to be reclaimed without adding some `out-of-band' mechanism for breaking the ownership cycle. the document some com ownership guidelines provides some hints on when ownership is needed. the following lists are good starting point, but by no means complete. you use an owning reference when you created the object; you got the object from a function that might have created it, e.g., any `getter' function, such as queryinterface, or createinstance. all good getters addref the interface pointers they produce, thus providing you with an owning reference; you will hold onto the reference lo...
...ted it, e.g., any `getter' function, such as queryinterface, or createinstance. all good getters addref the interface pointers they produce, thus providing you with an owning reference; you will hold onto the reference longer than the scope of the function in which you acquired it, e.g., you got it as a parameter, but you're hanging onto it in a member variable (see, for example, comparison 1, below). you don't need an owning reference when the object is passed in as a parameter, and you don't need to keep it any longer than the scope of this function; the object's lifetime is known to contain yours in some well defined way, e.g., in the nodes of a tree, parent nodes keep owning references to their children, children need not keep owning references to their parents. it turns out that...
... parents. it turns out that reference counting by hand is hard for programmers to get right. it may sound simple, but in practice it's very easy to forget to release at the appropriate moment. or to addref too many or too few times. how does nscomptr help? nscomptr manages addref, release, and other red-tape for you. an nscomptr looks and acts as much like a raw xpcom interface pointer as c allows, but it knows it owns the object it points to. this takes a little getting used to on your part, but ends up with less typing, clearer, safer code, and less leaks. for instance, here is a typical snippet of code (at its most compact) where you assign a xpcom interface pointer into a member variable, i.e., the body of a `setter' function, side-by-side using raw xpcom interface pointers and nscom...
...And 8 more matches

Using Objective-C from js-ctypes
t cannot be written directly with js-ctypes. this guide explains how to convert objective-c code into js-ctypes code. a simple example is also in standard os libraries page. converting objective-c code to c code to convert objective-c code to js-ctypes, we need to convert it to c code first. we can then convert it straight to js-ctypes code. speech synthesis example let's start with the following objective-c code, which invokes the speech synthesis api to say "hello, firefox!". it uses the default system voice and waits until the speaking is done. #import <appkit/appkit.h> int main(void) { nsspeechsynthesizer* synth = [[nsspeechsynthesizer alloc] initwithvoice: nil]; [synth startspeakingstring: @"hello, firefox!"]; // wait until start speaking. while (![synth isspeaking]) {}...
...eaking is done. #import <appkit/appkit.h> int main(void) { nsspeechsynthesizer* synth = [[nsspeechsynthesizer alloc] initwithvoice: nil]; [synth startspeakingstring: @"hello, firefox!"]; // wait until start speaking. while (![synth isspeaking]) {} // wait while speaking. ...
...[synth isspeaking]) {} // wait while speaking. while ([synth isspeaking]) {} [synth release]; return 0; } save this file as test.m, and run with the following command, inside the same directory as the saved file (needs xcode). $ clang -framework appkit test.m && ./a.out class, message, and selector our task at hand is to convert objective-c syntax to c syntax. let's look at the following codelet: [nsspeechsynthesizer alloc] it passes an alloc message to the nsspeechsynthesizer class, in objective-c syntax. it performs the following through this objective-c syntax: get the nsspeechsynthesizer class definition. register the alloc selector for the message. send a message to the class, with the selector. get a reference to a class class definitions are retrieved with th...
...And 8 more matches

MediaDevices.getUserMedia() - Web APIs
ch as a camera, video recording device, screen sharing service, and so forth), an audio track (similarly, produced by a physical or virtual audio source like a microphone, a/d converter, or the like), and possibly other track types. it returns a promise that resolves to a mediastream object. if the user denies permission, or matching media is not available, then the promise is rejected with notallowederror or notfounderror respectively. note: it's possible for the returned promise to neither resolve nor reject, as the user is not required to make a choice at all and may simply ignore the request. generally, you will access the mediadevices singleton object using navigator.mediadevices, like this: async function getmedia(constraints) { let stream = null; try { stream = await nav...
...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 any reason, the call to getusermedia() will result in an error. while information about a user's cameras and microphones are inaccessible for privacy reasons, a...
... for a media type, the resulting stream is required to have that type of track in it. if one cannot be included for any reason, 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. ...
...And 8 more matches

Streams API concepts - Web APIs
the streams api adds a very useful set of tools to the web platform, providing objects allowing javascript to programmatically access streams of data received over the network and process them as desired by the developer. some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know. readable streams a readable stream is a data source represented in javascript by a readablestream object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from. there are two types of underlying source: push sources constantly push data at you when you’ve accessed them, and it is up to you to start, pause, or cancel access to the stream. examples inclu...
... a single byte, or it can be something larger such as a typed array of a certain size. a single stream can contain chunks of different sizes and types. the chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. ...
...ontain chunks of different sizes and types. the chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. an internal queue keeps track of the chunks that have not yet been read (see the internal queues and queuing strategies section below). the chunks inside the stream are read by a reader — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. the reader plus the other processing code that goes along with it is called a consumer. there is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished). only one reader can read a stream at a time; when a reader is crea...
...And 8 more matches

Cognitive accessibility - Accessibility
w3c), the main international standards organization for the internet. this group is also responsible for the accessible rich internet application (aria) guidelines. wcag are guided by four principles: websites must be perceivable, operable, understandable, and robust. to this end, they define 17 specific guidelines, of which six are especially relevant for cognitive accessibility. all of the following guidelines help more than just people with cognitive disabilities. for example, being able to extend the expiration time on an application requiring an authentication code sent to a mobile device via text message helps with the following scenarios: people with attention or anxiety disorders. people who have a poor short-term memory, or who are multitasking. people who are less technologic...
...uding structure and relationships conveyed through the presentation, should be available in a form that can be perceived by all users to achieve this goal. for example, the information could be spoken aloud via a narration tool. making your content capable of being understood by the software is a good way to help ensure it can be used by alternate presentational modes. time it is important to allow users the time they require to complete tasks. guideline 2.2 states "provide users enough time to read and use content." a time limit is any process that happens without user initiation after a set time or on a periodic basis, such as being logged out after 30 minutes or having 15 minutes to make a purchase. people with cognitive disabilities may require more time to read content, or to perform ...
...sis, such as being logged out after 30 minutes or having 15 minutes to make a purchase. people with cognitive disabilities may require more time to read content, or to perform functions such as filling out forms. solutions include providing users enough additional time to complete tasks or eliminate time constraints altogether. timers options for adjusting time requirements include: allowing the user to turn off or adjust the time to at least 10 times the original limit before encountering it. alerting the user and providing a buffer of at least 20 seconds to extend the timeout duration by a factor of 10 with a simple action, such as hitting the space bar. provide a toggle on content that allows users to enable a longer session time limit, or no session time limit at all. exam...
...And 8 more matches

Accessibility documentation index - Accessibility
specially those developed with javascript) more accessible to people with disabilities. it supplements html so that interactions and widgets commonly used in applications can be passed to assistive technologies 3 aria screen reader implementors guide aria, accessibility this is just a guide. live region markup is a complex area which is somewhat open to interpretation. the following is intended to provide implementation guidance that respects screen 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...
...ilure 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, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents. typical use cases include edit suggestions (i.e. an addition and/or deletion in an editable document), and comments (e.g. an editorial comment related to a part of a document under review). 6 aria guides aria accessible rich internet applications (aria) defines ways to make the web more accessible to people with dis...
...tions inside web documents. typical use cases include edit suggestions (i.e. an addition and/or deletion in an editable document), and comments (e.g. an editorial comment related to a part of a document under review). 6 aria guides aria accessible rich internet applications (aria) defines ways to make the web more accessible to people with disabilities. a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. 7 aria live regions aria, accessibility, arialive using javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does n...
...And 8 more matches

CSS values and units - CSS: Cascading Style Sheets
refer to the page for each value type for more detailed information. ...
...t it to be any other pre-defined css keyword. see the <custom-ident> and <string> reference pages for more details. pre-defined keyword values pre-defined keywords are text values defined by the specification for that property. these keywords are also css identifiers and are therefore used without quotes. when viewing css property value syntax in a css specification or the mdn property page, allowable keywords will be listed in the following form. the following values are the pre-defined keyword values allowed for float. left | right | none | inline-start | inline-end such values are used without quotes: .box { float: left; } css-wide values in addition to the pre-defined keywords that are part of the specification for a property, all css properties accept the css-wide property v...
...nding on whether the property is inherited or not. a fourth value of revert was added in the cascade level 4 specification, but it does not currently have good browser support. urls a <url> type uses functional notation, which accepts a <string> that is a url. this may be an absolute url or a relative url. for example, if you wanted to include a background image, you might use either of the following. .box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted. if unquoted, it is parsed as a <url-token>, which has extra requirements including the escaping of certain characters. see <url> for more information. numeric data types <integer>...
...And 8 more matches

Using media queries - CSS: Cascading Style Sheets
to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. ...
...aced by speech, which is similar. media features media features describe specific characteristics of the user agent, output device, or environment. media feature expressions test for their presence or value, and are entirely optional. each media feature expression must be surrounded by parentheses. name summary notes any-hover does any available input mechanism allow the user to hover over elements? added in media queries level 4. any-pointer is any available input mechanism a pointing device, and if so, how accurate is it? added in media queries level 4. aspect-ratio width-to-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color ...
...lay mode of the application, as specified in the web app manifest's display member defined in the web app manifest spec. forced-colors detect whether user agent restricts color palette added in media queries level 5. grid does the device use a grid or bitmap screen? height height of the viewport hover does the primary input mechanism allow the user to hover over elements? added in media queries level 4. inverted-colors is the user agent or underlying os inverting colors? added in media queries level 5. light-level light level of the environment added in media queries level 5. monochrome bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome ...
...And 8 more matches

Specificity - CSS: Cascading Style Sheets
ecificity, the last declaration found in the css is applied to the element. specificity only applies when the same element is targeted by multiple declarations. as per css rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor. note: proximity of elements in the document tree has no effect on the specificity. selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before). class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover). id selectors (e.g., #example). universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity. (the select...
...an { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific. (also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules) as a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify. #myid#myid span { color: yellow; } .myclass.myclass span { color: orange; } how !important can be used: a) overriding inline styles your global css file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former. in this case, you cou...
...the original rule to avoid the use of !important altogether. [id="someelement"] p { color: blue; } p.awesome { color: red; } including an id as part of an attribute selector instead of as an id selector gives it the same specificity as a class. both selectors above now have the same weight. in a specificity tie, the last rule defined wins. ...
...And 8 more matches

<input type="number"> - HTML: Hypertext Markup Language
lue can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user a...
... using number inputs <input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form. ...
...r html behind the scenes, so your site must not use simple client-side validation for any security purposes. you must verify on the server side any transaction in which the provided value may have any security implications of any kind. mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. the following screenshot is taken from firefox for android: a simple number input in its most basic form, a number input can be implemented like this: <label for="ticketnum">number of tickets you would like to buy:</label> <input id="ticketnum" type="number" name="ticketnum" value="0"> a number input is considered valid when empty and when a single number is entered, but is otherwise invalid. if the...
...And 8 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
ich 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, nofullscreen and noremoteplayback. use t...
...tribute is specified). the allowed values are nodownload, nofullscreen and noremoteplayback. use the disablepictureinpicture attribute if you want to disable the picture-in-picture mode (and the control). crossorigin this enumerated attribute indicates whether to use cors to fetch the related image. 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. in other words, it sends the origin: http header without a cookie, x.509 certificate, or performing http basic authentication. if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted. use-credential...
... when not present, the resource is fetched without a cors request (i.e. without sending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated keyword anonymous was used. ...
...And 8 more matches

Content Security Policy (CSP) - HTTP
e source of the content, even when it's not coming from where it seems to be coming from. csp makes it possible for server administrators to reduce or eliminate the vectors by which xss can occur by specifying the domains that the browser should consider to be valid sources of executable scripts. ...
...rs by which xss can occur by specifying the domains that the browser should consider to be valid sources of executable scripts. a csp compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling html attributes). as an ultimate form of protection, sites that want to never allow scripts to be executed can opt to globally disallow script execution. mitigating packet sniffing attacks in addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used; for example (and ideally, from a security standpoint), a server can specify that all content must be loaded using https. a complete data transmission securi...
...te and providing automatic redirects from http pages to their https counterparts. sites may also use the strict-transport-security http header to ensure that browsers connect to them only over an encrypted channel. using csp configuring content security policy involves adding the content-security-policy http header to a web page and giving it values to control what resources the user agent is allowed to load for that page. for example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint. a properly designed content security policy helps protect a page against a cross site scripting attack. this article explains how to construct such headers properly, and provides examples. specifying your policy you can use the conten...
...And 8 more matches

CSP: base-uri - HTTP
the http content-security-policy base-uri directive restricts the urls which can be used in a document's <base> element. if this value is absent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. csp version 2 directive type document directive default-src fallback no. not setting this allows any url. ...
...rective restricts the urls which can be used in a document's <base> element. if this value is absent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. csp version 2 directive type document directive default-src fallback no. not setting this allows any url. ...
...the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source. ...
...And 8 more matches

CSP: default-src - HTTP
the http content-security-policy (csp) default-src directive serves as a fallback for the other csp fetch directives. ...
...the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may us...
...src script-src script-src-elem script-src-attr style-src style-src-elem style-src-attr worker-src csp version 1 directive type fetch directive syntax one or more sources can be allowed for the default-src policy: content-security-policy: default-src <source>; content-security-policy: default-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source. examples: http://*.example.com: matches all attempts to load from any s...
...And 8 more matches

Numbers and dates - JavaScript
also javascript data types and structures for context with other primitive types in javascript. you can use four types of number literals: decimal, binary, octal, and hexadecimal. decimal numbers 1234567890 42 // caution when using leading zeros: 0888 // 888 parsed as decimal 0777 // parsed as octal in non-strict mode (511 in decimal) note that decimal literals can start with a zero (0) followed by another decimal digit, but if every digit after the leading 0 is smaller than 8, the number gets parsed as an octal number. binary numbers binary number syntax uses a leading zero followed by a lowercase or uppercase latin letter "b" (0b or 0b). if the digits after the 0b are not 0 or 1, the following syntaxerror is thrown: "missing binary digits after 0b". var flt_signbit = 0b1000000000...
...44; // 420 strict mode in ecmascript 5 forbids octal syntax. octal syntax isn't part of ecmascript 5, but it's supported in all browsers by prefixing the octal number with a zero: 0644 === 420 and "\045" === "%". in ecmascript 2015, octal numbers are supported if they are prefixed with 0o, e.g.: var a = 0o10; // es2015: 8 hexadecimal numbers hexadecimal number syntax uses a leading zero followed by a lowercase or uppercase latin letter "x" (0x or 0x). if the digits after 0x are outside the range (0123456789abcdef), the following syntaxerror is thrown: "identifier starts immediately after numeric literal". 0xfffffffffffffffff // 295147905179352830000 0x123456789abcdef // 81985529216486900 0xa // 10 exponentiation 1e3 // 1000 2e6 // 2000000 0.1e2 // 10 number ...
...r numeric literal". 0xfffffffffffffffff // 295147905179352830000 0x123456789abcdef // 81985529216486900 0xa // 10 exponentiation 1e3 // 1000 2e6 // 2000000 0.1e2 // 10 number object the built-in number object has properties for numerical constants, such as maximum value, not-a-number, and infinity. you cannot change the values of these properties and you use them as follows: var biggestnum = number.max_value; var smallestnum = number.min_value; var infinitenum = number.positive_infinity; var neginfinitenum = number.negative_infinity; var notanum = number.nan; you always refer to a property of the predefined number object as shown above, and not as a property of a number object you create yourself. the following table summarizes the number object's properties. ...
...And 8 more matches

Regular expression syntax cheatsheet - JavaScript
this page provides an overall cheat sheet of all the capabilities of regexp syntax by aggregating the content of the articles in the regexp guide. if you need more information on a specific topic, please follow the link on the corresponding heading to access the full article or head to the guide. character classes if you are looking to contribute to this document, please also edit the original article characters meaning . has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029. for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day". inside a character set, the dot loses its special meaning and matches a literal dot. note that the m multiline flag d...
...tches "my" and "ay", but not "yes", in "yes make my day". inside a character set, the dot loses its special meaning and matches a literal dot. note that the m multiline flag doesn't change the dot behavior. so to match a pattern across multiple lines, the character set [^] can be used — it will match any character including newlines. es2018 added the s "dotall" flag, which allows the dot to also match line terminators. \d matches any digit (arabic numeral). equivalent to [0-9]. for example, /\d/ or /[0-9]/ matches "2" in "b2 is the suite number". \d matches any character that is not a digit (arabic numeral). equivalent to [^0-9]. for example, /\d/ or /[^0-9]/ matches "b" in "b2 is the suite number". \w matche...
...ample, /\s\w*/ matches "foo" in "foo bar". \t matches a horizontal tab. \r matches a carriage return. \n matches a linefeed. \v matches a vertical tab. \f matches a form-feed. [\b] matches a backspace. if you're looking for the word-boundary character (\b), see boundaries. \0 matches a nul character. do not follow this with another digit. \cx matches a control character using caret notation, where "x" is a letter from a–z (corresponding to codepoints u+0001–u+001f). for example, /\cm/ matches "\r" in "\r\n". \xhh matches the character with the code hh (two hexadecimal digits). \uhhhh matches a utf-16 code-unit with the value hhhh (four hexadecimal digits). ...
...And 8 more matches

Function.prototype.bind() - JavaScript
return value a copy of the given function with the specified this value, and initial arguments (if provided). description the bind() function creates a new bound function, which is an exotic function object (a term from ecmascript 2015) that wraps the original function object. calling the bound function generally results in the execution of its wrapped function. a bound function has the following internal properties: [[boundtargetfunction]] the wrapped function object [[boundthis]] the value that is always passed as this value when calling the wrapped function. [[boundarguments]] a list of values whose elements are used as the first arguments to any call to the wrapped function. [[call]] executes code associated with this object. invoked via a function call expression. the ar...
... used as the first arguments to any call to the wrapped function. [[call]] executes code associated with this object. invoked via a function call expression. the arguments to the internal method are a this value and a list containing the arguments passed to the function by a call expression. when a bound function is called, it calls internal method [[call]] on [[boundtargetfunction]], with following arguments call(boundthis, ...args). where boundthis is [[boundthis]], args is [[boundarguments]], followed by the arguments passed by the function call. a bound function may also be constructed using the new operator. doing so acts as though the target function had instead been constructed. the provided this value is ignored, while prepended arguments are provided to the emulated function. p...
...his is [[boundthis]], args is [[boundarguments]], followed by the arguments passed by the function call. a bound function may also be constructed using the new operator. doing so acts as though the target function had instead been constructed. the provided this value is ignored, while prepended arguments are provided to the emulated function. polyfill because older browsers are generally also slower browsers, it is far more critical than most people recognize to create performance polyfills to make the browsing experience in outdated browsers slightly less horrible. thus, presented below are two options for function.prototype.bind() polyfills: the first one is much smaller and more performant, but does not work when using the new operator. the second one is bigger and less performant,...
...And 8 more matches

String.prototype.replace() - JavaScript
tring that is to be replaced by newsubstr. it is treated as a literal string and is not interpreted as a regular expression. only the first occurrence will be replaced. newsubstr (replacement) the string that replaces the substring specified by the specified regexp or substr parameter. a number of special replacement patterns are supported; see the "specifying a string as a parameter" section below. function (replacement) a function to be invoked to create the new substring to be used to replace the matches to the given regexp or substr. the arguments supplied to this function are described in the "specifying a function as a parameter" section below. return value a new string, with some or all matches of a pattern replaced by a replacement. description this method does not change the...
...tion as a parameter" section below. return value a new string, with some or all matches of a pattern replaced by a replacement. description this method does not change the calling string object. it simply returns a new string. to perform a global search and replace, include the g switch in the regular expression. specifying a string as a parameter the replacement string can include the following special replacement patterns: pattern inserts $$ inserts a "$". $& inserts the matched substring. $` inserts the portion of the string that precedes the matched substring. $' inserts the portion of the string that follows the matched substring. $n where n is a positive integer less than 100, inserts the nth parenthesi...
... be invoked after the match has been performed. the function's result (return value) will be used as the replacement string. (note: the above-mentioned special replacement patterns do not apply in this case.) note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global. the arguments to the function are as follows: possible name supplied value match the matched substring. (corresponds to $& above.) p1, p2, ... the nth string found by a parenthesized capture group (including named capturing groups), provided the first argument to replace() was a regexp object. (corresponds to $1, $2, etc. above.) for example, if /(\a+)(\b+)/, was given, p1 is the match for \a+, and ...
...And 8 more matches

Web Performance
al 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 javascript animation performancebrowsers are able to optimize rendering flows. in summary, we should always try to create our animations using css transitions/animations where possible. if your animations 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 wo...
...in this article we define and compare these two performance monitoring approaches.populating the page: how browsers worka 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.recommended web performance timings: how long is too long?there are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7s) and responding to user input (50 to 200ms).the business case for web performanceyou know web performance is important, but how do you convince clients and management to invest in performance and make it a priority. in this article, we'll discuss creating a clear...
...e causes of lacency and to test site performance emulating high latency to optimizer for users with lousy connections. this article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.using dns-prefetchdns-prefetch is an attempt to resolve domain names before resources get requested. this could be a file loaded later or link target a user tries to follow. beginner's tutorials the mdn web performance learning area contains modern, up-to-date tutorials covering performance essentials. start here if you are a newcomer to performance: web performance: brief overview overview of the web performance learning path. start your journey here. what is web performance? this article starts the module off with a good look at what performance a...
...And 8 more matches

/loader - Archive of obsolete content
o indicate where to find modules loaded using require(). this is provided by a mandatory options.paths hash that represents the mapping between module id prefixes and locations. ...
...you may still end up with a relative module id if the...
... of it is then resolved using the paths option. you may still end up with a relative module id if the entry point module id is itself relative. ...
...And 7 more matches

Install Manifests - Archive of obsolete content
<description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> some properties are required, some are optional. some have simple string values, some are complex resources. required property reference your install manifest must specify these properties correctly otherwise your add-on may not install. id the id of the extension, which must be one of the following: guid (firefox 1.0) a string formatted like so: extensionname@example.org the latter format is significantly easier to generate and manipulate. firefox 1.5 has checking to ensure that your id falls into one format or the other and will refuse to install add-ons that have malformed ids. you should not use a real email address for your id, however, as it might attract spam. note: the id ...
...sion>) up to and including the maximum version (<em:maxversion>). however, while <em:maxversion> is a required property, it is ignored unless you also set <em:strictcompatibility> in the main <description> of your install.rdf (i.e. not in <em:targetapplication>). these version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of firefox an extension has been tested with. id, minversion, and maxversion are all required. note: extensions compatible with firefox 3.5 should specify a maxversion of 3.5.*, so that they are automatically compatible with security and stability updates. for firefox 3.0, a maxversion of 3.0.* should be used. extensions compatible only with fire...
...ay specify more if the add-on targets multiple applications that support the add-on manager (e.g. firefox and thunderbird). examples <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--firefox--> <em:minversion>1.5</em:minversion> <em:maxversion>3.0.*</em:maxversion> </description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minversion and maxversion. type an integer value representing the type of add-on. 2 extensions 4 themes 8 locale 32 multiple item package 64 spell check dictionary 128 ...
...And 7 more matches

Appendix D: Loading Scripts - Archive of obsolete content
ir primary functionality by loading and executing javascript code. because there are such a diverse array of add-ons, and because the needs of developers have grown organically over time, the gecko runtime provides a number of means to dynamically load and execute javascript files. each of these means has its own advantages and disadvantages, as well as its own quirks which may trap the unwary. below is an overview of the more common means of loading scripts, along with some of their primary advantages, disadvantages, quirks, and use cases. the examples below which make use of the services global assume that you're previously imported the services.jsm module. as this module only exists on firefox 4 and other gecko 2-based platforms, the services in question will have to be manually loaded on...
...ode and allocate and initialize all of their data structures each time the script is loaded. loading: script loaded via script tags run in partially loaded documents. problems can ensue if the script immediately attempts to access dom nodes. this is easily resolved by deferring the work to a dynamically added onload hander. (a standalone xul window can use an onload attribute.) example the following overlay will load the script “overlay.js” from the same directory as the overlay file into the window which it overlays. the script will be read with the utf-8 encoding, based on the encoding of the overlay, and will execute as javascript version 1.8, based on the version specified in the script tag. <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" ...
...clude: e4x xml objects cannot be wrapped for passage between compartments: bug 613142 there are a number of type detection issues, including: string.replace does not recognize regexp objects from foreign compartments: bug 633830 debugging: support for sandbox evaluation in development tools is uneven. chromebug supports firebug based sandboxes. examples the following code will execute a simple script in a sandbox with the privilege level of the current content page. the globals of the current content window will be available in the scripts global scope. in stack traces, the script will appear to have been loaded from the file "zz-9://plural/zed/alpha", line 42. // use the current content window as the execution context. // to make properties defined by sc...
...And 7 more matches

Venkman Introduction - Archive of obsolete content
atures, procedures, and tips described here will make you a more confident web developer and debugger. venkman is both a graphic and a console debugger. features such as breakpoint management, call stack inspection, and variable/object inspection are available from the user interface and from console commands, letting you work in the way you are most accustomed to. the interactive console also allows for execution of arbitrary javascript code. venkman's keyboard shortcuts are the same as leading visual debugging environments, and gdb users should be familiar with venkman's /break, /step, /next, /finish, /frame, and /where commands. on windows, the javascript debugger compares favorably with visual interdev and other large web development tools. on other platforms, including mac os and unix,...
...tup x, global yyy." this data comes from a counter built in to the application. for more information about this counter and the data, see item 2.2 in the venkman faq.) when you first start venkman, the basic views are arranged as in the screenshot above—though you can customize the layout and presence of the different views however you want, as we describe in the view customization section below. the scripts that have been loaded by the javascript engine appear in the loaded scripts window (for more information about how scripts are loaded and accessed in venkman, see "loading scripts into the debugger"). the menubar, toolbar, and all of the views can be collapsed or hidden, giving you a lot of control over the debugging environment. the source code view is empty until you select a sc...
...n, giving you a lot of control over the debugging environment. the source code view is empty until you select a script, and the interactive session view starts up with basic startup information. each of the views has a label, a float button that lets you display the view in its own window, and a close button that puts the view away until you want to display it again, as seen in figure 2. the following section describes these views and their use within the interface as a whole. getting acquainted with venkman's user interface toolbar the toolbar is located at the top of the debugger. the toolbar contains icons for stop, continue, step over, step into, step out, profile, and pretty print commands. these commands should be self explanatory, with the possible exception of stop, which cause...
...And 7 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
home [ examples | attributes | properties | methods | related ] this element is created by setting the type attribute of the textbox to autocomplete. it is used to create a textbox with a popup containing a list of possible completions for what the user has started to type. toolkit applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrow...
... disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disable...
...nputtooltiptext type: string the tooltip text for the textbox. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. maxlength type: integer the maximum number of characters that the textbox allows to be entered. 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. minresultsforpopup new in thunderbird 3requires seamonkey 2.0 type: integer the minimum number of results that must be returned for the popup to be displayed. the default value is 1. new in th...
...And 7 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
completed all the steps, you will have a structure like this in the directory where you installed seamonkey: 1. go to the directory where you installed seamonkey, then go to the chrome directory there. note: for information about how to find the directory where you installed seamonkey, see: installation directory if you cannot easily find the directory, you can use the following method to find it. from seamonkey's menu bar, choose tools – web development – javascript console. copy the following code. it is one very long line ending in path—make sure that you get all of it: components.classes["@mozilla.org/file/directory_service;1"].getservice( components.interfaces.nsiproperties).get("achrom", components.interfaces.nsifile).path in the javascript console win...
...other files that are provided by extensions. your toolbar button will be an extension. 2. delete these two files: chrome.rdf overlays.rdf explanation: seamonkey automatically rebuilds these files the next time it starts. when it rebuilds them, it will include your new extension. 3. edit the file: installed-chrome.txt at the end of the file, add the following line. copy and paste the line from here, to avoid typing errors: content,install,url,resource:/chrome/custombutton/ explanation: this line registers your custom toolbar button extension, linking it into seamonkey. 4. create a new directory named: custombutton perform the following steps in this new directory, creating five files there. explanat...
...lbar button extension, linking it into seamonkey. 4. create a new directory named: custombutton perform the following steps in this new directory, creating five files there. explanation: the name is a unique identifier for your extension, and the directory will contain all your extension's files. 5. create a plain text file named contents.rdf. copy the following content, making sure that you scroll to get all of it. paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:custombutton"/> </rdf...
...And 7 more matches

Advanced Rules - Archive of obsolete content
like the simple rules, full rules are placed within the rule tag. ...
...hould always exist once and only once. it serves as a placeholder as the template builder iterates through the resources. it specifies the name of a variable in which is placed a reference to the root resource while the conditions are analyzed for a match. the root resource is the one specified by the ref attribute on the element containing the template. the syntax of the content element is as follows: <content uri="?var"/> the question mark indicates that the text following it is a variable. you can then use the variable 'var' within the remainder of the conditions. of course, you can name the variable whatever you want. member element the next element is the member element, which is used to iterate through a set of child resources. in rdf terms, that means a container such a seq, bag or al...
...the text following it is a variable. you can then use the variable 'var' within the remainder of the conditions. of course, you can name the variable whatever you want. member element the next element is the member element, which is used to iterate through a set of child resources. in rdf terms, that means a container such a seq, bag or alt. ...
...And 7 more matches

Element Positioning - Archive of obsolete content
ize to hold their text. the third button is larger because it contains more content. the width of the box containing the buttons is the total width of the buttons plus the padding between them. the height of the buttons is a suitable size to hold the text. width and height attributes you may need to have more control over the size of an element in a window. there are a number of features that allow you to control the size of an element. the quick way is to simply add the width and height attributes on an element, much like you might do on an html img tag. an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this. it is not very portable and may not fit in with some themes. a better way is to use style p...
... width this specifies the width of the element. ...
...h property does not set the button width as you expect, try also to modify the button min-width property. height this specifies the height of the element. by setting either of the two properties, the element will be created with that width and height. if you specify only one size property, the other is calculated as needed. the size of these style properties should be specified as a number followed by a unit. flexible elements the sizes are fairly easy to calculate for non-flexible elements. they simply obey their specified widths and heights, and if the size wasn't specified, the element's default size is just large enough to fit the contents. for flexible elements, the calculation is slightly trickier. flexible elements are those that have a flex attribute set to a value greater than...
...And 7 more matches

XUL Questions and Answers - Archive of obsolete content
y have a clear answer.) where can i get more information about creating mozsearch plugins? creating mozsearch plugins contains more help information about creating mozsearch plugin on firefox 2. more documentation on search plugins is available in the search plugins category. is localizing remote xul possible? loading remote dtds for xml documents is currenty not supported in xul. the following bugs were reported on this issue: bug 22942, bug 133698. is there an editor widget in xul that supports syntax highlighting? daniel glazman has been working on this for his projects. he said the code will be open-source, but it is not released yet (as of oct 2006). some teasers are on his blog. overlaying elements without ids the original developers only tend to put ids where they need...
...mplate is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks. a scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done. hidechrome="true" doesn’t work on a mac? unfortunately, no simple solution to this was posted. a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument. is it possible to have checkbox support for multi column lists? the current ...
...esn’t work on a mac? unfortunately, no simple solution to this was posted. a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument. is it possible to have checkbox support for multi column lists? the current issue is a person exploring if it is possible to have checkbox support for multi column lists. ...
...And 7 more matches

menuitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type ...
...tead of removing the attribute (i.e. do menuitem.setattribute("checked", "false") instead of menuitem.removeattribute("checked")) when the user unchecks the menuitem, as a value of false will both correctly hide the checkmark and persist its hidden state. command type: id set to the id of a command element that is being observed by the element. ...
...And 7 more matches

XForms Custom Controls - Archive of obsolete content
since firefox 4, xbl and xul are disabled by default for all pages not loaded from a chrome:// url. this also includes content loaded from file:// urls. it is possible to re-enable this by following the steps on using remote xul. this is required for all examples here to run! purpose you are in the right place if you would like to create your own custom renderings of the xforms controls like input, output, trigger, etc. we will also show you how to create custom controls that work with the xforms model and are automatically updated just like xforms controls. the purpose of this article is to give you enough background information so that you'll be able to get a good start. to really grasp the following information, a good understanding of xforms, xbl, javascript and css is needed. xpc...
...implementation status the framework we use in the mozilla xforms processor is very much a "work in progress". ...
...re may change to some degree as we continue to work on it. work has just started in the w3c xforms working group to investigate the custom control issue, so eventually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors. why do you need this you will probably find that your need for customization will fall into one of the following categories: custom presentation - xforms controls as rendered by the mozilla xforms processor do not provide the right look and feel for you. custom data types - existing xforms controls are not able to work properly with your data type advanced xforms controls - you need your controls to be able to do more things than traditional xforms controls can do new host language - you'd like to suppo...
...And 7 more matches

Building up a basic demo with A-Frame - Game development
the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. mozilla's a-frame framework provides a markup language allowing us to build 3d vr landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of javascript or glsl. this article explains how to get up and running with a-frame, and how to use it to build up a simple demo. high level overview the current version of a-frame is 0.3.2, which means it's highly experimental, but it already works and you can test it right away in the browser. it run...
...ectory to store your project in. save a copy of the latest a-frame javascript library file inside your directory (check the github repository for latest stable a dev builds). open the a-frame documentation in a separate tab — it is useful to refer to. html structure the first step is to create an html document — inside your project directory, create a new index.html file, and save the follow html inside it: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: a-frame demo</title> <script src="aframe.min.js"></script> </head> <body> <!-- html goes here --> </body> </html> this contains some basic information like the document charset and <title>. the <script> element includes the a-frame framework in the page; we will write our example code inside the <body...
...ing you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. adding a background: sky box a sky box is a background for the 3d world, represented by an <a-sky> element. in our case we will use a simple color, but it could also be an image, etc. looking around would give an impression of being inside an open sky, a wooden barn — wherever you like! add the following html before the <a-cube> element: <a-sky color="#dddddd"></a-sky> at this point, if you save the code and refresh your browser you can already see the cube on the screen with our custom background: here's the code we have created so far: you can also check it out on github. a-frame takes care of setting up everything you need: a default light source and camera are included, so the...
...And 7 more matches

Build the brick field - Game development
ing this lesson at gamedev-phaser-content-kit/demos/lesson09.html. building the brick field is a little bit more complicated than adding a single object to the screen, although it's still easier with phaser than in pure javascript. let's explore how to create a group of bricks and print them on screen using a loop. ...
...lesson at gamedev-phaser-content-kit/demos/lesson09.html. building the brick field is a little bit more complicated than adding a single object to the screen, although it's still easier with phaser than in pure javascript. let's explore how to create a group of bricks and print them on screen using a loop. ...
... game.load.image('brick', 'img/brick.png'); } you also need to grab the brick image from github and save it in your /img directory. ...
...And 7 more matches

Plug-in Development Overview - Gecko Plugin API Reference
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. ...
.... for more information about mime types, see these mime rfcs: rfc-2045: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms. the following sections describe platform-specific discovery and registration: ms windows unix mac os x ms windows on windows, plug-ins are found according to the section how gecko finds plug-ins. to determine the mime types and file extensions that the plug-in handles, the browser normally uses the content of the registry entries for the plug-in described below in installation using the registry. ...
...a different method must be used. in this case to ensure the plug-in file will be loaded, it should have a name in the form of "np*.dll". also, the windows version information for the plug-in dll will be used to determines the mime types, file extensions, file open template, plug-in name, and description. ...
...And 7 more matches

What is accessibility? - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css. ...
...accessibility, including what it is, and how it affects you as a web developer. so what is accessibility? accessibility is the practice of making your websites usable by as many people as possible. we traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections. you might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website ...
... buy your products. building accessible sites benefit everyone: semantic html, which improves accessibility, also improves seo, making your site more findable. caring about accessibility demonstrates good ethics and morals, which improves your public image. other good practices that improve accessibility also make your site more usable by other groups, such as mobile phone users or those on low network speed. in fact, everyone can benefit from many such improvements. did we mention it is also the law in some places? what kinds of disability are we looking at? people with disabilities are just as diverse as people without disabilities, and so are their disabilities. the key lesson here is to think beyond your own computer and how you use the web, and start learning about how others u...
...And 7 more matches

Sizing items in CSS - Learn web development
is an image. an image has a width and a height defined in the image file it is embedding into the page. this size is described as the intrinsic size — which comes from the image itself. if you place an image on a page and do not change its height and width, either using attributes on the <img> tag or css, it will be displayed using that intrinsic size. ...
...it has no height (or size in the block dimension) because there is no content. in the example above, try adding some text inside the empty element. ...
... of course give elements in our design a specific size. when a size is given to an element (and the content of which then needs to fit into that size) we refer to it as an extrinsic size. take our <div> from the example above — we can give it specific width and height values, and it will now have that size no matter what content is placed into it. as we discovered in our previous lesson on overflow, a set height can cause content to overflow if there is more content than the element has space to fit inside it. due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on the web. using percentages in many ways, percentages act like length units, and as we discussed in the lesson on values and units, they can ofte...
...And 7 more matches

Sending form data - Learn web development
basic knowledge of http and server-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...
...if this attribute isn't provided, the data will be sent to the url of the page containing the form — the current page. in this example, the data is sent to an absolute url — https://example.com: <form action="https://example.com"> here, we use a relative url — the data is sent to a different url on the same origin: <form action="/somewhere_else"> when specified with no attributes, as below, the <form> data is sent to the same page 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 ...
...tion necessary for the server to process the specific request. the get method the get method is the method used by the browser to ask the server to send back a given resource: "hey server, i want to get this resource." in this case, the browser sends an empty body. because the body is empty, if a form is sent using this method the data sent to the server is appended to the url. ...
...And 7 more matches

HTML table advanced features and accessibility - Learn web development
lly impaired users. prerequisites: the basics of html (see introduction to html). objective: to learn about more advanced html table features, and the accessibility of tables. adding a caption to your table with <caption> you can give your table a caption by putting it inside a <caption> element and nesting that inside the <table> element. you should put it just below the opening <table> tag. <table> <caption>dinosaurs in the jurassic period</caption> ... </table> as you can infer from the brief example above, the caption is meant to contain a description of the table contents. this is useful for all readers wishing to get a quick idea of whether the table is useful to them as they scan the page, but particularly for blind users. rather than have a scre...
... save your code and open it in a browser to see what it looks like. note: you can find our version on github — see timetable-caption.html (see it live also). adding structure with <thead>, <tfoot>, and <tbody> as your tables get a bit more complex in structure, it is useful to give them more structural definition. one clear way to do this is by using <thead>, <tfoot>, and <tbody>, which allow you to mark up a header, footer, and body section for the table. these elements don't make the table any more accessible to screenreader users, and don't result in any visual enhancement on their own. they are however very useful for styling and layout — acting as useful hooks for adding css to your table. to give you some interesting examples, in the case of a long table you could make the ta...
...age, and you could make the table body display on a single page and have the contents available by scrolling up and down. to use them: the <thead> element must wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. if you are using <col>/<colgroup> element, the table header should come just below those. the <tfoot> element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example. you can include the table footer right at the bottom of the table as you'd expect, or just below the table header (the browser will still render it at the bottom of the table). the <tbody> element needs to wrap the other parts of th...
...And 7 more matches

Accessibility in React - Learn web development
e current situation because we cannot focus on an element until after the <todo /> component renders and react knows where our refs are. change the import statement of todo.js again to add useeffect: import react, { useeffect, useref, usestate } from "react"; useeffect() takes a function as an argument; this function is executed after the component renders. ...
...you should see both messages in your console, with each one repeating three times. note how "main render" logged first, and "side effect" logged second, even though the "side effect" log appears first in the code. ...
... to read the previous value of the isediting constant. using pseudocode, our logic should be something like this: if (wasnoteditingbefore && iseditingnow) { focusoneditfield() } if (waseditingbefore && isnoteditingnow) { focusoneditbutton() } the react team had discussed ways to get a component’s previous state, and has provided an example custom hook we can use for the job. paste the following code near the top of todo.js, above your todo() function. function useprevious(value) { const ref = useref(); useeffect(() => { ref.current = value; }); return ref.current; } now we'll define a wasediting constant beneath the hooks at the top of todo(). we want this constant to track the previous value of isediting, so we call useprevious with isediting as an argument: const was...
...And 7 more matches

Deployment and next steps - Learn web development
to prepare our svelte app for production, and what learning resources you should visit next. note that our application is fully functional and porting it to typescript is completely optional. there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using typescript. even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own decision. if you are not interested at all in typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte...
...a particularly useful plugin which is also maintained by the svelte team is svelte-preprocess, which pre-processes many different languages in svelte files such as postcss, scss, less, coffeescript, sass, and typescript. deploying your svelte application from the point of view of a web server, a svelte application is nothing more than a bunch of html, css, and jav...
...iles such as postcss, scss, less, coffeescript, sass, and typescript. deploying your svelte application from the point of view of a web server, a svelte application is nothing more than a bunch of html, css, and javascript files. all you need is a web server capable of serving static files, which means you have plenty of options to choose from. let's look at a couple of examples. ...
...And 7 more matches

Introduction to cross browser testing - Learn web development
ur because: sometimes browsers have bugs, or implement features differently. this situation is a lot less bad than it used to be; back when ie4 and netscape 4 were competing to be the dominant browser in the 1990s, browser companies deliberately implemented things differently to each other to try to gain competitive advantage, which made life hell for developers. browsers are much better at following standards these days, but differences and bugs still creep through sometimes. some browsers may have different levels of support for technology features than others. this is inevitable when you are dealing with bleeding edge features that browsers are just getting round to implementing, or if you have to support really old browsers that are no longer being developed, which may have been froze...
...long time before a new feature was even invented. as an example, if you want to use cutting edge javascript features in your site, they might not work in older browsers. if you need to support older browsers, you might have to not use those, or convert your code to old fashioned syntax using some kind of cross-compiler where needed. some devices may have constraints that cause a web site to run slowly, or display badly. for example, if a site has been designed to look nice on a desktop pc, it will probably look tiny and be hard to read on a mobile device. if your site includes a load of big animations, it might be ok on a high spec tablet, but might be sluggish or jerky on a low end device. and more reasons besides. in later articles, we'll explore common cross browser problems, and look ...
...mple, if a site has been designed to look nice on a desktop pc, it will probably look tiny and be hard to read on a mobile device. if your site includes a load of big animations, it might be ok on a high spec tablet, but might be sluggish or jerky on a low end device. and more reasons besides. in later articles, we'll explore common cross browser problems, and look at solutions to those. workflows for cross browser testing all of this cross browser testing business may sound time consuming and scary, but it needn't be — you just need to plan carefully for it, and make sure you do enough testing in the right places to make sure you don't run into unexpected problems. if you are working on a large project, you should be testing it regularly, to make sure that new features work for your t...
...And 7 more matches

Client-side tooling overview - Learn web development
ls" you're going to hit a huge spectrum of results ranging from text editors, to browsers, to the type of pens you can use to take notes. though your choice of code editor is certainly a tooling choice, this series of articles will go beyond that, focusing on developer tools that help you produce web code more efficiently. from a high-level perspective, you can put client-side tools into the following three broad categories of problems to solve: safety net — tools that are useful during your code development. transformation — tools that transform code in some way, e.g. turning an intermediate language into javascript that a browser can understand. post-development — tools that are useful after you have written your code, such as testing and deployment tools. let's look at each ...
...are all using the same processes. this includes anything that makes your development process easier with respect to generating stable and reliable code. safety net tooling should also help you either prevent mistakes or correct mistakes automatically without having to build your code from scratch each time. a few very common safety net tool types you will find being used by developers are as follows. linters linters are tools that check through your code and tell you about any errors that are present, what error types they are, and what code lines they are present on. often linters can be configured to not only report errors, but also report any violations of a specified style guide that you team might be using (for example code that is using the wrong number of spaces for indentation, or...
... also helps to package assets like html, css, and image files into convenient bundles that you can then go on to deploy, and also adds dependencies for you automatically whenever you try to use them. it can even handle some code transformation duties for you. webpack is another very popular packaging tool that does similar things. transformation this stage of your web app lifecycle typically allows you to code in either "future code" (such as the latest css or javascript features that might not have native support in browsers yet) or code using another language entirely, such as typescript. transformation tools will then generate browser-compatible code for you, to be used in production. generally web development is thought of as three languages: html, css, and javascript, and there are t...
...And 7 more matches

Debugging on Mac OS X
this time, official builds of firefox 69 and later are notarized. uplifts to firefox 68 and esr 68 to enable notarization are planned. as a result, it is not possible to attach a debugger to these official firefox releases on macos 10.14+ without disabling system integrity protection (sip). this is due to notarization requiring hardened runtime to be enabled with the com.apple.security.get-task-allow entitlement disallowed. rather than disabling sip (which has security implications), it is recommended to debug with try builds or local builds. the differences are explained below. try server builds in most cases, developers needing to debug a build as close as possible to the production environment should use a try build. these builds enable hardened runtime and only differ from production bu...
...ow. try server builds in most cases, developers needing to debug a build as close as possible to the production environment should use a try build. these builds enable hardened runtime and only differ from production builds in that they are not notarized which should not otherwise affect functionality, (other than the ability to easily launch the browser on macos 10.15+ -- see quarantine note below). at this time, developers can obtain a hardened runtime build with the com.apple.security.get-task-allow entitlement allowed by submitting a try build and downloading the dmg generated by the "rpk" shippable build job. a debugger can be attached to firefox processes of these builds. try builds use the developer.entitlements.xml file from the source tree while production builds use production.ent...
...ened runtime by default and eliminate this discrepancy. to obtain a hardened runtime build without using try infrastructure, a developer can manually codesign builds using the macos codesign(1) command with the developer.entitlements.xml file from the tree. this requires creating a codesigning identity. disabling system integrity protection (sip) if debugging a production build is required, follow apple's documented steps for disabling system integrity protection (sip). note that disabling sip bypasses hardened runtime restrictions which can mask some bugs that only occur with hardened runtime so it is recommended to test fixes with sip enabled. disabling sip has system security implications that should be understood before taking this step. creating an xcode project if you try to creat...
...And 7 more matches

Displaying Places information using views
nce and displaying the nsinavhistoryresultnode objects contained therein. the built-in views if you need to show the contents of bookmarks or history in your extension or application, you may want to use the built-in places views, which are generic and will save you a lot of time writing basic functionality so that you can focus on building your extension or application. 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://b...
...he place attribute directly in the xul. for more complicated queries or queries whose uris you plan on changing, you will want to set the view's place property dynamically using javascript. note that in the latter case it is not sufficient to call setattribute on the element; use the element's place property instead. see querying places and places query uris for information on query uris. the following example uses the built-in tree view to display bookmarks whose titles or urls contain "mozilla". remember that, because xul is xml, any ampersands in query uris must be written 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" /> <...
...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. ...
...And 7 more matches

Overview of Mozilla embedding APIs
f xpcom components. at the heart of xpcom's implementation is the service manager and the component manager. together, these two services provide a centralized point for gaining access to all of the public mozilla interfaces. the service manager 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 ...
...edding 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 user interface around a webbrowser instance. 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...
... variety of string operations as well as dealing with the memory management issues of storing the underlying data. see the string guide for more details. nsweakptr this is an nscomptr which encapsulates xpcom weak reference support. see the nsiweakreference document for more information. public return codes ns_succeeded ns_error_failure ns_error_not_implemented public functions the following functions are available from the xpcom dll. ns_initembedding this function initializes the gecko embedding support. this must be the first function call made into gecko. ns_termembedding this function shuts down gecko and cleans up any remaining resources... currently, once gecko has been shutdown, it cannot be restarted in the same process space... this should change in the future. ...
...And 7 more matches

Getting Started with Chat
2nd march 2020, mozilla moved away from irc to matrix for its public channels, the irc server was shut down. this page is being retained for historical and reference purposes. the general rules and etiquette are still useful for our new home. please see https://wiki.mozilla.org/matrix for up-to-date information. general rules and etiquette once you have your client set up (see software below) and are connected, there are some basic rules you should follow to ensure the most enjoyable and productive experience: as with all mozilla forums and events, agreeing to our community participation guidelines is a requirement for participation. try to keep messages as concise as possible. if you have something long to post, a code snippet for example, use paste.mozilla.org and paste the gen...
... 9am and 7pm pst monday to friday, excluding us holidays. when asking a question, be patient. sometimes, it can take a few minutes for people to respond. posting a message like "help!" is not particularly helpful. asking a good question will result in a better experience for both you and the person trying to help. relax and have fun! software there are several different applications which allow you to connect to irc networks. you will need to use the following information to configure the server connection: server: irc.mozilla.org port: 6667 (default) or 6697 (ssl) desktop clients desktop clients tens to allow the most detailed configuration. for example, you can connect using ssl or a non-secure connection, and you can configure the client to automatically connect to a server an...
...formation to configure the server connection: server: irc.mozilla.org port: 6667 (default) or 6697 (ssl) desktop clients desktop clients tens to allow the most detailed configuration. for example, you can connect using ssl or a non-secure connection, and you can configure the client to automatically connect to a server and join a particular set of channels when you start the client. the following are some other options available to you: windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available. if not, you'll have to download sourc...
...And 7 more matches

Power profiling overview
epleted depends on the power consumption of the mobile device. that in turn depends on the software running on the device. web browsers are popular applications and can be power-intensive, and therefore can significantly affect battery life. as a result, it is worth optimizing (i.e. reducing) the power consumption caused by firefox and firefox os. intel processor basics processor layout the following diagram (from the intel power governor documentation) shows how machines using recent intel processors are constructed. the important points are as follows. the processor has one or more packages. these are part of the actual processor that you buy from intel. client processors (e.g. core i3/i5/i7) have one package. server processors (e.g. xeon) typically have two or more packages. each...
...ertop and turbostat (linux) can expose this information. a wakeup occurs when a core or package transitions from an idle state to the active state. this happens when the os schedules a process to run due to some kind of event. common causes of wakeups include scheduled timers going off and blocked i/o system calls receiving data. maintaining c-state residency is crucial to keep power consumption low, and so reducing wakeup frequency is one of the best ways to reduce power consumption. one consequence of the existence of c-states is that observations made during power profiling — even more than with other kinds of profiling — can disturb what is being observed. for example, the gecko profiler takes samples at 1000hz using a timer. each of these samples can trigger a wakeup, which consume...
...h other kinds of profiling — can disturb what is being observed. for example, the gecko profiler takes samples at 1000hz using a timer. each of these samples can trigger a wakeup, which consumes power and obscures firefox's natural wakeup patterns. for this reason, integrating power measurements into the gecko profiler is unlikely to be useful, and other power profiling tools typically use much lower sampling rates (e.g. 1hz.) p-states intel processors also support multiple p-states. p0 is the state where the processor is operating at maximum frequency and voltage, and higher-numbered p-states operate at a lower frequency and voltage to reduce power consumption. processors can have dozens of p-states, but the transitions are controlled by the hardware and os and so p-states are of less in...
...And 7 more matches

about:memory
nd cc, dump gc & cc logs, and dump dmd reports. it is present in all builds and does not require any preparation to be used. how to generate memory reports let's assume that you want to measure firefox's memory usage. perhaps you want to investigate it yourself, or perhaps someone has asked you to use about:memory to generate "memory reports" so they can investigate a problem you are having. follow these steps. at the moment of interest (e.g. once firefox's memory usage has gotten high) open a new tab and type "about:memory" into the address bar and hit "enter". if you are using a communication channel where files can be sent, such as bugzilla or email, click on the "measure and save..." button. this will open a file dialog that lets you save the memory reports to a file of your choosin...
...e presented within trees. for example: 585 (100.0%) -- preference-service └──585 (100.0%) -- referent ├──493 (84.27%) ── strong └───92 (15.73%) -- weak ├──92 (15.73%) ── alive └───0 (00.00%) ── dead leaf nodes represent actual measurements; the value of each internal node is the sum of all its children. the use of trees allows measurements to be broken down into further categories, sub-categories, sub-sub-categories, etc., to arbitrary depth, as needed. all the measurements within a single tree are non-overlapping. tree paths can be written using '/' as a separator. for example, preference/referent/weak/dead represents the path to the final leaf node in the example tree above. sub-trees can be collapsed or expanded ...
.... all the measurements within a single tree are non-overlapping. tree paths can be written using '/' as a separator. for example, preference/referent/weak/dead represents the path to the final leaf node in the example tree above. sub-trees can be collapsed or expanded by clicking on them. if you find any particular tree overwhelming, it can be helpful to collapse all the sub-trees immediately below the root, and then gradually expand the sub-trees of interest. sections memory reports are displayed on a per-process basis, with one process per section. within each process's measurements, there are the following subsections. explicit allocations this section contains a single tree, called "explicit", that measures all the memory allocated via explicit calls to heap allocation functions (su...
...And 7 more matches

NSS environment variables
note: nss environment variables are subject to be changed and/or removed from nss. run-time environment variables these environment variables affect the run time behavior of nss shared libraries. there is a separate set of environment variables that affect how nss is built, documented below. ...
... environment variables affect the run time behavior of nss shared libraries. there is a separate set of environment variables that affect how nss is built, documented below. variable type description introduced in version nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. 3.12.3 nsrandfile string (file name) uses this file to seed the pseudo random number generator. before 3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 inside signatures. this was allowed by default before nss 3.12.3. 3.12.3 nss_debug_pkcs11_...
...ivities of the nss cryptographic module in fips mode. audit data 3.11.2 nss_enable_pkix_verify boolean (any non-empty value to enable) use libpkix, rather than the old cert library, to verify certificates. 3.12 nss_fips string ("fips","true","on","1") will start nss in fips mode. 3.12.5 nss_hash_alg_support string specifies agorithms allowed to be used in certain applications, such as in signatures on certificates and crls. see documentation at this link. 3.12.3 nss_output_file string (filename) output file path name for the pkcs #11 module logger. default is stdout. 3.7 nss_sdb_use_cache string ("no","yes","auto") controls whether nss uses a local cache of sql database contents. default ...
...And 7 more matches

pkfnc.html
pk11_findcertfromnickname pk11_findkeybyanycert pk11_getslotname pk11_gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc pk11_findcertfromnickname finds a certificate from its nickname. syntax #include <pk11func.h> #include <certt.h> certcertificate *pk11_findcertfromnickname( char *nickname, void *wincx); parameters this function has the following parameters: nickname a pointer to the nickname in the certificate database or to the nickname in the token. wincx a pointer to application data for the password callback function. this pointer is set with ssl_setpkcs11pinarg during ssl configuration. to retrieve its current value, use ssl_r...
...tion set with pk11_setpasswordfunc and passes it the pointer specified by the wincx parameter. pk11_findkeybyanycert finds the private key associated with a specified certificate in any available slot. syntax #include <pk11func.h> #include <certt.h> #include <keyt.h> seckeyprivatekey *pk11_findkeybyanycert( certcertificate *cert, void *wincx); parameters this function has the following parameters: cert a pointer to a certificate structure in the certificate database. wincx a pointer to application data for the password callback function. this pointer is set with ssl_setpkcs11pinarg during ssl configuration. to retrieve its current value, use ssl_revealpinarg. ...
...1_findkeybyanycert, you must free it by calling seckey_destroyprivatekey. the pk11_findkeybyanycert function calls the password callback function set with pk11_setpasswordfunc and passes it the pointer specified by the wincx parameter. pk11_getslotname gets the name of a slot. syntax #include <pk11func.h> char *pk11_getslotname(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if successful, a pointer to the name of the slot (a string). if unsuccessful, null. description if the slot is freed, the string with the slot name may also be freed. if you want to preserve it, copy the string be...
...And 7 more matches

A Web PKI x509 certificate primer
public key, a subject, an issuer, and a set of extensions. the extensions define extra properties of the certificate such as extra attributes of the certificate or constraints on the use of the certificate. in order for a certificate to be valid these three requirements must be met: there is a verification path from the site certificate to a trusted certificate of the user agent (ie if you follow the issuer path you will end on a self-signed certificate that is considered trusted by the browser). the attributes of the certificates in the verification path have valid parameters for that verification (for example the validity period of all the certificates are valid for the time the verification is being done) revocation checks are considered ok for that particular validation. one issue...
... or non-critical, conforming certificate verification libraries should stop processing verification when encountering a critical extension that they do not understand ( and should continue processing if the extension is marked as non-critical) mozila::pkix has this behavior. subject alternate name this extension defines what other names (such as dns names) are valid for this certificate. this allows for a certificate to be used for more than one fqdn, for example you can have a certificate that is valid for both a.example.com and b.example.com basic constraints this allows certificates to be asserted as issuing certificates (it is mandatory for ca certificates). it can also be used to express the maximum depth of the trust path from the ca. key usage this extension is used to constrain ...
... by losing the private key of the ca. authority information access this extension is primarily used to to describe the ocsp location for revocation checking. it is mandatory for certificates that chain up to a root in the mozilla ca program. self-signed certificates these are the steps to generate a certificate for www.example.com. replace this value with the actual server name in the steps below. 1. generate the key using the following command: openssl genpkey -algorithm rsa -out key.pem -pkeyopt rsa_keygen_bits:2048 2048 is considered secure for the next 4 years. 2. generate csr using this command: openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr -utf8 -subj '/cn=www.example.com' this creates a new certificate signing request (csr) that wi...
...And 7 more matches

Gecko Roles
microsoft windows. role_menubar represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on mac os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it role_sound represents a system sound, which is associated with various system events. role_cursor represents the system mouse pointer. role_caret represents the system caret. role_alert represents an al...
... a main window for an application. role_document represents a document window. a document window is always contained within an application window. role_pane represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. role_chart represents a graphical image used to represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to visually divide a space into two regions, such as a separator menu i...
...nts a link to something else. this object might look like text or a graphic, but it acts like a button. role_helpballoon displays a help topic in the form of a tooltip or help balloon. role_character represents a cartoon-like graphic object, such as microsoft office assistant, which is displayed to provide help to users of an application. role_list represents a list box, allowing the user to select one or more items. role_listitem represents an item in a list. role_outline represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches. role_outlineitem represents an item in an outline or tree structure. role_pagetab represents a page tab, it is a...
...And 7 more matches

Places utilities for JavaScript
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. ...
...faultinsertionpoint, boolean ashowpicker); array object getannotationsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannotationsforuri(int aitemid, object aannos); getviewfornode(nsidomnode anode); void markpageastyped(string aurl); void markpageasfollowedbookmark(string aurl); boolean checkurlsecurity(nsinavhistoryresultnode aurinode); string getquerystringforfolder(int afolderid); string getdescriptionfromdocument(nsidomdocument doc); string setpostdataforbookmark(int aboomarkid, string apostdata); string getpostdataforbookmark(int aboomarkid); array string geturlandpostdataforkeyword(string...
...howminimaladdlivemarkui(afeeduri, asiteuri, atitle, adescription, adefaultinsertionpoint, ashowpicker) see showaddlivemarkui for a description of the params. showminimaladdmultibookmarkui() show an "add bookmarks" dialog to allow the adding of a folder full of bookmarks corresponding to the objects in the urilist. this will be called most often as the result of a "bookmark all tabs..." command. showaddmultibookmarkui(aurilist) parameters aurilist list of nsiuri objects representing the locations to be bookmarked. return type return true if any transaction has been performed. showbookmarkproperties() opens the...
...And 7 more matches