MediaRecorder.onstart - Web APIs
properties none. ...
... properties none. ...
... properties none. ...
...And 6 more matches

Getting started with Ember - Learn web development
rerequisites: 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. a deeper understanding of modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them. objective: to learn how to install ember, and create a starter app. introducing ember ember is a component-service framework that focuses on the overall web application development experience, minimizing the trivial differences between applications — all while being a modern and light layer on top of native javascript. ember also has immense backwards and forwards compatibility to help businesses stay up to date with the latest versions of ember ...
.... 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 different purpose and different expected location within your project. here is a demonstration the impact ember has on the javascript that is in typical projects: gavin demonstrates how < 20% of the js written is specific to ember. getting started the rest of the ember material you'll find here consists of a multi-part tutorial, in which we'll make a version of the classic todomvc sample app, teaching you how to use the essentials of the ember framework along the way. todomvc is a basic to-do tracking app implemented in many different technologies. here is the completed ember version, for reference. a note on todomvc and accessibility...
...label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible. this goes some way towards fixing one of the major accessibility disadvantages of the default todomvc app. ...
...And 5 more matches

AudioBufferSourceNode.loopStart - Web APIs
this value is only used when the loop parameter is true. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode. ...
...this value is only used when the loop parameter is true. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode. ...
...this value is only used when the loop parameter is true. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode. ...
...And 5 more matches

margin-block-start - CSS: Cascading Style Sheets
the margin-block-start css property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. 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. ...
...in of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. 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. ...
...pending on the element's writing mode, directionality, and text orientation. 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 5 more matches

Getting started with Vue - Learn web development
previous overview: client-side javascript frameworks next now let's introduce vue, the third of our frameworks. in this article we'll look at a little bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file com...
...en as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to setup a local vue development environment, create a starter app, and understand 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 ...
...he vue guide and api documentation open in other tabs, so you can refer to them if you want more information on any sub topic. for a good (but potentially biased) comparison between vue and many of the other frameworks, see vue docs: comparison with other frameworks. installation to use vue in an existing site, you can drop one of the following <script> elements onto a page. this allows you to start using vue on existing sites, which is why vue prides itself on being a progressive framework. this is a great option when migrating an existing project using a library like jquery to vue. with this method, you can use a lot of the core features of vue, such as the attributes, custom components, and data-management. development script (unoptimized, but includes console warnings. great for de...
...And 4 more matches

Document: transitionstart event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
...you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
...And 4 more matches

HTMLElement: animationstart event - Web APIs
the animationstart event is fired when a css animation has started. if there is an animation-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). ...
...-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). ...
...s expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). ...
...And 4 more matches

PerformanceResourceTiming.connectStart - Web APIs
the connectstart read-only property returns the timestamp immediately before the user agent starts establishing the connection to the server to retrieve the resource. note: this feature is available in web workers. syntax resource.connectstart; return value a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...er starts to establish the connection to the server to retrieve the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...o retrieve the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

PerformanceResourceTiming.domainLookupStart - Web APIs
the domainlookupstart read-only property returns the timestamp immediately before the browser starts the domain name lookup for the resource. note: this feature is available in web workers. syntax resource.domainlookupstart; return value a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...mmediately before the browser starts the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

PerformanceResourceTiming.fetchStart - Web APIs
the fetchstart read-only property represents a timestamp immediately before the browser starts to fetch the resource. if there are http redirects the property returns the time immediately before the user agent starts to fetch the final resource in the redirection. note: this feature is available in web workers. syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...highrestimestamp immediately before the browser starts to fetch the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...s to fetch the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

PerformanceResourceTiming.redirectStart - Web APIs
the redirectstart read-only property returns a timestamp representing the start time of the fetch which that initiates the redirect. if there are http redirects when fetching the resource and if any of the redirects are not from the same origin as the current document, but the timing allow check algorithm passes for each redirected resource, this property returns the starting time of the fetch that initiates the redirect; otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectstart; return value a timestamp representing the start time of the fetch which initiates the redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. function print_performanceentries() { // u...
...estamp representing the start time of the fetch which initiates the redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... initiates the redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

PerformanceResourceTiming.requestStart - Web APIs
the requeststart read-only property returns a timestamp of the time immediately before the browser starts requesting the resource from the server, cache, or local resource. if the transport connection fails and the browser retires the request, the value returned will be the start of the retry request. there is no end property for requeststart. note: this feature is available in web workers. syntax resource.requeststart; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged. function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = perfo...
...immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

PerformanceResourceTiming.responseStart - Web APIs
the responsestart read-only property returns a timestamp immediately after the browser receives the first byte of the response from the server, cache, or local resource. note: this feature is available in web workers. syntax resource.responsestart; return value a domhighrestimestamp immediately after the browser receives the first byte of the response from the server. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...ly after the browser receives the first byte of the response from the server. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...esponse from the server. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

PerformanceResourceTiming.secureConnectionStart - Web APIs
the secureconnectionstart read-only property returns a timestamp immediately before the browser starts the handshake process to secure the current connection. if a secure connection is not used, the property returns zero. note: this feature is available in web workers. syntax resource.secureconnectionstart; return value if the resource is fetched over a secure connection, a domhighrestimestamp immediately before the browser starts the handshake process to secure the current connection. if a secure connection is not used, this property returns zero. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performanc...
...t connection. if a secure connection is not used, this property returns zero. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...s property returns zero. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

PerformanceResourceTiming.workerStart - Web APIs
the workerstart read-only property of the performanceresourcetiming interface returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running. if the resource is not intercepted by a service worker the property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { ...
...n web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...And 4 more matches

SourceBuffer.appendWindowStart - Web APIs
exceptions the following exceptions may be thrown when setting a new value for this property. ...
... exceptions the following exceptions may be thrown when setting a new value for this property. ...
... exceptions the following exceptions may be thrown when setting a new value for this property. ...
...And 4 more matches

border-block-start - CSS: Cascading Style Sheets
the border-block-start css property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet. 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. ...
...-start border property values in a single place in the style sheet. 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. constituent properties this property is a shorthand for the following css properties: border-block-start-color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. the physical border to which it maps depends on the element's writing mode, dire...
...see border-width. <'border-style'> the line style of the border. see border-style. <'color'> the color of the border. see color. ...
...And 4 more matches

border-inline-start - CSS: Cascading Style Sheets
the border-inline-start css property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet. 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. ...
...-start border property values in a single place in the style sheet. 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. constituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property dependin...
...see border-width. <'border-style'> the line style of the border. see border-style. <'color'> the color of the border. see color. ...
...And 4 more matches

padding-block-start - CSS: Cascading Style Sheets
the padding-block-start css property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. 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. ...
... of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. 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. ...
...g on the element's writing mode, directionality, and text orientation. 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 /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property. description this property ...
...And 4 more matches

padding-inline-start - CSS: Cascading Style Sheets
the padding-inline-start css property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. 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. ...
...of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. 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. ...
...ng on the element's writing mode, directionality, and text orientation. 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 /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property. description this property ...
...And 4 more matches

String.prototype.trimStart() - JavaScript
the trimstart() method removes whitespace from the beginning of a string. trimleft() is an alias of this method. 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.trimstart(); str.trimleft(); return value a new string representing the calling string stripped of whitespace from its beginning (left end). description the trimstart() / trimleft() methods return the string stripped of whitespace from its left end. trimleft() or trimstart() do not affect the value of the string itself. aliasing for consistency with functions like string.prototype.padstart the standard method name is trimstart. however, for ...
...om its beginning (left end). description the trimstart() / trimleft() methods return the string stripped of whitespace from its left end. trimleft() or trimstart() do not affect the value of the string itself. aliasing for consistency with functions like string.prototype.padstart the standard method name is trimstart. however, for web compatibility reasons, trimleft remains as an alias to trimstart. ...
...ods return the string stripped of whitespace from its left end. trimleft() or trimstart() do not affect the value of the string itself. aliasing for consistency with functions like string.prototype.padstart the standard method name is trimstart. however, for web compatibility reasons, trimleft remains as an alias to trimstart. ...
...And 4 more matches

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
the final goal is to find the correct stream listener to pump the data into when necko calls ondataavailable (e.g., we may find the html parser as the stream listener to give the data to). dramatis personae this document focuses on the interaction of three classes with each other, but other mozilla components are also involved. ...
...ed with it (e.g. a named frame). all loads that we consider in this document are initiated via the docshell. nsdocshell implements too many interfaces to count; the ones that matter to us most are nsiwebnavigation and nsilinkhandler. nsuriloader this is a service implementing nsiuriloader. it keeps track of currently pending loads and registered content listeners. some facilities are provided for starting loads, canceling loads, and other such micromanagement. nsdocumentopeninfo this class encapsulates all the information related to a particular load. there is basically one of these per load (though see the section on stream converters). nsdocumentopeninfo implements nsistreamlistener and proxies the nsistreamlistener calls over to the "real" stream listener once one is chosen. this is the clas...
...area alt="(10) getcategoryentry()" coords="575,418,821,418,821,455,629,455,629,484,575,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="485,133,537,163" href="#contenthandler"> <area alt="(9)" coords="445,132,484,165" href="#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,133,439,162" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="639,129,703,129,703,165,833,165,833,204,639,204" href="#onstartrequest" shape="poly"> <area alt="(6) asyncopen()" coords="637,121,709,121,709,96,783,96,783,58,637,58" href="#asyncopen" shape="poly"> <area alt="(5) open()" coords="311,306,432,371" href="#open"> <area alt="(4)" coords="90,384,127,417" href="#openuri-innards"> <area alt="(0) ...
...And 3 more matches

Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
example the following code provides an example of tracing an asynchronous call for a windows 8.x store app. ...
... example the following code provides an example of tracing an asynchronous call for a windows 8.x store app. ...
...yncoperationid the id associated with the asynchronous operation. remarks call this function in the callback function for the asynchronous operation after the call to debug.mstraceasyncoperationcompleted. note: some debugging tools do not display the information sent to the debugger. ...
...And 3 more matches

Getting started with CSS - Learn web development
and apply css to it, learning some practical things about the language along the way. 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. ...
...g some practical things about the language along the way. 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...
...out changing the others. the most common way to do this is to add a class to your html element and target that class. in your html document, add a class attribute to the second list item. your list will now look like this: <ul> <li>item one</li> <li class="special">item two</li> <li>item <em>three</em></li> </ul> in your css you can target the class of special by creating a selector that starts with a full stop character. add the following to your css file: .special { color: orange; font-weight: bold; } save and refresh to see what the result is. you can apply the class of special to any element on your page that you want to have the same look as this list item. for example, you might want the <span> in the paragraph to also be orange and bold. try adding a class of special to i...
...And 3 more matches

nsISessionStartup
read only. ...
...read only. ...
...read only. ...
...And 3 more matches

Animation.startTime - Web APIs
the animation.starttime property of the animation interface is a double-precision floating-point value which indicates the scheduled time when an animation's playback should begin. an animation’s start time is the time value of its documenttimeline when its target keyframeeffect is scheduled to begin playback. an animation’s start time is initially unresolved (meaning that it's null because it has no value). syntax var animationstartedwhen = animation.starttime; animation.starttime = newstarttime; value a floating-point number representing the current time in milliseconds, or null if no time is set. you can read this value to determine what the start time is currently set at, and you can change this value to make the animation start at a different time. examples in the running o...
...newstarttime; value a floating-point number representing the current time in milliseconds, or null if no time is set. you can read this value to determine what the start time is currently set at, and you can change this value to make the animation start at a different time. examples in the running on web animations api example, the we can sync all new animated cats by giving them all the same starttime as the original running cat: var catrunning = document.getelementbyid ("withwaapi").animate(keyframes, timing); /* a function that makes new cats. */ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var ne...
... in firefox, the privacy.reducetimerprecision prefe...
...And 3 more matches

OfflineAudioContext.startRendering() - Web APIs
the startrendering() method of the offlineaudiocontext interface starts rendering the audio graph, taking into account the current connections and the current scheduled changes. the complete event (of type offlineaudiocompletionevent) is raised when the rendering is finished, containing the resulting audiobuffer in its renderedbuffer property. browsers currently support two versions of the startrendering() method — an older event-based version and a newer promise-based version. the former will eventually be removed, but currently both mechanisms are provided for legacy reasons. ...
... raised when the rendering is finished, containing the resulting audiobuffer in its renderedbuffer property. browsers currently support two versions of the startrendering() method — an older event-based version and a newer promise-based version. the former will eventually be removed, but currently both mechanisms are provided for legacy reasons. syntax event-based version: offlineaudioctx.startrendering(); offlineaudioctx.oncomplete = function(e) { // e.renderedbuffer contains the output buffer } promise-based version: offlineaudioctx.startrendering().then(function(buffer) { // buffer contains the output buffer }); parameters none. returns void. example in this simple example, we declare both an audiocontext and an offlineaudiocontext object. we use the audiocontext to load...
...xample in this simple example, we declare both an audiocontext and an offlineaudiocontext object. we use the audiocontext to load an audio track via xhr (audiocontext.decodeaudiodata), then the offlineaudiocontext to render the audio into an audiobuffersourcenode and play the track through. after the offline audio graph is set up, you need to render it to an audiobuffer using offlineaudiocontext.startrendering. when the startrendering() promise resolves, rendering has completed and the output audiobuffer is returned out of the promise. at this point we create another audio context, create an audiobuffersourcenode inside it, and set its buffer to be equal to the promise audiobuffer. this is then played as part of a simple standard audio graph. note: for a working example, see our offline-au...
...And 3 more matches

PerformanceEntry.startTime - Web APIs
the starttime property returns the first recorded timestamp of the performance entry. note: this feature is available in web workers. the value returned by this property depends on the performance entry's type: "frame" - returns the timestamp when the frame was started. "mark" - returns the timestamp when the mark was created by a call to performance.mark(). "measure" - returns the timestamp when the measure was created by a call to performance.measure(). "navigation" - returns the timestamp with a value of "0". "resource" - returns the timestamp immediately before the browser starts fetching the resource. this property is read only . syntax entry.starttime; return value a domhighrestimestamp representing the first timestamp when the performance entry was created. note: if the ...
... function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... ...
... function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... ...
...And 3 more matches

PerformanceNavigationTiming.unloadEventStart - Web APIs
example the following example illustrates this property's usage. ...
... example the following example illustrates this property's usage. ...
... example the following example illustrates this property's usage. ...
...And 3 more matches

RTCPeerConnection.restartIce() - Web APIs
the webrtc api's rtcpeerconnection interface offers the restartice() method to allow a web application to easily request that ice candidate gathering be redone on both ends of the connection. this simplifies the process by allowing the same method to be used by either the caller or the receiver to trigger an ice restart. after restartice() returns, the offer returned by the next call to createoffer() is automatically configured to trigger ice restart on both the local peer (once the local peer has been set) and on the remote peer, once the offer is sent across your signaling mechanism and the remote peer has set its description as well. ...
...o be used by either the caller or the receiver to trigger an ice restart. after restartice() returns, the offer returned by the next call to createoffer() is automatically configured to trigger ice restart on both the local peer (once the local peer has been set) and on the remote peer, once the offer is sent across your signaling mechanism and the remote peer has set its description as well. restartice() causes the negotiationneeded event to be fired on the rtcpeerconnection to inform the application that it should perform negotiation using its signaling channel. if negotiation fails to complete—either due to rollback or because incoming offers are in the process of being negotiated—the rtcpeerconnection will remember that you requested ice restart. the next time the connection's signal...
...erform negotiation using its signaling channel. if negotiation fails to complete—either due to rollback or because incoming offers are in the process of being negotiated—the rtcpeerconnection will remember that you requested ice restart. the next time the connection's signalingstate changes to stable, the connection will fire the negotiationneeded event. this process continues until an ice restart has been successfully completed. syntax rtcpeerconnection.restartice(); parameters none. return value undefined. usage notes after calling restartice(), the next offer created using createoffer() will initiate ice restart once sent to the remote peer over your signaling mechanism. restarting ice essentially resets ice so that it creates all new candidates using new credentials. existing m...
...And 3 more matches

XMLHttpRequest: loadstart event - Web APIs
the loadstart event is fired when a request has started to load data. ...
... the loadstart event is fired when a request has started to load data. ...
... the loadstart event is fired when a request has started to load data. ...
...And 3 more matches

XRSession: selectstart event - Web APIs
the webxr event selectstart is sent to an xrsession when the user begins a primary action on one of its input sources. primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer. bubbles yes cancelable no interface xrinputsourceevent event handler property onselectstart for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources. examples the following example uses addeventlistener() to establish handlers for the selection events: selectstart, selectend, and select. this snipp...
...t to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a select event, the mydropobje...
...target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. ...
...And 3 more matches

XRSession: squeezestart event - Web APIs
the webxr event squeezestart is sent to an xrsession when the user begins a primary squeeze action on one of its input sources. primary squeeze actions are actions which are meant to represent gripping or squeezing using your hands, and may be simulated using triggers on hand controllers. bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueezestart for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources. examples the following example uses addeventlistener() to establish handlers for the squeezeion events: squeezestart, squeezeend, and squeeze. this snippet is the core of an event handler to allow...
... to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a squeeze event, the mydropobj...
...rget ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. ...
...And 3 more matches

margin-inline-start - CSS: Cascading Style Sheets
the margin-inline-start css property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. 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. ...
...ight, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. 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 /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. ...
...gth */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. values the margin-inline-start property takes the same values as the margin-left property. ...
...And 3 more matches

String.prototype.startsWith() - JavaScript
position optional the position in this string at which to begin searching for searchstring. defaults to 0. return value true if the given characters are found at the beginning of the string; otherwise, false. ...
... position optional the position in this string at which to begin searching for searchstring. defaults to 0. return value true if the given characters are found at the beginning of the string; otherwise, false. ...
...fied string, returning true or false as appropriate. 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.startswith(searchstring[, position]) parameters searchstring the characters to be searched for at the start of this string. position optional the position in this string at which to begin searching for searchstring. defaults to 0. return value true if the given characters are found at the beginning of the string; otherwise, false. description this method lets you determine whether or not a string begins with another string. this method is case-sensitive. polyfill this method has been added to ...
...And 3 more matches

How do I start to design my website? - Learn web development
of course you must be familiar with the technique of your craft, but what really matters is what you want to accomplish. ...
......
...for painters, writers, and web developers. technique comes second. technique is obviously critical. musicians must master their instrument. but good musicians can never produce good music without an idea. therefore, before jumping into the technical side—for example, code and tools—you must first step back and decide in detail what you want to do. an hour's discussion with friends is a good start, but inadequate. you must sit down and structure your ideas to get a clear view of what path you must take to make your ideas a reality. to do this, you need only pen and paper and some time to answer at least the following questions. note: there are countless ways to carry out project ideation. we cannot lay them all out here (a whole book wouldn't be enough). what we will present here is a si...
...And 2 more matches

Localization quick start guide
along the way, you'll learn about the variety of projects you can contribute to and the tools used to localize them. ...
...along the way, you'll learn about the variety of projects you can contribute to and the tools used to localize them. ...
...ools used to localize them. when we get to specific examples, we'll take them from the firefox project, as it is the most widely localized project within mozilla. as you near the end of this guide, you should be able to make a change to firefox in your local setting and then see that change in the firefox interface. in closing, when you finish this guide, you will have all the tools necessary to start contributing! remember, this guide will instruct you on the technical aspects of mozilla l10n only. visit the l10n process page to learn about the whole process. initial setup tech prep work before localizing. translation phase l10n tools tutorials for translation. qa phase l10n testing tutorials. release phase steps to shipping your localization work. these four stages make up tech sid...
...And 2 more matches

AudioBufferSourceNode.start() - Web APIs
the start() method of the audiobuffersourcenode interface is used to schedule playback of the audio data contained in the buffer, or to begin playback immediately. syntax audiobuffersourcenode.start([when][, offset][, duration]); parameters when optional the time, in seconds, at which the sound should begin to play, in the same time coordinate system used by the audiocontext. if when is less than (audiocontext.currenttime, or if it's 0, the sound begins to play at once. the default value is 0. offset optional an offset, specified as the number of seconds in the same time coordinate system as the audiocontext, to the time within the audio buffer that playback should begin. for example, to start playback halfway through a 10-second audio clip, offset should be 5. the default value, 0...
...ck rate, so even if the sound is playing at twice its normal speed, the midway point through a 10-second audio buffer is still 5. duration optional the duration of the sound to be played, specified in seconds. if this parameter isn't specified, the sound plays until it reaches its natural conclusion or is stopped using the stop() method. using this parameter is functionally identical to calling start(when, offset) and then calling stop(when+duration). return value undefined. exceptions typeerror a negative value was specified for one or more of the three time parameters. please don't attempt to tamper with the laws of temporal physics. invalidstateerror start() has already been called. you can only call this function once during the lifetime of an audiobuffersourcenode. examples ...
...ng stop(when+duration). return value undefined. exceptions typeerror a negative value was specified for one or more of the three time parameters. please don't attempt to tamper with the laws of temporal physics. invalidstateerror start() has already been called. you can only call this function once during the lifetime of an audiobuffersourcenode. ...
...And 2 more matches

GlobalEventHandlers.ondragstart - Web APIs
a global event handler for the dragstart event. syntax var dragstarthandler = targetelement.ondragstart; return value dragstarthandler the dragstart event handler for element targetelement. example this example demonstrates using the ondragstart attribute handler to set an element's dragstart event handler. ...
...t handler. ...
...=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <c...
...And 2 more matches

HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource. ...
... the loadstart event is fired when the browser has started to load a resource. ...
...eo; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.set...
...And 2 more matches

MediaRecorder.start() - Web APIs
a blob is created and the data is collected in it until the time slice period elapses or the source media ends. ...
... record the entire duration of the media into a single blob (or until you call requestdata()), or you can specify the number of milliseconds to record at a time. then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. a blob is created and the data is collected in it until the time slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable event is sent to the mediarecorder with the recorded data. if t...
...ation was provided), a dataavailable event is sent to the mediarecorder with the recorded data. if the source is still playing, a new blob is created and recording continues into that, and so forth. when the source stream ends, state is set to inactive and data gathering stops. a final dataavailable event is sent to the mediarecorder, followed by a stop event. note: if the browser is unable to start recording or continue recording, it will raise a domerror event, followed by a mediarecorder.dataavailable event containing the blob it has gathered, followed by the mediarecorder.stop event. syntax mediarecorder.start(timeslice) parameters timeslice optional the number of milliseconds to record into each blob. if this parameter isn't included, the entire media duration is recorded into a...
...And 2 more matches

RTCOfferOptions.iceRestart - Web APIs
the icerestart property of the rtcofferoptions dictionary is a boolean value which, when true, tells the rtcpeerconnection to start ice renegotiation. note: rather than manually creating and submitting an offer with icerestart set to true, you should consider calling the rtcpeerconnection method restartice() instead. syntax var options = { icerestart: trueorfalse }; value a boolean value indicating whether or not the rtcpeerconnection should generate new values for the connection's ice-ufrag and ice-pwd values, which will trigger ice renegotiation on the next message sent to the remote peer. usage notes when the rtcpeerconnection object's ice connection state changes to failed, you should try to trigger an ice restart. you should ideally do this by calling the rtcpeerconnection's r...
...cating whether or not the rtcpeerconnection should generate new values for the connection's ice-ufrag and ice-pwd values, which will trigger ice renegotiation on the next message sent to the remote peer. usage notes when the rtcpeerconnection object's ice connection state changes to failed, you should try to trigger an ice restart. you should ideally do this by calling the rtcpeerconnection's restartice() method, if it's available. ...
... should ideally do this by calling the rtcpeerconnection's restartice() method, if it's available. fundamentally, this renegotiation is triggered by generating and using new values for the ice username fragment ("ufrag")}} example this example shows a handler for the iceconnectionstatechange event. it watches for the ice connection state to transition to "failed", which indicates that an ice restart should be tried in order to attempt to bring the connection back up. ...
...And 2 more matches

Range.setStart() - Web APIs
the range.setstart() method sets the start position of a range. if the startnode is a node of type text, comment, or cdatasection, then startoffset is the number of characters from the start of startnode. for other node types, startoffset is the number of child nodes between the start of the startnode. setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position. syntax range.setstart(startnode, startoffset); parameters startnode the node where the range should start. startoffset an integer greater than or equal to zero representing the offset for the start of the range from the start of startnode. examples highlight part of an element this example uses the range.setst...
...> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e. main st. const endoffset = 5; // end at fifth node: dodge city, ks const range = document.createrange(); range.setstart(address, startoffset); range.setend(address, endoffset); const mark = document.createelement('mark'); range.surroundcontents(mark); result get characters from a text node this example uses the range.setstart() and range.setend(...
... living standard no change. ...
...And 2 more matches

ServiceWorkerContainer.startMessages() - Web APIs
the startmessages() method of the serviceworkercontainer interface explicitly starts the flow of messages being dispatched from a service worker to pages under its control (e.g. sent via client.postmessage()). this can be used to react to sent messages earlier, even before that page's content has finished loading. explanation by default, all messages sent from a page's controlling service worker to the page (using client.postmessage()) are queued while the page is loading, and get dispatched once the page's html document has been loaded and parsed (i.e. after the domcontentloaded event fires). ...
...e used to react to sent messages earlier, even before that page's content has finished loading. explanation by default, all messages sent from a page's controlling service worker to the page (using client.postmessage()) are queued while the page is loading, and get dispatched once the page's html document has been loaded and parsed (i.e. after the domcontentloaded event fires). it's possible to start dispatching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtarget.addeventlistener() before the page has finished loading, but want to start processing the messages right away. note: the messages start being sent automatically when setting the handler directly using serviceworkercontainer.onmessage. in this yo...
... return value undefined. examples if('serviceworker' in navigator) { navigator.serviceworker .register('/sw.js') .then(function() { console.log('service worker registered'); }); } // ... ...
...And 2 more matches

SpeechSynthesisUtterance: start event - Web APIs
the start event of the web speech api speechsynthesisutterance object is fired when the utterance has begun to be spoken. ...
... the start event of the web speech api speechsynthesisutterance object is fired when the utterance has begun to be spoken. ...
... the start event of the web speech api speechsynthesisutterance object is fired when the utterance has begun to be spoken. ...
...And 2 more matches

Starting up and shutting down a WebXR session - Web APIs
mented reality (ar) through the webxr ar module, which has is approaching a stable state. documentation for ar is forthcoming shortly here on mdn. other improvements include updating the emulator to rename the xr interface to xrsystem, introduce support for squeeze (grip) input sources, and add support for the xrinputsource property profiles. context requirements a webxr compatible environment starts with a securely-loaded document. your document needs to either have been loaded from the local drive (such as by using an url such as http://localhost/...), or using https when loading the page. the javascript code must, likewise, have been loaded securely. if the document wasn't loaded securely, you won't get very far. the navigator.xr property doesn't even exist if the document wasn't loaded ...
...ported(). this returns a promise which resolves to true if the given type of session is available for use or false otherwise. const immersiveok = await navigator.xr.issessionsupported("immersive-vr"); if (immersiveok) { // create and use an immersive vr session } else { // create an inline session instead, or tell the user about the // incompatibility if inline is required } creating and starting the session a webxr session is represented by an xrsession object. to obtain an xrsession, you call your xrsystem's requestsession() method, which returns a promise that resolves with an xrsession if it's able to establish one successfully. fundamentally, that looks like this: xr.requestsession("immersive-vr").then((session) => { xrsession = session; /* continue to set up the session */ ...
...atus. this option is not yet widely supported, as the ar specification is in flux. inline an on-screen presentation of the xr imagery within the context of the document window. if the session couldn't be created for some reason—such as feature policy disallowing its use or the user declining to grant permission to use the headset—the promise gets rejected. so a more complete function that starts up and returns a webxr session could look like this: async function createimmersivesession(xr) { try { session = await xr.requestsession("immersive-vr"); return session; } catch(error) { throw error; } } this function returns the new xrsession or throws an exception if an error occurs while creating the session. customizing the session in addition to the display mode, the ...
...And 2 more matches

inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. ...
...ne-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-start property takes the same values as the left property. ...
... the inset-inline-start property takes the same values as the left property. ...
...And 2 more matches

scroll-margin-inline-start - CSS: Cascading Style Sheets
the scroll-margin-inline-start property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. 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. ...
...rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. 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 /* <length> values */ scroll-margin-inline-start: 10px; scroll-margin-inline-start: 1em; /* global values */ scroll-margin-inline-start: inherit; scroll-margin-inline-start: initial; scroll-margin-inline-start: unset; values <length> an outset from the inline start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax...
...ype: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { ...
...And 2 more matches

Getting started with XULRunner - Archive of obsolete content
you should unzip the omni.ja file into some example directory and take a look at all the awesome! first change the file extension to zip and then use your normal filesystem's decompression tool to open it up. the contents of omni.ja are available to xulrunner applications and are what make it possible to build amazing applications easily! step 3: create the application folder structure time to start a simple, bare bones application shell. call it a xul “hello world” if you want. all of what you see below can be found in the xulrunner documentation here on mdn in much more detail. hint: skip ahead and download the sample application, you can experiment with it while following this tutorial. you can download the sample application from https://github.com/matthewkastor/xulrunner-examples.
...t.defaultchromeuri specifies the default window to open when the application is launched. toolkit.defaultchromefeatures specifies the features passed to window.open() when the main application window is opened. toolkit.singletonwindowtype allows configuring the application to allow only one instance at a time. the toolkit preferences are described in further detail in xulrunner:specifying startup chrome window. the debugging preferences are discussed in debugging a xulrunner application step 7: create some xul finally, we need to create a simple xul window, which is described in the file main.xul. nothing fancy here, just the minimum we need to make a window. no menus or anything. main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wi...
...pplication.ini" note: the full path is required or a "error: couldn't parse application.ini."-message will be returned. this might also be simplified using a very simple shell script (i call mine "run.sh"): #!/bin/sh /library/frameworks/xul.framework/xulrunner-bin `pwd`/application.ini linux on ubuntu, you can run the application from a terminal. first change into the \myapp folder, then start the application by: xulrunner application.ini you should now see a window that looks something like this. this particular screenshot is from ubuntu 10. alternative: run xul apps with firefox with firefox 3 and later, you can tell the firefox executable to run a xul application from the command line. the xul application will run instead of the firefox browser that normally starts. this is ...
...ation by: xulrunner application.ini you should now see a window that looks something like this. this particular screenshot is from ubuntu 10. alternative: run xul apps with firefox with firefox 3 and later, you can tell the firefox executable to run a xul application from the command line. the xul application will run instead of the firefox browser that normally starts. this is similar to starting a xul app using xulrunner. see using firefox to run xulrunner applications. this does not work if firefox itself was installed as a xul app - you need to use the installed xulrunner directly. further reading: there are many things you can do with xulrunner (who would have thought that? typical mozilla writing style at play here). before you get too far into things you might want to read the ...

EffectTiming.iterationStart - Web APIs
web animations api's effecttiming dictionary's iterationstart property specifies the repetition number which repetition the animation begins at and its progress through it. element.animate(), keyframeeffectreadonly.keyframeeffectreadonly(), and keyframeeffect.keyframeeffect() all accept an object of timing properties including iterationstart. the value of iterationstart corresponds directly to animationeffecttimingreadonly.iterationstart in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. ...
...e(), keyframeeffectreadonly.keyframeeffectreadonly(), and keyframeeffect.keyframeeffect() all accept an object of timing properties including iterationstart. the value of iterationstart corresponds directly to animationeffecttimingreadonly.iterationstart in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { iterationstart = iterationnumber }; timingproperties.iterationstart = iterationnumber; value a floating-point value whose value is at least 0 and is not +infinity, indicating the offset into the number of iterations the animation sequence is to run at which to start animating. iterationstart represents the iteration index at which the animation effect begins as well as its progress through that iteration. ...
...at which to start animating. iterationstart represents the iteration index at which the animation effect begins as well as its progress through that iteration. usually you'll use a value between 0.0 and 1.0 to indicate an offset into the first run of the animation at which to begin the animation performance, but any positive, non-infinite value is allowed. since all animations' iteration indexes start at 0, a value of 0.5 would start the animation halfway through its first iteration or loop. meanwhile, a value of 1.2 means the animation will begin playback 20% of the way through its second iteration, and so forth. it's currently undefined what happens if you specify a value of iterationstart which is greater than the value of animationeffecttimingproperties.iterations. see issue 170 in the w...
...ndefined what happens if you specify a value of iterationstart which is greater than the value of animationeffecttimingproperties.iterations. see issue 170 in the web animations api specification's issue tracker for details and status of any changes to the specification in this regard. specifications specification status comment web animationsthe definition of 'iterationstart' in that specification. working draft editor's draft. ...

OscillatorNode.start() - Web APIs
example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). ...
... example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). ...
... example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). ...
...node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of 'start' in that specification. working draft ...

PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
example the following example illustrates this property's usage. ...
... example the following example illustrates this property's usage. ...
...on print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = ...
... working draft initial definition. ...

PerformanceNavigationTiming.loadEventStart - Web APIs
example the following example illustrates this property's usage. ...
... example the following example illustrates this property's usage. ...
...on print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = ...
... working draft initial definition. ...

SpeechRecognition: soundstart event - Web APIs
the soundstart event of the web speech api is fired when any sound — recognisable speech or not — has been detected. ...
... the soundstart event of the web speech api is fired when any sound — recognisable speech or not — has been detected. ...
... the soundstart event of the web speech api is fired when any sound — recognisable speech or not — has been detected. ...
...i is fired when any sound — recognisable speech or not — has been detected. bubbles no cancelable no interface event event handler property onsoundstart examples you can use the soundstart event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundstart', function() { console.log('some sound is being received'); }); or use the onsoundstart event handler property: recognition.onsoundstart = function() { console.log('some sound is being received'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. draft ...

SpeechRecognition: speechstart event - Web APIs
the speechstart event of the web speech api is fired when sound recognized by the speech recognition service as speech has been detected. ...
... the speechstart event of the web speech api is fired when sound recognized by the speech recognition service as speech has been detected. ...
... the speechstart event of the web speech api is fired when sound recognized by the speech recognition service as speech has been detected. ...
...d recognized by the speech recognition service as speech has been detected. bubbles no cancelable no interface event event handler property onspeechstart examples you can use the speechstart event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechstart', function() { console.log('speech has been detected'); }); or use the onspeechstart event handler property: recognition.onspeechstart = function() { console.log('speech has been detected'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. draft ...

SpeechRecognition.start() - Web APIs
return value void. ...
... return value void. ...
... return value void. ...
...al | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment web speech apithe definition of 'start()' in that spe...

SpeechRecognition: start event - Web APIs
the start event of the web speech api speechrecognition object is fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition. ...
... the start event of the web speech api speechrecognition object is fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition. ...
... the start event of the web speech api speechrecognition object is fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition. ...
...ncoming audio with intent to recognize grammars associated with the current speechrecognition. bubbles no cancelable no interface event event handler property onstart examples you can use the start event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('start', function() { console.log('speech recognition service has started'); }); or use the onstart event handler property: recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. draft ...

XRSession.onsqueezestart - Web APIs
the xrsession interface's onsqueezestart event handler property can be set to a function which is then invoked to handle the squeezestart event that's sent when the user successfully begins a primary squeeze action on a webxr input device. these actions represent the user squeezing or tightly gripping an object or controller. to learn more about how to use and handle webxr controller inputs, see inputs and input sources. syntax xrsession.onsqueezestart = squeezestarthandlerfunction; value a function to be invoked whenever the xrsession receives a squeezestart event. ...
...ctions represent the user squeezing or tightly gripping an object or controller. to learn more about how to use and handle webxr controller inputs, see inputs and input sources. syntax xrsession.onsqueezestart = squeezestarthandlerfunction; value a function to be invoked whenever the xrsession receives a squeezestart event. examples this snippet of code adds a simple handler for the squeezestart event, which responds only to events on the user's dominant hand by getting the target ray, then calling a function findobjectusingray() to identify the object that the user is pointing at. ...
... examples this snippet of code adds a simple handler for the squeezestart event, which responds only to events on the user's dominant hand by getting the target ray, then calling a function findobjectusingray() to identify the object that the user is pointing at. this object is then stored in a heldobject variable in the user object we're using to represent user information. ...
... working draft initial definition. ...

border-block-start-color - CSS: Cascading Style Sheets
the border-block-start-color css property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. 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. ...
...der-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. 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 border-block-start-color: blue; border-block-start-color: #4c5d21; related properties are border-block-end-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element. values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-...
... editor's draft initial definition ...
... editor's draft initial definition ...

border-block-start-style - CSS: Cascading Style Sheets
the border-block-start-style css property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. 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. ...
...-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. 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 /* <'border-style'> values */ border-block-start-style: dashed; border-block-start-style: dotted; border-block-start-style: groove; related properties are border-block-end-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed v...
... editor's draft initial definition ...
... editor's draft initial definition ...

border-block-start-width - CSS: Cascading Style Sheets
the border-block-start-width css property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. 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. ...
...-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. 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 /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length value...
... editor's draft initial definition ...
... editor's draft initial definition ...

border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes th...
... editor's draft initial definition. ...
... editor's draft initial definition. ...
... editor's draft initial definition. ...

border-inline-start-color - CSS: Cascading Style Sheets
the border-inline-start-color css property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. 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. ...
...er-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. 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 border-inline-start-color: red; border-inline-start-color: #ee4141; related properties are border-block-start-color, border-block-end-color, and border-inline-end-color, which define the other border colors of the element. values <'color'> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal...
... editor's draft initial definition ...
... editor's draft initial definition ...

border-inline-start-width - CSS: Cascading Style Sheets
the border-inline-start-width css property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. 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. ...
...width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. 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 /* <'border-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcompute...
... editor's draft initial definition ...
... editor's draft initial definition ...

border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denotes ...
... editor's draft initial definition. ...
... editor's draft initial definition. ...
... editor's draft initial definition. ...

inset-block-start - CSS: Cascading Style Sheets
the inset-block-start css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property. formal definition initial valueautoapplies toposition...
...s the inset-block-start property takes the same values as the left property. ...
... editor's draft initial definition ...
... editor's draft initial definition ...

touchstart - Event reference
the touchstart event is fired when one or more touch points are placed on the touch surface. two types of object can be the target of this event. ...
... the touchstart event is fired when one or more touch points are placed on the touch surface. two types of object can be the target of this event. ...
... the touchstart event is fired when one or more touch points are placed on the touch surface. two types of object can be the target of this event. ...
... the touchstart event is fired when one or more touch points are placed on the touch surface. two types of object can be the target of this event. ...

restart - SVG: Scalable Vector Graphics
the restart attribute specifies whether or not an animation can restart. ...
...bute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(elem...
...20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time. whennotactive this value indicates that the animation can only be restarted when it is not active (i.e. after the active end). attempts to restart the animation during its active duration are ignored. never this value indicates that the animation cannot be restarted for the time the document is loaded. specifications specification status comment ...
...dicates that the animation can only be restarted when it is not active (i.e. after the active end). attempts to restart the animation during its active duration are ignored. never this value indicates that the animation cannot be restarted for the time the document is loaded. specifications specification status comment svg animations level 2the definition of 'restart' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'restart' in that specification. recommendation initial definition ...

startOffset - SVG: Scalable Vector Graphics
the startoffset attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the <textpath> element's coordinate system. only one element is using this attribute: <textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog. ...
...red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog. </textpath> </text> <text> <textpath href="#path2" startoffset="40"> quick brown fox jumps over the lazy dog. </textpath> </text> </svg> usage notes value <length-percentage> | <number> default value 0 animatable yes <length-percentage> a length represents a distance along the path measured in the current user coordinate system for the <textpath> element. if a percentage is given, then ...
...et="40"> quick brown fox jumps over the lazy dog. </textpath> </text> </svg> usage notes value <length-percentage> | <number> default value 0 animatable yes <length-percentage> a length represents a distance along the path measured in the current user coordinate system for the <textpath> element. if a percentage is given, then the start offset represents a percentage distance along the entire path. thus, 0% indicates the start point of the path and 100% indicates the end point of the path. <number> this value indicates a distance along the path measured in the current user coordinate system for the <textpath> element. note: negative values and values larger than the path length (e.g. 150%) are allowed. specifications ...
...ath and 100% indicates the end point of the path. <number> this value indicates a distance along the path measured in the current user coordinate system for the <textpath> element. note: negative values and values larger than the path length (e.g. 150%) are allowed. specifications specification status comment scalable vector graphics (svg) 2the definition of 'startoffset' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'startoffset' in that specification. recommendation initial definition ...

Getting started (cfx) - Archive of obsolete content
once you've done that, you'll be looking at a command prompt. initializing an empty add-on in the command prompt, create a new directory. ...
...elves, of course, it isn't. in this case it's assumed that you have checked out the sdk from its github repo and will have run the bin/activate script from the root of your checkout. then when you invoke cfx run or cfx xpi, you pass the "-o" option: cfx run -o this instructs cfx to use the local copies of the sdk modules, not the ones in firefox. ...
...n firefox. developing without cfx run because cfx run restarts the browser each time you invoke it, it can be a little cumbersome if you are making frequent changes to an add-on. an alternative development model is to use the extension auto-installer add-on: this listens for new xpi files on a specified port and installs them automatically. that way you can test new changes without needing to restart the browser: make a change to your add-on run cfx xpi post the add-on to the port specified you could even automate this workflow with a simple script. for example: while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done note that the logging level defined for the console is different when you use this method, compared to the logging level used when...

Getting Started with Firefox Extensions - Archive of obsolete content
web application interaction (delicious bookmarks, ebay companion) and web development (dom inspector, firebug). these are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these. extensions now exist in 3 different forms: add-ons sdk extensions (also known as jetpacks), bootstrapped extensions and traditional extensions. if you're only getting started developing add-ons, the add-ons sdk provides a great way to quickly create simple ones and build on them. this tutorial focuses on traditional extensions, which are created differently. bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try. we'll begin the tutorial by analyzing a very simple extension. the hell...
...a step above traditional ones in complexity, so you should go through this tutorial before giving them a try. we'll begin the tutorial by analyzing a very simple extension. the hello world extension our sample extensions and this tutorial in general are meant for modern versions of firefox, but most of it works on older versions too. we'll now begin with a basic "hello world" extension. let's start by installing it. click on the link below. note: this extension is unsigned. starting with firefox 43, extensions need to be signed by mozilla before they can be installed in firefox. unsigned add-ons can still be installed in developer edition, nightly, and esr versions of firefox, after toggling the xpinstall.signatures.required preference in about:config. install hello world click the above...
...l be installed in developer edition, nightly, and esr versions of firefox, after toggling the xpinstall.signatures.required preference in about:config. install hello world click the above link and then click "allow" in the pop-up bubble. you should see another pop-up telling you that you are installing an unverified add-on. click "install". after the extension is installed, you'll be asked to restart firefox. installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of npapi plugins, add-ons sdk extensions and bootstrapped extensions. this is an important point to keep in mind if you're building an extension that manipulates other extensions or themes. after installing, look at the main firefox window and see if you notice anything different. ...

InstallTrigger.startSoftwareUpdate - Archive of obsolete content
then do: ... ...
...then do: ... ...
...then do: ... ...

Getting started with the Web - Learn web development
getting started with the web is a concise series introducing you to the practicalities of web development. you'll set up the tools you need to construct a simple webpage and publish your own simple code. the story of your first website it's a lot of work to create a professional website, so if you're new to web development, we encourage you to start small. you won't build another facebook right away, but it's not hard to get your own simple website online, so we'll start there. by working through the articles listed below in order, you will go from nothing to getting your first webpage online. let's begin our journey! installing basic software when it comes to tools for building a website, there's a lot to pick from. if you're just starting out, you might be confused by the array of cod...
...what information are you showcasing? what fonts and colors are you using? what will your website look like? we outline a simple method you can follow to plan out your site's content and design. ...
...rwhelming you, html basics provides enough information to make you familiar with html. css basics cascading stylesheets (css) is the code that you use to style your website. for example, do you want the text to be black or red? where should content be drawn on the screen? what background images and colors should be used to decorate your website? css basics takes you through what you need to get started. javascript basics javascript is the programming language that you use to add interactive features to your website. some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more. javascript basics gives you an idea of what is possible with this exciting language, and how to get started. publishing your...

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

Getting Started With NSS
kills. you can find us on mozilla irc in channel #nss or you could ask your questions on the mozilla.dev.tech.crypto newsgroup. the nss library and its supporting command line tools are written in the c programming language. its build system and the automated tests are based on makefiles and bash scripts. over time, many documents have been produced that describe various aspects of nss. you can start with: the current primary nss documentation page from which we link to other documentation. a general overview of the applications that use nss and the features it provides. a high level introduction to the internals of nss. learn about getting the nss sources, building, and testing. old documentation that is on the archived mozilla.org website. (unfortunately the nss project doesn't hav...
...introduction to the internals of nss. learn about getting the nss sources, building, and testing. old documentation that is on the archived mozilla.org website. (unfortunately the nss project doesn't have a technical writer at this time, so our documentation is not as organized as we would like it to be. you could contribute by organizing it in a better way.) nss sample code a good place to start learning how to write nss applications are the command line tools that are maintained by the nss developers. you can find them in subdirectory mozilla/security/nss/cmd or have a look at some basic nss sample code. a new set of samples is currently under development and review, see create new nss samples. you are welcome to download the samples via: hg clone https://hg.mozilla.org/projects/nss;...
...la/security/nss/cmd or have a look at some basic nss sample code. a new set of samples is currently under development and review, see create new nss samples. you are welcome to download the samples via: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch how to contribute ... (this section is still under construction, but there are many contribution opportunities) start by opening a bugzilla account at bugzilla.mozilla.org if you don't have one. nss :: libraries component for issues you'd like to work on. we maintain a list of nss bugs marked with a keyword "good-first-bug" that you can view. creating your patch seee our section on nss sources, building, and testing to get started making your patch. when you're satisfied with it, you'll need code review. co...

Getting Started Guide
introduction what is nscomptr? nscomptr is a tool to help prevent leaks. nscomptr is a "smart pointer". it is a template class that acts, syntactically, just like an ordinary pointer in c or c++, i.e., you can apply * or -> to it to "get to" what it points at. ...
...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 longer than the scope of t...
...face pointer parameter. you have to `annotate' the nscomptr with the getter_addrefs directive. comparison 4. differences: apply getter_addrefs when using an nscomptr as a `out parameter'. // raw xpcom interface pointers... nsifoo* foo; getfoo(&foo); // |nscomptr|s... nscomptr<nsifoo> foo; getfoo(getter_addrefs(foo)); that's it. you now know enough to start using nscomptrs. there are a few other details you will want to know as you use nscomptr in more complicated situations, but what you've just learned will cover 90% of your uses. a few details there are a couple more things that will help you get the most out of nscomptr. very often, you first get an interface pointer by calling queryinterface. queryinterface is a getter like any other, and yo...

AudioScheduledSourceNode.start() - Web APIs
the start() method on audioscheduledsourcenode schedules a sound to begin playback at the specified time. if no time is specified, then the sound begins playing immediately. syntax audioscheduledsourcenode.start([when [, offset [, duration]]]); parameters when optional the time, in seconds, at which the sound should begin to play. this value is specified in the same time coordinate system as the audiocontext is using for its currenttime attribute. a value of 0 (or omitting the when parameter entirely) causes the sound to start playback immediately. offset optional a floating-point number indicating the offset, in seconds, into the audio buffer where playback should begin. if 0 is passed then the playback will start from the beginning. duration optional a floating-point number indic...
...he audio buffer where playback should begin. if 0 is passed then the playback will start from the beginning. duration optional a floating-point number indicating the duration, in seconds, to be played. if no value is passed then the duration will be equal to the length of the audio buffer minus the offset value return value undefined exceptions invalidstatenode the node has already been started. this error occurs even if the node is no longer running because of a prior call to stop(). rangeerror the value specified for when is negative. example this example demonstrates how to create an oscillatornode which is scheduled to start playing in 2 seconds and stop playing 1 second after that. the times are calculated by adding the desired number of seconds to the context's current time...
...this example demonstrates how to create an oscillatornode which is scheduled to start playing in 2 seconds and stop playing 1 second after that. the times are calculated by adding the desired number of seconds to the context's current time stamp returned by audiocontext.currenttime. context = new audiocontext(); osc = context.createoscillator(); osc.connect(context.destination); /* schedule the start and stop times for the oscillator */ osc.start(context.currenttime + 2); osc.stop(context.currenttime + 3); specifications specification status comment web audio apithe definition of 'start()' in that specification. working draft ...

Element: compositionstart event - Web APIs
the compositionstart event is fired when a text composition system such as an input method editor starts a new composition session. for example, this event could be fired after a user starts entering a chinese character using a pinyin ime. ...
...tarts a new composition session. for example, this event could be fired after a user starts entering a chinese character using a pinyin ime. ...
... inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...

FileReader: loadstart event - Web APIs
the loadstart event is fired when a file read operation has begun. ...
... the loadstart event is fired when a file read operation has begun. ...
...lector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selected...

GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires. ...
...t property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires. ...
...on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires. examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment html living standardthe definition of 'onloadstart' in that specification. living standard initial definition ...

startSoftwareUpdate - Web APIs
this method has been largely superseded by newer install method, which is more flexible and allows you to install more than one xpi. ...
...this method has been largely superseded by newer install method, which is more flexible and allows you to install more than one xpi. ...
...this method has been largely superseded by newer install method, which is more flexible and allows you to install more than one xpi. ...

Range.startOffset - Web APIs
the range.startoffset read-only property returns a number representing where in the startcontainer the range starts. if the startcontainer is a node of type text, comment, or cdatasection, then the offset is the number of characters from the start of the startcontainer to the boundary point of the range. for other node types, the startoffset is the number of child nodes between the start of the startcontainer and the boundary point of the range. to change the startoffset of a range, use the range.setstart method. ...
...container is a node of type text, comment, or cdatasection, then the offset is the number of characters from the start of the startcontainer to the boundary point of the range. for other node types, the startoffset is the number of child nodes between the start of the startcontainer and the boundary point of the range. to change the startoffset of a range, use the range.setstart method. syntax startrangeoffset = range.startoffset; example var range = document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); var startrangeoffset = range.startoffset; specifications specification status comment domthe definition of 'range.startoffset' in that specification. living standard no change. document object model (dom) l...
...createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); var startrangeoffset = range.startoffset; specifications specification status comment domthe definition of 'range.startoffset' in that specification. living standard no change. document object model (dom) level 2 traversal and range specificationthe definition of 'range.startoffset' in that specification. obsolete initial specification. ...

Sensor.start() - Web APIs
candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...

SpeechSynthesisUtterance.onstart - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...voices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onstart' in that specification. draft ...

Window.mozAnimationStartTime - Web APIs
obsolete since gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. ...
....39)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. this value should be used instead of, for example, date.now(), because this value will be the same for all animations started in this window during this refresh interval, allowing them to remain in sync with one another. ...
... should be used instead of, for example, date.now(), because this value will be the same for all animations started in this window during this refresh interval, allowing them to remain in sync with one another. this also allows javascript-based animations to remain synchronized with css transitions and smil animations triggered during the same refresh interval. syntax time = window.mozanimationstarttime; parameters time is the time in milliseconds since the epoch at which animations for the current window should be considered to have started. ...

Window: transitionstart event - Web APIs
the transitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended. bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. ...
... event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. examples this code adds a listener to the transitionstart event: window.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): window.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this event. specifications specification status comment css transitionsthe definiti...
...ddeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): window.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transitionstart' in that specification. working draft initial definition. ...

border-inline-start-style - CSS: Cascading Style Sheets
the border-inline-start-style css property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. 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. ...
...style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. 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 /* <'border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the element. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete values <'border-style'> the line style of the border...
...-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification. editor's draft initial definition ...

scroll-margin-block-start - CSS: Cascading Style Sheets
the scroll-margin-block-start property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. 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. ...
...rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. 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 /* <length> values */ scroll-margin-block-start: 10px; scroll-margin-block-start: 1em; /* global values */ scroll-margin-block-start: inherit; scroll-margin-block-start: initial; scroll-margin-block-start: unset; values <length> an outset from the block start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <len...
...lock-start: unset; values <length> an outset from the block start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification. candidate recommendation initial definition ...

scroll-padding-block-start - CSS: Cascading Style Sheets
the scroll-padding-block-start property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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. ...
... toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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 */ scroll-padding-block-start: auto; /* <length> values */ scroll-padding-block-start: 10px; scroll-padding-block-start: 1em; scroll-padding-block-start: 10%; /* global values */ scroll-padding-block-start: inherit; scroll-padding-block-start: initial; scroll-padding-block-start: unset; values <length-percentage> an inwards offset from the block start edge of the scrollport, as a valid length or a percentage. auto t...
... candidate recommendation initial definition ...

scroll-padding-inline-start - CSS: Cascading Style Sheets
the scroll-padding-inline-start property defines offsets for the start edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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. ...
...toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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 */ scroll-padding-inline-start: auto; /* <length> values */ scroll-padding-inline-start: 10px; scroll-padding-inline-start: 1em; scroll-padding-inline-start: 10%; /* global values */ scroll-padding-inline-start: inherit; scroll-padding-inline-start: initial; scroll-padding-inline-start: unset; values <length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid length or a percentage. ...
... candidate recommendation initial definition ...

marker-start - SVG: Scalable Vector Graphics
the marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape. for all shape elements, except <polyline> and <path>, the last vertex is the same as the first vertex. in this case, if the value of marker-start and marker-end are both not none, then two markers will be rendered on that final vertex. for <path> elements, for each closed subpath, the last vertex is the same as the first vertex. marker-start is only rendered on the first vertex of the path data. note: as a presentation attribute, marker-start can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, bo...
... <marker-ref> this value is a reference to a <marker> element, which will be drawn at the first vertex. if the reference is not valid, then no marker will be drawn. specific...
...animatable yes none indicates that no marker symbol shall be drawn at the first vertex. <marker-ref> this value is a reference to a <marker> element, which will be drawn at the first vertex. if the reference is not valid, then no marker will be drawn. specifications specification status comment scalable vector graphics (svg) 2the definition of 'marker-start' in that specification. candidate recommendation no significant change scalable vector graphics (svg) 1.1 (second edition)the definition of 'marker-start' in that specification. recommendation initial definition ...

Measuring add-on startup performance - Archive of obsolete content
this article describes an add-on that is no longer supported. using about:startup the about startup add-on provides a much simpler way to measure startup performance. once installed, it will gather startup data and display it in the about:startup page. the add-on is very lightweight, so it shouldn't have a noticeable negative effect on your baseline and add-on tests. to test with about:startup, you should set up a new firefox profile, install this add-on, and then open and quit firefox repeatedly. if you want to match talos, you should do this 20 times. then look at the results in the about:startup page. this should provide your baseline numbers. then repeat the process with both about startup and your add-on installed. the overhead can be calculated using the same formula. the ab...
..., you should set up a new firefox profile, install this add-on, and then open and quit firefox repeatedly. if you want to match talos, you should do this 20 times. then look at the results in the about:startup page. this should provide your baseline numbers. then repeat the process with both about startup and your add-on installed. the overhead can be calculated using the same formula. the about:startup page shows 3 different time measurements: main, sessionrestored and firstpaint. main happens very early in the startup process and should not be affected by add-ons being installed. the firstpaint time should be roughly similar to what talos tests. this can vary between systems, though. sessionrestored is fired later in the process, when firefox has loaded all tabs from the saved session. ...

startFind - Archive of obsolete content
« xul reference home startfind( mode ) return type: no return value call this method to handle your application's "find" command. this opens the findbar, focuses the edit field for the search term, and selects its contents. the first time this is called for a given findbar, the findbar will flash to draw attention to itself. the mode should be one of find_normal, find_typeahead, or find_links. if you don't pass a mode, the last-used mode for the same findbar is used. if the findbar hasn't been used before, find_normal is the default. ...
...the findbar will flash to draw attention to itself. ...

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 con...
... 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. ...

Document: animationstart event - Web APIs
the animationstart event is fired when a css animation has started. if there is an animation-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for th...
... interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the animationstart event and logs a message when it is fired: document.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: document.onanimationstart = () => { console.log('animation started'); }; see a live example of this event. specifications specification status comment css animations working draft in...

GlobalEventHandlers.ontouchstart - Web APIs
the ontouchstart property of the globaleventhandlers mixin is an eventhandler that processes touchstart events. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var starthandler = someelement.ontouchstart; return value starthandler the touchstart event handler for element someelement. example this example shows two ways to use ontouchstart to set an element's touchstart event handler. ...
... touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var starthandler = someelement.ontouchstart; return value starthandler the touchstart event handler for element someelement. example this example shows two ways to use ontouchstart to set an element's touchstart event handler. <html> <script> function starttouch(ev) { // process the event } function init() { let el = document.getelementbyid('target1'); el.ontouchstart = starttouch; } </script> <body onload="init();"> <div id="target1"> touch me ... </div> <div id="target2" ontouchstart="starttouch(event)"> touch me ... </div> </body> </html> specifications specification status comment touch events – level 2 ...

MessagePort.start() - Web APIs
the start() method of the messageport interface starts the sending of messages queued on the port. this method is only needed when using eventtarget.addeventlistener; it is implied when using messagechannel.onmessage. note: this feature is available in web workers. syntax port.start() returns void. parameters none. ...
...ters none. example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using onmessage: channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } another option would be to do this using eventtarget.addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); specifications specification status comment html living standardthe definition of 'start()' in that specification. living standard ...

PerformanceTiming.connectStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.connectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment start time is given. ...
...y property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. syntax time = performancetiming.connectstart; specifications specification status comment navigation timingthe definition of 'performancetiming.connectstart' in that specification. recommendation initial definition. ...

TimeRanges.start() - Web APIs
returns the time offset at which a specified time range begins. syntax starttime = timeranges.start(index) parameters index is the range number to return the starting time for. exceptions index_size_err a domexception thrown if the specified index doesn't correspond to an existing range. example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded. specifications specifica...
...one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded. specifications specification status comment html living standardthe definition of 'timeranges.start()' in that specification. living standard initial definition ...

Window: animationstart event - Web APIs
the animationstart event is fired when a css animation has started. if there is an animation-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the ...
... interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the animationstart event and logs a message when it is fired: window.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: window.onanimationstart = () => { console.log('animation started'); }; see a live example of this event. specifications specification status comment css animations working draft initia...

XMLHttpRequestEventTarget.onloadstart - Web APIs
the xmlhttprequesteventtarget.onloadstart is the function called when an xmlhttprequest transaction starts transferring data. syntax xmlhttprequest.onloadstart = callback; values callback is the function to be called when the transaction begins to transfer data. ...
...arget.onloadstart is the function called when an xmlhttprequest transaction starts transferring data. syntax xmlhttprequest.onloadstart = callback; values callback is the function to be called when the transaction begins to transfer data. ...

SyntaxError: identifier starts immediately after numeric literal - JavaScript
the javascript exception "identifier starts immediately after numeric literal" occurs when an identifier started with a digit. identifiers can only start with a letter, underscore (_), or dollar sign ($). message syntaxerror: unexpected identifier after numeric literal (edge) syntaxerror: identifier starts immediately after numeric literal (firefox) syntaxerror: unexpected number (chrome) error type syntaxerror what went wrong? the names of variables, called identifiers, conform to certain rules, which your code must adhere to! a javascript identifier must start with a letter, underscore (_), or dollar sign ($). they can't start with a digit! only subsequent characters can be digits (0-9). examples variable names starting with numeric literals variable names can't start with numbers...
...rm to certain rules, which your code must adhere to! a javascript identifier must start with a letter, underscore (_), or dollar sign ($). they can't start with a digit! only subsequent characters can be digits (0-9). examples variable names starting with numeric literals variable names can't start with numbers in javascript. the following fails: var 1life = 'foo'; // syntaxerror: identifier starts immediately after numeric literal var foo = 1life; // syntaxerror: identifier starts immediately after numeric literal alert(1.foo); // syntaxerror: identifier starts immediately after numeric literal you will need to rename your variable to avoid the leading number. var life1 = 'foo'; var foo = life1; ...

start_url - Web app manifests
type string mandatory no the start_url member is a string that represents the start url of the web application — the prefered url that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen). note: the start_url member is purely advisory, and a user agent may ignore it or allow the user to alter it at install time or afterwards. examples absolute url "start_url": "https://example.com" relative url if the url is relative, the manifest url is used as the base url to resolve it. ...
...., when the user taps on the web application's icon from a device's application menu or homescreen). note: the start_url member is purely advisory, and a user agent may ignore it or allow the user to alter it at install time or afterwards. examples absolute url "start_url": "https://example.com" relative url if the url is relative, the manifest url is used as the base url to resolve it. "start_url": "../startpoint.html" specification specification status comment feedback web app manifestthe definition of 'start_url' in that specification. working draft initial definition. web app manifest working group drafts ...

Getting Started (jpm) - Archive of obsolete content
d cfx tool. you can use jpm from firefox 38 onwards. this article describes how to develop using jpm. this tutorial walks through creating a simple add-on using the sdk. prerequisites to create add-ons for firefox using the sdk, you'll need: firefox version 38 or later. if you need to work with earlier versions of firefox, you'll need to use the old cfx tool. see instructions for getting started with cfx. the command-line jpm tool. see the instructions for installing jpm. once you've done that, you'll be looking at a command prompt. install firefox developer version for testing your add-on. initializing an empty add-on in the command prompt, create a new directory. navigate to it, type jpm init, and hit enter: mkdir my-addon cd my-addon jpm init you'll then be asked to supply s...

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
d in the file classic.jar found in the firefox installation directory. a .jar file is in reality a renamed zip archive. opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive. however, if your application doesn't detect classic.jar as a standard zip archive, rename the file classic.zip and continue extraction. note: starting in gecko 2.0, the new omni.jar file contains the skin, among other resources. see theme changes in firefox 4 for details on how to extract skin files from firefox 4 or later. classic.jar locations linux: /usr/lib/mozillafirefox/chrome/classic.jar or /usr/lib/firefox-*.*.*/chrome/classic.jar windows: \program files\mozilla firefox\chrome\classic.jar for mac os x: go to your applications...

startEditing - Archive of obsolete content
the tree view's nsitreeview.getcelltext() method is called to obtain the cell contents. ...

selectionStart - Archive of obsolete content
use in conjuction with the selectionend property. ...

Getting Started - Archive of obsolete content
in other words, code like this doesn't bother you: this is some markup with <b>bold</b> tags. if you are comfortable with that, you should have no problem learning rss. note: if you are not a web developer and do not want to become one, then this tutorial is not for you. you need to be comfortable with creatingmarkup to be able to effectively use this tutorial. what do you need before you start? to get the most from this tutorial, you will need a text editor and a rss reader. you must also know how to use each of these. note: a word processor is not a text editor. if a word processor is used, you must make sure to save your rss files in a (pure and plain) text format. it is not mandatory to create rss files in this tutorial (you can just read on), but this would be a less effective...

:-moz-system-metric(scrollbar-start-backward) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

:-moz-system-metric(scrollbar-start-forward) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

Getting Started with Chat
d 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 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...

nsIAppStartup_MOZILLA_2_0
toolkit/components/startup/public/nsiappstartup.idlscriptable this lets you get information about the times at which key application startup events occurred. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko 4.0 this interface was merged into the nsiappstartup interface. ...

AbstractRange.startContainer - Web APIs
the read-only startcontainer property of the abstractrange interface returns the start node for the range. syntax var startnode = range.startcontainer value the dom node inside which the start position of the range is found. specifications specification status comment domthe definition of 'startcontainer ' in that specification. living standard static rangethe definition of 'startcontainer' in that specification. editor's draft initial definition. ...

AbstractRange.startOffset - Web APIs
the read-only startoffset property of the abstractrange interface returns the offset into the start node of the range's start position. syntax var startoffset = range.startoffset value an integer value indicating the number of characters into the node indicated by startcontainer at which the first character of the range is located. specifications specification status comment domthe definition of 'startoffset' in that specification. living standard static rangethe definition of 'startoffset' in that specification. editor's draft initial definition. ...

BluetoothRemoteGATTCharacteristic.startNotifications() - Web APIs
the bluetoothremotegattcharacteristic.startnotifications() method returns a promise to the bluetoothremotegattcharacteristic instance when there is an active notification on it. syntax bluetoothremotegattcharacteristic.startnotifications().then(function(bluetoothremotegattcharacteristic) { ... }) returns a promise to the bluetoothremotegattcharacteristic instance. specifications specification status comment web bluetooththe definition of 'startnotifications()' in that specification. draft initial definition. ...

Document: dragstart event - Web APIs
the dragstart event is fired when the user starts dragging an element or text selection. bubbles yes cancelable yes default action initiate the drag-and-drop operation. interface dragevent event handler property ondragstart examples see the drag event for example code or this jsfiddle demo. specifications specification status comment html living standardthe definition of 'dragstart' in that specification. living standard ...

Document: selectstart event - Web APIs
the selectstart event of the selection api is fired when a user starts a new selection. if the event is canceled, the selection is not changed. bubbles yes cancelable yes interface event event handler property onselectstart examples // addeventlistener version document.addeventlistener('selectstart', () => { console.log('selection started'); }); // onselectstart version document.onselectstart = () => { console.log('selection changed.'); }; specifications specification status comment selection apithe definition of 'selectstart' in that specification. working draft initial definition. ...

Document: touchstart event - Web APIs
the touchstart event is fired when one or more touch points are placed on the touch surface. bubbles yes cancelable yes interface touchevent event handler property ontouchstart examples code samples for those events are available on the dedicated page: touch events. specifications specification status touch events recommendation ...

Element: MSGestureStart event - Web APIs
when the gesture has ended, a msgestureend event will be fired. it is a proprietary event specific to microsoft edge and internet explorer. ...

Element: MSInertiaStart event - Web APIs
this event may not be fired if the scroll is sufficiently slow. it is a proprietary event specific to microsoft edge and internet explorer. ...

Element: gesturestart event - Web APIs
during the gesture, gesturechange events will be fired. when the gesture has ended, a gestureend event will be fired. it is a proprietary event specific to webkit. ...

Element: touchstart event - Web APIs
the touchstart event is fired when one or more touch points are placed on the touch surface. bubbles yes cancelable yes interface touchevent event handler property ontouchstart examples code samples for those events are available on the dedicated page: touch events. specifications specification status touch events recommendation ...

GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property sets and returns the event handler for the loadstart event. syntax element.onloadstart = handlerfunction; var handlerfunction = element.onloadstart; handlerfunction should be either null or a javascript function specifying the handler for the event. notes see the dom event handlers page for information on working with on... handlers. the loadstart event is fired when progress has begun. see the loadstart event documentation for more information about the event. specification specification status comment html living standardthe definition of 'loadstart' in that specification. living standard ...

GlobalEventHandlers.onselectstart - Web APIs
the onselectstart property of the globaleventhandlers mixin is an eventhandler that processes selectstart events. the selectstart event fires when the user starts to make a new text selection on a webpage. syntax object.onselectstart = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. example document.onselectstart = function() { console.log('selection started!'); }; for a full example, see our key quote generator demo. specifications specification status comment selection apithe definition of 'globaleventhandlers.onselectstart' in that specification. working draft initial definition. ...

PerformanceTiming.domContentLoadedEventStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domcontentloadedeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing has been executed. syntax time = performancetiming.domcontentloadedeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.domcontentloadedeventstart' in that specification. recommendation initial definition. ...

PerformanceTiming.domainLookupStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domainlookupstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the domain lookup starts. if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart. syntax time = performancetiming.domainlookupstart; specifications specification status comment navigation timingthe definition of 'performancetiming.domainlookupstart' in that specification. recommendation initial definition. ...

PerformanceTiming.fetchStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.fetchstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the browser is ready to fetch the document using an http request. this moment is before the check to any application cache. syntax time = performance.timing.fetchstart; specifications specification status comment navigation timingthe definition of 'performancetiming.fetchstart' in that specification. recommendation initial definition. ...

PerformanceTiming.loadEventStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface's performancenavigationtiming.loadeventstart read-only property instead.. the legacy performancetiming.loadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the load event was sent for the current document. if this event has not yet been sent, it returns 0. syntax time = performancetiming.loadeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.loadeventstart' in that specification. recommendation initial definition. ...

PerformanceTiming.navigationStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.navigationstart read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. syntax time = performancetiming.navigationstart; specifications specification status comment navigation timingthe definition of 'performancetiming.navigationstart' in that specification. recommendation initial definition. ...

PerformanceTiming.redirectStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.redirectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the first http redirect starts. if there is no redirect, or if one of the redirect is not of the same origin, the value returned is 0. syntax time = performancetiming.redirectstart; specifications specification status comment navigation timingthe definition of 'performancetiming.redirectstart' in that specification. recommendation initial definition. ...

PerformanceTiming.requestStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.requeststart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the browser sent the request to obtain the actual document, from the server or from a cache. if the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request. syntax time = performancetiming.requeststart; specifications specification status comment navigation timingthe definition of 'performancetiming.requeststart' in that specification. recommendation ...

PerformanceTiming.responseStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.responsestart read-only property returns an unsigned long long representing the moment in time (in milliseconds since the unix epoch) when the browser received the first byte of the response from the server, cache, or local resource. syntax time = performancetiming.responsestart; specifications specification status comment navigation timingthe definition of 'performancetiming.responsestart' in that specification. recommendation initial definition. ...

PerformanceTiming.secureConnectionStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.secureconnectionstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the secure connection handshake starts. if no such connection is requested, it returns 0. syntax time = performancetiming.secureconnectionstart; specifications specification status comment navigation timingthe definition of 'performancetiming.secureconnectionstart' in that specification. recommendation initial definition. ...

PerformanceTiming.unloadEventStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.unloadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event has been thrown. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. syntax time = performancetiming.unloadeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.unloadeventstart' in that specification. recommendation initial definition. ...

Range.setStartAfter() - Web APIs
the range.setstartafter() method sets the start position of a range relative to a node. the parent node of the start of the range will be the same as that for the referencenode. syntax range.setstartafter(referencenode); parameters referencenode the node to start the range after. example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setstartafter(referencenode); specifications specification status comment domthe definition of 'range.setstartafter()' in that specification. living standard no change. document object model (dom) level 2 traversal and range specificationthe definition of 'range.setstartafter()' in that specification. obsolete initial specification. ...

Range.setStartBefore() - Web APIs
the range.setstartbefore() method sets the start position of a range relative to another node. the parent node of the start of the range will be the same as that for the referencenode. syntax range.setstartbefore(referencenode); parameters referencenode the node before which the range should start. example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setstartbefore(referencenode); specifications specification status comment domthe definition of 'range.setstartbefore()' in that specification. living standard no change. document object model (dom) level 2 traversal and range specificationthe definition of 'range.setstartbefore()' in that specification. obsolete initial speci...

Range.startContainer - Web APIs
the range.startcontainer read-only property returns the node within which the range starts. to change the start position of a node, use one of the range.setstart() methods. syntax startrangenode = range.startcontainer; example range = document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); startrangenode = range.startcontainer; specifications specification status comment domthe definition of 'range.endcontainer' in that specification. living standard no change. document object model (dom) level 2 traversal and range specificationthe definition of 'range.startcontainer' in that specification. obsolete initial specification. ...

Selection.collapseToStart() - Web APIs
the selection.collapsetostart() method collapses the selection to the start of the first range in the selection. if the content of the selection is focused and editable, the caret will blink there. syntax sel.collapsetostart() parameters none. specifications specification status comment selection apithe definition of 'selection.collapsetostart()' in that specification. working draft current ...

SpeechRecognition: audiostart event - Web APIs
the audiostart event of the web speech api is fired when the user agent has started to capture audio for speech recognition. bubbles no cancelable no interface event event handler onaudiostart examples you can use the audiostart event in an onaudiostart method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audiostart', function() { console.log('audio capturing started'); }); or use the onaudiostart event handler property: recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. dra...

SpeechRecognition.onaudiostart - Web APIs
the onaudiostart property of the speechrecognition interface represents an event handler that will run when the user agent has started to capture audio (when the audiostart event fires.) syntax myspeechrecognition.onaudiostart = function() { ... }; examples var recognition = new speechrecognition(); recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status comment web speech apithe definition of 'onaudiostart' in that specification. draft ...

SpeechRecognition.onsoundstart - Web APIs
the onsoundstart property of the speechrecognition interface represents an event handler that will run when any sound — recognisable speech or not — has been detected (when the soundstart event fires.) syntax myspeechrecognition.onsoundstart = function() { ... }; examples recognition.onsoundstart = function() { console.log('some sound is being received'); } specifications specification status comment web speech apithe definition of 'onsoundstart' in that specification. draft ...

SpeechRecognition.onspeechstart - Web APIs
the onspeechstart property of the speechrecognition interface represents an event handler that will run when sound recognised by the speech recognition service as speech has been detected (when the speechstart event fires.) syntax myspeechrecognition.onspeechstart = function() { ... }; examples recognition.onspeechstart = function() { console.log('speech has been detected'); } specifications specification status comment web speech apithe definition of 'onspeechstart' in that specification. draft ...

SpeechRecognition.onstart - Web APIs
the onstart property of the speechrecognition interface represents an event handler that will run when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition (when the start event fires.) syntax myspeechrecognition.onstart = function() { ... }; examples recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status comment web speech apithe definition of 'onstart' in that specification. draft ...

StaticRange.startContainer - Web APIs
the read-only startcontainer property of the staticrange interface returns the start node for the range. syntax var node = staticnode.startcontainer value the dom node inside which the start position of the range is found. specifications specification status comment domthe definition of 'startcontainer ' in that specification. living standard static rangethe definition of 'startcontainer' in that specification. editor's draft initial definition. ...

StaticRange.startOffset - Web APIs
the read-only startoffset property of the staticrange interface returns the offset into the start node of the range's start position. syntax var startoffset = staticrange.startoffset value an integer value indicating the number of characters into the node indicated by startcontainer at which the first character of the range is located. specifications specification status comment domthe definition of 'startoffset' in that specification. living standard static rangethe definition of 'startoffset' in that specification. editor's draft initial definition. ...

Getting started with WebGL - Web APIs
to render in 3d the first thing you need in order to use webgl for rendering is a canvas. the html fragment below declares a canvas that our sample will draw into. <body> <canvas id="glcanvas" width="640" height="480"></canvas> </body> preparing the webgl context the main() function in our javascript code, is called when our script is loaded. its purpose is to set up the webgl context and start rendering content. // // start here // function main() { const canvas = document.queryselector("#glcanvas"); // initialize the gl context const gl = canvas.getcontext("webgl"); // only continue if webgl is available and working if (gl === null) { alert("unable to initialize webgl. your browser or machine may not support it."); return; } // set clear color to black, fully ...

XRSession.onselectstart - Web APIs
the onselectstart attribute of the xrsession object is the event handler for the selectstart event, which is dispatched when user starts making some sort of selection by pressing a trigger, touchpad, or button, speaking a command, or making a hand gesture. for example, this might include pressing a button or moving a joystick. note: not to be confused with xrsession.onselect and xrsession.onselectend. syntax xrsession.onselectstart = function(event) { ... } example xrsession.onselectstart = function(event) { console.log("the user has started a primary action, but might not have completed it.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectstart' in that specification. working draft in...

Getting Started - Developer guides
what's ajax? ajax stands for asynchronous javascript and xml. in a nutshell, it is the use of the xmlhttprequest object to communicate with servers. it can send and receive information in various formats, including json, xml, html, and text files. ajax’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page. ...

Getting started - SVG: Scalable Vector Graphics
th="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg. then open the file in firefox. it will render as shown in the following screenshot. (firefox users: click here) the rendering process involves the following: we start with the <svg> root element: a doctype declaration as known from (x)html should be left off because dtd based svg validation leads to more problems than it solves before svg 2, to identify the version of the svg for other types of validation the version and baseprofile attributes should always be used instead. both version and baseprofile attributes are deprecated in svg 2. as an xml...

starts-with - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the starts-with checks whether the first string starts with the second string and returns true or false. syntax starts-with(haystack, needle) arguments haystack the string to look in. needle the string to look for. returns true if haystack starts with needle. otherwise, false. defined xpath 1.0 4.2 gecko support supported. ...

Index - Web APIs
orientationsensor object which describes the device's physical orientation in relation to the earth's reference coordinate system. 16 abstractrange api, abstract, abstract interface, abstractrange, dom, dom api, interface, range, reference the abstractrange abstract interface is the base class upon which all dom range types are defined. a range is an object that indicates the start and end points of a section of content within the document. 17 abstractrange.collapsed api, abstractrange, dom, dom api, empty, property, range, reference, collapsed the collapsed read-only property of the abstractrange interface returns true if the range's start position and end position are the same. 18 abstractrange.endcontainer api, abstractrange, dom, dom ...
...ontainer property of the abstractrange interface returns the node in which the end of the range is located. 19 abstractrange.endoffset api, abstractrange, dom, dom api, end, property, range, read-only, reference, endoffset, offset the endoffset property of the abstractrange interface returns the offset into the end node of the range's end position. ...
...nge is located. 19 abstractrange.endoffset api, abstractrange, dom, dom api, end, property, range, read-only, reference, endoffset, offset the endoffset property of the abstractrange interface returns the offset into the end node of the range's end position. ...
...And 184 more matches

Index - Archive of obsolete content
summary! 21 port no summary! 22 self this article documents the self object that is available as a global in content scripts. self provides: 23 contributor's guide no summary! 24 classes and inheritance add-on sdk no summary! 25 content processes add-on sdk no summary! 26 getting started add-on sdk learn how to contribute to the add-on sdk. 27 modules add-ons, extensions a module is a self-contained unit of code, which is usually stored in a file, and has a well defined interface. the use of modules greatly improves the maintainability of code, by splitting it up into independent components, and enforcing logical boundaries between them. unfortuna...
...ery strings. 55 request needsupdate, sdk, add-on make simple network requests. 56 selection add-on sdk get and set text and html selections in the current web page. 57 self add-on sdk access data that is bundled with the add-on, and add-on metadata. 58 simple-prefs add-on sdk store preferences across application restarts. 59 simple-storage add-on sdk, add-ons, reference lets an add-on store data so that it's retained across firefox restarts. 60 system add-on sdk query the add-on's environment and access arguments passed to it. 61 tabs add-on sdk open, manipulate, and access tabs, and receive tab events. 62 timers add-on sdk set o...
...annotations add-on sdk no summary! 151 chrome authority no summary! 152 creating event targets no summary! 153 creating reusable modules add-on sdk no summary! 154 developing for firefox mobile add-on sdk no summary! 155 display a popup add-on sdk no summary! 156 getting started (jpm) add-on sdk, jpm in this tutorial we've built and packaged an add-on using three commands: 157 getting started (cfx) in this tutorial we've built and packaged an add-on using three commands: 158 list open tabs add-on sdk no summary! 159 listen for page load add-on sdk no summary! 160 listening for load and...
...And 57 more matches

StringView - Archive of obsolete content
*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later. ...
... break typeswitch; case arraybuffer: /* the input argument is an arraybuffer: the buffer will be shared. */ awhole = new ftaview(vinput); ninptlen = this.encoding === "utf-32" ? vinput.bytelength >>> 2 : this.encoding === "utf-16" ? vinput.bytelength >>> 1 : vinput.bytelength; araw = nstartidx === 0 && (!isfinite(nlength) || nlength === ninptlen) ? awhole : new ftaview(vinput, nstartidx, !isfinite(nlength) ? ninptlen - nstartidx : nlength); break typeswitch; case uint32array: case uint16array: case uint8array: /* the input argument is a typedarray: the buffer, and possibly the array itself, will be shared. */ ...
...*/ awhole = new ftaview(vinput); ninptlen = awhole.
...And 43 more matches

Index - Learn web development
found 348 pages: # page tags and summary 1 learn web development beginner, css, html, index, intro, landing, learn, web welcome to the mdn learning area. this set of articles aims to provide complete beginners to web development with all that they need to start coding websites. 2 accessibility aria, accessibility, articles, beginner, css, codingscripting, html, javascript, landing, learn, module learning some html, css, and javascript is useful if you want to become a web developer. beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. to help you achieve this, this module will cover general best practices (which are demonstrated throughou...
...ou want to become a web developer. beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html, css, and javascript topics), cross browser testing, and some tips on enforcing accessibility from the start. we'll cover accessibility in special detail. 3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions. 4 assessment: accessibility tro...
...gscripting, 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 there are good practices to employ that will make your learning more effective. there are also are times when you'll get stuck ...
...And 43 more matches

JavaScript Daemons Management - Archive of obsolete content
cesses created by javascript timers or by a worker instantiation. here are some code snippets that simplify and abstract the management of daemons. the following daemons management framework is the major version of setinterval – a little framework. introduction sometimes a page uses dozens and dozens of animations. in such a condition it is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the information needed by each animation to start, stop, etc. in different objects (daemons) and then to create a constructor for such a class of objects (daemon) in order to standardize and simplify the instantiation of them. note: a minimalistic version of it (...
...ructor for such a class of objects (daemon) in order to standardize and simplify the instantiation of them. note: a minimalistic version of it (minidaemon) is published here. this more complex version of it is nothing but a big and scalable collection of methods for the daemon constructor. but the daemon constructor itself is nothing but a clone of minidaemon with an added support for init and onstart functions declarable during the instantiation of the daemon. so the minidaemon framework will remain the recommended way for simple animations, because daemon without its collection of methods is essentially a clone of it. the architecture of the daemon constructor explicitly avoids the use of closures. it also offers an alternative way to pass the this object to the callback functions (see the ...
...y code (commented code), which enables the html5 standard parameters' passage functionality in that browser for both timers (polyfill), at the end of the daemon.js module. daemon.js what follows is the module that declares the daemon constructor (the core of this framework). the daemon constructor itself is nothing but a clone of the little framework minidaemon with added support for init and onstart functions (declarable during the instantiation of the daemon). so the minidaemon framework will remain the recommended way for simple animations, because daemon without its collection of methods is essentially a clone of it. /*\ |*| |*| ******************************* |*| * daemon.js * |*| ******************************* |*| |*| ver. 1.0 rev. 2 |*| |*| daemon.
...And 33 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
ines. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets. those names can be anything you like. ...
...-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets. those names can be anything you like. i have defined a name for the start and end of the container, both for rows and columns. then defined the centre block of the grid as content-start and content-end again, both for columns and rows although you do not need to name all of the lines on your grid. ...
...ything you like. i have defined a name for the start and end of the container, both for rows and columns. then defined the centre block of the grid as content-start and content-end again, both for columns and rows although you do not need to name all of the lines on your grid. you might choose to name just some key lines for your layout. .wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; } once the lines have names, we can use the name to place the item rather than the line number. ...
...And 32 more matches

Index
language bindings, xpconnect this method lets scripts set the zeal level for garbage collection. you can get details on what this method does in js_setgczeal. this method calls through to that thusly: 47 components.utils.unload modules components.utils.unload was introduced in firefox 7 and is used to unload javascript code modules. this can be particularly handy with restartless (boostrapped) extensions, so that you can unload an old version of a code module when a new version of your add-on is installed. 48 components.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...
... 80 frequently asked questions xpcom this section will help you if you're fixing a broken build, or have what you think is a quick obvious question, and you don't have time to read the reference manual. this faq usually just refers back directly to the appropriate answer, there. if you're looking here just to learn about nscomptrs, you'll get a better introduction in the getting started guide. 81 getting started guide xpcom an nscomptr is an owning reference. whatever it points to has been addrefed, counting the nscomptr as one of its `owners'. an nscomptr always calls release before letting go, whether the nscomptr is letting go so that it can point to a different object, or because the nscomptr is going out of scope. any time a new value is assigned into...
... of scope. any time a new value is assigned into an nscomptr, the nscomptr automatically always releases its old referent, if any, and (unless you tell it you already have) addrefs the new. 82 reference manual xpcom this section will help you if you're already familiar with nscomptr but you need details. if you've never use nscomptrs before, you might want to read the getting started guide first. if you're trying to fix a broken build, the faq might lead you to the answer more quickly. 83 status, recent changes, and plans xpcom no summary! 84 using nsiclassinfo xpcom if you use a c++ class which implements nsiclassinfo from javascript, then you don't have to explicitly call queryinterface on the javascript object to access the objec...
...And 31 more matches

MathML Accessibility in Mozilla
this table below provides a list of mathml constructions and how they are read in mozilla applications for various platforms: windows: mathml support is provided by nvda, which actually delegates math reading to the proprietary mathplayer plugin. 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. hence basic support is available in gecko 41...
...utterance" and description spoken last. note that this is still very experimental. mathml windows mac linux accessfu diagonal of a regular pentagon video video video / x+2 __________ x plus 2 __________ x+2 x plus 2 x + y ab __________ a over b __________ fraction start, a over b, end of fraction fraction start. a over b. fraction end. a numerator b denominator fraction ab\frac a b ab __________ a over b __________ fraction start, a over b, end of fraction. see webkit's bug 146454 fraction without bar, start. a over b. fraction end. a numerator b denominator fraction without ba...
... cube root of a, end of root cube root of a. root end. a base 3 root index root a3+4 __________ the 3 plus 4 root of a __________ 3 + 4 root of a, end of root 3 plus 4 root of a. root end. a base 3+4 root index root a34 __________ the 3 over 4 root of a __________ fraction start, 3 over 4, end of fraction root of a, end of root fraction start. 3 over 4. fraction end. root of a. root end. a base 3 numerator 4 denominator root-index fraction ab __________ the the square root of b root of a __________ square root of b, end of root root of a, end of root square root of b. root end. root of a. root end. a base b squ...
...And 29 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
oms. hence a single computer might connect many different users all day long. computers are dual-boot (windows 7 and linux fedora 19 by 2013). all users have a personal account on a windows server (ad) and an ldap account for linux authentication. objective the objective is to provide users with a mailer agent, a web browser, and a news reader which are automatically configured (preferences) at startup to the current user connected on the computer. choosing mozilla products allow us to use the same apps while running either windows or linux systems (i suspect mac osx would be fine too). instead of configuring end user individual preferences files (~/.mozilla/default/randomdir/prefs.js) we now use a centralized default set of preferences. this centralized preference file can lock preferences ...
...// 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 en...
...evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_mode", "0"); lockpref("mail.identity.id1.organization", "int evry france"); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.identity.id1.reply_to", ""); //imap lockpref("mail.server.server2.hostname", "imap-int.int-evry.fr"); lockpref("mail.server.server2.issecure", true); lockpref("mail.server.server2.login_at_startup", true); lockpref("mail.server.server2.max_cached_connections", 5); //lockpref("mail.server.server2.name", "jehan.procaccia@int-evry.fr"); lockpref("mail.server.server2.type", "imap"); lockpref("mail.server.server2.username", env_user); //smtp lockpref("mail.identity.id1.smtpserver", "smtp1"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templat...
...And 26 more matches

Timing element visibility with the Intersection Observer API - Web APIs
on the web is to record how long each ad is visible, for the purpose of billing and payment of revenues. without the intersection observer api, this winds up being done using intervals and timeouts for each individual ad, or other techniques that tend to slow the page down. using this api lets everything get streamlined by the browser to reduce the impact on performance substantially. let's get started! site structure: the html the site's structure is not too complicated. we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#li...
... <li><a href="#link2">another link</a></li> <li><a href="#link3">one more link</a></li> </ul> </nav> </aside> <main> </main> </div> this is the framework for the entire site. at the top is the site's header region, contained within a <header> block. below that, we define the site's sidebar as a list of links within an <aside> block. finally comes the main body. we start with an empty <main> element here. this box will be populated using script later. styling the site with css with the structure of the site defined, we turn to the styling for the site. let's look at the style for each component of the page individually. the basics we provide styles for the <body> and <main> elements to define the site's background as well as the grid the various parts of the ...
...n below. the header the header is fairly simple, since for this example all it contains is some text. its style looks like this: header { grid-column: 1 / -1; grid-row: 1; background-color: aliceblue; } grid-row is set to 1, since we want the header to be placed in the top row of the site's grid. more interesting is our use of grid-column here; here we specify that we want the column to start in the first column and ends in the first column past the last grid line—in other words, the header spans across all of the columns within the grid. perfect for our needs. the sidebar our sidebar is used to present links to other pages on the site. none of them work in our example here, but they exist to help with the presentation of a blog-like experience. the sidebar is represented using an...
...And 26 more matches

Enhanced Extension Installation - Archive of obsolete content
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 file compatibility.ini stores information about the version of the application (build info) that last started this profile - during startup this file is checked and if the version info held by the running app disagrees with the info held by this file, a compatibility check is run on all installed items. when changes are made to the extensions datasourc...
... datasource structure the extension manager implements a rdf datasource which contains a composite of the two xml/rdf datasources at the two install locations. ...
...and it calls into the extension system when it discovers that the xpi file contains an install.rdf manifest. the extension manager extracts that file and checks to see if the item is compatible with the running version of the application. if it is, a small set of metadata about it is written to the appropriate datasource (name, version, a flag to tell the system to properly install it on the next startup), and it is added to the appropriate type container. the system also writes a .autoreg file to the profile folder which tells the startup system that something has changed on the next restart. a copy of the xpi file the item was installed from is set aside since the xpinstall system cleans up the temporary file it hands to the extension system. if the item is not compatible, the extension syst...
...And 24 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
val() call to the clearinterval() function: const myinterval = setinterval(myfunction, 2000); clearinterval(myinterval); active learning: creating your own stopwatch! with this all said, we've got a challenge for you. take a copy of our setinterval-clock.html example, and modify it to create your own simple stopwatch. you need to display a time as before, but in this example, you need: a "start" button to start the stopwatch running. a "stop" button to pause/stop it. a "reset" button to reset the time back to 0. the time display to show the number of seconds elapsed, rather than the actual time. here's a few hints for you: you can structure and style the button markup however you like; just make sure you use semantic html, with hooks to allow you to grab the button references us...
...pause/stop it. a "reset" button to reset the time back to 0. the time display to show the number of seconds elapsed, rather than the actual time. here's a few hints for you: you can structure and style the button markup however you like; just make sure you use semantic html, with hooks to allow you to grab the button references using javascript. ...
...ow you to grab the button references using javascript. you probably want to create a variable that starts at 0, then increments by one every second using a constant loop. it is easier to create this example without using a date() object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly 1000ms. a more accurate way would be to run starttime = date.now() to get a timestamp of exactly when the user clicked the start button, and then do date.now() - starttime to get the number of milliseconds after the start button was clicked. you also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. from the second counter, you can work out each of ...
...And 24 more matches

nsIAccessibleText
accessible/public/nsiaccessibletext.idlscriptable please add a summary to this article. ...
... accessible/public/nsiaccessibletext.idlscriptable please add a summary to this article. ...
...ible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coordtype); void getselectionbounds(in long selectionnum, out long startoffset, out long endoffset); astring gettext(in long startoffset, in long endoffset); astring gettextafteroffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); astr...
...And 24 more matches

Event reference
been closed. session history events event name fired when pagehide a session history entry is being traversed from. pageshow a session history entry is being traversed to. popstate a session history entry is being navigated to (in certain cases). css animation events event name fired when animationstart a css animation has started. animationcancel a css animation has aborted. animationend a css animation has completed. animationiteration a css animation is repeated. css transition events event name fired when transitionstart a css transition has actually started (fired after any delay). transitioncancel a ...
... css animation is repeated. css transition events event name fired when transitionstart a css transition has actually started (fired after any delay). transitioncancel a css transition has been cancelled. transitionend a css transition has completed. transitionrun a css transition has begun running (fired before any delay starts). form events event name fired when reset the reset button is pressed submit the submit button is pressed printing events event name fired when beforeprint the print dialog is opened afterprint the print dialog is closed text composition events event name fired when ...
... compositionupdate a character is added to a passage of text being composed. compositionend the composition of a passage of text has been completed or canceled. view events event name fired when ...
...And 24 more matches

Navigation and resource timings - Web Performance
api for measuring the loading performance of the requested page, is deprecated but supported in all browsers. it has been replaced with the performancenavigationtiming api. the performance timing api provided read only times, in milliseconds(ms), describing at what time each point in the page loading process was reached. as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fetchstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominteractive, domcontentloadedeventstart, domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend. with the metrics above, and a little bit of math, we can calcula...
...ction is secure. to help measure the time it takes to complete all the steps, the performance timing api provides read only measurements of navigation timings. to view and capture our app's timing we enter: let time = window.performance.timing we can then use the results to measure how well our app is performing. the order is: performance timings details navigationstart when the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. secureconnectionstart when the secure connection handshake starts. if no such connection is requested, it returns 0. redirectstart when the first http redirect starts. if there is no r...
... returned is 0. redirectend when the last http redirect is completed, that is when the last byte of the http response has been received. if there is no redirect, or if one of the redirects is not of the same origin, the value returned is 0. connectend when the connection is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establishment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated. connectstart when the request to open a connection is sent to the network. if the transport layer reports an error...
...And 23 more matches

IAccessibleText
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this enum defines values which specify a text() boundary type. ia2_text_boundary_sentence is optional. when a method doesn't implement this method it must return s_false. typically this feature would not be implemented by an application. ...
...s not satisfied with how screen readers have handled the reading of sentences this boundary type could be implemented and screen readers could use the application's version of a sentence rather than the screen reader's. the rest of the boundary types must be supported. this enum is used in textbeforeoffset(), textatoffset(), and textafteroffset(). ...
... could be implemented and screen readers could use the application's version of a sentence rather than the screen reader's. the rest of the boundary types must be supported. this enum is used in textbeforeoffset(), textatoffset(), and textafteroffset(). ...
...And 22 more matches

Drawing graphics - Learn web development
se 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. the web still had no way to effectively create animations, games, 3d scenes, and other requirements commonly handled by lower level languages such as c++ or java. the situation started to improve when browsers began to support the <canvas> element and associated canvas api — apple invented it in around 2004, and other browsers followed by implementing it in the years that followed. as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other types of app, especially when combined with some of the other apis the web...
...followed. as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other types of app, especially when combined with some of the other apis the web platform provides. the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–2007, mozilla started work on an experimental 3d canvas implementation. this became webgl, which gained traction among browser vendors, and was standardized around 2009–2010. webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex. we will however show how to use a we...
...d was standardized around 2009–2010. webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex. we will however show how to use a webgl library to create a 3d scene more easily, and you can find a tutorial covering raw webgl elsewhere — see getting started with webgl. note: basic canvas functionality is supported well across browsers, with the exception of ie 8 and below for 2d canvas, and ie 11 and below for webgl. active learning: getting started with a <canvas> if you want to create a 2d or 3d scene on a web page, you need to start with an html <canvas> element. this element is used to define the area on the page into which the image will...
...And 19 more matches

Signaling and video calling - Web APIs
strated here is just one possible way to structure signaling messages. this example's server uses stringified json objects to communicate with its clients. this means our signaling messages will be in json format, with contents which specify what kind of messages they are as well as any additional information needed in order to handle the messages properly. exchanging session descriptions when starting the signaling process, an offer is created by the user initiating the call. this offer includes a session description, in sdp format, and needs to be delivered to the receiving user, which we'll call the callee. the callee responds to the offer with an answer message, also containing an sdp description. our signaling server will use websocket to transmit offer messages with the type "video-off...
...nectivity establishment (ice) comes in. exchanging ice candidates two peers need to exchange ice candidates to negotiate the actual connection between them. every ice candidate describes a method that the sending peer is able to use to communicate. each peer sends candidates in the order they're discovered, and keeps sending candidates until it runs out of suggestions, even if media has already started streaming. an icecandidate event is sent to the rtcpeerconnection to complete the process of adding a local description using pc.setlocaldescription(offer). once the two peers agree upon a mutually-compatible candidate, that candidate's sdp is used by each peer to construct and open a connection, through which media then begins to flow. if they later agree on a better (usually higher-performa...
...itional codecs are supported by which browsers, and how to choose the best codecs to use in the guide codecs used by webrtc. optionally, see rfc 8445: interactive connectivity establishment, section 2.3 ("negotiating candidate pairs and concluding ice") if you want greater understanding of how this process is completed inside the ice layer. you should note that candidates are exchanged and media starts to flow as soon as the ice layer is satisfied. this is all taken care of behind the scenes. our role is to simply send the candidates, back and forth, through the signaling server. the client application the core to any signaling process is its message handling. it's not necessary to use websockets for signaling, but it is a common solution. you should, of course, select a mechanism for exchan...
...And 19 more matches

2D maze game with device orientation - Game development
pidly thanks to the passionate community involved in the development process. you can check it out on github where it’s open sourced, read the online documentation and go through the big collection of examples. the phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself. starting with the project you can see cyber orb source code on github. the folder structure is quite straightforward: the starting point is the index.html file where we initialize the framework and set up an <canvas> to render the game on. you can open the index file in your favourite browser to launch the game and try it. there are also three folders in the directory: img: all the images that w...
...and try it. there are also three folders in the directory: img: all the images that we will use in the game. src: the javascript files with all the source code of the game defined inside. audio: the sound files used in the game. setting up the canvas we will be rendering our game on canvas, but we won't do it manually — this will be taken care of by the framework. let’s set it up: our starting point is the index.html file with the following content. you can create this yourself if you want to follow along: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>cyber orb demo</title> <style> body { margin: 0; background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/...
...the <body> contains initialization of the phaser framework and the definitions of the game states. var game = new phaser.game(320, 480, phaser.canvas, 'game'); the line above will initialize the phase...
...And 18 more matches

AddonManager
urred (such as an add-on not being found), null is passed back instead. addonlistcallback() a callback that is passed an array of addons void addonlistcallback( in addon addons[] ) parameters addons the array of addons passed back from the asynchronous request constants addoninstall states constant description state_available an install that is waiting to be started. state_downloading an install that is in the process of being downloaded. state_checking an install that is checking for updated information. state_downloaded an install that has finished downloading and is ready to install. state_download_failed an install that failed to download. state_installing an install that is in the process of ...
...ly. autoupdate_default indicates that the add-on should update automatically only if that's the global default. autoupdate_enable indicates that the add-on should update automatically. pending operations constant description pending_none no operations are pending. pending_enable this add-on will be enabled after the application restarts. pending_disable this add-on will be disabled after the application restarts. pending_uninstall this add-on will be uninstalled after the application restarts. pending_install this add-on will be installed after the application restarts. pending_upgrade this add-on will be upgraded after the application restarts. permissions consta...
... pending_upgrade this add-on will be upgraded after the application restarts. permissions constant description perm_can_uninstall this add-on can be uninstalled. perm_can_enable this add-on can be enabled. perm_can_disable this add-on can be disabled. perm_can_upgrade this add-on can be upgraded. operations requiring restart constant description op_needs_restart_none no operations will require a restart. op_needs_restart_enable enabling the add-on will require a restart. op_needs_restart_disable disabling the add-on will require a restart. ...
...And 18 more matches

Using the Screen Capture API - Web APIs
tdisplaymedia() to enable screen sharing on browsers that support it but do not implement the current standard api. this works with at least chrome, edge, and firefox. capturing screen contents capturing screen contents as a live mediastream is initiated by calling navigator.mediadevices.getdisplaymedia(), which returns a promise that resolves to a stream containing the live screen contents. ...
...upport it but do not implement the current standard api. this works with at least chrome, edge, and firefox. capturing screen contents capturing screen contents as a live mediastream is initiated by calling navigator.mediadevices.getdisplaymedia(), which returns a promise that resolves to a stream containing the live screen contents. ...
...ction startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as seen below. starting screen capture: promise style function startcapture(displaymediaoptions) { let capturestream = null; return navigator.mediadevices.getdisplaymedia(displaymediaoptions) .catch(err => { console.error("error:" + err); return null; }); } either way, the user agent responds by presenting a user interface that prompts the user to choose the screen area to share. both of these implementation...
...And 18 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
the lines are numbered for columns and rows, and are indexed from 1. note that grid is indexed according to the writing mode of the document. in a left to right language such as english line 1 is on the left-hand side of the grid. if you are working in a right-to-left language then line 1 will be the far right of the grid. ...
...ay: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid. i would like the first item to start on the far left of the grid and span a single column track. it should also start on the first row line, at the top of the grid and span to the fourth row line. .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } as you position some items, other items on the grid will continue to be laid out using the auto-placement rules. we will take a proper ...
...te-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } .box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box3 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } .box4 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } the grid-column and gr...
...And 18 more matches

source-editor.jsm
number findprevious(boolean awrap); event management void addeventlistener(string aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations void focus(); number gettopindex(); boolean hasfocus(); void settopindex(number atopindex); content management operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number getlinecount(); num...
... void focus(); number gettopindex(); boolean hasfocus(); void settopindex(number atopindex); content management operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number getlinecount(); number getlineend(number alineindex, boolean aincludedelimiter); number getlinestart(number alineindex); string getmode(); string gettext([optional] number astart, [optional] number aend); string getselectedtext(); void setmode(string amode); void settext(string atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number getcaretoffset(); object getcare...
...atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number getcaretoffset(); object getcaretposition(); object getselection(); void setcaretoffset(number aoffset); void setcaretposition(number aline, [optional] number acolumn, [optional] number aalign); void setselection(number astart, number aend); breakpoint management void addbreakpoint(number alineindex, [optional] string acondition); array getbreakpoints(); boolean removebreakpoint(number alineindex); properties attribute type description dirty boolean set this value to false whenever you save the text; the editor will update it to true when the c...
...And 17 more matches

Audio for Web games - Game development
top and mobile browsers. there is further information about it here from the google developers site. it is worth noting that autoplay with sound is allowed if: the user has interacted with the domain. on mobile the user has added the site to their home screen. ...
...by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated event, such as a click or tap. this means you will have to structure your audio playback to take account of that. this is usually mitigated against by loading the audio in advance and priming it on a user-initiated event. for more passive audio auto play, for example background music that starts as soon as a game loads, one trick is to detect any user initiated event and start playback then. for other more active sounds that are to be used during the game we could consider priming them as soon as something like a start button is pressed. to prime audio like this we want to play a part of it; for this reason it is useful to include a moment of silence at the end of your audio sample. ju...
... firefox (android) 62+ y y y y edge mobile y y y y opera mobile 46+ y y y y safari (ios) 7+ y/n* n n y android browser 67+ y y y y there's a full compatibility chart for mobile and desktop htmlmediaelement support here. * note: safari 7 has issues playing if you try and start all pieces of audio simultaneously. if you stagger playback you may have some degree of success. note: concurrent audio playback is tested using our concurrent audio test example, where we attempt to play three pieces of audio at the same time using the standard audio api. note: simple autoplay functionality is tested with our autoplay test example. note: volume changeability is tested w...
...And 16 more matches

Mozilla internal string guide
with those on span: elements() and length() the latter is not the logical length of the string but the writable length of the buffer. the buffer exposed via these methods includes the prefix that you may have requested to be preserved. it's up to you to skip past it so as to not overwrite it. if there's a need to request a different capacity before you are ready to call finish(), you can call restartbulkwrite() on the handle. it takes three arguments that match the first three arguments of bulkwrite(). it returns mozilla::result<mozilla::ok, nsresult> to indicate success or oom. calling restartbulkwrite() invalidates previously-obtained span, raw pointer or length. once you are done writing, call finish(). it takes two arguments: the new logical length of the string (which must not exceed th...
...s and functions converting cocoa strings use mozilla::copycocoastringtoxpcomstring() in mozilla/macstringhelpers.h to convert cocoa strings to xpcom strings. searching strings - looking for substrings, characters, etc. findinreadable() is the replacement for the old string.find(..). the syntax is: prbool findinreadable(const nsastring& pattern, nsastring::const_iterator start, nsastring::const_iterator end, nsstringcomparator& acomparator = nsdefaultstringcomparator()); to use this, start and end should point to the beginning and end of a string that you would like to search. if the search string is found, start and end will be adjusted to point to the beginning and end of the found pattern. the return value is pr_true or pr_false, indicating w...
...); to use this, start and end should point to the beginning and end of a string that you would like to search. if the search string is found, start and end will be adjusted to point to the beginning and end of the found pattern. the return value is pr_true or pr_false, indicating whether or not the string was found. ...
...And 16 more matches

Recording a media element - Web APIs
g the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded. in this article, we'll look at an example that does just that. html content <p>click the "start" button to begin video recording for a few seconds. you can stop the video by clicking the creatively-named "stop" button. the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful). </p> <br> let's start by looking at the key bits of the html. there's a little more than this, but it's just informational rather than being part...
... the video by clicking the creatively-named "stop" button. the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful). </p> <br> let's start by looking at the key bits of the html. there's a little more than this, but it's just informational rather than being part of the core operation of the app. <div class="left"> <div id="startbutton" class="button"> start </div> <h2>preview</h2> <video id="preview" width="160" height="120" autoplay muted></video> </div> we present our main interface in two columns. ...
... by looking at the key bits of the html. there's a little more than this, but it's just informational rather than being part of the core operation of the app. <div class="left"> <div id="startbutton" class="button"> start </div> <h2>preview</h2> <video id="preview" width="160" height="120" autoplay muted></video> </div> we present our main interface in two columns. on the left is a start button and a <video> element which displays the video preview; this is the video the user's camera sees. note that the autoplay attribute is used so that as soon as the stream starts to arrive from the camera, it immediately gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't output to their speakers, causing an ugly feedback loop. <div ...
...And 16 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
o move the viewer through the scene. note: this example always displays what it renders on the screen, even if using immersive-vr mode. this lets you compare any differences in rendering between the two modes, and lets you see output from immersive mode even if you don't have a headset. ...
...sion = null; let xrinputsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene. ...
...pace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene. ...
...And 16 more matches

TypeScript support in Svelte - Learn web development
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-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode. repl unfortunately, typescript support is not yet available in the repl. typescript: optional static typing for javascript typescript is a superset of javascript that provides features such as optional static typing, classes, interfaces, and generics. the goal of typescript is to help catch mistakes early through its type system and make javascript development mo...
...everal large-scale projects, like angular 2, vue 3, ionic, visual studio code, jest and even the svelte compiler. nevertheless, some developers prefer to use it even on small projects like the one we are developing. in the end, it's your decision. in the following sections we hope to give you more evidence to make up your mind about it. ...
...velte typescript project from scratch you can start a new svelte typescript project using the standard template. all you have to do is run the following terminal commands (run them somewhere where you are storing your svelte test projects — it creates a new directory): npx degit sveltejs/template svelte-typescript-app cd svelte-typescript-app node scripts/setuptypescript.js this creates a starter project that includes typescript support, which you can then modify as you wish. then you'll have to tell npm to download dependencies and start the project in development mode, like we usually do: npm install npm run dev adding typescript support to an existing svelte project to add typescript support to an existing svelte project you can follow these instructions. alternatively, you can ...
...And 15 more matches

Command line options
for example, if you have multiple profiles you can use command line configuration options to bypass the profile manager and open a specific profile. you can also control how mozilla applications open, which components open initially, and what the components do when they open. this page describes the commonly used options and how to use them. you can open the command 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. ...
...ath\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 options can be specified. ...
...ext below). in some cases, option arguments must be enclosed in quotation marks (this is noted in the option descriptions below). multiple command line options can be specified. in general, the syntax is as follows: application -option -option "argument" -option argument examples the following examples show the use of the "-profilemanager" command, which will open the profile manager prior to starting firefox or thunderbird: windows select run from windows start menu. enter the following command: firefox -profilemanager mac os x go to applications > utilities. open terminal and enter the following command: cd /applications/firefox.app/contents/macos ./firefox -profilemanager if you use firefox nightly, you can enter: cd /applications/firefoxnightly.app/contents/macos ./firefox -pr...
...And 15 more matches

IME handling guide
platform. this capsules the logic to dispatch widgetcompositionevent and widgetkeyboardevent for making the behavior on each platform exactly same. for example, if widgetkeyboardevent should be dispatched when there is a composition is managed by this class in xp level. first of use, native ime handlers get the rights to use texteventdispatcher with a call of beginnativeinputtransaction(). then, startcomposition(), setpendingcomposition(), flushpendingcomposition(), commitcomposition(), etc. are available if beginnativeinputtransaction() return true. these methods automatically manage composition state and dispatch widgetcompositionevent properly. this is also used by mozilla::textinputprocessor which can emulates (or implements) ime with chrome script. so, native ime handlers using this clas...
...etcompositionevent properly. this is also used by mozilla::textinputprocessor which can emulates (or implements) ime with chrome script. so, native ime handlers using this class means that the dispatching part is also tested by automated tests. mozilla::widgetcompositionevent internally, widgetcompositionevent represents native ime behavior. its message is one of following values: ecompositionstart this is dispatched at starting a composition. this represents a dom compositionstart event. the mdata value is a selected string at dispatching the dom event and it's automatically set by textcomposition. ecompositionupdate this is dispatched by textcomposition when an ecompoitionchange will change the composition string. this represents a dom compositionupdate event. ecompositionend this is...
...onend event. ecompositioncommit this is used internally only. this is dispatched when a composition is committed with specific string. the mdata value is the commit string. this causes a dom text event without clause information and a dom compositionend event. ...
...And 15 more matches

Inputs and input sources - Web APIs
the event is delivered as an xrinputsourcechangeevent, which includes three properties of interest: session the xrsession for which the input sources have changed. added an array of zero or more xrinputsource objects indicating the input sources that have been newly added to the xr system. removed an array of zero or more xrinputsource objects indicating any input sources that hav...
...then look at each input source and find one matching this, if available, falling back to another controller if no controller is in that hand. ...
...then the select event handler is replaced with the function realselecthandler(), which will be used for handling all future select events. ...
...And 15 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
hese terms and you're looking for an introduction to their application within with the web audio api, you've come to the right place. demo we're going to be looking at a very simple step sequencer: in practice this is easier to do with a library — the web audio 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 differ...
...codeaudiodata(), audiobuffersourcenode note: this instrument was not created to sound good, it was created to provide demonstration code and represents a very simplified version of such an instrument. the sounds are based on a dial-up modem. if you are unaware of how one sounds you can listen to one here. creating an audio context as you should be used to by now, each web audio api app starts with an audio context: // for cross browser compatibility const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); the "sweep" — oscillators, periodic waves, and envelopes for what we will call the "sweep" sound, that first noise you hear when you dial up, we're going to create an oscillator to generate the sound. the oscillatornode comes ...
...s. it is taken from a repository of wavetables, which can be found in the web audio api examples from google chrome labs. the oscillator now we can create an oscillatornode and set its wave to the one we've created: function playsweep() { let osc = audioctx.createoscillator(); osc.setperiodicwave(wave); osc.frequency.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. we can allow the user to control these using range inputs on the interface: <label f...
...And 15 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
ire grid is aligned. control of overlapping content more than one item can be placed into a grid cell or area and, they can partially overlap each other. this layering may then be controlled with the z-index property. grid is a powerful specification that, when combined with other parts of css such as flexbox, can help you create layouts that were previously impossible to build in css. it all starts by creating a grid in your grid container. the grid container we create a grid container by declaring display: grid or display: inline-grid on an element. as soon as we do this, all direct children of that element become grid items. in this example, i have a containing div with a class of wrapper and, inside are five child elements. <div class="wrapper"> <div>one</div> <div>two</div> <...
...or, available as part of firefox's developer tools. if you view this example in firefox and inspect the grid, you will see a small icon next to the value grid. click this and then the grid on this element will be overlaid in the browser window. as you learn and then work with the css grid layout this tool will give you a better idea of what is happening with your grids visually. if we want to start making this more grid-like we need to add column tracks. grid tracks we define rows and columns on our grid with the grid-template-columns and grid-template-rows properties. these define grid tracks. a grid track is the space between any two lines on the grid. in the below image you can see a track highlighted – this is the first row track in our grid. i can add to our earlier example by a...
... to do this in a later guide in this series. positioning items against lines we will be exploring line based placement in full detail in a later article. the following example demonstrates doing this in a simple way. when placing an item, we target the line – rather than the track. in the following example i am placing the first two items on our three column track grid, using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties. working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. it begins at row line 1 and ends at row line 3, therefore spanning two row tracks. the second item starts on grid column line 1, and spans one track. this is the default so i do n...
...And 15 more matches

<easing-function> - CSS: Cascading Style Sheets
the <easing-function> css data type denotes a mathematical function that describes how fast one-dimensional values change during animations. this lets you vary the animation's speed over the course of its duration. the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation. they correlate a time ratio to an output ratio, both expressed as <number>s. for these values, 0.0 represents the initial state, and 1.0 represents the final state. depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. this causes the animation to go farther than the final state, and then r...
...e easily referenced. the linear class of easing functions linear the animation moves from beginning to end at a constant rate. this keyword represents the easing function cubic-bezier(0.0, 0.0, 1.0, 1.0). the cubic-bezier() class of easing functions the cubic-bezier() functional notation defines a cubic bézier curve. as these curves are continuous, they are often used to smooth down the start and end of the animation and are therefore sometimes called easing functions. a cubic bézier curve is defined by four points p0, p1, p2, and p3. p0 and p3 are the start and the end of the curve and, in css these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range). p0 is (0, 0) and represents the initial time and the initial...
... you specify an invalid cubic-bezier curve, css ignores the whole property. syntax cubic-bezier(x1, y1, x2, y2) where: x1, y1, x2, y2 are <number> values representing the abscissas, and ordinates of the p1 and p2 points defining the cubic bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid. keywords for common cubic-bezier easing functions ease the animation starts slowly, accelerates sharply, and then slows gradually towards the end. this keyword represents the easing function cubic-bezier(0.25, 0.1, 0.25, 1.0). it is similar to ease-in-out, though it accelerates more sharply at the beginning. ease-in the animation starts slowly, and then progressively speeds up until the end, at which point it stops abruptly. this keyword represents the easing functi...
...And 15 more matches

Migrating from webkitAudioContext - Web APIs
es var gain = context.creategainnode(); var delay = context.createdelaynode(); var js = context.createjavascriptnode(1024); you can simply rename the methods to look like this: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. ...
...e(); var js = context.createjavascriptnode(1024); you can simply rename the methods to look like this: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. ...
...is: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. changes to starting and stopping nodes in webkitaudiocontext, there are two ways to start and stop audiobuffersourcenode and oscillatornode: the noteon() and noteoff() methods, and the start() and stop() methods. ...
...And 14 more matches

justify-content - CSS: Cascading Style Sheets
ve-examples and send us a pull request. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. ...
...est. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. ...
...if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. ...
...And 14 more matches

Additional Navigation - Archive of obsolete content
e subject may be a resource uri. the object attribute may be a resource uri or a literal value. using a literal as the object of a triple is a common way to filter out specific items. for instance, if items were identified with a type, the data could be filtered to include only items of a particular type. here is an example triple that we could use in the photos example: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> this new triple has a static value for the object attribute instead of a variable reference. you might be able to guess that it will cause a match for only one of the photos, the canal photo. the others won't be able to match ...
...dc/elements/1.1/title" object="canal"/> </query> this new triple has a static value for the object attribute instead of a variable reference. you might be able to guess that it will cause a match for only one of the photos, the canal photo. the others won't be able to match when evaluating the triple. ...
...ribute instead of a variable reference. you might be able to guess that it will cause a match for only one of the photos, the canal photo. the others won't be able to match when evaluating the triple. to look closer, here is the data network after only the member has been evaluated: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) when evaluating the triple, the template builder will iterate over the three potential results found so far. for the first result, the value of the ?photo variable 'http://www.xul...
...And 13 more matches

Anatomy of a video game - Game development
imationframe() will be the foundation of most well-programmed per-frame main loops. a callback function must be passed in to it when it is called. that callback function will be executed at a suitable time before the next repaint. here is an example of a simple main loop: window.main = function () { window.requestanimationframe( main ); // whatever your main loop needs to do }; main(); // start the cycle note: in each of the main() methods discussed here, we schedule a new requestanimationframe before performing our loop contents. that is not by accident and it is considered best practice. calling the next requestanimationframe early ensures the browser receives it on time to plan accordingly even if your current frame misses its vsync window. the above chunk of code has two stateme...
...ith our previous main loop: main() pollutes the window object (where all global variables are stored) and the example code did not leave us with a way to stop the loop unless the whole tab is closed or refreshed. for the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an immediately-invoked function expression (iife). /* * starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (asi). the browser could accidentally * think this whole example continues from the previous line. the leading semicolon * marks the beginning of our new line if the previous one was not empty or terminated. */ ;(function () { function main() { window.requestanimationframe( m...
...bove this example * relied on automatic semicolon insertion (asi). the browser could accidentally * think this whole example continues from the previous line. the leading semicolon * marks the beginning of our new line if the previous one was not empty or terminated. */ ;(function () { function main() { window.requestanimationframe( main ); // your main loop contents } main(); // start the cycle })(); when the browser comes across this iife, it will define your main loop and immediately queue it for the next frame. it will not be attached to any object and main (or main() for methods) will be a valid unused name in the rest of the application, free to be defined as something else. note: in practice, it is more common to prevent the next requestanimationframe() with an if-sta...
...And 13 more matches

Download
a download object represents a single download, with associated state and actions. this object is transient, though it can be included in a downloadlist so that it can be managed by the user interface and persisted across sessions. a new download object can be created using the downloads.createdownload() function. method overview promise start(); promise launch(); promise showcontainingdirectory(); promise cancel(); promise removepartialdata(); promise whensucceeded(); promise finalize([optional] boolean aremovepartialdata); properties attribute type description canceled read only boolean indicates that the download has been canceled. this property can become true, then it can b...
...mise cancel(); promise removepartialdata(); promise whensucceeded(); promise finalize([optional] boolean aremovepartialdata); properties attribute type description canceled read only boolean indicates that the download has been canceled. this property can become true, then it can be reset to false when a canceled download is restarted. this property becomes true as soon as the cancel() method is called, though the stopped property might remain false until the cancellation request has been processed. temporary files or part files may still exist even if they are expected to be deleted, until the stopped property becomes true. contenttype string the mime type of the download, for example "text/plai...
...ed property becomes true. contenttype string the mime type of the download, for example "text/plain", or null if the mime type is not available. this property may be populated or changed while the download is in progress, using the mime type provided by the server. currentbytes read only number number of bytes currently transferred. this value starts at zero, and may be updated regardless of the value of hasprogress. note: you shouldn't rely on this property being equal to totalbytes to determine whether the download is completed. you should use the individual state properties instead, since this value may not be updated after the last piece of data is transferred. error read only downloaderror when the download fai...
...And 13 more matches

Shell global objects
note: this list overlaps with "built-in functions" in introduction to the javascript shell and is probably not complete. see js/src/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. ...
...ilename is relative to the calling script. evaluate(code[, options]) evaluate code as though it were the contents of a file. ...
...valuate code as though it were the contents of a file. ...
...And 13 more matches

Web Console remoting - Firefox Developer Tools
e 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. 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 a...
...s 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", "networkactivity", "fileactivity"] the web console actor does not start any listeners by default. the client has the option to start each listener when needed. this approach allows for lower resource usage on the server - this is a potential ...
... protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ... ...
...And 13 more matches

HTMLTextAreaElement - Web APIs
sets the element's required attribute, indicating that the user must specify a value before submitting the form. rows unsigned long: returns / sets the element's rows attribute, indicating the number of visible text lines for the control. selectiondirection string: returns / sets the direction in which selection occurred. this is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction. this can also be "none" if the direction is unknown. selectionend unsigned long: returns / sets the index of the end of selected text. if no text is selected, contains the index of the character that follows the input cursor. on being set, the control behaves as if setselectionrange() had been called wit...
..."backward" for the opposite direction. this can also be "none" if the direction is unknown. selectionend unsigned long: returns / sets the index of the end of selected text. if no text is selected, contains the index of the character that follows the input cursor. on being set, the control behaves as if setselectionrange() had been called with this as the second argument, and selectionstart as the first argument. selectionstart unsigned long: returns / sets the index of the beginning of selected text. if no text is selected, contains the index of the character that follows the input cursor. on being set, the control behaves as if setselectionrange() had been called with this as the first argument, and selectionend as the second argument. tabindex long: return...
...overflow: hidden; width: 300px; height: 100px; } html <form> <fieldset> <legend>your comments</legend> <p><textarea class="noscrollbars" onkeyup="autogrow(this);"></textarea></p> <p><input type="submit" value="send" /></p> </fieldset> </form> insert html tags example insert some html tags or smiles or any custom text in a textarea. ...
...And 13 more matches

RTCRemoteOutboundRtpStreamStats.localId - Web APIs
er to the local device. the difference is that remote-outbound-rtp describes statistics about the transmission(s) from the perspective of the remote peer, while inbound-rtp offers statistics about the incoming data from the local peer's perspective. you can examine, try out, and experiment with this example on glitch. ...
...ncoming data from the local peer's perspective. you can examine, try out, and experiment with this example on glitch. example in this example, we have a pair of functions: the first, networkteststart(), captures an initial report, and the second, networkteststop(), captures a second report, then uses the two reports to output some information about the network conditions... xxx ... networkteststart() this function simply calls the rtcpeerconnection method getstats() to request an rtcstatsreport and store it in the variable startreport. ...
...e a pair of functions: the first, networkteststart(), captures an initial report, and the second, networkteststop(), captures a second report, then uses the two reports to output some information about the network conditions... xxx ... networkteststart() this function simply calls the rtcpeerconnection method getstats() to request an rtcstatsreport and store it in the variable startreport. let startreport; async function networkteststart(pc) { if (pc) { startreport = await pc.getstats(); } } given an rtcpeerconnection, pc, this calls its getstats() method to obtain a statistics report object, which it stores in startreport for use once the end-of-test data has been collected by networkteststop(). networkteststop() the networkteststop() function obtains a second report, endreport,...
...And 13 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
- [ bats screeching ] - they won't get in your hair. they're after the bugs. inner structure of a webvtt file let's re-examine one of our previous examples, and look at the cue structure in a bit more detail. 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. in the case of each cue: the first line is started with a time, which is the starting time for showing the text that appears underneath. on the same line, we then have a string of "-->". we finish the first line with a second time, 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 .v...
...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. ...
...cue settings for more information): webvtt 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% where did he go? 00:00:03.000 --> 00:00:06.500 position:90% align:right size:35% i think he went down this lane. 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% what are you waiting for? webvtt cues a cue is a single subtitle block that has a single start time, end time, and textual payload. example 6 consists of the header, a blank line, and then five cues separated by blank lines. a cue consists of five components: an optional cue identifier followed by a newline. cue timings. optional cue settings with at least one space before the first and between each setting. one or more newlines. the cue payload text. example 7 - example of a cue ...
...And 13 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
one after any flexible lengths and any auto margins have been resolved. typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. it also exerts some control over the alignment of items when they overflow the line. note: space-* values not supported in older syntaxes. ...
... inflexible, or are flexible but have reached their maximum size. it also exerts some control over the alignment of items when they overflow the line. note: space-* values not supported in older syntaxes. ...
...ut have reached their maximum size. it also exerts some control over the alignment of items when they overflow the line. note: space-* values not supported in older syntaxes. ...
...And 13 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
entlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend...
...t.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value; setvalue(obj.topic, value); }; return slider; }; var inputslider = function(node) { var min = parsefloat(node.getattribute('data-min')); var max = parsefloat(node.getattribute('data-max')); var step = parsefloat(node.getattribute('data-step')); var value = parsefloat(node.getattribute('data-value')); var ...
...p : getstep, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe, setprecision : setprecision, setsensivity : setsensivity, getprecision : getprecision, createslider : createslider, }; })(); /** * ui-slidersmanager */ var slidermanager = (function slidermanager() { 'use strict'; var subscribers = {}; var sliders = []; function trackmouse(elem, callback, startfunc, endfunc) { startfunc = startfunc || function(e) {}; endfunc = endfunc || function(e) {}; elem.addeventlistener('mousedown', function(e) { e.preventdefault(); startfunc(e); document.addeventlistener('mousemove', callback); document.addeventlistener('mouseup', function up(e) { document.removeeventlistener('mousemove', callback); document.removeeventlistener('mouseup...
...And 13 more matches

A first splash into JavaScript - Learn web development
e detail! note: many of the code features you'll see in javascript are the same as in other programming languages — functions, loops, etc. the code syntax looks different, but the concepts are still largely the same. thinking like a programmer one of the hardest things to learn in programming is not the syntax you need to learn, but how to apply it to solve real world problems. you need to start thinking like a programmer — this generally involves looking at descriptions of what your program needs to do, working out what code features are needed to achieve those things, and how to make them work together. this requires a mixture of hard work, experience with the programming syntax, and practice — plus a bit of creativity. the more you code, the better you'll get at it. we can't prom...
...guess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = ''; } resetbutton.parentnode.removechild(resetbutton); gu...
...llenge the player to guess the number in 10 turns. after each turn the player should be told if they are right or wrong, and if they are wrong, whether the guess was too low or too high. it should also tell the player what numbers they previously guessed. the game will end once the player guesses correctly, or once they run out of turns. when the game ends, the player should be given an option to start playing again. upon looking at this brief, the first thing we can do is to start breaking it down into simple actionable tasks, in as much of a programmer mindset as possible: generate a random number between 1 and 100. record the turn number the player is on. start it on 1. provide the player with a way to guess what the number is. once a guess has been submitted first record it somewher...
...And 12 more matches

Understanding client-side JavaScript frameworks - Learn web development
an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks. in this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. we are not aiming to exhaustively teach you everything you need to know about react/reactdom, or vue, or some other specific framework; the framework teams' own docs (and other resources) do that job already. instead, we want to back up and first answer more fundamental questions such as: why should i use a framework? what problems do they solve ...
...oose a framework? do i even need to use a framework? what features do frameworks have? how do they work in general, and how do frameworks' implementations of these features differ? how do they relate to "vanilla" javascript or html? ...
...anilla" javascript or html? after that, we'll provide some tutorials covering the essentials of some of the different framework choices, to provide you with enough context and familiarity to start going into greater depth yourself. we want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility. get started now, with "introduction to client-side frameworks" prerequisites you should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — html, css, and especially javascript. your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundament...
...And 12 more matches

Introduction to automated testing - Learn web development
m already installed, you should update them to their latest versions. to update node, the most reliable way is to download and install an updated installer package from their website (see link above). to update npm, use the following command in your terminal: npm install npm@latest -g note: if the above command fails with permissions errors, fixing npm permissions should sort you out. to start using node/npm-based packages on your projects, you need to set up your project directories as npm projects. this is easy to do. for example, let's first create a test directory to allow us to play without fear of breaking anything. create a new directory somewhere sensible using your file manager ui, or, on a command line, by navigating to the location you want and running the following comm...
...hese tasks when any files of these types are saved. you could also use wildcards in your main tasks, for example gulp.src('src/*.css') would grab all your css files and then run piped tasks on them. note: one problem with our watch command above is that our csslint/autoprefixer combination throws full-blown errors when a css error is encountered, which stops the watch working. you'll have to restart the watch once a css error is encountered, or find another way to do this. there's a lot more you can do with gulp. the gulp plugin directory has literally thousands of plugins to search through. other task runners there are many other task runners available. we certainly aren't trying to say that gulp is the best solution out there, but it works for us and it is fairly accessible to beginner...
...other task runners there are many other task runners available. we certainly aren't trying to say that gulp is the best solution out there, but it works for us and it is fairly accessible to beginners. you could also try using other solutions: grunt works in a very similar way to gulp, except that it relies on tasks specified in a config file, rather than using written javascript. see getting started with grunt for more details. you can also run tasks directly using npm scripts located inside your package.json file, without needing to install any kind of extra task runner system. this works on the premise that things like gulp plugins are basically wrappers around command line tools. so, if you can work out how to run the tools using the command line, you can then run them using npm script...
...And 12 more matches

nsITextInputProcessor
however, if the event is consumed by web content, it returns false. in this case, composition isn't created. so, js-ime shouldn't continue to compose the string. finally, when you commit the composition with the last composition string, just do this: tip.commitco...
...however, if the event is consumed by web content, it returns false. in this case, composition isn't created. so, js-ime shouldn't continue to compose the string. finally, when you commit the composition with the last composition string, just do this: tip.commitcomposition(); when you commit composition with specific string, s...
...however, if the event is consumed by web content, it returns false. ...
...And 12 more matches

Capabilities, constraints, and settings - Web APIs
e process works like this (using mediastreamtrack as an example): if needed, call mediadevices.getsupportedconstraints() to get the list of supported constraints, which tells you what constrainable properties the browser knows about. this isn't always necessary, since any that aren't known will simply be ignored when you specify them—but if you have any that you can't get by without, you can start by checking to be sure they're on the list. once the script knows whether the property or properties it wishes to use are supported, it can then check the capabilities of the api and its implementation by examining the object returned by the track's getcapabilities() method; this object lists each supported constraint and the values or range of values which are supported. finally, the track's a...
...lete example by clicking here. html content <p>experiment with media constraints! edit the constraint sets for the video and audio tracks in the edit boxes on the left, then click the "apply constraints" button to try them out. the actual settings the browser selected and is using are shown in the boxes on the right. ...
... video and audio tracks in the edit boxes on the left, then click the "apply constraints" button to try them out. the actual settings the browser selected and is using are shown in the boxes on the right. ...
...And 12 more matches

align-content - CSS: Cascading Style Sheets
ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
...project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
...equest. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
...And 12 more matches

Third-party APIs - Learn web development
api functionality and make it available on your page. this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library. for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'),...
...se your own api key in place of any placeholder. other apis may require that you include the key in a slightly different way, but the pattern is relatively similar for most of them. requiring a key enables the api provider to hold users of the api accountable for their actions. ...
...if you've already cloned the examples repository, you'll already have a copy of this file, which you can find in the javascript/apis/third-party-apis/mapquest directory. ...
...And 11 more matches

Profiling with the Firefox Profiler
s available at profiler.firefox.com. it has tighter integration with firefox than external profilers, and has more of a platform focus than the devtools performance panel. it can be used in a variety of situations where external profilers are not available, and can provide more information and insight into what the browser is doing. using the firefox profiler visit profiler.firefox.com to get started. it has instructions for enabling the profiler menu button, and getting going. there are also product docs available at profiler.firefox.com/docs/. 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 >...
...rl will see the same things you are seeing. tips understanding profiles can be difficult. if you're unfamiliar with gecko's internals, you can click the javascript only button to see where your javascript code is slow. each entry in the call tree shows a call stack and how much time is spent in that call stack. for example:in the results above we can see that we're spending ~287 milliseconds in startup::xre_initchildprocess, 194 ms of which are spent in pvsync::msg_notify and all child functions that it calls. it is useful to scan down the "running time" column and look for when the time changes. while looking for performance problems, you're looking for the processes that are taking the most time; then you can figure out how to optimize them. common performance bugs in firefox inefficient ...
...tall the latest pre-release build in your host machine's firefox browser that has your phone reachable via adb. this will add a icon in the top right of the browser. set devtools.debugger.remote-enabled to true in about:config for fennec. select target mobile usb and press connect. the first run will take an additional 1 minute or so to pull in the required system libraries. ...
...And 11 more matches

Bytecode Descriptions
peof]](), the object where super property lookups should begin. callee must be a function that has a homeobject that's an object, typically produced by jsop::callee or jsop::envcallee. implements: getsuperbase, except that instead of the environment, the argument supplies the callee. getpropsuper operands: (uint32_t nameindex) stack: receiver, obj ⇒ super.name get the value of receiver.name, starting the property search at obj. in spec terms, obj.[[get]](name, receiver). implements: getvalue for references created by super.name. the receiver is this and obj is the superbase of the enclosing method. format: jof_atom, jof_prop, jof_typeset, jof_ic getelemsuper stack: receiver, key, obj ⇒ super[key] get the value of receiver[key], starting the property search at obj. in spec terms, obj.[...
...in spec terms, obj.[[set]](name, val, receiver). implements: putvalue for references created by super.name in non-strict code. the receiver is this and obj is the superbase of the enclosing method. ...
... use for this has no public methods.) if val is null or undefined, this pushes an empty iterator. the iter object pushed by this instruction must not be used or removed from the stack except by jsop::moreiter and jsop::enditer, or by error handling. the script's jsscript::trynotes() must mark the body of the for-in loop, i.e. exactly those instructions that begin executing with iter on the stack, starting with the next instruction (always jsop::loophead). code must not jump into or out of this region: control can enter only by executing jsop::iter and can exit only by executing a jsop::enditer or by exception unwinding. (a jsop::enditer is always emitted at the end of the loop, and extra copies are emitted on "exit slides", where a break, continue, or return statement exits the loop.) typically...
...And 11 more matches

nsDependentCString
place replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members. methods constructors nsdependentcstring(const char*, const char*) - source parameters char* start a pointer to the start of the string. must not be null. char* end a pointer to the string's null terminator. must not be null. nsdependentcstring(const char*, pruint32) - source parameters char* data a pointer to the string. must not be null. pruint32 length the length of the string. nsdependentcstring(const char*) - source constructs an nsdependentstring when you don't know the length in advan...
...st char*) - source constructs an nsdependentstring when you don't know the length in advance. instead ns_strlen is used to measure the length. parameters char* data a pointer to the string. must not be null. nsdependentcstring(const nscstring_internal&, pruint32) constructs an nsdependentstring from an existing flat string. parameters nscstring_internal& str the existing flat string. pruint32 startpos the position within the existing string at which the dependent string should start. this is similar to using substring(str, startpos), except that the resulting string is flat. void nsdependentcstring() - source constructs an nsdependentstring to be rebound later. nsdependentcstring(const nsacstring_internal&) - source obsolete in gecko 9. this constructor should not be used. parameters nsac...
...ot be used. parameters nsacstring_internal& str assertvalid void assertvalid() - source verify restrictions rebind void rebind(const char*) - source allow this class to be bound to a different string... ...
...And 11 more matches

Background Tasks API - Web APIs
with a simple shim that uses settimeout() as a fallback option. this isn't a polyfill, since it's not functionally identical; settimeout() doesn't let you make use of idle periods, but instead runs your code when possible, leaving us to do the best we can to avoid causing the user to experience performance lag. window.requestidlecallback = window.requestidlecallback || function(handler) { let starttime = date.now(); return settimeout(function() { handler({ didtimeout: false, timeremaining: function() { return math.max(0, 50.0 - (date.now() - starttime)); } }); }, 1); } if window.requestidlecallback is undefined, we create it here. the function begins by recording the time at which our implementation was called. we'll be using that to compute the valu...
...), which is used to display textual output. <p> demonstration of using <a href="/docs/web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method. ...
...o display textual output. <p> demonstration of using <a href="/docs/web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method. ...
...And 11 more matches

Drawing shapes with canvas - Web APIs
ow that we have set up our canvas environment, we can get into the details of how to draw on the canvas. by the end of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. working with paths is essential when drawing objects onto the canvas and we will see how that can be done. the grid before we can start drawing, we need to talk about the canvas grid or coordinate space. our html skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. to the right, you see this canvas with the default grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are ...
...into the path. once the path has been created, you can stroke or fill the path to render it. here are the functions used to perform these steps: beginpath() creates a new path. once created, future drawing commands are directed into the path and used to build the path up. path methods methods to set different paths for objects. closepath() adds a straight line to the path, going to the start of the current sub-path. stroke() draws the shape by stroking its outline. fill() draws a solid shape by filling the path's content area. the first step to create a path is to call the beginpath(). internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. every time this method is called, the list is reset and we can start drawing new shapes. note:...
...gether form a shape. every time this method is called, the list is reset and we can start drawing new shapes. note: when the current path is empty, such as immediately after calling beginpath(), or on a newly created canvas, the first path construction command is always treated as a moveto(), regardless of what it actually is. for that reason, you will almost always want to specifically set your starting position after resetting a path. the second step is calling the methods that actually specify the paths to be drawn. we'll see these shortly. the third, and an optional step, is to call closepath(). this method tries to close the shape by drawing a straight line from the current point to the start. if the shape has already been closed or there's only one point in the list, this function does...
...And 11 more matches

Document - Web APIs
nceled. globaleventhandlers.onanimationend an eventhandler called when an animationend event is sent, indicating that a css animation has stopped playing. globaleventhandlers.onanimationiteration an eventhandler called when an animationiteration event has been sent, indicating that a css animation has begun playing a new iteration of the animation sequence. globaleventhandlers.onanimationstart an eventhandler called when an animationstart event is sent, indicating that a css animation has started playing. globaleventhandlers.onauxclick an eventhandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button). globaleventhandlers.onblur is an eventhandler representing the code to be called when t...
...sed. globaleventhandlers.ondragexit is an eventhandler representing the code to be called when the dragexit event is raised. globaleventhandlers.ondragleave is an eventhandler representing the code to be called when the dragleave event is raised. globaleventhandlers.ondragover is an eventhandler representing the code to be called when the dragover event is raised. globaleventhandlers.ondragstart is an eventhandler representing the code to be called when the dragstart event is raised. globaleventhandlers.ondrop is an eventhandler representing the code to be called when the drop event is raised. globaleventhandlers.ondurationchange is an eventhandler representing the code to be called when the durationchange event is raised. globaleventhandlers.onemptied is an eventhandler represent...
...ng the code to be called when the loadeddata event is raised. globaleventhandlers.onloadedmetadata is an eventhandler representing the code to be called when the loadedmetadata event is raised. globaleventhandlers.onloadend is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) globaleventhandlers.onloadstart is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised. globaleventhandlers.onmousedown is an eventhandler representing the code to be called when the mousedown...
...And 11 more matches

Touch events - Web APIs
to provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads. the touch events interfaces are relatively low-level apis that can be used to support application-specific multi-touch interactions such as a two-finger gesture. a multi-touch interaction starts when a finger (or stylus) first touches the contact surface. other fingers may subsequently touch the surface and optionally move across the touch surface. the interaction ends when the fingers are removed from the surface. during this interaction, an application receives touch events during the start, move, and end phases. touch events are similar to mouse events except they support simultaneous touches and at different locations on the to...
...rm "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method. create a canvas <canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> your browser does not support canvas element. ...
... but it could, of course, also be a stylus or other contact method. create a canvas <canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> your browser does not support canvas element. </canvas> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below will be called. ...
...And 11 more matches

Taking still photos with WebRTC - Web APIs
...
...vas> <div class="output"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the relevant html. the rest is just some page layout fluff and a bit of text offering a link back to this page. the javascript code now let's take a look at the javascript code. we'll break it up into a few bite-sized pieces to make it easier to explain. ...
... height the output height of the image will be computed given the width and the aspect ratio of the stream. streaming indicates whether or not there is currently an active stream of video running. ...
...And 11 more matches

Controlling multiple parameters with ConstantSourceNode - Web APIs
> element of type range to control the volume of two of the three oscillators. ...
... display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now let's take a look at the javascript code, a piece at a time. setting up let's start by looking at the global variable initialization. let context = null; let playbutton = null; let volumecontrol = null; let oscnode1 = null; let oscnode2 = null; let oscnode3 = null; let constantnode = null; let gainnode1 = null; let gainnode2 = null; let gainnode3 = null; let playing = false; these variables are: context the audiocontext in which all the audio nodes live. playbutton and...
...then we get references to the control widgets, setting playbutton to reference the play button and volumecontrol to reference the s...
...And 11 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
y implemented all of the specification; however, the css grid layout method has been widely adopted. this guide presents demonstrations of how box alignment in grid layout works. you will see many similarities in how these properties and values work in flexbox. due to grid being two-dimensional and flexbox one-dimensional there are some small differences that you should watch out for. so we will start by looking at the two axes that we deal with when aligning things in a grid. the two axes of a grid layout when working with grid layout you have two axes available to align things against – the block axis and the inline axis. the block axis is the axis upon which blocks are laid out in block layout. if you have two paragraphs on your page they display one below the other, so it is this direc...
... block axis the align-self and align-items properties control alignment on the block axis. when we use these properties, we are changing the alignment of the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
...r: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> keep in mind that once you set align-items: start, the height of each child <div> will be determined by the contents...
...And 11 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
n due to the browsers that visit your site. a flexible 12-column layout if you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. we can create this type of system using css grid layout. ...
... that visit your site. a flexible 12-column layout if you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. we can create this type of system using css grid layout. as a simple example, i am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. ...
... been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. we can create this type of system using css grid layout. as a simple example, i am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. this means that we will have twelve grid lines named col-start. ...
...And 11 more matches

align-self - CSS: Cascading Style Sheets
-examples and send us a pull request. the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
...equest. the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
...ls. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
...And 11 more matches

place-items - CSS: Cascading Style Sheets
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. ...
...ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...e https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 11 more matches

Drag and Drop JavaScript Wrapper - Archive of obsolete content
he object contains a series of functions, one for each event handler (except for dragenter where it has nothing special to do). each of the functions takes two parameters, the first is the event object and the second is an observer object that you create. more on that in a moment. the following is an example of calling the nsdraganddrop object. <button label="drag me" ondraggesture="nsdraganddrop.startdrag(event,buttonobserver);" /> the function startdrag will be called when a drag starts on the button. the first parameter is the event object, available in all event handlers. the second parameter to this function is the observer, which we'll create soon. in this case we only do anything special when the button drag is started. if we wanted to handle the other cases also, we can call the other ...
...he event object, available in all event handlers. the second parameter to this function is the observer, which we'll create soon. in this case we only do anything special when the button drag is started. if we wanted to handle the other cases also, we can call the other functions, as in the following example: <description value="click and drag this text." ondraggesture="nsdraganddrop.startdrag(event,textobserver)" ondragover="nsdraganddrop.dragover(event,textobserver)" ondragexit="nsdraganddrop.dragexit(event,textobserver)" ondragdrop="nsdraganddrop.drop(event,textobserver)" /> as mentioned earlier, there is nothing special that happens during a dragenter event, so you can just write that yourself. the functions are implemented by the nsdraga...
... this observer is stored in the buttonobserver and textobserver variables. the observer is declared in a script which you would include in the xul file using the script tag. the observer is an object which may have a number of properties, each set to a function which handles a particular aspect of drag and drop. five functions may be defined. you only have to define the ones that you need. ondragstart(event, transferdata, action) define this function to have something happen when a drag starts. it takes three arguments, the event object as was originally passed to the event handler, the data to drag and the type of drag action. this function should add the data to drag to the transferdata object. ondragover(event, flavor, session) this function should be defined when you want something to ha...
...And 10 more matches

Monitoring downloads - Archive of obsolete content
introduces new api that allows any number of listeners to observe downloads. this article demonstrates how to monitor downloads in firefox 3, using the download manager. as a nice bonus, it also demonstrates how to use the storage api to issue sqlite commands on a database. the result is a window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension. in the list is the name of the file, the start and end times of the download, the download speed, and the status of the download. a tooltip is included that displays the full source url of the file. download the full sample. setting up when the extension loads, it will do some housekeeping chores. in particular, it needs to get an instance of the download m...
...the database file is opened, and an sqlite create table ...
...the database file is opened, and an sqlite create table command is executed to create the table. finally, the database is closed. ...
...And 10 more matches

Actions - Archive of obsolete content
f a <xul:rule> element. the content to generate goes directly inside the action element. this content will be copied for each matching result (though see below for an exception) and inserted into the document. let's look at a simple example first. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally. i...
... each result. there are three results, so three buttons will be created. here is the [example], and an image of what it looks like: the template builder iterates through the three results, processing the body of the action for each one in turn. the uri attribute on the button is used to specify the ending or member variable. ...
... there are three results, so three buttons will be created. here is the [example], and an image of what it looks like: the template builder iterates through the three results, processing the body of the action for each one in turn. the uri attribute on the button is used to specify the ending or member variable. ...
...And 10 more matches

HTML text fundamentals - Learn web development
verview: introduction to html next one of html's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly. this article explains the way html can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more. prerequisites: basic html familiarity, as covered in getting started with html. objective: learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations. the basics: headings and paragraphs most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc. structured content makes the read...
...lts. 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 levels (i.e., a deep heading hierarchy) become unwieldy and difficult to navigate. on such occasions, it is advisable to spread the content over multiple pages if possible. why do we need structure? to answer this question, let's take a look at text-start.html—the starting point of our running example for this article (a nice hummus recipe). you should save a copy of this file on your local machine, as you'll need it for the exercises later on. this document's body currently contains multiple pieces of content—they aren't marked up in any way, but they are separated with linebreaks (enter/return pressed to go onto the next line). however, whe...
...istener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the use...
...And 10 more matches

Handling common JavaScript problems - Learn web development
in a later article.) see eslint integrations for eslint options; jshint is supported out of the box by grunt, and also has other integrations available, e.g. jshint loader for webpack. note: eslint takes a bit more setup and configuration than jshint, but it is more powerful too. browser developer tools browser developer tools have many useful features for helping to debug javascript. for a start, the javascript console will report errors in your code. make a local copy of our broken-ajax.html example (see the source code also). if you look at the console, you'll see the error message "uncaught typeerror: can't access property "length", heroes is undefined", and the referenced line number is 49. if we look at the source code, the relevant code section is this: function showheroes(jsono...
...hub.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails. the console api you may already know what is wrong with this code, but let's explore it some more to show how you could investigate this. for a start, there is a console api that allows javascript code to interact with the browser's javascript console. it has a number of features available, but the main one you'll use often is console.log(), which prints a custom message to the console. try inserting the following line just below line 31 (bolded above): console.log('response value: ' + superheroes); refresh the page in the browser, and you ...
...to return json format, or convert the returned text to json after the response arrives. if you get stuck, consult our fixed-ajax.html example. note: the debugger tab has many other useful features that we've not discussed here, for example conditional breakpoints and watch expressions. for a lot more information, see the debugger page. performance issues as your apps get more complex and you start to use more javascript, you may start to run into performance problems, especially when viewing apps on slower devices. performance is a big topic, and we don't have time to cover it in detail here. some quick tips are as follows: to avoid loading more javascript than you need, bundle your scripts into a single file using a solution like browserify. in general, reducing the number of http requ...
...And 10 more matches

Gecko info for Windows accessibility vendors
pported 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, in order to load the current document into a buffer in their own process. the content window always has the class mozillacontentwindowclass. in total, gecko supports the following window classes: mozillauiwindowclass - root ui window, at the root of the window hierarchy mozillacontentwindowclass -- root document window mozillacontentframewindowclass - root...
...going forward, this may be the only way to efficiently find the content area, as mozilla will begin to become a windowless application, with an exception for plugins which create their own window. when you see the content window receive focus, first check the role. if it is role_pane or role_document then ...
...tatechange is used in check boxes, radio buttons, text fields, combo boxes and list boxes. it's also used in the root pane object to show when the state_busy flag changes from loading new content. event_scrollingend is used to indicate when a document has scrolled, even if only 1 line. gecko fires this event when the scrolling is finished, rather than fire excessive events. event_scrollingstart is fired when the user has jumped to a named anchor within the page. the event is fired on the first accessible object in the part of the document that has been jumped to. event_menupopupstart and event_menupopupend are fired when xul menus are opened or closed. event_menustart and event_menuend are fired when the xul menubar is activated or deactivated. event_valuechange is fired for...
...And 10 more matches

Debugging Table Reflow
l> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell 4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths en max=4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=2 isanonymous=0 constraint=0 widths=...
...ache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=2 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=3 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** ***end table dump*** the en stands for entrance (ex for leaving a routine). the first line of the data dump shows that no width has yet been assigned to the columns mcolwidths=-1 -1 -1 -1, -1 stands for: #define width_not_set -1 this is followed by a reference to the column frame pointer...
... percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others in the last log snippet none of these width's has been set. ...
...And 10 more matches

Hacking Tips
, by using the source command with the js-gdb.py file. setting a breakpoint in the generated code (from gdb, x86 / x86-64, arm) to set a breakpoint the generated code of a specific jsscript compiled with ionmonkey. set a breakpoint on the instruction you are interested in. ...
...breakpoint on the js::ion::codegenerator::visitstart function. optionally, a condition on the ins->id() of the lir instruction can be added to select precisely the instruction you are looking for. once the breakpoint is on codegenerator function of the lir instruction, add a command to generate a static breakpoint in the generated code. $ gdb --args js […] (gdb) b js::ion::codegenerator::visitstart (gdb) command >call masm.breakpoint() >continue >end (gdb) r js> function f(a, b) { return a + b; } js> for (var i = 0; i < 100000; i++) f(i, i + 1); breakpoint 1, js::ion::codegenerator::visitstart (this=0x101ed20, lir=0x10234e0) at /home/nicolas/mozilla/ionmonkey/js/src/ion/codegenerator.cpp:609 609 } program received signal sigtrap, trace/breakpoint trap. 0x00007ffff7fb165a in ?? ()...
... the number of instructions you would like to see) here is an example. it might be simpler to use the codegenerator::link lineno instead of the full qualified name to put the breakpoint. let's say that the line number of this function is 4780, for instance: (gdb) b codegenerator.cpp:4780 breakpoint 1 at 0x84cade0: file /home/code/mozilla-central/js/src/ion/codegenerator.cpp, line 4780. (gdb) r starting program: /home/code/mozilla-central/js/src/32-release/js -f /home/code/jaeger.js [thread debugging using libthread_db enabled] using host libthread_db library "/lib/x86_64-linux-gnu/libthread_db.so.1". [new thread 0xf7903b40 (lwp 12563)] [new thread 0xf6bdeb40 (lwp 12564)] run#0 breakpoint 1, js::ion::codegenerator::link (this=0x86badf8) at /home/code/mozilla-central/js/src/ion/codegenera...
...And 10 more matches

Component Internals
from the perspective of a client of xpcom components, this chapter discusses components from the perspective of the software developer. read on to see how components are generally implemented in xpcom, or you can skip to the 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 bounda...
...wn in onion peel view of xpcom component creation in the next chapter. the component is an abstraction sitting between the actual module in which it is implemented and the objects that its factory code creates for use by clients. xpcom initialization to understand why and when your component library gets called, it is important to understand the xpcom initalization process. when an application starts up, that application may initialize xpcom. the sequence of events that kicks off this xpcom initialization may be triggered by user action or by 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 initializa...
...e sequence of events that kicks off this xpcom initialization may be triggered by user action or by 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. parameters passed to this startup call allow you to configure some aspects of xpcom, including the customization of location of specific directories. the main purpose of the api at this point is to change which components directory xpcom searches when it looks for xpcom components. this is how the api is used, for example, in the gecko runtime ...
...And 10 more matches

nsDependentString
appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members. ...
...() - source assertvalid void assertvalid() - source verify restrictions rebind void rebind(const prunichar*) - source allow this class to be bound to a different string... ...
...parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...And 10 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
tems on the cross axis. if your flex container has a height set, then the items will stretch to that height, regardless of how much content is in the item. the reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch. we can use other values to control how the items align: align-items: flex-start align-items: flex-end align-items: center align-items: stretch align-items: baseline in the live example below, the value of align-items is stretch. try the other values and see how all of the items align against each other in the flex container. aligning one item with align-self the align-items property sets the align-self property on all of the flex items as a group. this means you c...
...s property sets the align-self property on all of the flex items as a group. this means you can explicitly declare the align-self property to target a single item. the align-self property accepts all of the same values as align-items plus a value of auto, which will reset the value to that which is defined on the flex container. in this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. i have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center. you can change the value of align-items or change the values of align-self on the individual items to see how this works. changing the...
...ws. in the specification this is described as packing flex lines. for align-content to work you need more height in your flex container than is required to display the items. it then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it. the align-content property takes the following values: align-content: flex-start align-content: flex-end align-content: center align-content: space-between align-content: space-around align-content: stretch align-content: space-evenly (not defined in the flexbox specification) in the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. the value of align-content is space-between, which means that the availa...
...And 10 more matches

align-items - CSS: Cascading Style Sheets
d 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. ...
...ou'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ttps://github.com/mdn/interactive-examples and send us a pull request. ...
...And 10 more matches

justify-self - CSS: Cascading Style Sheets
ayout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns an item inside its grid area on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* positional alignment */ justify-self: center; /* pack item around the center */ justify-self: start; /* pack item from the start */ justify-self: end; /* pack item from the end */ justify-self: flex-start; /* equivalent to 'start'. note that justify-self is ignored in flexbox layouts. */ justify-self: flex-end; /* equivalent to 'end'. note that justify-self is ignored in flexbox layouts. */ justify-self: self-start; justify-self: self-end; justify-self: left; /* pack item fr...
... */ justify-self: safe center; justify-self: unsafe center; /* global values */ justify-self: inherit; justify-self: initial; justify-self: unset; this property can take one of three different forms: basic keywords: one of the keyword values normal, auto, or stretch. baseline alignment: the baseline keyword, plus optionally one of first or last. positional alignment: one of: center, start, end, flex-start, flex-end, self-start, self-end, left, or right. plus optionally safe or unsafe. values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this keyword is dependent of the layout mode we are in: in block-level ...
...rt, self-end, left, or right. plus optionally safe or unsafe. values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this keyword is dependent of the layout mode we are in: in block-level layouts, the keyword is a synonym of start. in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one o...
...And 10 more matches

Bootstrapped extensions - Archive of obsolete content
traditional extensions include overlays, wherein the application can load up xul from the extension's package and automatically apply it on top its own ui. while this makes creating extensions that add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart. gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduces bootstrapped extensions. these are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. this is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down. all...
...e browser calls to command the extension to install, uninstall, start up, and shut down. all the application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires. this article discusses how bootstrapped extensions work. see this tutorial on converting from an overlay extension to restartless for a practical step by step guide to migrating. the startup and shutdown process a key feature of bootstrapped extensions is that they must be able to start up and shut down on demand by the application. when the extension's startup() function is called, it must manually inject its user interface and other behavior into the application. similarly, when its shutdown() function is called, it...
...able to start up and shut down on demand by the application. when the extension's startup() function is called, it must manually inject its user interface and other behavior into the application. similarly, when its shutdown() function is called, it must remove anything that it has added to the application, as well as all references to any of its objects. there are several scenarios in which the startup() function may be called; for example: when the extension is first installed, assuming that it's both compatible with the application and is enabled. when the extension becomes enabled using the add-ons manager window. when the application is started up, if the extension is enabled and compatible with the application. some examples of when the shutdown() function may be called: when t...
...And 9 more matches

Venkman Introduction - Archive of obsolete content
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, it is alone in offering this degree of flexibility, depth, and power in a visual debugging environment. starting the debugger the javascript debugger is automatically pre-installed in mozilla 1.x but must be installed separately in firefox and other gecko-based products, such as thunderbird and netscape 7.x. fortunately, the xpinstall technology makes it possible to install new application modules in firefox by just clicking a hyperlink. if you don't already have venkman or would like to upgrade, you c...
...in firefox by just clicking a hyperlink. if you don't already have venkman or would like to upgrade, you can easily get the latest version from firefox add-ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and ver...
... computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and versions, see the venkman development page. there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from the tools menu (tools->web development menu in mozilla 1.x and netscape). ...
...And 9 more matches

RDF Query Syntax - Archive of obsolete content
« previousnext » let's look at a simple query with two statements. each statement is placed as a direct child of the <query> element within the template. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <rule> ... </rule> </template> </vbox> this query has two statements, each specified with a different tag. the template won't generate anything yet since we still need to fill in the content to be generated which goes in the missing part inside the rule. however, the template builder will be able to compil...
...ry> <rule> ... </rule> </template> </vbox> this query has two statements, each specified with a different tag. the template won't generate anything yet since we still need to fill in the content to be generated which goes in the missing part inside the rule. however, the template builder will be able to compile the rules and examine them as described earlier. the builder needs to start with a single result as the seed result. this is done with the content tag. it indicates that we are going to use a starting point when navigating the graph. obviously, since you need to start somewhere, you will have to use a content tag and it should be the first statement. also, because we can only have one starting point, only one content tag can be used. the seed result will be created like ...
...single result as the seed result. this is done with the content tag. it indicates that we are going to use a starting point when navigating the graph. obviously, since you need to start somewhere, you will have to use a content tag and it should be the first statement. also, because we can only have one starting point, only one content tag can be used. the seed result will be created like this: (?start = http://www.xulplanet.com/rdf/a) the variable ?start is determined from the tag's 'uri' attribute. you can use any variable you want; it's common to use the variable ?uri. however, all rules must use the same starting point variable. so if a second rule were used, it would also need to use the ?start variable. the value of ?start is set to 'http://www.xulplanet.com/rdf/a'. you'll notice that th...
...And 9 more matches

Object building practice - Learn web development
in this article we dive into a practical exercise, giving you some more practice in building custom javascript objects, with a fun and colorful result. 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). ...
...le display — you don't need to have any previous knowledge of these apis, and we hope that by the time you've 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 marg...
......
...And 9 more matches

Setting up your own test automation environment - Learn web development
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 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. ...
...ystems: open your .bash_profile (or .bashrc) file (if you can't see hidden files, you'll need to display them, see show/hide hidden files in mac os x or show hidden folders in ubuntu). paste the following into the bottom of your file (updating the path as it actually is on your machine): #add webdriver browser drivers to path export path=$path:/users/bob save and close this file, then restart your terminal/command prompt to reapply your bash configuration. check that your new paths are in the path variable by entering the following into your terminal: echo $path you should see it printed out in the terminal. to set your path variable on windows, follow the instructions at how can i add a new folder to my system path? ok, let's try a quick test to make sure everything is worki...
...e detail. webdriver syntax crash course let's have a look at a few key features of the webdriver syntax. for more complete details, you should consult the selenium-webdriver javascript api reference for a detailed reference, and the selenium main documentation's selenium webdriver and webdriver: advanced usage pages, which contain multiple examples to learn from written in different languages. starting a new test to start up a new test, you need to include the selenium-webdriver module like this: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; next, you need to create a new instance of a driver, using the new webdriver.builder() constructor. this needs to have the forbrowser() method chained onto it to specify what browser you want to t...
...And 9 more matches

HTTP logging
), it can be useful to log http traffic. this saves a log of http-related information from your browser run into a file that you can examine (or upload to bugzilla if a developer has asked you for a log). note: the web console also offers the ability to peek at http transactions within firefox. http logging generally provides more detailed logging. using about:networking this is available starting with firefox 52. this is the best and easiest way to do http logging. at any point during while your browser is running, you can turn logging on and off. this allows you to capture only the "interesting" part of the browser's behavior (i.e. your bug), which makes the http log much smaller and easier to analyze. launch the browser and get it into whatever state you need to be in just bef...
...urs. open a new tab and type in "about:networking" into the url bar. go to the "logging section" adjust the location of the log file if you don't like the default adjust the list of modules that you want to log: this list has the exact same format as the moz_log environment variable (see below). generally the default list is ok, unless a mozilla developer has told you to modify it. click on start logging. reproduce the bug (i.e. go to the web site that is broken for you and make the bug happen in the browser) make a note of the value of "current log file". click on stop logging. go to the folder containing the specified log file, and gather all the log files. you will see several files that look like: log.txt-main.1806, log.txt-child.1954, log.txt-child.1970, etc. this is because fir...
...a bug (this is assuming you're logging to help a mozilla developer). other bugs may require all the logs to be uploaded--ask the developer if you're not sure. pat yourself on the back--a job well done! thanks for helping us debug firefox. logging http activity by manually setting environment variables sometimes the about:networking approach won't work, for instance if your bug occurs during startup, or you're running on mobile, etc. in that case you can set environment variables *before* you launch firefox. note that this approach winds up logging the whole browser history, so files can get rather large (they compress well :) setting environment variables differs by operating system. don't let the scary-looking command line stuff frighten you off; it's not hard at all! windows if f...
...And 9 more matches

IAccessibleEditableText
t changed in gecko 1.9 (firefox 3) this interface is typically used in conjunction with the iaccessibletext interface and complements that interface with the additional capability of clipboard operations. note that even a read only text object can support the copy capability so this interface is not limited to editable objects. the substrings used with this interface are specified as follows: if startoffset is less than endoffset, the substring starts with the character at startoffset and ends with the character just before endoffset. if endoffset is lower than startoffset, the result is the same as a call with the two arguments exchanged. the whole text can be defined by passing the indices zero and iaccessibletext.ncharacters(). if both indices have the same value, an empty string is defined...
...fined by passing the indices zero and iaccessibletext.ncharacters(). if both indices have the same value, an empty string is defined. refer to the @ref _specialoffsets "special offsets for use in the iaccessibletext and iaccessibleeditabletext methods" for information about a special offset constant that can be used in iaccessibleeditabletext methods. ...
...s(). if both indices have the same value, an empty string is defined. refer to the @ref _specialoffsets "special offsets for use in the iaccessibletext and iaccessibleeditabletext methods" for information about a special offset constant that can be used in iaccessibleeditabletext methods. ...
...And 9 more matches

nsIAccessibleEditableText
ons it supports includes setting text attributes and text contents while also replacing old text of an object with new text. it also includes and support basic operations such as, inserting text, copying text, cutting text, pasting text and deleting text at the specified position. ...
... contents while also replacing old text of an object with new text. it also includes and support basic operations such as, inserting text, copying text, cutting text, pasting text and deleting text at the specified position. ...
...w text. it also includes and support basic operations such as, inserting text, copying text, cutting text, pasting text and deleting text at the specified position. ...
...And 9 more matches

AbstractRange - Web APIs
as an abstract interface, you will not directly instantiate an object of type abstractrange. instead, you will use the range or staticrange interfaces. to understand the difference between those two interfaces, and how to choose which is appropriate for your needs. ...
..." stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed. a collapsed range is one whose start position and end position are the same, resulting in a zero-character-long range. endcontainer read only the dom node in which the end of the range, as specified by the endoffset property, is located. endoffset read only an integer value indicating the offset, in characters, from the beginning of the node's contents to the beginning of the range represented by the range object. this value m...
... zero-character-long range. endcontainer read only the dom node in which the end of the range, as specified by the endoffset property, is located. endoffset read only an integer value indicating the offset, in characters, from the beginning of the node's contents to the beginning of the range represented by the range object. this value must be less than the length of the endcontainer node. ...
...And 9 more matches

Resource Timing API - Web APIs
lyzing detailed network timing data regarding the loading of an application's resource(s). an application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script. the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, dns lookup start and end times, request start, response start and end times, etc. the interface also includes other properties that provide data about the size of the fetched resource as well as the type of resource that initiated the fetch. this document provides an overview of the resource timing interfaces. for more details about the interfaces including examples see each inter...
...seconds). however, if the browser is unable to provide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond. resource loading timestamps an application can get timestamps for the various stages used to load a resource. ...
...mple, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond. resource loading timestamps an application can get timestamps for the various stages used to load a resource. the first property in the processing model is starttime which returns the timestamp immediately before the resource loading process begins. the fetchstart timestamps follows and redirect processing (if applicable) and preceeds dns lookup. ...
...And 9 more matches

Using Touch Events - Web APIs
ication input. a disadvantage to using mouse events is that they do not support concurrent user input, whereas touch events support multiple simultaneous inputs (possibly at different locations on the touch surface), thus enhancing user experiences. the touch events interfaces support application specific single and multi-touch interactions such as a two-finger gesture. a multi-touch interaction starts when a finger (or stylus) first touches the contact surface. other fingers may subsequently touch the surface and optionally move across the touch surface. the interaction ends when the fingers are removed from the surface. during this interaction, an application receives touch events during the start, move, and end phases. the application may apply its own semantics to the touch inputs. interf...
... touchmove - fired when a touch point is moved along the touch surface. touchend - fired when a touch point is removed from the touch surface. ...
...a list of contact points with a touch surface, one touch point per contact. thus, if the user activated the touch surface with one finger, the list would contain one item, and if the user touched the surface with three fingers, the list length would be three. the touchevent interface represents an event sent when the state of contacts with a touch-sensitive surface changes. the state changes are starting contact with a touch surface, moving a touch point while maintaining contact with the surface, releasing a touch point and canceling a touch event. this interface's attributes include the state of several modifier keys (for example the shift key) and the following touch lists: touches - a list of all of the touch points currently on the screen. targettouches - a list of the touch points on...
...And 9 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
dd margins, padding, and borders using these physical properties of margin-left, padding-left, and so on. we call these keywords and properties physical because they relate to the screen you are looking at. left is always left, no matter what direction your text is running. this can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. browsers are pretty good at dealing with text direction, and you don’t even need to be working in a rtl language to take a look. in the example below, i have two paragraphs. one has no text-align property set, the second has text-align set to left. i have added dir="rtl" to the html element, which switches the writing mode from the default for an english l...
...ple example of the problem with physical values and properties being used in css. they prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom. logical properties and values logical properties and values do not make an assumption about text direction. which is why in grid layout we use the keyword start when aligning something to the start of the container. for me, working in english, start may well be on the left, however it doesn’t have to be, and the word start infers no physical location. block and inline once we begin dealing with logical, rather than physical properties, we stop seeing the world as left to right, and top to bottom. we need a new reference point, and this is where under...
... css writing modes i’m going to introduce another specification here, that i will be using in my examples: the css writing modes specification. ...
...And 9 more matches

Performance fundamentals - Web Performance
ts. transitions and animations are particularly important to applications: developers can use css to declare complicated behaviour with a simple, high-level syntax. in turn, gecko's graphics pipeline is highly optimized to render common animations efficiently. common-case animations are "offloaded" to the system compositor, which can render them in a performant, power-efficient fashion. an app's startup performance matters just as much as its runtime performance. gecko is optimized to load a wide variety of content efficiently: the entire web! many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox. application performance...
...ide variety of content efficiently: the entire web! many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox. ...
...y: the entire web! many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox. ...
...And 9 more matches

Setting up an extension development environment - Archive of obsolete content
hese details apply to firefox, thunderbird, and seamonkey (version 2.0 and above). overview you'll create a new user profile to run your development specific firefox session. this will utilize distinctive development preferences in about:config. install firefox development extensions specifically for this new developer user profile. edit files in the extensions folder of this profile, and restart the application as this new developer profile. development profile the use of a separate user profile for development can be advantageous, averting performance degradation from development related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment. you could be running two instances of firefox simultaneously. note: for an...
...running two instances of firefox simultaneously. note: for an extended guide on how to set up even more user profiles, take a look at multiple firefox profiles. this particularly comes in handy for the use of all currently available firefox versions. it even allows the running of simultaneous versions, at the same time. to quickly achieve our task of creating just a developer profile, we will start the application with the parameters: /path/to/firefox -no-remote -p profilename without these parameters, the default behavior of your mozilla applications is to only open the everyday user profile: named default. as we are specifically defining the user profile dev, if you don't have the dev profile already created, the profile selection window opens, where you can create it. in the following...
...ters: /path/to/firefox -no-remote -p profilename without these parameters, the default behavior of your mozilla applications is to only open the everyday user profile: named default. as we are specifically defining the user profile dev, if you don't have the dev profile already created, the profile selection window opens, where you can create it. in the following example, the described command starts a new instance of firefox, with a profile called dev; even if an instance of firefox is already running. on ubuntu (and many other linux distributions): /usr/bin/firefox -no-remote -p dev on other distributions of linux/unix: /usr/local/bin/firefox -no-remote -p dev on macos mavericks (10.9) and newer: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p dev & on windows: ...
...And 8 more matches

Simple Example - Archive of obsolete content
urls although this isn't necessary. each image also has one property, the image's title. a template which displays this information is very simple to create. unlike previous examples where we iterated over a property to navigate the graph, here we want to iterate over the children of an rdf container. the container, an rdf seq, has the uri 'http://www.xulplanet.com/rdf/myphotos'. ...
...://www.xulplanet.com/rdf/myphotos'. this will be the starting point of the navigation. we want the endpoints to be the three images. first, we set the datasources and ref attributes as needed: <vbox datasources="template-guide-ex2.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> this time, we need to use a new statement, the member condition as well as a triple. ...
...os'. this will be the starting point of the navigation. we want the endpoints to be the three images. first, we set the datasources and ref attributes as needed: <vbox datasources="template-guide-ex2.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> this time, we need to use a new statement, the member condition as well as a triple. <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> the seed is set in a similar manner as the previous examples, effectively creating a single result with the ?start variable set to the reference resource 'http://www.xulplanet.com/rdf/myphotos'. ...
...And 8 more matches

calICalendarViewController - Archive of obsolete content
the application in which the calicalendarview is included. calendar/base/public/calicalendarviewcontroller.idlscriptable please add a summary to this article. ...
... summary to this article. last changed in gecko ? interface code [scriptable, uuid(1f783898-f4c2-4b2d-972e-360e0de38237)] interface calicalendarviewcontroller : nsisupports { void createnewevent (in calicalendar acalendar, in calidatetime astarttime, in calidatetime aendtime); void modifyoccurrence (in caliitemoccurrence aoccurrence, in calidatetime anewstarttime, in calidatetime anewendtime); void deleteoccurrence (in caliitemoccurrence aoccurrence); }; methods createnewevent void createnewevent (in calicalendar acalendar, in calidatetime astarttime, in calidatetime aendtime); the createnewevent method is used for creating a new calievent in the calicalendar specified by the acalendar parameter. in many cases, ...
...the calievent should have its enddate set to aendtime, if this parameter is specified. otherwise, it should be set to a default value, as determined by the application. ...
...And 8 more matches

Mobile touch controls - Game development
ser is that it offers helper variables and functions for easier and faster development, but it's entirely up to you which approach you to choose. ...
... offers helper variables and functions for easier and faster development, but it's entirely up to you which approach you to choose. ...
... touchmove is fired when they move the finger on the screen while touching it touchend is fired when the user stops touching the screen touchcancel is fired when a touch is cancelled, for example when the user moves their finger outside of the screen. ...
...And 8 more matches

Looping code - Learn web development
l 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 "have i got enough food?", above. let's say he needs 10 portions of food to feed his family. an iterator, which generally increments the counter by a small amount on ea...
...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 the for loop — this has the following syntax: for (initializer; condition; final-expression) { // code to run } here we have: the keyword for, followed by some parentheses. inside the parentheses we have three items, separated by semi-colons: an initializer — this is usually a variable set ...
... + ', '; } para.textcontent = info; </script> </body> </html> note: you can find this example code on github too (also see it running live). this shows a loop is used to iterate over the items in an array and do something with each of them — a very common pattern in javascript. here: the counter variable (sometimes known as an initializer or an iteration variable), i, starts at 0 (let i = 0). the loop has been told to run until i is no longer smaller than the length of the cats array. this is important — the condition is the condition under which the loop will still run. so in this case, while i < cats.length is still true, the loop will still run. inside the loop, we concatenate the current loop item (cats[i] , which is cats[whatever i is at the time]) along wi...
...And 8 more matches

NS_ConvertASCIItoUTF16
parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

NS_ConvertUTF16toUTF8
e parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - source parameters prunichar a...
...And 8 more matches

NS_ConvertUTF8toUTF16
parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

NS_LossyConvertUTF16toASCII
e parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - source parameters prunichar a...
...And 8 more matches

nsAdoptingCString
const - source parameters pruint32 i get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - source parameters prunichar a...
...And 8 more matches

nsAdoptingString
t - source parameters pruint32 i get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

nsAutoString
parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

nsCAutoString
s nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 ...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase...
... prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - sou...
...And 8 more matches

nsCString
e parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - source parameters prunichar a...
...And 8 more matches

nsFixedCString
e parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - source parameters prunichar a...
...And 8 more matches

nsFixedString
parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

nsPromiseFlatCString
e parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - source parameters prunichar a...
...And 8 more matches

nsPromiseFlatString
parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

nsString
parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

nsXPIDLCString
e parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount rfindchar print32 rfindchar(prunichar, print32, print32) const - source parameters prunichar a...
...And 8 more matches

nsXPIDLString
parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string. @param astring is substring to be sought in this @param aignorecase selects case sensitivity @param aoffset tells us where in this string to start searching @param acount tells us how far from the offset we are to search. use -1 to search the whole string. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(co...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset prin...
..., prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching. use -1 to search from the end of the string. @param acount tells us how many iterations to make starting at the given offset. @return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 rfind(const char*, prbool, print32, print32) const - source parameters char* acstring prbool aignorecase print32 aoffset print32 acount print32 rfind(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& ast...
...And 8 more matches

HTML Drag and Drop API - Web APIs
item enters a valid drop target. (see specifying drop targets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection target. dragleave ondragleave …a dragged item leaves a valid drop target. dragover ondragover …a dragged item is being dragged over a valid drop target, every few hundred milliseconds. dragstart ondragstart …the user starts dragging an item. (see starting a drag operation.) drop ondrop …an item is dropped on a valid drop target. (see performing a drop.) note: neither dragstart nor dragend events are fired when dragging a file into the browser from the os. interfaces the html drag and drop interfaces are dragevent, datatransfer, datatransferitem and datat...
...re information, see dragging and dropping multiple items. additionally, see the datatransfer reference page for all of the gecko-specific properties and gecko-specific methods. the basics this section is a summary of the basic steps to add drag-and-drop functionality to an application. ...
... reference page for all of the gecko-specific properties and gecko-specific methods. the basics this section is a summary of the basic steps to add drag-and-drop functionality to an application. ...
...And 8 more matches

Multi-touch interaction - Web APIs
nts, such as mouse events. the application described in this guide shows how to use touch events for simple single and multi-touch interactions, the basics needed to build application-specific gestures. a live version of this application is available on github. the source code is available on github and pull requests and bug reports are welcome. example this example demonstrates using the touchstart, touchmove, touchcancel, and touchend) touch events for the following gestures: single touch, two (simultaneous) touches, more than two simultaneous touches, 1-finger swipe, and 2-finger move/pinch/swipe. define touch targets the application uses <div> elements to represent four touch areas. <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: ...
...nt where they were fired. // log events flag var logevents = false; // touch point cache var tpcache = new array(); register event handlers event handlers are registered for all four touch event types. the touchend and touchcancel event types use the same handler. ...
... they were fired. // log events flag var logevents = false; // touch point cache var tpcache = new array(); register event handlers event handlers are registered for all four touch event types. the touchend and touchcancel event types use the same handler. function set_handlers(name) { // install event handlers for the given element var el=document.getelementbyid(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target3"); set_handlers("target4"); } move/pinch/zoom handler this function provides very basic support for 2-touch horizontal move/pinch/zoom handling. ...
...And 8 more matches

WebGLRenderingContext.makeXRCompatible() - Web APIs
the webglrenderingcontext method makexrcompatible() ensures that the rendering context described by the webglrenderingcontext is ready to render the scene for the immersive webxr device on which it will be displayed. if necessary, the webgl layer may reconfigure the context to be ready to render to a different device than it originally was. this is useful if you have an application which can start out being presented on a standard 2d display but can then be transitioned to a 3d immersion system. syntax let makecompatpromise = webglrenderingcontext.makexrcompatible(); parameters none. return value a promise which successfully resolves once the webgl context is ready to be used for rendering webxr content. exceptions this method doesn't throw traditional exceptions; instead, the promise...
...you the opportunity to discard anything you won't need anymore, while the second gives you the opportunity to load resources and prepare to render the scene in its new context. while this method is available through the webglrenderingcontext interface, it's actually defined by the webxr device api rather than by webgl. ...
...the scene in its new context. while this method is available through the webglrenderingcontext interface, it's actually defined by the webxr device api rather than by webgl. examples this example demonstrates code logic you might find in a game that starts up using webgl to display menus and other ui, and uses webgl to render gameplay, but has a button on its main menu that offers an option to start the game in webxr mode. html the html for the buttons looks lke this: <button class="green button" type="button">start game</button> <button class="blue button use-webxr" type="button">start game (vr mode)</button> the first button starts the game, continuing to present the game onscreen as usual. the second button will be used to start the game in immersive-vr mode. note the inclusion of a ...
...And 8 more matches

Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
fview"); const remotevideo = document.queryselector("video.remoteview"); const signaler = new signalingchannel(); const pc = new rtcpeerconnection(config); this code also gets the <video> elements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer. ...
...ements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer. connecting to a remote peer the start() function shown here can be called by either of the two end-points that want to talk to one another. it doesn't matter who does it first; the negotiation will just work. async function start() { try { const stream = await navigator.mediadevices.getusermedia(constraints); for (const track of stream.gettracks()) { pc.addtrack(track, stream); } selfvideo.srcobject = stream; } catch(err) { console.error(err); } } this isn't appreciably different from older webrtc connection establishment code. the user's camera and microphone are obtained by calling get...
...the audio track being received. the latter is an array of mediastream objects, each representing a stream containing this track (a track may in rare cases belong to multiple streams at once). in our case, this will always contain one stream, at index 0, because we passed one stream into addtrack() earlier. we add an unmute event handler to the track, because the track will become unmuted once it starts receiving packets. we put the remainder of our reception code in there. if we already have video coming in from the remote peer (which we can see if the remote view's <video> element's srcobject property already has a value), we do nothing. otherwise, we set srcobject to the stream at index 0 in the streams array. the perfect negotiation logic now we get into the true perfect negotiation logi...
...And 8 more matches

WindowOrWorkerGlobalScope.setInterval() - Web APIs
ation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors. ...
...); } function sheet (onode) { this.ref = onode; if (!onode.haschildnodes()) { return; } this.parts = array.prototype.slice.call(onode.childnodes); for (var nchild = 0; nchild < this.parts.length; nchild++) { onode.removechild(this.parts[nchild]); this.parts[nchild] = new sheet(this.parts[nchild]); } } var nintervid, ocurrent = null, btyping = false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the f...
...rn; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(typewrite, this.rate); btyping = true; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < asheets.length; scroll(asheets[nidx++], 0, false)); clean(); }; } /* usage: */ var otwexample1 = new typewrit...
...And 8 more matches

Using CSS animations - CSS: Cascading Style Sheets
there are three key advantages to css animations over traditional script-driven animation techniques: they’re easy to use for simple animations; you can create them without even having to know javascript. the animations run well, even under moderate system load. ...
...elay configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-iteration-count configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-direction configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-fill-mode configures what values are applied by the animation before and after it is executing. animation-play-state lets you pause and resume the animation sequence. defining the animation sequence using keyframes once you’ve configured the animation’s timing, you need to define the appearance of the animation. this is done by establishing two or mor...
...at configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. because these two times are so important, they have special aliases: from and to. both are optional. if from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes. you can optionally include additional keyframes that describe intermediate steps between the start and end of the animation. examples note: some older browsers (pre-2017) may need prefixes; the live examples you can click to see in your browser include the -webkit prefixed syntax. making text slide across the browser wind...
...And 8 more matches

Color picker tool - CSS: Cascading Style Sheets
entlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend...
...t.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value; setvalue(obj.topic, value); }; return slider; }; var inputslider = function(node) { var min = parsefloat(node.getattribute('data-min')); var max = parsefloat(node.getattribute('data-max')); var step = parsefloat(node.getattribute('data-step')); var value = parsefloat(node.getattribute('data-value')); var ...
...=== get dom element by id ==========*/ function getelembyid(id) { return document.getelementbyid(id); } function allowdropevent(e) { e.preventdefault(); } /*========== make an element resizable relative to it's parent ==========*/ var uicomponent = (function uicomponent() { function makeresizable(elem, axis) { var valuex = 0; var valuey = 0; var action = 0; var resizestart = function resizestart(e) { e.stoppropagation(); e.preventdefault(); if (e.button !== 0) return; valuex = e.clientx - elem.clientwidth; valuey = e.clienty - elem.clientheight; document.body.setattribute('data-resize', axis); document.addeventlistener('mousemove', mousemove); document.addeventlistener('mouseup', resizeend); }; var mousemove = function ...
...And 8 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
n from the top of the page to the bottom — in the block direction. the cross axis the cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns. if your main axis is column or column-reverse then the cross axis runs along the rows. understanding which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one axis or the other. start and end lines another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. in the past, css was heavily weighted towards horizontal and left-to-right writing modes. modern layout methods encompass the range...
...rties that align and justify content along one axis or the other. start and end lines another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. in the past, css was heavily weighted towards horizontal 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...
...th 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. ...
...And 8 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
side, plus all the shorthand values. mappings for margins, borders, and padding the specification details mappings for each logical value to a physical counterpart. in the table below i have given these mapped values assuming that the writing-mode in use is horizontal-tb — with a left to right direction. the inline direction therefore runs horizontally — left to right — and margin-inline-start would be equivalent to margin-left. if you were using a horizontal-tb writing mode with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top. logical property physical property border-block-end border-bottom border-block-end-color border-bottom-co...
...ine-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top. ...
...t, and in a vertical writing mode it would be the same as using margin-top. ...
...And 8 more matches

grid-area - CSS: Cascading Style Sheets
ontributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. 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. ...
...atic) to its grid placement, thereby specifying the edges of its grid area. 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. ...
...ontribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value. when grid-column-end is omitted, if grid-column-start is a <custom-ident>, grid-column-end is set to that <custom-ident>; otherwise, it is set to auto. when grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is set to that <custom-ident>; otherwise, it is set to auto. when grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four longhands are set to that value. otherwise, it is set to auto. the grid-...
...And 8 more matches

place-self - CSS: Cascading Style Sheets
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. ...
...o contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ase clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 8 more matches

repeat() - CSS: Cascading Style Sheets
the repeat() css function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. this function can be used in the css grid properties grid-template-columns and grid-template-rows. ...
... the repeat() css function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. this function can be used in the css grid properties grid-template-columns and grid-template-rows. ...
... represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. this function can be used in the css grid properties grid-template-columns and grid-template-rows. ...
...And 8 more matches

Autoplay guide for media and Web Audio APIs - Web media technologies
while autoplay of media serves a useful purpose, it should be used carefully and only when needed. in order to give users control over this, browsers often provide various forms of autoplay blocking. in this guide, we'll cover autoplay functionality in the various media and web audio apis, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully. autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted. ...
...are considered to be audible, and autoplay blocking applies to them. inaudible media are not 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. 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 ...
...because of that, browsers generally only allow autoplay to occur successfully under specific circumstances. autoplay availability as a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true: the audio is muted or its volume is set to 0 the user has interacte...
...And 8 more matches

Paths - SVG: Scalable Vector Graphics
needs. line commands there are five line commands for <path> nodes. the first command is the "move to" or m, which was described above. it takes two parameters, a coordinate (x) and coordinate (y) to move to. if the cursor was already somewhere on the page, no line is drawn to connect the two positions. the "move to" command appears at the beginning of paths to specify where the drawing should start. for example: m x y (or) m dx dy in the following example there's only a point at (10,10). note, though, that it wouldn't show up if a path was just drawn normally. for example: <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> </svg> there are three commands that draw lines. the most gen...
...l. l takes two parameters—x and y coordinates—and draws a line from the current position to a new position. l x y (or) l dx dy there are two abbreviated forms for drawing horizontal and vertical lines. h draws a horizontal line, and v draws a vertical line. both commands only take one parameter since they only move in one direction. h x (or) h dx v y (or) v dy an easy place to start is by drawing a shape. we will start with a rectangle (the same type that could be more easily made with a <rect> element). it's composed of horizontal and vertical lines only. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/...
...g the cursor to an exact coordinate, they move it relative to its last position. for instance, since our box is 80×80, the <path> element could have been written as: <path d="m 10 10 h 80 v 80 h -80 z" fill="transparent" stroke="black"/> the path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start. in these examples, it would probably be simpler to use the <polygon> or <polyline> elements. however, paths are used so often in drawing svg that developers may be more comfortable using them instead. there is no real performance penalty or bonus for using one or the other. curve commands there are three different commands that can be used to create smooth curves. two of those curves are béz...
...And 8 more matches

Miscellaneous - Archive of obsolete content
r firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application. example for firefox: services.startup.quit(services.startup.eforcequi...
.../thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application. example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel events when scrolling the mouse wheel on an element, the dommousescroll event fires. event.detail contains the number of lines to scroll. this event is mozilla-only; other browsers may support window.onmousewheel. <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the scrolling area. this is the scrollin...
...m(i). ...
...And 7 more matches

Index - Archive of obsolete content
es to a file. to create an output stream, use nsiscriptableio.newoutputstream(). this method has a number of options to specify text or binary writing, the character set, and whether to append to an existing file or create a new one. 434 how to quit a xul application xul, xulrunner script can attempt to quit a xul application, or force the application to quit, using the nsiappstartup interface. 435 how to implement a custom xul query processor component xul supports templating to create a block of content from a datasource query. the xul template guide has lots of detailed information on using xul templates. xul provides template query processors for rdf, xml and sql (mozstorage). the templating system also supports building custom query processors. c...
... xul methods, xul reference no summary! 580 showonlythesetabs method, reference, référence(2), xul no summary! 581 showpane xul methods, xul reference no summary! 582 showpopup needshelp, needsrewrite, xul methods, xul reference no summary! 583 sizeto xul methods, xul reference no summary! 584 startediting xul methods, xul reference no summary! 585 startfind no summary! 586 stop xul methods, xul reference no summary! 587 stopediting xul methods, xul reference no summary! 588 swapdocshells xul methods, xul reference no summary! 589 syncsessions needshelp, xul methods, xul reference ...
...enu keyboard listener does in response: 610 positioning xul, xul popup guide there are several ways in which the location of a popup on screen may be controlled. 611 special per-platform menu considerations beginner, guide, xul, xul popup guide for many menu commands, convention dictates where these items will be placed. for instance, the edit menu always starts with the undo command if such a feature is available in the application, followed by redo, cut, copy, paste, and so forth. 612 tooltips xul, xul popup guide a tooltip is used to provide descriptive help to the user about the control that the mouse is over. for instance, moving the mouse over top of a toolbar button and waiting for a second can display a small popup label con...
...And 7 more matches

SAX - Archive of obsolete content
sax, short forsimple api for xml, is a parsing api. sax was the first widely adopted api for xml in java, and later implemented in several other programming language environments. starting with firefox 2, a sax parser is available to xul applications and extensions. for more information, please see sax homepage. quick start the sax parser functionality is available through the xml reader component. to create one, use the following code: var xmlreader = components.classes["@mozilla.org/saxparser/xmlreader;1"] .createinstance(components.interfaces.nsisaxxmlreader); after you created the sax parser, you need to set the handlers for the events you're interested in and fire off the parsing process. all functionality is available through the nsisaxxmlreader inte...
...r); after you created the sax parser, you need to set the handlers for the events you're interested in and fire off the parsing process. all functionality is available through the nsisaxxmlreader interface. set the handlers handlers are user-defined objects implementing sax handler interfaces, depending on what kind of information they need to get from the parser. after the parsing process is started, handlers receive a series of callbacks for the content of xml being parsed. the following handlers are available: interface purpose nsisaxcontenthandler receive notification of the logical content of a document (e.g. elements, attributes, whitespace, and processing instructions). nsisaxdtdhandler receive notification of basic dtd-related events. ns...
...s. nsisaxerrorhandler receive notification of errors in the input stream. nsisaxlexicalhandler sax2 extension handler for lexical events (e.g. comment and cdata nodes, dtd declarations, and entities). ...
...And 7 more matches

Useful string methods - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to understand that strings are objects, and learn how to use some of the basic methods available on those objects to manipulate strings. ...
... strings as objects most things are objects in javascript. when you create a string, for example by using let string = 'this is my string'; your variable becomes a string object instance, and as a result has a large number of properties and methods available to it. you can see this if you go to the string object page and look down the list on the side of the page! now, before your brain starts melting, don't worry! you really don't need to know about most of these early on in your learning journey. but there are a few that you'll potentially use quite often that we'll look at here. let's enter some examples into the browser developer console. finding the length of a string this is easy — you simply use the length property. try entering the following lines: let browsertype = 'mo...
...pe[0]; remember: computers count from 0, not 1! you could use this to, for example, find the first letter of a series of strings and order them alphabetically. to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browsertype[browsertype.length-1]; the length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using length-1 gets us the last character. finding a substring inside a string and extracting it sometimes you'll want to find if a smaller string is present inside a larger one (we generally say if a substring is present inside a string). this can be done using the indexof() method, which takes a single parameter — the substring you want to search for. i...
...And 7 more matches

Introduction to client-side frameworks - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages. ...
...n 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. ...
...it is a complete rewrite from the same team that built angularjs. ...
...And 7 more matches

Working with Svelte stores - Learn web development
dos 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 run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events. in all these cases we were dealing with communication between parent and child components. bu...
...ent to show how to work with stores, we will create an alert component. these kind of widgets might also be known as popup notifications, toast, or notification bubbles. our alert component will displayed by the app component, but any component can send notifications to it; 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!') ...
...onst i = todos.findindex(t => t.id === todo.id) if (todos[i].name !== todo.name) $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'` if (todos[i].completed !== todo.completed) $alert = `todo '${todos[i].name}' marked as ${todo.completed ? ...
...And 7 more matches

DeferredTask.jsm
es gecko 18.0(firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) if you have a function call you want to defer for two seconds, you can do so using the deferredtask constructor, like this: var task = new deferredtask(myfunction, 2000); you can also pass a generator function as the first argument of constructor. method overview bool ispending();obsolete since gecko 28 void start();obsolete since gecko 28 void flush();obsolete since gecko 28 void cancel();obsolete since gecko 28 void arm(); void disarm(); promise finalize(); attributes isarmed boolean indicates whether the task is currently requested to start again later, regardless of whether it is currently running. isrunning boolean indi...
...ing boolean indicates whether the task is currently running. this is always true when read from code inside the task function, but can also be true when read from external code, in case the task is an asynchronous generator function. methods ispending obsolete since gecko 28 check the current task state. bool ispending(); return value returns true if pending, false otherwise. start obsolete since gecko 28 start (or postpone) task. void start(); flush obsolete since gecko 28 perform any postponed task immediately. void flush(); cancel obsolete since gecko 28 cancel any pending task. void cancel(); arm request the execution of the task after the delay specified on construction. multiple calls don't introduce further delays. if the task is running, the delay ...
... the task will always be executed on a different tick of the event loop, even if the delay specified on construction is zero. multiple "arm" calls within the same tick of the event loop are guaranteed to result in a single execution of the task. ...
...And 7 more matches

Application Translation with Mercurial
ly need to download the latest changes in the future. thunderbird, lightning or seamonkey: download the comm-<branch>.hg file (e.g. comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g. by pressing the windows key and r on the keyboard or by calling the "run..." command from the windows "start" button, and then typing cmd and pressing the enter key. launch the installed mozillabuild toolset by launching it with its path, e.g. c:\mozilla\coding\buildtools\mozillabuild\start-shell-msvc2010.bat you can autocomplete the file path after typing a few characters and then pressing the tabulator key. if you launch the start-shell-l10n.bat, compiling features will be disabled. you can create ...
...ks for the application, binary 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 unpac...
...t = -v diff = -p -u 8 qdiff = -p -u 8 qnew = -u [diff] git = 1 showfunc = 1 unified = 8 [extensions] hgext.mq = progress = [hooks] put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded. save the file and close it. enabling mercurial queues (revertable patches) some time will pass between the moment in which you start the localization, finish it, test it, improve it, upload it for review and get review (maybe not approved on first try). other localizers will likely have done changes to the translation, either adding new texts, removing obsolete ones or improving the current texts. this can cause conflicts between the changes you created and theirs. for this reason, updating patches kann be necessary so mercuri...
...And 7 more matches

Localizing without a specialized tool
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. ...
...nary 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 enable you to learn just what needs to be done. before we start, did you make sure to install mercurial and confirm that you have set up the proper build environment on your local machine? you cannot begin localizing mozilla file by file without a specialized tool without going through the create a new localization page. what we will translate we will translate a small piece of the ui found in the search bar. the search bar is next to the right of the locati...
...rent directory (you should be in l10n-mozilla-1.9.2). $ hg clone http://bitbucket.org/mozillal10n/x-testing if there is an hg.mozilla.org repository with localization files, you can pull from it too: $ hg clone http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/x-testing eventually, you should end up with a folder hierarchy described above in the folder structure section. you are now ready to start translating! getting started with compare-locales you are going to need to create the structure of your localization, where, one-by-one, each of the files needing localization will be copied. this directory structure needs to mimic the same as the en-us source files concerning localization. you will use a tool called compare-locales to do the comparison between your locale's files and the en-us ...
...And 7 more matches

NSS Sample Code Sample1
/ 1a through 1x show how to do this). // 1a. the primary host generates an rsa keypair that will be used // store keys locally. // 1b. the primary host wraps the newly generated key using the // rsa key and stores the wrapped key data in a local file. // 1c. the primary host unwraps the key using the rsa key each time // access to the key is required, such as at server startup. // 2. the secondary host generates an rsa keypair that will be used // to transport keys between the primary host and itself. this // key needs to exist long enough to be used to process the // response to a key transport request that is made to the primary // server. the example here shows how to create a permanent (token) // rsa key for this purpose. (this key will also be use...
...om the primary host. the same methods outlined // in step 4 may be used here. // 7. the secondary host unwraps the the key using its own rsa private key. // note: currently nss does not support permanent symmetric keys. // the secondary host may store the wrapped value that was received // from the primary in a file, and unwrap it each time the key is required // (such as at server startup). // nss actually has some support for permanent symmetric keys. however this // example will need to be modified somewhat in order to demonstrate it. // utility function to print hex data static void printbuffer(unsigned char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } // xxx data protecti...
...gets the server's public key (wrapping key) to // send to another server. this becomes the input to // the exportkeys method on the remote server. int exportpublickey(secitem **pubkeydata); // export the encryption and key using the key // provided. the key should come from another server // in the cluster. ...
...And 7 more matches

NSS functions
sl_optionsetdefault mxr 3.2 and later ssl_peercertificate mxr 3.2 and later ssl_preencryptedfiletostream mxr 3.2 and later ssl_preencryptedstreamtofile mxr 3.2 and later ssl_rehandshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg...
...removecertlistnode mxr 3.6 and later cert_rfc1485_escapeandquote mxr 3.2 and later cert_savesmimeprofile mxr 3.2 and later cert_setsloptime mxr 3.2 and later cert_setocspfailuremode mxr 3.11.7 and later cert_setocsptimeout mxr 3.12 and later cert_setusepkixforvalidation mxr 3.12 and later cert_startcertextensions mxr 3.5 and later cert_startcertificaterequestattributes mxr 3.10 and later cert_startcrlentryextensions mxr 3.10 and later cert_startcrlextensions mxr 3.10 and later cert_uncachecrl mxr 3.10 and later cert_verifycertname mxr 3.2 and later cert_verifycacertforusage mxr 3.6 and later ...
... sec_asn1decoderclearfilterproc mxr 3.2 and later sec_asn1decoderclearnotifyproc mxr 3.2 and later sec_asn1decoderfinish mxr 3.2 and later sec_asn1decodersetfilterproc mxr 3.2 and later sec_asn1decodersetnotifyproc mxr 3.2 and later sec_asn1decoderstart mxr 3.2 and later sec_asn1decoderupdate mxr 3.2 and later sec_asn1encode mxr 3.2 and later sec_asn1encodeinteger mxr 3.2 and later sec_asn1encodeitem mxr 3.2 and later sec_asn1encoderabort mxr 3.9 and later sec_asn1encoderclearnoti...
...And 7 more matches

XPCOM changes in Gecko 2.0
as time allows to remove references to interfaces being "frozen" or "unfrozen." component registration the way xpcom components are registered changed in gecko 2. prior to gecko 2, during component registration, all binary and javascript component files were loaded and called, asking them to register themselves. if you used xpcomutils.jsm, some of this was hidden from you, but it was still there. starting in gecko 2, however, components are registered using manifest files, similarly to how chrome is registered. in fact, the same chrome manifest file will be used to register components. all existing xpcom components will need to be updated to support this. however, it's very easy to do, and you can actually support both types of registration for backward compatibility. component manifests all co...
...that nsigenericfactory.h has been removed. references to nsigenericfactory.h should be replaced with mozilla/moduleutils.h. it is possible for a binary component to be compatible with mozilla 1.9.2 and mozilla 2.0 by using the extra macro ns_impl_mozilla192_nsgetmodule. see nssamplemodule.cpp for more details. note: binary xpcom components must be recompiled for every new major release of firefox starting with firefox 4. your life would be much easier over the long term if you switch to using js-ctypes instead. also note that extensions using binary components must now use the unpack property in the install manifest. platform-specific directories the component/chrome system used to look in platform-specific subdirectories of an extension, such as platform/winnt_x86-msvc/chrome.manifest on windo...
..._64-gcc3 binary-component components/linux/mycomponent.so abi=linux_x86-gcc3 this also means that platform-specific preferences are no longer possible. if you need to adjust default preferences based on platform, you can do so at first run by looking up what platform you're on and changing the preferences at that time. category registration prior to gecko 2, extensions could listen for the xpcom-startup and app-startup notifications during startup, and perform actions during those. this is no longer the case. the earliest startup notification extensions can receive now is profile-after-change, which has always been the recommended notification to observe. that's because it's among the earliest notifications that occurs after the profile folder (and therefore preferences and other services) is ...
...And 7 more matches

nsIAccessibleEvent
removed from the selection. event_selection_within 0x8009 0x0015 0x0012 numerous selection changes have occurred within a container object. event_alert 0x0002 0x0016 0x0013 an alert has been generated. server applications send this event when a user needs to know that a user interface element has changed. event_foreground 0x0003 0x0017 0x0014 the foreground window has changed. event_menu_start 0x0018 0x0015 a menu item on the menu bar has been selected. event_menu_end 0x0019 0x0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a window has received mouse capture. event_capture_end 0x001d 0x001a a windo...
...r has been selected. event_menu_end 0x0019 0x0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a window has received mouse capture. event_capture_end 0x001d 0x001a a window has lost mouse capture. event_movesize_start 0x001e 0x001b a window is being moved or resized. event_movesize_end 0x001f 0x001c the movement or resizing of a window has finished. event_contexthelp_start 0x0020 0x001d a window has entered context-sensitive help mode. ...
...x001a a window has lost mouse capture. event_movesize_start 0x001e 0x001b a window is being moved or resized. event_movesize_end 0x001f 0x001c the movement or resizing of a window has finished. event_contexthelp_start 0x0020 0x001d a window has entered context-sensitive help mode. event_contexthelp_end 0x0021 0x001e a window has exited context-sensitive help mode. event_dragdrop_start 0x0022 0x001f an application is about to enter drag-and-drop mode. event_dragdrop_end 0x0023 0x0020 an application is about to exit drag-and-drop mode. event_dialog_start 0x0024 0x0021 a dialog box has been displayed. event_dialog_end 0x0025 0x0022 a dialog box has been closed. event_scrolling_start 0x0026 0x0023 scrolling has started on a scroll bar. event_scrolling_end 0x0...
...And 7 more matches

nsIDOMWindowUtils
sendsimplegestureevent(in astring atype, in float ax, in float ay, in unsigned long adirection, in double adelta, in long amodifiers); void sendtextevent(in astring acompositionstring, in long afirstclauselength, in unsigned long afirstclauseattr, in long asecondclauselength, in unsigned long asecondclauseattr, in long athirdclauselength, in unsigned long athirdclauseattr, in long acaretstart, in long acaretlength); obsolete since gecko 26 boolean sendtouchevent(in astring atype, [array, size_is(count)] in pruint32 aidentifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(count)] in pruint32 arxs, [array, size_is(count)] in pruint32 arys, [array, size_is(count)] in float arotationangles, [array, size_is(count)] in float afor...
...read only. exceptions...
...ko 38 synthesize a composition event to the window. cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. this is obsoleted since gecko 38. use nsitextinputprocessor, instead. void sendcompositionevent( in astring atype, ); obsolete since gecko 9 parameters atype the event type: "compositionstart" or "compositionend". void sendcompositionevent( in astring atype, in astring adata, in astring alocale ); obsolete since gecko 38 parameters atype the event type: "compositionstart" or "compositionend" obsolete since gecko 36. since gecko 36, specifying "compositionend" isn't fired anything. instead, use "compositioncommitasis" or "compositioncommit". or "compositionupdate". ob...
...And 7 more matches

Component; nsIPrefBranch
ication. inherits from: nsisupports last changed in gecko 58 (firefox 58 / thunderbird 58 / seamonkey 2.55) this object is created with a "root" value which describes the base point in the preferences "tree" from which this "branch" stems. preferences are accessed off of this root by using just the final portion of the preference. for example, if this object is created with the root "browser.startup.", the preferences "browser.startup.page", "browser.startup.homepage", and "browser.startup.homepage_override" can be accessed by simply passing "page", "homepage", or "homepage_override" to the various get/set methods. method overview void addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); void clearuserpref(in string aprefname); void ...
...rowser.startup.page", "browser.startup.homepage", and "browser.startup.homepage_override" can be accessed by simply passing "page", "homepage", or "homepage_override" to the various get/set methods. ...
...id deletebranch(in string astartingat); boolean getboolpref(in string aprefname, requires gecko 54 [optional] in boolean adefaultvalue); string getcharpref(in string aprefname,requires gecko 54 [optional] in string adefaultvalue); requires gecko 58 utf8tring getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); void getchildlist(in string astartingat, [optional] out unsigned long acount, [array, size_is(acount), retval] out string achildarray); void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqiresult avalue); long getintpref(in string aprefname,requires gecko 54 [optional] in long adefaultvalue); long getpreftype(in string aprefname); void lockpref(in string a...
...And 7 more matches

Plug-in Basics - Plugins
it. notice in view-source that this information is simply gathered from the javascript. because plug-ins are platform-specific, you must port them to every operating system and processor platform upon which you want to deploy your plug-in. plug-ins and helper applications before plug-ins, there were helper applications. a helper application is a separate, free-standing application that can be started from the browser. like a plug-in, the browser starts a helper application when the browser encounters a mime type that is mapped to it. unlike a plug-in, a helper application runs separately from the browser in its own application space and does not interact with the browser or the web. when the browser encounters a mime type, it always searches for a registered plug-in first. if there are no ...
...per application. plug-ins and helper applications fill different application needs. for more information about helper applications, refer to the netscape online help. how plug-ins work the life cycle of a plug-in, unlike that of an application, is completely controlled by the web page that calls it. this section 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 p...
...deleted. when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory. a plug-in consumes no resources other than disk space when it is not loaded. the next section, understanding the runtime model, describes 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 pa...
...And 7 more matches

Applying styles and colors - Web APIs
arance 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 line dash pattern array containing an even number of non-negative numbers. setlinedash(segments) sets the current line dash pattern. linedashoffset = value specifies where to start a dash array on a line. you'll get a better understanding of what these do by looking at the examples below. a linewidth example this property sets the current line thickness. values must be positive numbers. by default this value is set to 1.0 units. the line width is the thickness of the stroke centered on the given path. in other words, the area that's drawn extends to half the line width...
...rage at the endpoints (but note also that this behavior depends on the current linecap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the linecap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly). ...
...default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the linecap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly). ...
...And 7 more matches

PerformanceTiming - Web APIs
point in the page loading process was reached. some correspond to dom events; others describe the time at which internal browser operations of interest took place. each time is provided as an unsigned long long representing the moment, in milliseconds since the unix epoch these properties are listed in the order in which they occur during the navigation process. performancetiming.navigationstart read only when the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. performancetiming.unloadeventstart read only when the unload event has been thrown, indicating the time at which the previous document in the window began to unload. if there is no previous docu...
... no previous document, or if the previous document or one of the needed redirects is not of the same origin, the value returned is 0. performancetiming.unloadeventend read only when the unload event handler finishes. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. performancetiming.redirectstart read only when the first http redirect starts. if there is no redirect, or if one of the redirects is not of the same origin, the value returned is 0. performancetiming.redirectend read only when the last http redirect is completed, that is when the last byte of the http response has been received. if there is no redirect, or if one of the redirects is not of the same origin, the value re...
...t starts. if there is no redirect, or if one of the redirects is not of the same origin, the value returned is 0. performancetiming.redirectend read only when the last http redirect is completed, that is when the last byte of the http response has been received. if there is no redirect, or if one of the redirects is not of the same origin, the value returned is 0. performancetiming.fetchstart read only when the browser is ready to fetch the document using an http request. this moment is before the check to any application cache. performancetiming.domainlookupstart read only when the domain lookup starts. if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart. performancetim...
...And 7 more matches

Using Pointer Events - Web APIs
of course, also be a stylus, mouse, or other method of pointing at a location. create a canvas the touch-action property is set to none to prevent the browser from applying its default touch behavior to the application. <canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element. ...
...e browser from applying its default touch behavior to the application. <canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element. ...
...nvas element. </canvas> <br> <button onclick="startup()">initialize</button> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below should be called by our <body> element's onload attribute (but in the example we use a button to trigger it, due to limitations of the mdn live example system). ...
...And 7 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
box, i have a container with three items inside. the wrapper min-height is set, so it defines the height of the flex container. i have set align-items on the flex container to flex-end so the items will line up at the end of the flex container. i have also set the align-self property on box1 so it will override the default and stretch to the height of the container and on box2 so it aligns to the start of the flex container. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <...
...in the case of a grid layout, we are aligning the items inside their grid area. in this case that is a single grid cell, but it could be an area made up of sev...
...in the case of a grid layout, we are aligning the items inside their grid area. ...
...And 7 more matches

justify-items - CSS: Cascading Style Sheets
flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-items: auto; justify-items: normal; justify-items: stretch; /* positional alignment */ justify-items: center; /* pack items around the center */ justify-items: start; /* pack items from the start */ justify-items: end; /* pack items from the end */ justify-items: flex-start; /* equivalent to 'start'. note that justify-items is ignored in flexbox layouts. */ justify-items: flex-end; /* equivalent to 'end'. note that justify-items is ignored in flexbox layouts. */ justify-items: self-start; justify-items: self-end; justify-items: left; /* pa...
...ight; justify-items: legacy left; justify-items: legacy center; /* global values */ justify-items: inherit; justify-items: initial; justify-items: unset; this property can take one of four different forms: basic keywords: one of the keyword values normal, auto, or stretch. baseline alignment: the baseline keyword, plus optionally one of first or last. positional alignment: one of: center, start, end, flex-start, flex-end, self-start, self-end, left, or right. plus optionally safe or unsafe. legacy alignment: the legacy keyword, followed by one of left or right. values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this keywo...
...gacy alignment: the legacy keyword, followed by one of left or right. values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this keyword is dependent of the layout mode we are in: in block-level layouts, the keyword is a synonym of start. in absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one o...
...And 7 more matches

place-content - CSS: Cascading Style Sheets
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. ...
...like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ase clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 7 more matches

Audio and Video Delivery - Developer guides
the audio and video elements whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. ...
...find more about web audio api basics in using the web audio api. getusermedia / stream api it's also possible to retrieve a live stream from a webcam and/o...
...find more about web audio api basics in using the web audio api. getusermedia / stream api it's also possible to retrieve a live stream from a webcam and/or microphone ...
...And 7 more matches

Populating the page: how browsers work - Web Performance
is designed so that two entities attempting to communicate—in this case the browser and web server—can negotiate the parameters of the network tcp socket connection before transmitting data, often over https. tcp's three way handshaking technique is often referred to as "syn-syn-ack"—or more accurately syn, syn-ack, ack—because there are three messages transmitted by tcp to negotiate and start a tcp session between two computers. yes, this means three more messages back and forth between each server, and the request has yet to be made. tls negotiation for secure connections established over https, another "handshake" is required. this handshake, or rather the tls negotiation, determines which cipher will be used to encrypt the communication, verifies the server, and establishes that ...
...ived. time to first byte (ttfb) is the time between when the user made the request—say by clicking on a link—and the receipt of this first packet of html. the first chunk of content is usually 14kb of data. in our example above, the request is definitely less than 14kb, but the linked resources aren't requested until the browser encounters the links during parsing, described below. tcp slow start / 14kb rule the first response packet will be 14kb. this is part of tcp slow start, an algorithm which balances the speed of a network connection. slow start gradually increases the amount of data transmitted until the network's maximum bandwidth can be determined. in tcp slow start, after receipt of the initial packet, the server doubles the size of the next packet to around 28kb. subsequent p...
...reases the amount of data transmitted until the network's maximum bandwidth can be determined. in tcp slow start, after receipt of the initial packet, the server doubles the size of the next packet to around 28kb. subsequent packets increase in size until a predetermined threshold is reached, or congestion is experienced. if you’ve ever heard of the 14kb rule for initial page load, tcp slow start is the reason why the initial response is 14kb, and why web performance optimization calls for focusing optimizations with this initial 14kb response in mind. tcp slow start gradually builds up transmission speeds appropriate for the network's capabilities to avoid congestion. congestion control as the server sends data in tcp packets, the user's client confirms delivery by returning acknowledg...
...And 7 more matches

d - SVG: Scalable Vector Graphics
command parameters notes c (x1,...
... command parameters notes c (x1,y1, x2,y2, x,y)+ draw a cubic bézier curve from the current point to...
... commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l 80,80 v -80 h -40" /> </svg> cubic bézier curve cubic bézier curves are smooth curve definitions using four points: starting point (current point) (po = {xo, yo}) end point (pn = {xn, yn}) start control point (pcs = {xcs, ycs}) (controls curvature near the start of the curve) end control point (pce = {xce, yce}) (controls curvature near the end of the curve) after drawing, the end point (pn) becomes the current point for the next command (po′). command parameters notes c (x1,y1, x2,y2, x,y)+ draw a cubic bézier curve from the current point to the end point specified by x,y. the start control point is specified ...
...And 7 more matches

SVG documentation index - SVG: Scalable Vector Graphics
ts to control whether 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...
...s the maximum unaccented depth of the font. 57 diffuseconstant filters, svg, svg attribute the diffuseconstant attribute represents the kd value in the phong lighting model. in svg, this can be any non-negative number. 58 direction svg, svg attribute the direction attribute specifies the inline-base direction of a <text> or <tspan> element. it defines the start and end points of a line of text as used by the text-anchor and inline-size properties. it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. 59 display svg, svg attribute the display attribute lets you control the rendering of graphical or container elements. 60 divisor filter...
...onal color consortium. 128 marker-end svg, svg attribute the marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. 129 marker-mid svg, svg attribute the marker-mid attribute defines the arrowhead or polymarker that will be drawn at all interior vertices of the given shape. 130 marker-start svg, svg attribute the marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape. 131 markerheight needsexample, svg, svg attribute the markerheight attribute represents the height of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio att...
...And 7 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
stead, you make your custom button as a self-contained extension. you can use the sample code provided here to make buttons that do various useful things. if you know how to program in javascript, then you can write your own code that does other things. you can use this page if all you really want is a button for some special purpose. you can also use this page to learn about extensions, and as a starting point if you plan to write a more complex extension. note that this extension is very simplified. use other tutorials and articles to find out more—the main extensions page here is a good starting point. in particular, the articles creating toolbar buttons and building an extension explain the process in more detail. supported applications you can use the steps on this page only with seamonk...
... location of seamonkey's chrome directory. explanation: the chrome directory contains program files that are part of seamonkey itself, together with 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. ...
...es you have just created. ensure that the name of the saved file is: button-1s.png explanation: the image is in nine parts. the six parts at the left are for seamonkey's modern theme, and the three parts at the right are for its classic theme. lighter images are used when the mouse pointer is over the button. darker images are used when the button is pressed. testing your new button restart seamonkey. click the button to test it. you should see the pop-up message. further development this section describes how you can develop your button further. uninstalling the button if you ever want to uninstall the button, delete the files chrome.rdf and overlays.rdf again, just as you did in step 2. remove the line that you added to installed-chrome.txt in step 3. delete the custombutton direc...
...And 6 more matches

XULRunner tips - Archive of obsolete content
tensions.properties"); pref("extensions.getmoreextensionsurl", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension manager uses fuel, namely application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions' list: copy files fuelapplication.js and fuelapplication.manifest from browser/fuel/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure...
...there is a working stub. any better suggestion? venkman uses "chrome://communicator/skin/" as an alias for "chrome://global/skin/" and this alias was maintained in the xulrunner toolkit until xulrunner 1.9 was released. when using xulrunner ...
... var windowds = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"] .getservice(components.interfaces.nsiwindowdatasource); var tmpnamespace = {}; var sl = components.classes["@mozilla.org/m...
...And 6 more matches

Square tilemaps implementation: Scrolling maps - Game development
amera's viewport. maxx and maxy: the limit for the camera's position — the lower limit will nearly always be (0,0), and in this case the upper limit is equal to the size of the world minus the size of the camera's viewport. rendering the map there are two main differences between rendering scrolling maps vs. static maps: partial tiles might be shown. in static maps, usually the rendering starts at the top left corner of a tile situated at the top left corner of a viewport. while rendering scrolling tilemaps, the first tile will often be clipped. todo: show a diagram here explaining this. only a section of the map will be rendered. if the map is bigger than the viewport, we can obviously only display a part of it at a time, whereas non-scrolling maps are usually rendered wholly. ...
... only a section of the map will be rendered. if the map is bigger than the viewport, we can obviously only display a part of it at a time, whereas non-scrolling maps are usually rendered wholly. to handle these issues, we need to slightly modify the rendering algorithm. let's imagine that we have the camera pointing at (5,10). that means that the first tile would be 0x0. ...
... will be rendered. if the map is bigger than the viewport, we can obviously only display a part of it at a time, whereas non-scrolling maps are usually rendered wholly. to handle these issues, we need to slightly modify the rendering algorithm. let's imagine that we have the camera pointing at (5,10). that means that the first tile would be 0x0. in the demo code, the starting point is stored at startcol and startrow. ...
...And 6 more matches

Grids - Learn web development
...
... 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 for the first part of this lesson, making changes to see how grid behaves. to define a grid we ...
...-gap: 20px; } this works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks. line-based placement we now move on from creating a grid, to placing things on the grid. ...
...And 6 more matches

Practical positioning examples - Learn web development
w all the content, thereby improving performance. note: some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a javascript feature such as xmlhttprequest. at this point in your learning however we want to keep things as simple as possible. there is some javascript later on, but only a tiny bit. to start with, we'd like you to make a local copy of the starting html file — info-box-start.html. save this somewhere sensible on your local computer, and open it up in your text editor. let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <di...
...g 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. first, add the following rule at the bottom of your css to remove the default padding-left and margin-top from the unordered list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page. next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their list-style-type is set to none to get rid of the bullets, and thei...
...t fixed position so that it stays in the same position in the browser window. when the main content scrolls, the info-box will stay in the same position on the screen. our finished example will look like this: note: you can see the finished example running live at fixed-info-box.html (source code). check it out to get an idea of what you will be building in this section of the article. as a starting point, you can use your completed example from the first section of the article, or make a local copy of info-box.html from our github repo. html additions first of all, we need some additional html to represent the web site main content. add the following <section> just below your opening <body> tag, just before the existing section: <section class="fake-content"> <h1>fake content</h1> ...
...And 6 more matches

How to build custom form controls - Learn web development
ontrol makes sense, and what to consider when building a control is a requirement. note: we'll focus on building the control, not on how to make the code generic and reusable; that would involve some non-trival javascript code and dom manipulation in an unknown context, and that is out of the scope of this article. design, structure, and semantics before building a custom control, you should start by figuring out exactly what you want. this will save you some precious time. in particular, it's important to clearly define all the states of your control. to do this, it's good to start with an existing control whose states and behavior are well known, so that you can simply mimic those as much as possible. in our example, we will rebuild the <select> element. here is the result we want to ac...
...e normal state (on the left); the active state (in the middle) and the open state (on the right). in terms of behavior, we are recreating a native html element. therefore it should have the same behaviors and semantics as the native html element. we require our control to be usable with a mouse as well as with a keyboard, and comprehensible to a screen reader, just like any native control. let's start by defining how the control reaches each state: the control is in its normal state when: the page loads. the control was active and the user clicks anywhere outside it. the control was active and the user moves the focus to another control using the keyboard (e.g. the tab key). the control is in its active state when: the user clicks on it or touches it on a touch screen. ...
...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 to do so, as the mechanism has already been implemented 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 contain...
...And 6 more matches

Object-oriented JavaScript for beginners - Learn web development
nding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to understand the basic theory behind object-oriented programming, how this relates to javascript ("everything is an object"), and how to create constructors and object instances. object-oriented programming — the basics to start with, let's give you a simplistic, high-level view of what object-oriented programming (oop) is. we say simplistic, because oop can quickly get very complicated, and giving it a full treatment now would probably confuse more than help. the basic idea of oop is that we use objects to model real world things that we want to represent inside our programs, and/or provide a simple way to access functi...
...is sometimes called a namespace), making it easy to structure and access; objects are also commonly used as data stores that can be easily sent across the network. defining an object template let's consider a simple program that displays information about the students and teachers at a school. here we'll look at oop theory in general, not in the context of any specific programming language. to start this off, we could return to our person object type from our first objects article, which defines the generic data and functionality of a person. there are lots of things you could know about a person (their address, height, shoe size, dna profile, passport number, significant personality traits ...) , but in this case we are only interested in showing their name, age, gender, and interests, and ...
...al, such as "hello, my name is [prefix] [lastname], and i teach [subject]." (e.g hello, my name is mr griffiths, and i teach chemistry). note: the fancy word for the ability of multiple object types to implement the same functionality is polymorphism. just in case you were wondering. you can now create object instances from your child classes. for example: in the rest of the article, we'll start to look at how oop theory can be put into practice in javascript. constructors and object instances javascript uses special functions called constructor functions to define and initialize objects and their features. they are useful because you'll often come across situations in which you don't know how many objects you will be creating; constructors provide the means to create as many objects a...
...And 6 more matches

Aprender y obtener ayuda - Learn web development
en you are trying to understand new subjects or solve new problems that you haven't come across before. for that, you need diffuse thinking. this is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean. this is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details. it is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). you might: know how to fix problem a with tool a. know ho...
...ful videos. many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. there is no right and wrong answer here. interactive code playgrounds you might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. this is also a reasonable approach, and some learning sites tend to favor it. codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved. many mdn web docs reference pages provide interactive examples too, where you can alter the code and see how the l...
...ey can see it. note: you might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. and you'll probably come up with other methods than the three we covered above. making a plan it is a good idea to create a plan to help you achieve what you want to achieve through your learning. a goal statement it sounds silly, but why not start with a single sentence that says what you want to achieve? the following have different scopes, but are all realistic and achievable: i want to become a professional web developer in two years' time. i want to learn enough to build a website for my local amateur tennis club. i want to learn html and css so i can expand my job role to take over updating the content on our company website. t...
...And 6 more matches

Ember app structure and componentization - Learn web development
omponent 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. 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 ...
...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 html text that could be turned into a label. when you save application.hbs, the development server you started earlier will automatically rebuild the app and refresh the browser. the rendered output should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do list app. update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" ...
... that our app continues to work over time as we upgrade, add features, refactor, etc. testing is outside the scope of this tutorial, although generally testing should be implemented as you develop, rather than after, otherwise it tends to be forgotten about. if you're curious about testing, or why you would want to have automated tests, check out the official ember tutorial on testing. before we start adding any component code, let’s create the scaffolding for the other components. enter the following lines into your terminal, one by one: ember generate component todo-list ember generate component todo ember generate component footer you’ll now see the following inside your todomvc/app/components directory: now that we have all of our component structure files, we can cut and paste th...
...And 6 more matches

Componentizing our Svelte app - Learn web development
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. ...
...a component is a reusable, self-contained block of code that encapsulates html, css and javascript that belong together, written into a .sve...
...) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components. a component is a reusable, self-contained block of code that encapsulates html, css and javascript that belong together, written into a .svelte file. components can be big or small, but they are usually clearly defined: t...
...And 6 more matches

Deployment and next steps - Learn web development
ther resources, and more. ...
...8-next-steps remember to run npm install && npm run dev to start your app in development mode. compiling our app so far we've been running our app in development mode with npm run dev. as we saw earlier, this instruction tells svelte to compile our components and javascript files into a public/build/bundle.js file and all the css sections of our components into public/build/bundle.css. it also starts a development server and watches for changes, recompiling the app and refreshing the page when a change occurs. your generated bundle.js and bundle.css files will be something like this (file size on the left): 504 jul 13 02:43 bundle.css 95981 jul 13 02:43 bundle.js to compile our application for production we have to run npm run build instead. in this case, svelte won't lunch a web server...
...iled the code to vanilla javascript. a look behind the svelte compilation process by default, when you create a new app with npx degit sveltejs/template my-svelte-project, svelte will use rollup as the module bundler. note: there is also an official template for using webpack and also many community-maintained plugins for other bundlers. in the file package.json you can see that the dev and start scripts are just calling rollup: "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "sirv public" }, in the dev script we are passing the -w argument, which tells rollup to watch files and rebuild on changes. if we have a look at the rollup.config.js file, we can see that the svelte compiler is just a rollup plugin: import svelte from 'rollup-plugin-svelte'; [...] import...
...And 6 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
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. ...
...we'll take the tasks information from the markup and store it in a todos array. we'll also create two variab...
...with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start 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 stat...
...And 6 more matches

Handling common accessibility problems - Learn web development
e 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. i think it is more interesting than the last one.</p> in addition, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with. as a test, you can turn off a site's css and see how understandable it is without it. you could do this manually by just removing the css from your code, but the easiest way is to use browser features, for example: firefox: select view > page style > no style from the main menu. safari: select develop > disable styles from the main menu (to enable the develop menu, choose safari > pref...
...nually by just removing the css from your code, but the easiest way is to use browser features, for example: firefox: select view > page style > no style from the main menu. safari: select develop > disable styles from the main menu (to enable the develop menu, choose safari > preferences > advanced > show develop menu in menu bar). chrome: install the web developer toolbar extension, 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 ...
...e 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>. ...
...And 6 more matches

Localizing with Koala
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. requirements mercurial, linux, windows or mac os x. instructions preparation install komodo edit. install koala extension. go to tools > add-ons. search for "koala". click add to komodo edit... restart komodo when the installation is complete. you should see a new button in komodo's toolbar, with two options: startpage and management. before you can use them, you need to create a new koala project. creating a new project create a new koala project by going to file > new > new project from template... choose "koala" in the categories list. choose "koala" in the templates list. choose a na...
...epository set up (either on hg.mozilla.org or bitbucket), type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing or http://hg.mozilla.org/releases/l10n-....9.2/x-testing. new localizations: url: if you already have a repository set up by l10n-drivers (on bitbucket), type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing. if you're starting a new localization, you may not have a remote repository set up yet. it is still recommended to use mercurial locally to version your local files. just type a single dot (".") in the url field to enable mercurial support in koala. branch: default. revision: leave empty. user: type your name and your e-mail address in the form: "firstname lastname <me@example.com>" (be sure to type the wrappi...
...e http://bitbucket.org/mozillal10n/x-testing 3.6 otherwise, it's a good idea to create your local repository in order to be able to track changes you make to the localization files. to do this, open the console and type: c:\users\stas> cd c:\mozilla\l10n\locale\x-testing\3.6 c:\mozilla\l10n\locale\x-testing\3.6> hg init you should now see the the koala's starpage in komodo. you are ready to start localizing firefox! comparing and translating now that we have set up koala to localize firefox from en-us into x-testing, we can start translating the localization files. koala features a very handy tool called compare-locales, which compares the files from en-us with your files in x-testing and gives you statistics about new, changed, missing and obsolete files and strings. let's see how that ...
...And 6 more matches

Observer Notifications
observer topics the following are topics that you can observe during the course of an application. unless otherwise noted you register for the topics using the nsiobserverservice. application startup these are the topics that you can observe on startup, in order of appearance. ...
...less otherwise noted you register for the topics using the nsiobserverservice. application startup these are the topics that you can observe on startup, in order of appearance. if your component requires access to the user profile, or any services which require access to the profile (preferences, bookmarks, and so on) then a common pattern is to register with the nsicategorymanager for the app-startup topic which can be done in the component's registration code, and then in that notification register with the observer service for the profile-after-change notification. see receiving startup notifications for more information about how this works. starting in firefox 3.5 components can simply register for the profile-after-change notification in nsicategorymanager. topic descript...
...see xpcom changes in gecko 2.0 for details. called when xpcom is initialized. many things are not available for use at this point. to receive this notification you have to register with nsicategorymanager. ...
...And 6 more matches

imgIDecoderObserver
re the call returns. if flag_sync_decode is not passed, all, some, or none of the notifications may fire before the call returns. ...
...fications may fire before the call returns. ...
...rview void ondataavailable(in imgirequest arequest, in boolean acurrentframe, [const] in nsintrect arect); native code only! ...
...And 6 more matches

nsIHttpChannel
a message body that (in some cases) should be shown to the user. use this attribute to distinguish server error pages from normal pages, instead of comparing the response status manually against the set of valid response codes, if that is required by your application. read only. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). responsestatus unsigned long get the http response code (for example 200). read only. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). responsestatustext acstring get the http response status text (for example "ok"). note: this returns th...
...sponsestatustext acstring get the http response status text (for example "ok"). note: this returns the raw (possibly 8-bit) text from the server. there are no assumptions made about the charset of the returned text. you have been warned! read only. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). referrerpolicy read only unsigned long the referrer policy in use for this channel, indicated by one of the constants listed above methods getoriginalresponseheader() get the value of a particular original response header, that is, in the same form as it came from the network. i.e. empty headers will have an empty string as value and multiple headers ...
...riginalresponseheader( in acstring aheader, in nsihttpheadervisitor avisitor ); parameters aheader the case-insensitive name of the response header to query (for example "set-cookie"). avisitor an nsihttpheadervisitor instance allowing to visit all equally named response headers. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()) or if no header with that name is set in the response. getrequestheader() get the value of a particular request header. acstring getrequestheader( in acstring aheader ); parameters aheader the case-insensitive name of the request header to query (for example "cache-control"). return value the value of the request header. exceptions thrown ns_error_not_available if th...
...And 6 more matches

Using Objective-C from js-ctypes
its own syntax, it 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...
... // [synth isspeaking] while (!objc_msgsend(synth, isspeaking)) {} // wait while speaking. // [synth isspeaking] while (objc_msgsend(synth, isspeakin...
... // [synth isspeaking] while (!objc_msgsend(synth, isspeaking)) {} // wait while speaking. // [synth isspeaking] while (objc_msgsend(synth, isspeaking)) {} sel release = sel_registername("releas...
...And 6 more matches

Network request list - Firefox Developer Tools
e specific column from the context menu. a reset columns command is available on the context menu to reset the columns to their initial configuration. you can also change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a resize icon when you move it over the border of a column. you can drag to manually set the size of column. starting in firefox 76 you can double-click a column divider to resize the column to the left of it to fit its contents. the reset columns command on the context menu also resets the width of the columns to the default values. clicking the column header label sorts the request list by that column. you can reset the sort to the default by selecting "reset sorting" from the context menu. here is a...
... requested. if the request used ssl/tls and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. y hover over the domain to see the ip address. there's an icon next to the domain that gives you extra information about the security status of that request. see security icons. file: the basename of the file requested. (starting in firefox 80) on the right edge of the file column, a turtle icon appears if the server waiting time exceeds a threshhold (default: 500 ms). a tooltip explains the problem. you can configure the threshhold in the configuration editor (about:config) by modifying the devtools.netmonitor.audits.slow setting. url: the url of the file requested. protocol: the network protocol used to t...
...re actually transferred to load the resource, or a message about why the resource was not transferred. a number value is less than size if the resource was compressed. if the resource was fetched from a service worker cache, then this cell displays "service worker". cached resources may be fetched from the cache and the network simultaneously, which may improve load time for slow caches. starting with firefox 68, the transferred column lists either "cached (raced)" or "[size] (raced)" depending on the faster source. this feature is called race cache with network (rcwn). if the resource was blocked, the message indicates why it was blocked. for example, "csp", "malware", "cors missing allow origin", "blocked by [name of extension]". size: the size of the transferred resource. ...
...And 6 more matches

about:debugging (before Firefox 68) - Firefox Developer Tools
opening the about:debugging page there are several different ways to open about:debugging: type "about:debugging" in the firefox url bar. in the tools > web developer menu, click "service workers". select the web developer menu under the hamburger menu (), then select "service workers". ...
...ng you to switch between the two main views: one for add-ons and one for workers. whether or not system add-ons appear in the list on this page depends on the setting of the devtools.aboutdebugging.showsystemaddons preference. if you need to see system add-ons, navigate to about:config and make sure that this value is set to true. ...
...ference. if you need to see system add-ons, navigate to about:config and make sure that this value is set to true. add-ons the add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, add-on sdk add-ons, and webextensions. this page enables you to do two things: load an add-on temporarily from disk connect the add-on debugger to any restartless add-ons connecting the add-on debugger the add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your firefox). next to each entry is a button labeled "debug". if the "debug" button is disabled, check the "enable add-on debugging" box. if you click "debug", you'll see a dialog aski...
...And 6 more matches

AudioParam.setTargetAtTime() - Web APIs
timeconstant the time-constant value, given in seconds, of an exponential approach to the target value. ...
... timeconstant the time-constant value, given in seconds, of an exponential approach to the target value. ...
... timeconstant the time-constant value, given in seconds, of an exponential approach to the target value. ...
...And 6 more matches

Drag Operations - Web APIs
s. 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 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 "fals...
... two, the default value is true, so you would only use the draggable attribute with a value of false to disable dragging of these elements. note: when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. instead, the user must hold down the alt key to select text with the mouse, or use the keyboard. ...
...te with a value of false to disable dragging of these elements. note: when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. instead, the user must hold down the alt key to select text with the mouse, or use the keyboard. starting a drag operation in this example, a listener is added for the dragstart event by using the ondragstart attribute. <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged. </p> when a user begins to drag, the dragstart event is fired. in this example the dragstart listener is added to the draggable element itself. however, you could listen to a higher ancestor as drag event...
...And 6 more matches

Key Values - Web APIs
arrow key. vk_up (0x26) kvk_uparrow (0x7e) gdk_key_up (0xff52) gdk_key_kp_up (0xff97) qt::key_up (0x01000013) keycode_dpad_up (19) "end" the end key. moves to the end of content. vk_end (0x23) kvk_end (0x77) gdk_key_end (0xff57) gdk_key_kp_end (0xff9c) qt::key_end (0x01000011) keycode_move_end (123) "home" the home key. moves to the start of content. vk_home (0x24) kvk_home (0x73) gdk_key_home (0xff50) gdk_key_kp_home (0xff95) qt::key_home (0x01000010) keycode_move_home (122) "pagedown" the page down (or pgdn) key. scrolls down or displays the next page of content. vk_next (0x22) kvk_pagedown (0x79) gdk_key_page_down (0xff56) gdk_key_kp_page_down (0xff9b) qt::key_pagedown (0x0100001...
...ypically found between the windows (or os) key and the control key on the right side of the keyboard. vk_apps (0x5d) kvk_pc_contextmenu (0x6e) gdk_key_menu (0xff67) qt::key_menu (0x01000055) keycode_menu (82) "escape" [2] the esc (escape) key. typically used as an exit, cancel, or "escape this operation" button. historically, the escape character was used to signal the start of a special control sequence of characters called an "escape sequence." vk_escape (0x1b) kvk_escape (0x35) gdk_key_escape (0xff1b) qt::key_escape (0x01000000) keycode_escape (111) "execute" the execute key. vk_execute (0x2b) qt::key_execute (0x01020003) "find" the find key. opens an interface (typically a dialog box) for performing a find/sea...
...chinese, japanese, korean, and hindi. some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. in addition, not all keyboards have all of these keys. common ime keys keyboardevent.key value description virtual keycode windows mac linux android "allcandidates" the all candidates key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input. gdk_key_multiplecandidate (0xff3d qt::key_multiplecandidate (0x0100113d) "alphanumeric" the alphanumeric key. vk_oem_attn (0xf0) gdk_key_eisu_shift (0xff2f) gdk_key_eisu_toggle (0xff30) qt::key_eisu_shift (0x0100112f) qt::key_eisu_toggle (0x01001130) ...
...And 6 more matches

Using the Resource Timing API - Web APIs
ze detailed network timing data regarding the loading of an application's resource(s). an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.). the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc. the interface also includes other properties that provide data about the size of the fetched resource as well as the type of resource that initiated the fetch. this document shows the use of resource timing interfaces. for more details about the interfaces, including examples, see each interface's refe...
...ated in figure 1. figure 1. resource timing properties an application developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues. timing resource loading phases the following example illustrates using the resource timing properties to calculate the amount of time the following phases take: redirection (redirectstart and redirectend ), dns lookup (domainlookupstart and domainlookupend), tcp handshake (connectstart and connectend), and response (responsestart and responseend). this example also calculates the time from the start of the fetch and request start phases (fetchstart and requeststart, respectively), until the response has ended (responseend). this timing data provides a detailed profile of the resou...
...(resourc...
...And 6 more matches

Using Service Workers - Web APIs
the premise of service workers one overriding problem that web users have suffered with for years is loss of connectivity. the best web app in the world will 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. ...
...f the main reasons native apps are often chosen over web apps. setting up to play with service workers many service workers features are now enabled by default in newer versions of supporting browsers. if however you find that demo code is not working in your installed versions, you might need to enable a pref: firefox nightly: go to about:config and set dom.serviceworkers.enabled to true; restart browser. chrome canary: go to chrome://flags and turn on experimental-web-platform-features; restart browser (note that some features are now enabled by default in chrome.) opera: go to opera://flags and enable support for serviceworker; restart browser. microsoft edge: go to about:flags and tick enable service workers; restart browser. you’ll also need to serve your code via https — ser...
...ecuted 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. installation of the worker is attempted when service worker-controlled pages are accessed subsequently. an install event is always the first one sent to a service worker (this can be used to start the process of populating an indexeddb, and caching site assets). this is really the same kind of procedure as installing a native or firefox os app — making everything available for use offline. when the oninstall handler completes, the service worker is considered installed. next is activation. when the service worker is installed, it then receives an activate event. the primary use of onac...
...And 6 more matches

Using readable streams - Web APIs
example goes on to enqueue each chunk in a new, custom readablestream (we will find more about this in the next section), then create a new response out of it, consume it as a blob, create an object url out of that blob using url.createobjecturl(), and then display it on screen in an <img> element, effectively creating a copy of the image we originally fetched. ...
...m in the next section. if done is not true, we process the new chunk we’ve read (contained in the value property of the results object) and then call the pump() function again to read the next chunk. // enqueue the next data chunk into our target stream controller.enqueue(value); return pump(); this is the standard pattern you’ll see when using stream readers: you write a function that starts off by reading the stream. if there is no more stream to read, you return out of the function. if there is more stream to read, you process the current chunk then run the function again. you keep running the function recursively until there is no more stream to read, in which case step 2 is followed. creating your own custom readable stream the simple stream pump example we’ve been study...
...ctor it is easy to read from a stream when the browser provides it for you as in the case of fetch, but sometimes you need to create a custom stream and populate it with your own chunks. the readablestream() constructor allows you to do this via a syntax that looks complex at first, but actually isn’t too bad. the generic syntax skeleton looks like this: const stream = new readablestream({ start(controller) { }, pull(controller) { }, cancel() { }, type, autoallocatechunksize }, { highwatermark, size() }); the constructor takes two objects as parameters. the first object is required, and creates a model in javascript of the underlying source the data is being read from. the second object is optional, and allows you to specify a custom queuing strategy to use for your...
...And 6 more matches

Architecture - Accessibility
rived implementation that's appropriate. if it has text siblings, then it gets exposed as the unicode char for an embedded object, which is '\xfffc' within the parent nshypertextaccessible. in addition, nsiaccessiblehyperlink is implemented on any non-text child inside a container that also has text. this allows at's to find its position within that text, because the hyperlink interface exposes a start and end index. in fact, the end index will always be 1 larger than the start index, because the object is always represented by a single '\xfffc' character. if you want to know that something is really a link, check to see if it is role_link. html containers are implemented by nshypertextaccessible. they support the nsiaccessiblehypertext is implemented on any container element that has both te...
...o get the offset in the parent text for a given embedded object: qi/qa to iahyperlink if not successful, then it is not embedded in text, so it's position in parent should be determined just by ia2::indexinparent, which will return its child offset within the parent. examples of objects not embedded in text are the child options in list boxes and combo boxes. ...
...ccessful, then it is not embedded in text, so it's position in parent should be determined just by ia2::indexinparent, which will return its child offset within the parent. examples of objects not embedded in text are the child options in list boxes and combo boxes. otherwise, use iahyperlink::getstartindex() to find the index in parent. ...
...And 6 more matches

CSS Box Alignment - CSS: Cascading Style Sheets
roperties outside of their implementation within a particular layout method. there are also some key concepts which are common to all layout methods. relationship to writing modes alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. instead we describe alignment in terms of the start and end of the particular dimension we are working with. this ensures that alignment works in the same way whichever writing mode the document has. two dimensions of alignment when using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. the inline axis is the axis along which words in a sentence flow in the writi...
...cts within an alignment context. distributed alignment: these keywords define alignment as a distribution of space among alignment subjects. positional alignment keyword values the following values are defined for positional alignment, and can be used as values for content alignment with justify-content and align-content and also for self alignment with justify-self and align-self. ...
...gnment context. distributed alignment: these keywords define alignment as a distribution of space among alignment subjects. positional alignment keyword values the following values are defined for positional alignment, and can be used as values for content alignment with justify-content and align-content and also for self alignment with justify-self and align-self. ...
...And 6 more matches

animation-timing-function - CSS: Cascading Style Sheets
dn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...ion: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); /* steps function keywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ animation-timing-function: inherit; ani...
...fied number of intervals that are equal in length. it is defined by a number of steps and a step position. ease equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the animation, slowing back down at the end. linear equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), animates at an even speed. ease-in equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the speed of the transition of the animating properting increasing until complete. ease-out equal to cubic-bezier(0, 0, 0.58, 1.0), starts quickly, slowing down the animation continues. • ease-in-out equal to cubic-bezier(0.42, 0, 0.58, 1.0), with the animating properties slowly transitioning, speeding up, and then slowing down again. cubic-bezier(p1, p2, p3, p4) an auth...
...And 6 more matches

linear-gradient() - CSS: Cascading Style Sheets
or more colors along a straight line. its result is an object of the <gradient> data type, which is a special kind of <image>. 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. ...
...e 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. ...
... clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 6 more matches

async function - JavaScript
promise((resolve) => settimeout(() => resolve('1'), 1000)) const p2 = new promise((_,reject) => settimeout(() => reject('2'), 500)) const results = [await p1, await p2] // do not do this! use promise.all or promise.allsettled instead. } foo().catch(() => {}) // attempt to swallow all errors... ...
...se.allsettled instead. } foo().catch(() => {}) // attempt to swallow all errors... examples async functions and execution order function resolveafter2seconds() { console.log("starting slow promise") return new promise(resolve => { settimeout(function() { resolve("slow") console.log("slow promise is done") }, 2000) }) } function resolveafter1second() { console.log("starting fast promise") return new promise(resolve => { settimeout(function() { resolve("fast") console.log("fast promise is done") }, 1000) }) } async function sequentialstart() { console.log('==sequential start==') // 1. execution gets here almost instantly const slow = await resolveafter2seconds() console.log(slow) // 2. this runs 2 seconds after 1. const fast = ...
...execution gets here almost instantly console.log(await slow) // 2. this runs 2 seconds after 1. ...
...And 6 more matches

jpm - Archive of obsolete content
jpm usage is: jpm [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm. installing npm there are two ways to get npm. download and install node.js from nodejs.org. ...
....bin/:$path" installing jpm from git alternatively, you can also get the latest version of jpm using git: git clone https://github.com/mozilla-jetpack/jpm.git cd jpm npm install npm link after installing jpm after installation, at the command prompt, type: jpm you should see a screen summarizing the available jpm commands. note that unlike cfx, jpm is available in every command prompt you start, as long as you installed it with the --global flag. install a different version of firefox as of firefox 48, it is not possible to use unsigned add-ons (i.e. any add-on which you are in the process of developing) in the branded release or beta versions of firefox. thus, you will need to download and install a different version of firefox. assuming you don't want an old version of firefox, your...
...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 then post it to some url. jpm watchpost package your add-on ...
...And 5 more matches

Adding preferences to an extension - Archive of obsolete content
ion, another period, then a preference name, as seen in the example above. the javascript code in order to monitor changes to our preferences, we need to install an observer using the nsiprefbranch2 interface. to do that, we need to reimplement our code into an object. that involves turning each function into a member of the stockwatcher class. let's take a look at each function in the class. ...
...preference name, as seen in the example above. the javascript code in order to monitor changes to our preferences, we need to install an observer using the nsiprefbranch2 interface. to do that, we need to reimplement our code into an object. that involves turning each function into a member of the stockwatcher class. let's take a look at each function in the class. ...
...o monitor changes to our preferences, we need to install an observer using the nsiprefbranch2 interface. to do that, we need to reimplement our code into an object. that involves turning each function into a member of the stockwatcher class. let's take a look at each function in the class. startup() the stockwatcher.startup() function is called when our extension is first loaded. ...
...And 5 more matches

Index of archived content - Archive of obsolete content
cross-domain content scripts interacting with page scripts loading content scripts reddit example port self contributor's guide classes and inheritance content processes getting started modules private properties firefox compatibility module structure of the sdk porting the library detector program id sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts workin...
... creating annotations displaying annotations implementing the widget overview storing annotations chrome authority creating event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on url modifying the page hosted by a tab open a web page troubleshooting unit testing u...
... extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons developer guide hiding browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for firefox for android api accounts.jsm ...
...And 5 more matches

JXON - Archive of obsolete content
s of object) and viceversa, with some different algorithms. it could be useful to read the xml introduction article first. if you want a complete bidirectional jxon library (modelled on the json global object), skip to the dedicated paragraph (but please read the note about the const statement compatibility). note: if you are interested to address only some parts of an xml document (and are not starting in javascript/json for templating purposes), use xpath instead of converting the whole document into json. conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz5671</item_number> <price>39.95<...
...fy (vvalue) { if (vvalue === null) { return new (function() { this.tostring = function() { return "null"; } this.valueof = function() { return null; } })(); } return vvalue instanceof object ? vvalue : new vvalue.constructor(vvalue); } var atmpels = []; // loaded element nodes cache function getjxontree (oxmlparent) { var sprop, vcontent, vresult, nlength = 0, nlevelstart = atmpels.length, nchildren = oxmlparent.haschildnodes() ? oxmlparent.childnodes.length : 0, scollectedtxt = ""; for (var onode, nitem = 0; nitem < nchildren; nitem++) { onode = oxmlparent.childnodes.item(nitem); if (onode.nodetype === 4) { scollectedtxt += onode.nodevalue; } /* nodetype is "cdatasection" (4) */ else if (onode.nodetype === 3) { scollectedtxt += onode.nodevalu...
...atmpels.length, vbuiltval = parsetext(scollectedtxt); if (oparentnode.hasattributes && oxmlparent.hasattributes()) { vresult = objectify(vbuiltval); for (nlength; nlength < oxmlparent.attributes.length; nlength++) { oattrib = oxmlparent.attributes.item(nlength); vresult["@" + oattrib.name.tolowercase()] = parsetext(oattrib.value.trim()); } } else if (nlevelend > nlevelstart) { vresult = objectify(vbuiltval); } for (var nelid = nlevelstart; nelid < nlevelend; nelid++) { sprop = atmpels[nelid].nodename.tolowercase(); vcontent = getjxontree(atmpels[nelid]); if (vresult.hasownproperty(sprop)) { if (vresult[sprop].constructor !== array) { vresult[sprop] = [vresult[sprop]]; } vresult[sprop].push(vcontent); } else { vresult[sprop] = vcontent; n...
...And 5 more matches

jspage - Archive of obsolete content
})(); },this);return this;},cloneevents:function(d,a){d=document.id(d);var c=d.retrieve("events");if(!c){return this;}if(!a){for(var b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };elem...
...uration); this.set(this.compute(this.from,this.to,b));}else{this.set(this.compute(this.from,this.to,1));this.complete();}},set:function(a){return a;},compute:function(c,b,a){return fx.compute(c,b,a); },check:function(){if(!this.timer){return true;}switch(this.options.link){case"cancel":this.cancel();return true;case"chain":this.chain(this.caller.bind(this,arguments)); return false;}return false;},start:function(b,a){if(!this.check(b,a)){return this;}this.from=b;this.to=a;this.time=0;this.transition=this.gettransition(); this.starttimer();this.onstart();return this;},complete:function(){if(this.stoptimer()){this.oncomplete();}return this;},cancel:function(){if(this.stoptimer()){this.oncancel(); }return this;},onstart:function(){this.fireevent("start",this.subject);},oncomplete:function(){this.fi...
...:function(){if(this.stoptimer()){this.oncancel(); }return this;},onstart:function(){this.fireevent("start",this.subject);},oncomplete:function(){this.fireevent("complete",this.subject);if(!this.callchain()){this.fireevent("chaincomplete",this.subject); }},oncancel:function(){this.fireevent("cancel",this.subject).clearchain();},pause:function(){this.stoptimer();return this;},resume:function(){this.starttimer(); return this;},stoptimer:function(){if(!this.timer){return false;}this.time=$time()-this.time;this.timer=$clear(this.timer);return true;},starttimer:function(){if(this.timer){return false; }this.time=$time()-this.time;this.timer=this.step.periodical(math.round(1000/this.options.fps),this);return true;}});fx.compute=function(c,b,a){return(b-c)*a+c; };fx.durations={"short":250,normal:500,"lo...
...And 5 more matches

Multiple Rule Example - Archive of obsolete content
has a property that others do not. for instance, in an earlier example, one of the photos had a description and the other photos did not. in this case, you might wish to display the photo with a description in a different manner. this is useful if you wish to hide any content that would be needed to display the description. the next example shows how we can do this. ...
...sh to display the photo with a description in a different manner. this is useful if you wish to hide any content that would be needed to display the description. the next example shows how we can do this. ...
...ption in a different manner. this is useful if you wish to hide any content that would be needed to display the description. the next example shows how we can do this. ...
...And 5 more matches

Result Generation - Archive of obsolete content
df datasources. first, however, some background. rdf, in mathematical terms, is a labeled directed graph. that means that rdf is a graph of nodes and arrows between them where each node and arrow has some label. since it's a graph, arrows can point all over the place and nodes can have any number of arrows pointing out of them and pointing at them. and also because it is a graph, there is no real starting point or root node so you can just start anywhere. in the picture below, you can see that node a at the top has arcs pointing to b, c and d. similarly, c has an arc pointing to d. you could have arcs pointing elsewhere--for example, node d could have an arc pointing back to a. to navigate around, you could start at node a and navigate around the graph following the arrows to b, c or d. or you ...
...no requirement exists to follow the arrows in the direction they point; you can easily go the other way (though in only one direction within a given series of iterations). the picture was generated from the w3c's rdf validator, a good place to go to check if your rdf is valid. ...
...you could navigate to b, c and d and generate th...
...And 5 more matches

Using the Editor from XUL - Archive of obsolete content
element, i.e. that which you get from window._content. having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to style it from css. editoronload() is called. ...
...the <editor> tag actually creates an nseditorboxobject behind the scenes. the nseditorboxobject creates an nseditorshell, and holds the owning reference to it. ...
...t lives on: editorshell.init(); editorshell.seteditortype(editortype); editorshell.webshellwindow = window; editorshell.contentwindow = window._content; the webshellwindow (a settable attribute on nsieditorshell) points to the top-level window element, from which the editorshell can get the xul document in which it is living. it needs this to poke the ui (e.g. ...
...And 5 more matches

Making sure your theme works with RTL locales - Archive of obsolete content
to left. of the languages firefox and thunderbird are shipped in, that includes arabic and hebrew, with persian available as beta, for a total population in excess of 100 million potential users. the important thing to understand about these locales, is that the entire interface is mirrored right-to-left. that means that text that had a left margin will have a right margin instead (or -moz-margin-start), arrows that pointed right will have to point left and vice versa, and so on. a screenshot of firefox 2 in hebrew what you need to do at this stage you might ask yourself, "how would i know what language is my theme installed on? should i make a special theme for these locales?" don't despair: making a theme rtl-compatible is fairly easy! gecko 1.9.2 and later gecko 1.9.2 introduced the :-...
...to apply a rtl rule to #c; neither it nor its * parent element #b has a chromedir attribute, but its * grandparent element #a does. */ #a > #b > #c { /* normal rules */ } #a[chromedir="rtl"] > #b > #c { /* rtl rules */ } tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images. instead, just use the opposite arrow when in rtl context. ...
...ack and forward arrows, you don't really need new versions of the images. instead, just use the opposite arrow when in rtl context. using start/end rules instead of left/right rules directions are mirrored in rtl mode, so left becomes right and right becomes left. as a result, you almost never want to use left/right rules for paddings, borders, and margins. ...
...And 5 more matches

Flexbox - Learn web development
ht is available. making all columns in a multiple column layout adopt the same height even if they contain a different amount of content. as you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. let's dig in! introducing a simple example in this article we are going to get you to work through a series of exercises to help you understand how flexbox works. to get started, you should make a local copy of the first starter file — flexbox0.html from our github repo — load it in a modern browser (like firefox or chrome), and have a look at the code in your code editor. you can see it live here also. you'll see that we have a <header> element with a top level heading inside it, and a <section> element containing three <article>s. we are going to use these to cr...
...d it in a modern browser (like firefox or chrome), and have a look at the code in your code editor. you can see it live here also. you'll see that we have a <header> element with a top level heading inside it, and a <section> element containing three <article>s. we are going to use these to create a fairly standard three column layout. specifying what elements to lay out as flexible boxes to start with, we need to select which elements are to be laid out as flexible boxes. to do this, we set a special value of display on the parent element of the elements you want to affect. in this case we want to lay out the <article> elements, so we set this on the <section>: section { display: flex; } this causes the <section> element to become a flex container, and its children to become flex item...
...can use a display value of inline-flex if you wish to lay out an element's children as flex items, but have that element behave like an inline element. the flex model when elements are laid out as flex items, they are laid out along two axes: the main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) the start and end of this axis are called the main start and main end. the cross axis is the axis running perpendicular to the direction the flex items are being laid out in. the start and end of this axis are called the cross start and cross end. the parent element that has display: flex set on it (the <section> in our example) is called the flex container. the items being laid out as flexible boxes in...
...And 5 more matches

Manipulating documents - Learn web development
ple, 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 terminology before working with the dom, as a number of the code terms you'll come across make use of them. you may have also come across them if you have studied css (e.g. descendant selector, child selector). active learning: basic dom manipulation 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: ...
...le.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 text inside the link by updating the value of the node.textcontent property. add the following line below the previous one: ...
...array = document.getelementsbytagname('p'). these two work in older browsers than the modern methods like queryselector(), but are not as convenient. have a look and see what others you can find! creating and placing new nodes the above has given you a little taste of what you can do, but let's go further and look at how we can create new elements. ...
...And 5 more matches

React interactivity: Events and state - Learn web development
previous overview: client-side javascript frameworks next with our component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things. 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. objective: to learn about handling events and state in react, and use those to start making the case study app interactive. handling events if you've only written vanilla javascript before now, you might be used to having a sep...
... 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 end up looking something like this: function handlesubmit(e) { e.preventdefault(); alert('hel...
...ction: <form onsubmit={handlesubmit}> now if you head back to your browser and click on the "add" button, your browser will show you an alert dialog with the words "hello, world!" — or whatever you chose to write there. callback props in react applications, interactivity is rarely confined to just one component: events that happen in one component will affect other parts of the app. when we start giving ourselves the power to make new tasks, things that happen in the <form /> component will affect the list rendered in <app />. we want our handlesubmit() function to ultimately help us create a new task, so we need a way to pass information from <form /> to <app />. we can't pass data from child to parent in the same way as we pass data from parent to child using standard props. instead, w...
...And 5 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
in this article we will add the app's final features and further componentize our app. we will learn how to deal with reactivity issues related to updating objects and arrays. to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system. we'll also look at solving some accessibility focus issues, and more besides. ...
...s heading. 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/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons. let's create a component that will be in charge of displaying the buttons and emitting the corresponding events. create a new file — c...
... function when a component is instantiated, svelte runs the initialization code (that is, the <script> section of the component). but at that moment, all the nodes that comprise the component are not attached to the dom, in fact, they don't even exist. ...
...And 5 more matches

Introduction to cross browser testing - Learn web development
objective: to gain an understanding of the high-level concepts involved in cross browser testing. what is cross browser testing? cross browser testing is the practice of making sure that the web sites and web apps you create work across an acceptable number of web browsers. ...
...just because your site works on your macbook pro or high-end galaxy nexus, doesn't mean it will work for all your users — there's a whole lot of testing to be done! note: make the web work for everyone provides more useful perspective on the different browsers people use, their market share, and related cross browser compatibility issues. we should explain a few bits of terminology here. to start with, when we talk about sites "working cross browser", we are really saying that they should provide an acceptable user experience across different browsers. it is potentially ok for a site to not deliver the exact same experience on all browsers, as long as the core functionality is accessible in some way. on modern browsers you might get something animated, 3d and shiny, whereas on older brows...
...this point you'll also want to know how much time you have to develop the site — what is their deadline, and how much are they going to pay you for your work? we won't go into much detail about this, but cross-browser issues can have a serious effect on such planning. once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? the client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. if not, you will be able to get a good idea by looking at other sources, such as usage stats for compe...
...And 5 more matches

Strategies for carrying out testing - Learn web development
previous overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing. objective: to gain an understanding of the high-level concepts involved in cross-browser testing. gotta test 'em all? when doing cross-browser testing, you need to work out a list of browsers you will need to test on to start with. there is no way you can test on ev...
...king 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. ...
...e 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. ...
...And 5 more matches

Command line crash course - Learn web development
ewing the command line for the first time can be a daunting experience: a blank screen and a blinking cursor, with very little obvious help available on what to do. on the surface they’re far from welcoming but there’s a lot you can do with them, and we promise that, with a bit of guidance and practise, using them will get easier! this is why we are providing this chapter — to help you get started in this seemingly unfriendly environment. where did the terminal come from? the terminal originates from around the 1950s-60s and its original form really doesn’t resemble what we use today (for that we should be thankful). you 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 — fr...
...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 terminal? many developers today are using unix-based tools (e.g. the terminal, and the tools you can access through it). many tutorials and tools that exist on the web today support (and sadly assume) unix-based systems, but not to worry — they are available on most systems. in t...
...windows, we’d strongly recommend trying to install the wsl. you could stick with the default command prompt (cmd), and many tools will work ok, but you’ll find everything easier if you have better parity with unix tools. side note: what's the difference between a command line and a terminal? generally you'll find these two terms used interchangeably. technically, a terminal is software that starts and connects to a shell. a shell is your session and session environment (where things like the prompt and shortcuts might be customised). the command line is the literal line where you enter commands and the cursor blinks. do you have to use the terminal? although there's a great wealth of tools available from the command line, if you're using tools like visual studio code there's also a mass...
...And 5 more matches

Eclipse CDT
ools) is an open-source ide for c and c++ development with advanced code assistance (inheritance/call graph explorer, jump to definition, refactoring, autocomplete, syntax highlighting, and so on). system requirements eclipse will use a lot of memory to fully index the mozilla source tree to provide code assistance features (easily 4 gb of ram, although this will drop to just over 1 gb if you restart after indexing is 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 th...
...back here at some point. keeping the index up-to-date as the source changes from day-to-day, you'll want to update the index to keep the code assistance working well. since the compiler options used to build the source change relatively infrequently, the "build" step above doesn't need to be rerun all that often. rerun it (and then rebuild the index) once a week or so, or as necessary when you start to notice unusual code assistance issues that aren't fixed by rebuilding the index alone. rebuilding the index itself is required much more frequently since the source changes more frequently. in principle, you can set the index to rebuild automatically by opening the workspace preferences, selecting "c/c++ > indexer", and reenabling "automatically update the index". however, you may find this t...
...e mouse slightly is eclipse bug 26873). alternately, you can jump to the definition of the symbol under the cursor by pressing f3. to do a c++ symbol search select "search > c/c++" from the menubar, or use ctrl-h and select the "c/c++" search tab. to quickly find the definition of an enum, class, method, etc. use ctrl-shift-t/cmd-shift-t. to get a list of autocomplete options in an editor tab, start typing the name of an identifier and then type ctrl-space. unfortunately, the autocomplete list cannot (currently) be configured to appear automatically as soon as you start typing a character that might be the start of an identifier name. to see the callers of a method (and their callers, etc.), select the method and use the context menu to select "open call hierarchy". note that there are butt...
...And 5 more matches

InstallListener
installlisteners are notified of an addoninstall's progress. they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener. ...
... through addlistener. ...
...all install) void ondownloadfailed(in addoninstall install) void oninstallstarted(in addoninstall install) void oninstallended(in addoninstall install, in addon addon) void oninstallcancelled(in addoninstall install) void oninstallfailed(in addoninstall install) void onexternalinstall(in addon install, in addon existingaddon, in boolean needsrestart) methods onnewinstall() called when a new instance of addoninstall is created, primarily so ui can display some kind of progress for all installs. void onnewinstall( in addoninstall install ) parameters install the addoninstall representing the install ondownloadstarted() called when downloading begins for an add-on install. only called for add-ons that need to be downloaded. ...
...And 5 more matches

Bootstrapping a new locale
we'll first navigate to the directory called "browser" by running the following commands one after the other from your command line: $ cd [ab-cd]/browser/chrome/browser to see what is contained in "browser" type $ ls and, you should see the following outpu...
... ab-cd/extensions cp -r mozilla-1.9.x/netwerk/locales/ ab-cd/netwerk cp -r mozilla-1.9.x/other-licenses/branding/firefox/locales/ ab-cd/other-licenses cp -r mozilla-1.9.x/security/manager/locales/ ab-cd/security cp -r mozilla-1.9.x/toolkit/locales/ ab-cd/toolkit getting started change your directory to the new working directory so you are in the ~/[your working directory]/[ab-cd]/ path and can start localizing. we'll first navigate to the directory called "browser" by running the following commands one after the other from your command line: $ cd [ab-cd]/browser/chrome/browser to see what is contained in "browser" type $ ls and, you should see the following output from your terminal: aboutcerterror.dtd pageinfo.dtd aboutdialog.dtd pageinfo.properties aboutpriva...
...d feeds shellservice.properties history sidebar migration tabbrowser.dtd openlocation.dtd tabbrowser.properties openlocation.properties as a localizer, you are responsible for localizing each of the ".dtd" and ".properties" in *all* of the sub-directories found in your ab-cd directory. ...
...And 5 more matches

DMD
launch use mach run --dmd; use --mode to choose the mode. add --debug to run under gdb. trigger there are three ways to trigger a dmd snapshot. visit about:memory and click the dmd 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); ...
.... you can do this by running: adb push $objdir/dist/bin/libdmd.so /sdcard/ second, you will need to make an executable wrapper for fennec which sets an environment variable before launching it. (if you are familiar with the recommended "--es env0" method for setting environment variables when launching fennec, note that you cannot use this method here because those are processed too late in the startup process. if you are not familiar with that method, you can ignore this parenthetical note.) first make the executable wrapper on your host machine using the editor of your choice. name the file dmd_fennec and enter this as the contents: #!/system/bin/sh export moz_replace_malloc_lib=/sdcard/libdmd.so exec "$@" if you want to use other dmd options, you can enter additional environment variabl...
.... you will need to push this to the device and make it executable. since you cannot mark files in /sdcard/ as executable, we will use /data/local/tmp for this purpose: adb push dmd_fennec /data/local/tmp adb shell cd /data/local/tmp chmod 755 dmd_fennec the final step is to make android use the above wrapper script while launching fennec, so that the environment variable is present when fennec starts up. assuming you have done a local build, the app identifier will be org.mozilla.fennec_$username ($username is your username on the host machine) and so we do this as shown below. if you are using a dmd-enabled try build, or build from other source, adjust the app identifier as necessary. adb shell su # you need root access for the setprop command to take effect setprop wrap.org.mozilla.fen...
...And 5 more matches

Profiling with Xperf
xperf is part of the microsoft windows performance toolkit, and has functionality similar to that of shark, oprofile, and (for some things) dtrace/instruments. for stack walking, windows vista or higher is required; i haven't tested it at all on xp. this page applies to xperf version 4.8.7701 or newer. to see your xperf version, either run 'xperf' on a command line with no arguments, or start 'xperfview' and look at help -> about performance analyzer. (note that it's not the first version number in the about window; that's the windows version.) if you have an older version, you will experience bugs, especially around symbol loading for local builds. installation for all versions, the tools are part of the latest windows 7 sdk (sdk version 7.1). use the web installer to install at l...
...kit folder of the sdk's install location (typically program files/microsoft sdks/windows/v7.1/redist/windows performance toolkit) to actually install the windows performance toolkit tools. it might already be installed by the windows sdk. check if c:\program files\microsoft windows performance toolkit already exists. for 64-bit windows 7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu. just make sure you set the symbol paths before enabling "load symbols" and ...
...bol path is edited. if you change it within the program, you'll have to close all summary tables and reopen them for it to pick up the new symbol path data. you'll have to agree to a eula for the microsoft symbols -- if you're not prompted for this, then something isn't configured right in your symbol path. ...
...And 5 more matches

nsIAppShellService
/appshellservice;1 as a service: var appshellservice = components.classes["@mozilla.org/appshell/appshellservice;1"] .getservice(components.interfaces.nsiappshellservice); method overview void closetoplevelwindow(in nsixulwindow awindow); obsolete since gecko 1.8 void createhiddenwindow(in nsiappshell aappshell); native code only! ...
...an createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.8 nsixulwindow createtoplevelwindow(in nsixulwindow aparent, in nsiuri aurl, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell); nsiwebnav createwindowlessbrowser (in bool aischrome) void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 void enterlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void exitlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void gethiddenwindowandjscontext(out nsidomwindow ahidd...
...irefox 1.5 / thunderbird 1.5 / seamonkey 1.0) close a window. void closetoplevelwindow( in nsixulwindow awindow ); parameters awindow a window. native code only!createhiddenwindow creates a hidden window. void createhiddenwindow( in nsiappshell aappshell ); parameters aappshell a widget "appshell" (event processor) to associate with the new window. ...
...And 5 more matches

nsIDownloadManager
emented by: @mozilla.org/download-manager;1. ...
...read only. activedownloads nsisimpleenumerator an enumeration of active nsidownloads. read only. cancleanup boolean whether or not there are downloads that can be cleaned up (remo...
...les are downloaded to the desktop by default. 1: files are downloaded to the system's downloads folder by default. 2: files are downloaded to the local path specified by the browser.download.dir preference. if this preference is invalid, the download directory falls back to the default. read only. constants constant value description download_notstarted -1 the download has not been started yet. download_downloading 0 the download is in the process of being downloaded. download_finished 1 download completed including any processing of the target file. download_failed 2 the download failed due to error. download_canceled 3 the user canceled the download. download_paused ...
...And 5 more matches

Mozilla
ation chrome is the set of user interface elements of the application window that are outside the window's content area. toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome. command line options command line options are used to specify various startup options for mozilla applications.this page describes the commonly used options and how to use them. you can open the command line interface by pressing shift + f2. continuous integration when you push a commit to mozilla-central or a related repository, it initiates a large chain of builds and tests across multiple types of infrastructure. this doc...
...o for example, on kde is is desirable to fully employ the kde wallet manager, rather than any secondary replacements of kdewallet. creating a spell check dictionary add-on this page describes how to package a hunspell spell check dictionary as a firefox add-on, or how to update your existing add-on, so that it can be installed, uninstalled and updated without a restart. creating javascript callbacks in components xpcom components use idl to create interfaces. these interfaces are used to manipulate the component in c++ and javascript. a common pattern used with interfaces to create a bi-directional communication between two groups of code is the observer (or listener) pattern. basically, the component defines an ob...
...way to achieve any given visual effect in a browser. so, if the effect of complex markup is being tested, put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect. reftest will then compare them and verify whether they produce the same bitmap. creating sandboxed http connections starting with gecko 1.8.1 (firefox 2), it is possible to create sandboxed http connections which don't affect the user's cookies. this article will cover the basics of doing http connections from xpcom javascript, and should easily translate to c++ xpcom. debugging debugging a project as large as mozilla can be a daunting task. fortunately, ove...
...And 5 more matches

CanvasRenderingContext2D - Web APIs
110); // door ctx.fillrect(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas. ...
... drawing text the following methods draw text. see also the textmetrics object for text properties. canvasrenderingcontext2d.filltext() draws (fills) a given text at the given (x, y) position. ...
...es meet. possible values: round, bevel, miter (default). canvasrenderingcontext2d.miterlimit miter limit ratio. default 10. canvasrenderingcontext2d.getlinedash() returns the current line dash pattern array containing an even number of non-negative numbers. canvasrenderingcontext2d.setlinedash() sets the current line dash pattern. canvasrenderingcontext2d.linedashoffset specifies where to start a dash array on a line. text styles the following properties control how text is laid out. canvasrenderingcontext2d.font font setting. default value 10px sans-serif. canvasrenderingcontext2d.textalign text alignment setting. possible values: start (default), end, left, right, center. canvasrenderingcontext2d.textbaseline baseline alignment setting. possible values: top, hanging, middle...
...And 5 more matches

MediaStreamConstraints.audio - Web APIs
icy enabled, the samples below need the microphone feature enabled. see security in mediadevices.getusermedia() for details and examples on how to configure this. using a boolean value in this example, we provide a simple value of true for the audio property. this tells getusermedia() that we require an audio track, but we don't care about any specifics beyond that. ...
...nabled. see security in mediadevices.getusermedia() for details and examples on how to configure this. using a boolean value in this example, we provide a simple value of true for the audio property. this tells getusermedia() that we require an audio track, but we don't care about any specifics beyond that. ...
...vices.getusermedia() for details and examples on how to configure this. using a boolean value in this example, we provide a simple value of true for the audio property. this tells getusermedia() that we require an audio track, but we don't care about any specifics beyond that. ...
...And 5 more matches

MediaStreamConstraints.video - Web APIs
ed values or ranges of values for the track's constrainable properties. if you specify constraints, a video track meeting these constraints is required. examples using a boolean value in this example, we provide a simple value of true for the video property. this tells getusermedia() that we require a video track, but we don't care about any specifics beyond that. ...
...properties. if you specify constraints, a video track meeting these constraints is required. examples using a boolean value in this example, we provide a simple value of true for the video property. this tells getusermedia() that we require a video track, but we don't care about any specifics beyond that. ...
...traints, a video track meeting these constraints is required. examples using a boolean value in this example, we provide a simple value of true for the video property. this tells getusermedia() that we require a video track, but we don't care about any specifics beyond that. ...
...And 5 more matches

PerformanceResourceTiming - Web APIs
ysis of detailed network timing data regarding the loading of an application's resources. an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script. the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc.. additionally, the interface extends performanceentry with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 1...
...xt { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers. properties this interface extends the following performanceentry properties for resource performance entry types by qualifying and constraining them as follows: performanceentry.entrytyperead only returns "resource". performanceentry.nameread only returns the resources url. performanceentry.starttimeread only returns the timestamp for the time a resource fetch started. this value is equivalent to performanceentry.fetchstart. performanceentry.durationread only returns a timestamp that is the difference between the responseend and the starttime properties. the interface also supports the following properties which are listed in the order in which they are recorded for the fetching of...
... performanceresourcetiming.initiatortyperead only a string representing the type of resource that initiated the performance entry, as specified in performanceresourcetiming.initiatortype. performanceresourcetiming.nexthopprotocolread only a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301). ...
...And 5 more matches

Range - Web APIs
a range can be created by using the document.createrange() method. range objects can also be retrieved by using the getrangeat() method of the selection object or the caretrangefrompoint() method of the document object. there also is the range() constructor available. properties there are no inherited properties. ...
...thod of the selection object or the caretrangefrompoint() method of the document object. there also is the range() constructor available. properties there are no inherited properties. range.collapsed read only returns a boolean indicating whether the range's start and end points are at the same position. range.commonancestorcontainer read only returns the deepest node that contains the startcontainer and endcontainer nodes. range.endcontainer read only returns the node within which the range ends. ...
... a boolean indicating whether the range's start and end points are at the same position. range.commonancestorcontainer read only returns the deepest node that contains the startcontainer and endcontainer nodes. range.endcontainer read only returns the node within which the range ends. range.endoffset read only returns a number representing where in the endcontainer the range ends. range.startcontainer read only returns the node within which the range starts. range.startoffset read only returns a number representing where in the startcontainer the range starts. constructor range() returns a range object with the global document as its start and end. methods there are no inherited methods. range.setstart() sets the start position of a range. range.setend() sets the...
...And 5 more matches

Using the Web Animations API - Web APIs
meet the web animations api the web animations api opens the browser’s animation engine to developers and manipulation by javascript. this api was designed to underlie implementations of both css animations and css transitions, and leaves the door open to future animation effects. it is one of the most performant ways to animate on the web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe(). ...
... animations api features discussed in this article are available by default in firefox 48+ and chrome 36+. safari supports web animations in its technology preview version and there is also a handy polyfill that tests for feature support and adds it where necessary. writing css animations with the web animations api one of the more familiar ways to approach learning the web animations api is to start with something most web developers have played with before: css animations. css animations have a familiar syntax that breaks down nicely for demonstration purposes. the css version here’s a tumbling animation written in css showing alice falling down the rabbit hole that leads to wonderland (see the full code on codepen): notice that the background moves, alice spins, and her color change...
... unless told otherwise. when we want to explicitly set a key’s offset from the other keys, we can specify an offset directly in the object, separated from the declaration with a comma. in the above example, to make sure that alice’s color changes at 30% (not 50%) for the color change, we are giving it offset: 0.3. currently, there should be at least two keyframes specified (representing the starting and ending states of the animation sequence). if your keyframe list has only one entry, element.animate() may throw a notsupportederror exception in some browsers until they are updated. so to recap, the keys are equally spaced by default unless you specify an offset on a key. handy, no? representing timing properties we’ll also need to create an object of timing properties (an animatione...
...And 5 more matches

Border-image generator - CSS: Cascading Style Sheets
entlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend...
...t.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value; setvalue(obj.topic, value); }; return slider; }; var inputslider = function(node) { var min = parsefloat(node.getattribute('data-min')); var max = parsefloat(node.getattribute('data-max')); var step = parsefloat(node.getattribute('data-step')); var value = parsefloat(node.getattribute('data-value')); var ...
...ad", function() { borderimage.init(); }); var borderimage = (function borderimage() { var getelembyid = document.getelementbyid.bind(document); var subject; var preview; var guidelines = []; var positions = ['top', 'right', 'bottom', 'left']; var makedraggable = function makedraggable(elem) { var offsettop; var offsetleft; elem.setattribute('data-draggable', 'true'); var dragstart = function dragstart(e) { if (e.target.getattribute('data-draggable') !== 'true' || e.target !== elem || e.button !== 0) return; offsetleft = e.clientx - elem.offsetleft; offsettop = e.clienty - elem.offsettop; document.addeventlistener('mousemove', mousedrag); document.addeventlistener('mouseup', dragend); }; var dragend = function dragend(e) { if (e.button !== 0...
...And 5 more matches

Using CSS gradients - CSS: Cascading Style Sheets
) functions. gradients can be used anywhere you would use an <image>, such as in backgrounds. because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. in addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly. we'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you need is to specify two color...
...} .auto-spaced-linear-gradient { background: linear-gradient(red, yellow, blue, orange); } positioning color stops you don't have to leave your color stops at their default positions. to fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. if you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want. if you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at 0% and the last color stop being at 100%, and any other color stops being half way between their adjacen...
...0px, yellow 30%, #1e90ff 50%); } sizing radial gradients unlike linear gradients, you can specify the size of radial gradients. possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default. example: closest-side for ellipses this example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box. <div class="radial-ellipse-side"></div> div { width: 240px; height: 100px; } .radial-ellipse-side { background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige); } example: farthest-corner for ellipses this example is similar to the previous one, except that its size is specified as fa...
...And 5 more matches

text-align - CSS: Cascading Style Sheets
n the horizontal direction. 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. ...
... end the same as right if direction is left-to-right and left if direction is right-to-left.
... end the same as right if direction is left-to-right and left if direction is right-to-left. ...
...And 5 more matches

transition-timing-function - CSS: Cascading Style Sheets
ansition property. if there are more timing functions, the list is simply truncated to the right size. in both cases, the css declaration stays valid. ...
... transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* function values */ transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* steps function keywords */ transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ transition-timing-function:...
... of intervals that are equal in length. it is defined by a number of steps and a step position. ease equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the transition, slowing back down at the end. linear equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), transitions at an even speed. ease-in equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the transition speed increasing until complete. ease-out equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues. • ease-in-out equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again. cubic-bezier(p1, p2, p3, p4) an author defined cubic-bezier curve, where the ...
...And 5 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
ything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth. border-color specifies a single color to use for every side of the element's border. border-left-color, border-right-color, border-top-color, and border-bottom-color lets you set the color of the corresponding side of the element's border. ...
..., and so forth. border-color specifies a single color to use for every side of the element's border. border-left-color, border-right-color, border-top-color, and border-bottom-color lets you set the color of the corresponding side of the element's border. border-block-start-color and border-block-end-color with these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. ...
...er-right-color, border-top-color, and border-bottom-color lets you set the color of the corresponding side of the element's border. border-block-start-color and border-block-end-color with these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. in a left-to-right writing mode (such as the way english is written), the block start border is the top edge and the block end is the bottom. this differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends). border-inline-start-color and border-inline-end-color these let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. which s...
...And 5 more matches

<input type="email"> - HTML: Hypertext Markup Language
dress to be restricted further than just "any string that looks like an e-mail address," you can use the pattern attribute to specify a regular expression the value must match for it to be valid. if the multiple attribute is specified, each individual item in the comma-delineated list of values must match the regular expression. for example, let's say you're building a page for employees of best startup ever, inc. which will let them contact their it department for help. in our simplified form, the user needs to enter their e-mail address and a message describing the problem they need help with. we want to ensure that not only does the user provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address. since inputs of type email...
...t's see how: body { font: 16px sans-serif; } .emailbox { padding-bottom: 20px; } .messagebox { padding-bottom: 20px; } label { line-height: 22px; } label::after { content: ":"; } <form> <div class="emailbox"> <label for="emailaddress">your e-mail address</label><br> <input id="emailaddress" type="email" size="64" maxlength="64" required placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" title="please provide only a best startup ever corporate e-mail address"> </div> <div class="messagebox"> <label for="message">request</label><br> <textarea id="message" cols="80" rows="8" required placeholder="my shoes are too tight, and i have forgotten how to dance."></textarea> </div> <input type="submit" value="se...
...s take a closer look at the e-mail address entry box. its size and maxlength attributes are both set to 64 in order to show room for 64 characters worth of e-mail address, and to limit the number of characters actually entered to a maximum of 64. the required attribute is specified, making it mandatory that a valid e-mail address be provided. an appropriate placeholder is provided—username@beststartupever.com—to demonstrate what constitutes a valid entry. this string demonstrates both that an e-mail address should be entered, and suggests that it should be a corporate beststartupever.com account. this is in addition to the fact that using type email will validate the text to ensure that it's formatted like an e-mail address. if the text in the input box isn't an e-mail address, you'll get ...
...And 5 more matches

Indexed collections - JavaScript
derstanding length at the implementation level, javascript's arrays actually store their elements as standard object properties, using the array index as the property name. the length property is special. it always returns the index of the last element plus one. (in the example below, 'dusty' is indexed at 30, so cats.length returns 30 + 1). remember, javascript array indexes are 0-based: they start at 0, not 1. this means that the length property will be one more than the highest index stored in the array: let cats = [] cats[30] = ['dusty'] console.log(cats.length) // 31 you can also assign to the length property. writing a value that is shorter than the number of stored items truncates the array. writing 0 empties it entirely: let cats = ['dusty', 'misty', 'twiggy'] console.log(cats.l...
...removes the first element from an array and returns that element. let myarray = new array('1', '2', '3') let first = myarray.shift() // myarray is now ["2", "3"], first is "1" unshift() adds one or more elements to the front of an array and returns the new length of the array. ...
...irst is "1" unshift() adds one or more elements to the front of an array and returns the new length of the array. let myarray = new array('1', '2', '3') myarray.unshift('4', '5') // myarray becomes ["4", "5", "1", "2", "3"] slice(start_index, upto_index) extracts a section of an array and returns a new array. let myarray = new array('a', 'b', 'c', 'd', 'e') myarray = myarray.slice(1, 4) // starts at index 1 and extracts all elements // until index 3, returning [ "b", "c", "d"] splice(index, count_to_remove, addelement1, addelement2, ...) removes elements from an array and (optionally) replaces them. it returns the items which were removed from the array. let myarray = new array('1', '2', '3', '4', '5') myarray.splice(1, 3, 'a', 'b', 'c', 'd') // myarray ...
...And 5 more matches

DataView - JavaScript
combine the two 32-bit values and return return littleendian ? (right<<bigthirtytwo)|left : (left<<bigthirtytwo)|right; } constructor dataview() creates a new dataview object. instance properties dataview.prototype.buffer the arraybuffer referenced by this view. fixed at construction time and thus read only. dataview.prototype.bytelength the length (in bytes) of this view from the start of its arraybuffer. fixed at construction time and thus read only. dataview.prototype.byteoffset the offset (in bytes) of this view from the start of its arraybuffer. fixed at construction time and thus read only. instance methods dataview.prototype.getint8() gets a signed 8-bit integer (byte) at the specified byte offset from the start of the view. dataview.prototype.getuint8() gets an...
...prototype.byteoffset the offset (in bytes) of this view from the start of its arraybuffer. fixed at construction time and thus read only. instance methods dataview.prototype.getint8() gets a signed 8-bit integer (byte) at the specified byte offset from the start of the view. dataview.prototype.getuint8() gets an unsigned 8-bit integer (unsigned byte) at the specified byte offset from the start of the view. dataview.prototype.getint16() gets a signed 16-bit integer (short) at the specified byte offset from the start of the view. dataview.prototype.getuint16() gets an unsigned 16-bit integer (unsigned short) at the specified byte offset from the start of the view. ...
... from the start of the view. dataview.prototype.getint16() gets a signed 16-bit integer (short) at the specified byte offset from the start of the view. dataview.prototype.getuint16() gets an unsigned 16-bit integer (unsigned short) at the specified byte offset from the start of the view. dataview.prototype.getint32() gets a signed 32-bit integer (long) at the specified byte offset from the start of the view. dataview.prototype.getuint32() gets an unsigned 32-bit integer (unsigned long) at the specified byte offset from the start of the view. dataview.prototype.getfloat32() gets a signed 32-bit float (float) at the specified byte offset from the start of the view. ...
...And 5 more matches

Promise - JavaScript
cessmessage) => { // successmessage is whatever we passed in the resolve(...) function above. // it doesn't have to be a string, but if it is only a succeed message, it probably will be. console.log("yay! " + successmessage) }); example with diverse situations this example shows diverse techniques for using promise capabilities, and diverse situations that can occur. to understand this, start by scrolling to the bottom of the code block, and examine the promise chain. upon provision of an initial promise, a chain of promises can follow. the chain is composed of .then() calls, and typically (but not necessarily) has a single .catch() at the end, optionally followed by .finally(). in this example, the promise chain is initiated by a custom written new promise() construct; but in actual ...
...block, and examine the promise chain. upon provision of an initial promise, a chain of promises can follow. the chain is composed of .then() calls, and typically (but not necessarily) has a single .catch() at the end, optionally followed by .finally(). in this example, the promise chain is initiated by a custom written new promise() construct; but in actual practice, promise chains more typically start with an api function (written by someone else) that returns a promise. the example function tetheredgetnumber() shows that a promise generator will utilize reject() while setting up an asynchronous call, or within the call-back, or both. the function promisegetword() illustrates how an api function might generate and return a promise in a self contained manner. note that function troublewithget...
...omisegetword(): ${reason}`); } }) .finally((info) => console.log("all done")); advanced example <button id="btn">make a promise!</button> <div id="log"></div> this small example shows the mechanism of a promise. the testpromise() method is called each time the <button> is clicked. it creates a promise that will be fulfilled, using window.settimeout(), to the promise count (number starting from 1) every 1-3 seconds, at random. the promise() constructor is used to create the promise. the fulfillment of the promise is simply logged, via a fulfill callback set using p1.then(). a few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise. "use strict"; var promisecount = 0; function testpromise() { let thispromisecount = ++...
...And 5 more matches

Search Extension Tutorial (Draft) - Archive of obsolete content
ult preference branch, as explained below. while the technical details below are important to understand, a library which encapsulates the appropriate logic is provided along with the example add-on at the end, and should be used where possible. changing default preference values there are two common ways of changing default preference values. the simplest, which works only for traditional, non-restartless add-ons, is to add the preference changes to a file in an extension's defaults/preferences/ directory. the following file, for instance, would change the default keyword search engine, assuming that an engine with the name example engine is installed, as described below: // this is a localizable preference, so it must contain a url which // points at a properties file containing the preferenc...
...ne, assuming that an engine with the name example engine is installed, as described below: // this is a localizable preference, so it must contain a url which // points at a properties file containing the preference name as a // property. we use a data: url for simplicity. pref("browser.search.defaultenginename", "data:text/plain,browser.search.defaultenginename=example engine"); in the case or restartless extensions, the preferences need to be changed manually, and reverted when the extension is disabled if they have not been changed in the meantime. while changes to default preference values will not persist across sessions, restartless extensions must nevertheless restore them for the balance of the session after they have been disabled. the following example bootstrap.js file illustrates th...
...); // save the original and new values. savedprefs[name] = [defaultprefs.getcharpref(name), value]; // change the default defaultprefs.setcharpref(name, value); // clear the user value if this is the first run, or the // new default is the same as the user value. if (firstrun || userprefs.getcharpref(name) == value) userprefs.clearuserpref(name); } function startup(data, reason) { firstrun = reason == addon_install; // change the default engine name. // an engine with this name must already exist. setpref("browser.search.defaultenginename", "example engine", true); } function shutdown(data, reason) { // no need to do this if this is app shutdown. if (reason == app_shutdown) return; // reset our changes if the values ...
...And 4 more matches

Repackaging Firefox - Archive of obsolete content
the article is about repackaging firefox 2.0 and is obsolete when working on 3.x repackaging. firefox can be customized for the needs of a particular group of users (for example, your organization's employees or clients). because firefox is designed from the ground up for extensibility and customization, this process is simple and easy to maintain. important legal considerations before you get started, it is very important to know and abide by the legal requirements for distributing firefox. you must have written authorization from mozilla to distribute a modified version of firefox. to do this, please contact trademarks@mozilla.com. getting started now, on to the technical details. the following diagram represents an overview of the process and the pieces involved: you will need the fo...
... the repackager tool. ...
...er files (windows .exe, mac .dmg, or linux .tar.gz) for each of the locales you need. at the time of writing this document, the latest builds are here. a "distro" extension that makes the changes you desire. once you have all the ingredients, the customization process is quite easy: download the firefox installer. install the repackager tool like you would any mac application. make sure it starts up and launches the gui. put together your extension that customizes firefox. the distro extension all the changes you will want to make (for example, changing the default homepage or adding default bookmarks) can be encapsulated into a firefox extension. we call this extension a "distro extension" (sometimes abbreviated as "dex"), because it is used to create a new "distribution" of firefox...
...And 4 more matches

RDF Modifications - Archive of obsolete content
w triple to the rdf datasource. when this happens, any templates observing the datasource will be notified via the rdf observer's onassert method. the second situation when notifications are made is when a datasource is being loaded or reloaded. actually, internally, this isn't any different than the other notifications, but it is worth discussing separately. when the rdf parser loads rdf/xml, it starts with a new empty datasource, and as the parser parses the input data, it calls the datasource's assert function to add each found triple. in effect, this isn't any different than adding the same set of triples yourself using the assert method. when reloading a datasource, you might think that the rdf parser removes all the existing data, loads the new data, and adds it to the datasource. or, you...
..., the builder won't make any changes. if the output would change, the builder will need to adjust the output, either by adding a new result, removing an old result, or by changing the value of some part of the result. the builder is smart enough to only change what needs to be changed and leave the remaining parts alone. ...
...anges. if the output would change, the builder will need to adjust the output, either by adding a new result, removing an old result, or by changing the value of some part of the result. the builder is smart enough to only change what needs to be changed and leave the remaining parts alone. let's assume we have single query with as follows: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> </query> these query statements will cause any photos with both a title and a description to be displayed. assuming that the '...
...And 4 more matches

calICalendarView - Archive of obsolete content
e/public/calicalendarview.idlscriptable please add a summary to this article. ...
...ticle. ...
...lendarview will not provide its own controller, but rather rely on other code to set this attribute. implementations should therefore be wary to check whether a controller has been assigned to the view, before calling any of the methods it implements.note that in most cases, this attribute will be set by the consumers of calicalendarview very early in an application/extension's loading process. startdate returns a calidatetime corresponding to the first date shown by the view enddate returns a calidatetime corresponding to the last date shown by the view. note that this date is typically not immediately useful for querying for the events and tasks shown in the calicalendarview. typically, one more day must be added to it, in order to make it exclusive. supportsdisjointdates consumers o...
...And 4 more matches

Index - Game development
ebgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich interactive animations and of course, also games. you can generate and render dynamic 3d graphics with javascript that is hardware accelerated. 16 building up a basic demo with a-frame 3d, a-frame, vr, virtual reality, web, webgl 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 protot...
...g three, including setting up a development environment, structuring the necessary html, the fundamental objects of three, and how to build up a basic demo. 22 explaining basic 3d theory 3d, coordinates, textures, basics, fragment, lighting, primitives, rendering, theory, vertex, vertices this article explains all of the basic theory that's useful to know when you are getting started working with 3d. 23 glsl shaders beginner, glsl, opengl, shader, texture shader, three.js, vertex shader shaders use glsl (opengl shading language), a special opengl shading language with syntax similar to c. glsl is executed directly by the graphics pipeline. there are two types of shaders: vertex shaders and fragment (pixel) shaders. vertex shaders transform shape positio...
...sync every medium or large game should compile asm.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process. in gecko, async compilation allows the javascript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in firefox 28). to see the difference, toggle javascript.options.parallel_parsing in about:config. 26 audio for web games audio, games, web audio api, audio sprites, spatialization, syncing tracks audio is an important part of any game; it adds feedback and atmosphere. web-based audio is maturing fast, but there are still many browser differences to navigate. we often need...
...And 4 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
tween a browser and a server so that humans can read them. the current version of the http specification is called http/2. 197 http header glossary, http header, webmechanics an http header is a field of an http request or response that passes additional information, altering or precising the semantics of the message or of the body. headers are case-insensitive, begins at the start of a line and are immediately followed by a ':' and a value depending of the header itself. the value finish at the next crlf or at the end of the message. 198 http/2 glossary, http, infrastructure, reference, web performance, l10n:priority http/2 is a major revision of the http network protocol 199 http/3 http, intro, needscontent http/3 is the upcoming ...
... first design, glossary, layout, layout mobile mobile first, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen sizes over design and development for desktop screen sizes. the rationale behind the mobile-first approach is to provide users with good user experiences at all screen sizes—by starting with creating a user experience that works well on small screens, and then building on top of that to further enrich the user experience as the screen size increases. the mobile-first approach contrasts with the older approach of designing for desktop screen sizes first, and then only later adding some support for small screen sizes. 274 modem infrastructure, navigation a ...
...ion is the information for delivering the payload. it consists of network addresses for the source and destination, sequencing information, and error detection codes and is generally found in packet headers and footer. 313 page load time glossary, timings, web performance, metrics, page load time page load time is the time it takes for a page to load, measured from navigation start to the start of the load event 314 page prediction glossary, security, web performance, page prediction page prediction is a browser feature or script which, when enabled, tells the browser to download resources the user is likely to visit before the user requests the content. page prediction improves performance by enabling almost instant loading of predicted content. howeve...
...And 4 more matches

What is accessibility? - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css. objective: to gain familiarity with 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. ...
...obile 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 use it — you are not your users. the main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ats). note: the world health organization's disability and health fact sheet states that "over a billion people, about 15% of the world's population, have some form of disabilit...
......
...And 4 more matches

Legacy layout methods - Learn web development
ot 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 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. repl...
...ld need to calculate percentage widths for the columns and gutters between them. in the next sections we will look at how to create both. we will create a 12 column grid — a very common choice that is seen to be very adaptable to different situations given that 12 is nicely divisible by 6, 4, 3, and 2. a simple fixed width grid lets first create a grid system that uses fixed width columns. start out by making a local copy of our sample simple-grid.html file, which contains the following markup in its body. <div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div cl...
... percentage. 60 / 960 = 0.0625 we then move the decimal point 2 places giving us a percentage of 6.25%. so, in our css we can replace the 60 pixel column width with 6.25%. we need to do the same with our gutter width: 20 / 960 = 0.02083333333 so we need to replace the 20 pixel margin-left on our .col rule and the 20 pixel padding-right on .wrapper with 2.08333333%. updating our grid to get started in this section, make a new copy of your previous example page, or make a local copy of our simple-grid-finished.html code to use as a starting point. update the second css rule (with the .wrapper selector) as follows: body { width: 90%; max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } not only have we given it a percentage width, we have also added a max...
...And 4 more matches

Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. looking to become a front-end web developer? ...
...emantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
...d other decorative features. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. in that module, you will learn about: css, starting with the introduction to css module more advanced html modules javascript, and how to use it to add dynamic functionality to web pages once you understand the fundamentals of html, we recommend that you learn html and css at the same time, moving back and forth between the two topics. this is because html is far more interesting and much more fun to learn when you apply css, and you can't ...
...And 4 more matches

Creating hyperlinks - Learn web development
html text formatting, as covered in html text fundamentals. objective: to learn how to implement a hyperlink effectively, and link multiple files together. ...
... touchscreens to navigate web pages will have difficulty accessing title information. if a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text. active learning: creating your own example link create an html document using your local code editor and our getting started template. inside the html body, add one or more paragraphs or other types of content you already know about. change some of the content into links. include title attributes. block level links as mentioned before, almost any content can be made into a link, even block-level elements. if you have an image you want to make into a link, use the <a> element and reference the image file with ...
...elative links wherever possible from the description above, you might think that it's a good idea to just use absolute links all the time because they don't break when a page is moved like relative links. however, you should use relative links wherever possible when linking to other locations within the same website. when you link to another website, you'll need to use an absolute link. for a start, it's easier to scan your code — relative urls are generally shorter than absolute urls, which makes reading code much easier. second, it's more efficient to use relative urls wherever possible. when you use an absolute url, the browser starts by looking up the real location of the server on the domain name system (dns), see how the web works for more information). then it goes to that server ...
...And 4 more matches

Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your html documents! in this article we'll look at doing just that with the <video> and <audio> elements; we'll then finish off by looking at how to add captions/subtitles to your videos. 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 images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. video and audio on the web web developers have wanted to use video and audio on the w...
...knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. video and audio on the web web developers have wanted to use video and audio on the web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native web technologies such as html didn't have the ability to embed video and audio on the web, so proprietary (or plugin-based) technologies like flash (and later, silverlight) became popular for handling such content. this kind of technology worked ok, but it...
... a path to the video you want to embed. it works in exactly the same way. controls users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) you must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate javascript api. at a minimum, the interface must include a way to start and stop the media, and to adjust the volume. the paragraph inside the <video> tags this is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. this can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it s...
...And 4 more matches

Client-side storage - Learn web development
let's build up the example, so you can understand how it works. first, make a local copy of our personal-greeting.html file in a new directory on your computer. next, note how our html references a javascript file called index.js (see line 40). we need to create this and write our javascript code into it. create an index.js file in the same directory as your html file. we'll start off by creating references to all the html features we need to manipulate in this example — we'll create them all as constants, as these references do not need to change in the lifecycle of the app. add the following lines to your javascript file: // create needed constants const rememberdiv = document.queryselector('.remember'); const forgetdiv = document.queryselector('.forget'); const for...
...complex related data, the types of which aren't limited to simple values like strings or numbers. you can store videos, images, and pretty much anything else in an indexeddb instance. however, this does come at a cost: indexeddb is much more complex to use than the web storage api. in this section, we'll really only scratch the surface of what it is capable of, but we will give you enough to get started. working through a note storage example here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of idb as we go along. the app looks something like this: each note has a title and some body text, each individually editable. the javascri...
...store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of idb as we go along. the app looks something like this: each note has a title and some body text, each individually editable. the javascript code we'll go through below has detailed comments to help you understand what's going on. getting started first of all, make local copies of our index.html, style.css, and index-start.js files into a new directory on your local machine. have a look at the files. you'll see that the html is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. the css provides some simple sty...
...And 4 more matches

Arrays - Learn web development
ou 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 array is called a multidimensional array. you can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. for example, to access one of the items inside the array that is the third item inside the random array (see previous section), we could do something like this: random[2][2]; try...
...th; // 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 code is saying: start looping at item number 0 in the array. stop looping at the item number equal to the length of the array. this works for an array of any length, but in this case it stops looping at item number 7 (this is good, as the last item — which we want the loop to include — is item 6). for each item, print it out to the browser console with console.log(). some useful array methods in this section ...
...ing a product name and price separated by a colon. we'd like you to turn this into an array and store it in an array called products. on the same line as the // number 2 comment is the beginning of a for loop. in this line we currently have i <= 0, which is a conditional test that causes the for loop to only run once, because it is saying "stop when i is no longer less than or equal to 0", and i starts at 0. we'd like you to replace this with a conditional test that stops the loop when i is no longer less than the products array's length. just below the // number 3 comment we want you to write a line of code that splits the current array item (name:price) into two separate items, one containing just the name and one containing just the price. if you are not sure how to do this, consult the us...
...And 4 more matches

Basic math in JavaScript — numbers and operators - Learn web development
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 rarely come across a need to start thinking about other types, if ever. the second bit of good news is that unlike some other programming languages, javascript only has one data type for numbers, both integers and decimals — you guessed it, number...
...nd do the necessary calculation for adding the sales tax in each case. the incrementor is used to move to the next value when needed. we've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! we'll look at loops in detail later on in the course. let's try playing with these in your console. for a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. the following will return an error: 3++; so, you can only increment an existing variable. try this: let num1 = 4; num1++; okay, strangeness number 2! when you do this, you'll see a value of 4 returned — this is because the b...
......
...And 4 more matches

Test your skills: Strings - Learn web development
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). strings 1 in our first strings task, we start off small. you already have half of a famous quote inside a variable called quotestart; we would like you to: look up the other half of the quote, and add it to the example inside a variable called quoteend. concatenate the two strings together to make a single string containing the complete quote. save the result inside a variable called finalquote. you'll find that you get an error at thi...
... strings 2 in this task you are provided with two variables, quote and substring, which contain two strings. ...
...nside a variable called quoteend. concatenate the two strings together to make a single string containing the complete quote. save the result inside a variable called finalquote. you'll find that you get an error at this point. can you fix the problem with quotestart, so that the full quote displays correctly? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. strings 2 in this task you are provided with two variables, quote and substring, which contain two strings. we would like you to: retrieve the length of the quote, and store it in a variable called quotelength. find the index position where substring appears in quote, and store that value in a variable called index.
...And 4 more matches

Server-side web frameworks - Learn web development
team_level = models.charfield(max_length=3,choices=team_levels,default='u11') the django model provides a simple query api for searching the database. this can match against a number of fields at a time using different criteria (e.g. exact, case-insensitive, greater than, etc.), and can support complex statements (for example, you can specify a search on u11 teams that have a team name that starts with "fr" or ends with "al"). the second code snippet shows a view function (resource handler) for displaying all of our u09 teams. in this case we specify that we want to filter for all records where the team_level field has exactly the text 'u09' (note below how this criteria is passed to the filter() function as an argument with field name and match type separated by double underscores: tea...
...me }}</li> {% endfor %} </ul> {% else %} <p>no teams are available.</p> {% endif %} </body> </html> how to select a web framework numerous web frameworks exist for almost every programming language you might want to use (we list a few of the more popular frameworks in the following section). ...
...if you are part of a development team that already has significant experience with a particular web framework or programming language, then it makes sense to stick with that. ...
...And 4 more matches

Ember interactivity: Events, classes and state - Learn web development
along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app. 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. ...
...ion is invoked, a new todo object instance is created with a text value of text, and the todos property value is updated to all of the current items inside the array (accessed conveniently using spread syntax), plus the new todo. using the service from our header component now that we've defined a way to add todos, we can interact with this service from the header.js input component to actually start adding them. first of all, the service needs to be injected into the template via the @inject decorator, which we’ll rename to @service for semantic clarity. to do this, add the following import line to header.js, beneath the two existing import lines: import { inject as service } from '@ember/service'; with this import in place, we can now make the todo-data service available inside the hea...
... service available inside the headercomponent class via the todos object, using the @service decorator. add the following line just below the opening export... line: @service('todo-data') todos; now the placeholder alert(text); line can be replaced with a call to our new add() function. replace it with the following: this.todos.add(text); if we try this out in the todo app in our browser (npm start, go to localhost:4200), it will look like nothing happens after hitting the enter key (although the fact that the app builds without any errors is a good sign). using the ember inspector however, we can see that our todo was added: displaying our todos now that we know that we can create todos, there needs to be a way to swap out our static "buy movie tickets" todos with the todos we're actua...
...And 4 more matches

Learn web development
if you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. ...
... if you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. ...
...e enough detail for you to feel comfortable and learn the topics properly. you should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work. what's new? the content in the learning area is being added to regularly. ...
...And 4 more matches

Multiple Firefox profiles
low, 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 windows xp click the start button. click "run". type firefox --new-instance--profilemanager. windows vista/7 click the start button. click the search bar at the bottom. type firefox --new-instance --profilemanager. windows 8/8.1/10 press "windows + r" on your keyboard. type firefox --new-instance --profilemanager. linux if firefox is already included in your linux distribution, or if you have in...
...an make your selection. hit return. here is a complete example terminal command from steps 2-3: /applications/firefox.app/contents/macos/firefox -profile /users/suzie/library/application\ support/firefox/profiles/r99d1z7c.default if the profile manager window does not open, firefox may have been running in the background, even though it was not visible. close all instances of firefox, or restart the computer, and then try again. if you want to do this frequently and more easily, you may wish to create an automator application, as explained in this tutorial. creating a profile creating a profile through the profile manager these instructions should be the same for all operating systems. to start the create profile wizard, click "create profile..." in the profile manager. click n...
...his action cannot be undone. cancel interrupts the profile deletion. renaming a profile in the profile manager, select the profile you want to rename, and then click "rename profile". enter a new name for the profile and click on ok. note: the folder containing the files for the profile is not renamed. ...
...And 4 more matches

HTML parser threading
nshtml5parser is initialized by calling nshtml5parser::parse(nsiuri*, nsirequestobserver*, void*, nsdtdmode). that method call doesn't yet cause anything to be parsed, though. actual network data is passed to an nsistreamlistener. nshtml5streamparser is the nsistreamlistener implementation obtained by calling nsistreamlistener* nshtml5parser::getstreamlistener(). the nsistreamlistener methods (onstartrequest, ondataavailable and onstoprequest) are called on the main thread. onstartrequest does all sorts of initialization on the main thread. at that point, nothing has happened on the parser thread yet and the nshtml5streamparser lives fully on the main thread. passing data to the parser thread nshtml5streamparser gets some of its methods called on the main thread and some called on the parser t...
...ion tree op is generated. (the tree builder makes the tokenizer return immediately when such an op is generated.) thus, a tree op that may cause the parser to block can only occur as the last op in a queue that runflushloop sees. preparing the parser thread for script execution when the parser thread sees that it has generated a tree op that attempts to execute a (non-async, non-defer) script, it starts speculating. it acquires mspeculationmutex and while holding it, it creates a new speculation and adds it to the queue of speculations, flushes the tree ops to the main thread, marks the nshtml5streamparser as being in a speculating state and sets the newly created speculation object as the tree op sink (instead of the tree op stage described earlier) of the tree builder. the speculation object ...
...d, marks the nshtml5streamparser as being in a speculating state and sets the newly created speculation object as the tree op sink (instead of the tree op stage described earlier) of the tree builder. the speculation object has a queue of tree ops (into which the tree builder will now flush ops to instead of the tree op stage), an owning reference to the nshtml5owningutf16buffer that contains the starting point of the speculation, an index into the nshtml5owningutf16buffer defining the exact starting point within the buffer, the line number of the tokenizer at that point and a snapshot of the tree op state. the line number and the snapshot are also added to the tree op that attempts to execute scripts (before flushing it). the tree builder snapshot contains a copy of the tree builder stack, a c...
...And 4 more matches

AddonListener
with addaddonlistener() and will then receive notification of changes to the add-ons currently installed. these notifications come in the form of calls to methods on the listener object. a listener only needs to implement the methods corresponding to the events it cares about; missing methods will not cause any problems. ...
...hese notifications come in the form of calls to methods on the listener object. a listener only needs to implement the methods corresponding to the events it cares about; missing methods will not cause any problems. ...
...ement the methods corresponding to the events it cares about; missing methods will not cause any problems. method overview void onenabling(in addon addon, in boolean needsrestart) void onenabled(in addon addon) void ondisabling(in addon addon, in boolean needsrestart) void ondisabled(in addon addon) void oninstalling(in addon addon, in boolean needsrestart) void oninstalled(in addon addon) void onuninstalling(in addon addon, in boolean needsrestart) void onuninstalled(in addon addon) void onoperationcancelled(in addon addon) void onpropertychanged(in addon addon, in string properties[]) methods onenabling() called when an add-on is about to be enabled. void onenabling( in addon addon, in bo...
...And 4 more matches

CustomizableUI.jsm
s. 'special' widgets: these are the representations of xul <toolbarseparator>, <toolbarspring> and <toolbarspacer> elements. customizableui provides apis to add, move and remove all these different widgets, and mostly abstracts the dom away from you. the lifetime of your widget should be identical to the lifetime of the add-on - it's process-global, so if you call createwidget on bootstrap's "startup" and destroywidget on bootstrap's "shutdown", that's enough. listeners customizableui provides a way to listen for various bits of customization happening. this can be useful if other parts of the code need to react to changes in the customization of the user interface. in order to use this facility, you should create a plain js object which defines some of the event handlers defined below. ...
...happening. only fired for api-based widgets. onwidgetdrag(awidgetid, aarea) fired both when and after customize mode drag handling system tries to determine the width and height of widget awidgetid when dragged to a different area. aarea will be the area the item is dragged to, or undefined after the measurements have been done and the node has been moved back to its 'regular' area. oncustomizestart(awindow) fired when opening customize mode in awindow. oncustomizeend(awindow) fired when exiting customize mode in awindow. onwidgetoverflow(anode, acontainer) fired when a widget's dom node is overflowing its container, a toolbar, and will be displayed in the overflow panel. onwidgetunderflow(anode, acontainer) fired when a widget's dom node is not overflowing its container, a toolbar, a...
...swidgetremovable(awidgetnodeorwidgetid); bool canwidgetmovetoarea(awidgetid); void getlocalizedproperty(awidget, aprop, aformatargs, adef); void hidepanelfornode(anode); bool isspecialwidget(awidgetid); void addpanelcloselisteners(apanel); void removepanelcloselisteners(apanel); void onwidgetdrag(awidgetid, aarea); void notifystartcustomizing(awindow); void notifyendcustomizing(awindow); void dispatchtoolboxevent(aevent, adetails, awindow); bool isareaoverflowable(aareaid); void settoolbarvisibility(atoolbarid, aisvisible); string getplaceforitem(aelement); bool isbuiltintoolbar(atoolbarid); methods addlistener() add a listener object that will get fired for var...
...And 4 more matches

Downloads.jsm
the downloads.jsm javascript code module provides a single entry point to interact with the downloading capabilities of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-related configuration. to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window. pri...
...eatedownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window. private work on downloads that were started from a private browsing window. all work on both downloads.private and downloads.public downloads. properties attribute type description error read only constructor constructor for a downloaderror object. when you catch an exception during a download, you can use this to verify if ex instanceof downloads.error, before reading the exception prop...
...: optional string representing the class of the download operation. if omitted, defaults to "copy". alternatively, may be the serializable representation of a downloadsaver object. promise resolves to the newly created download object. fetch() downloads data from a remote network location to a local file. this download method does not provide user interface or the ability to cancel or restart the download programmatically. for that, you should obtain a reference to a download object using the createdownload() function. since the download cannot be restarted, any partially downloaded data will not be kept in case the download fails. promise fetch( asource, atarget, object aoptions ); parameters asource string containing the uri for the download source. alternatively, may ...
...And 4 more matches

sslfnc.html
used to remember the certificates previously presented by clients for client certificate authentication. passing a null value or a value that is out of range for any of the parameters causes the server default value to be used in the server cache. the values that you pass affect only the server cache, not the client cache. initializing multi-processing with a shared ssl server cache to start a multi-processing application, the initial parent process calls ssl_configmpserversidcache, and then creates child processes, by one of these methods: call fork and then exec (unix) call createprocess (win32) call pr_createprocess (both unix and win32) it is essential that the parent allow the child to inherit the file descriptors. win32's createprocess takes an argument that tells i...
...cate ssl_badcerthook ssl_getclientauthdatahook nss_getclientauthdata ssl_handshakecallback setting up the callback functions described in this section may be optional for some applications. however, all applications must use pk11_setpasswordfunc to set up the password callback function during nss initialization. for examples of the callback functions listed here, see chapter 2, "getting started with ssl." ssl_authcertificatehook specifies a certificate authentication callback function called to authenticate an incoming certificate. syntax #include "ssl.h" secstatus ssl_authcertificatehook( prfiledesc *fd, sslauthcertificate f, void *arg); parameters this function has the following parameters: fd a pointer to the file descriptor...
...eviously called ssl_badcerthook. a bad-certificate callback function gives the application the opportunity to choose to accept the certificate as authentic and authorized even though it failed the check performed by the certificate authentication callback function. see also for examples of certificate authentication callback functions, see the sample code referenced from chapter 2, "getting started with ssl." ssl_authcertificate default callback function used to authenticate certificates received from the remote end of an ssl connection if the application has not previously called ssl_authcertificatehook to specify its own certificate authentication callback function. syntax #include "ssl.h" secstatus ssl_authcertificate( void *arg, prfiledesc *fd, prbool checksig, ...
...And 4 more matches

Gecko events
d from the selection. is supported: yes event_selection_within numerous selection changes have occurred within a container object. is supported: yes event_alert an alert has been generated. server applications send this event when a user needs to know that a user interface element has changed. is supported: yes event_foreground the foreground window has changed. is supported: no event_menu_start a menu item on the menu bar has been selected. is supported: yes event_menu_end a menu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has ...
...supported: yes event_menu_end a menu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has lost mouse capture. is supported: no event_movesize_start a window is being moved or resized. ...
... event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has lost mouse capture. is supported: no event_movesize_start a window is being moved or resized. ...
...And 4 more matches

nsDependentCSubstring
nst char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nsacstring_internal data members no public members. ...
... getdata getmutabledata setisvoid stripchar base classes nsacstring_internal data members no public members. ...
...void nsdependentcsubstring(const nsacstring_internal&, pruint32, pruint32) - source parameters nsacstring_internal& str pruint32 startpos pruint32 length void nsdependentcsubstring(const char*, const char*) - source parameters char* start char* end void nsdependentcsubstring(const nsreadingiterator<char>&, const nsreadingiterator<char>&) - source parameters nsreadingiterator<char>& start nsreadingiterator<char>& end void nsdependentcsubstring() - source rebind void rebind(const nsacstring_internal&, pruint32, pruint32) - source parameters nsacstring_internal& <anonymous> pruint32 startpos pruint32 length void rebind(const char*, const char*) - source parameters char* start char* end beginreading char* beginreading() const - source reading iterators n...
...And 4 more matches

nsDependentSubstring
l(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nsastring_internal data members no public members. ...
... getmutabledata setisvoid stripchar base classes nsastring_internal data members no public members. ...
...nt32, pruint32) - source parameters nsastring_internal& str pruint32 startpos pruint32 length void nsdependentsubstring(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end void nsdependentsubstring(const nsreadingiterator<short unsigned int>&, const nsreadingiterator<short unsigned int>&) - source parameters nsreadingiterator<short unsigned int>& start nsreadingiterator<short unsigned int>& end void nsdependentsubstring() - source rebind void rebind(const nsastring_internal&, pruint32, pruint32) - source parameters nsastring_internal& <anonymous> pruint32 startpos pruint32 length void rebind(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end beginreading prunichar* beginreading() co...
...And 4 more matches

nsIWebProgressListener
n nsresult astatus); void onstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); constants state transition flags these flags indicate the various states that requests may transition through as they are being loaded. these flags are mutually exclusive. for any given request, onstatechange() is called once with the state_start flag, zero or more times with the state_transferring flag or once with the state_redirecting flag, and then finally once with the state_stop flag. note: for document requests, a second state_stop is generated (see the description of state_is_window for more details). constant value description state_start 0x00000001 this flag indicates the start of a request. this ...
...uest is complete when onstatechange() is called for the same request with the state_stop flag set. state_redirecting 0x00000002 this flag indicates that a request is being redirected. the request passed to onstatechange() is the request that is being redirected. when a redirect occurs, a new request is generated automatically to process the new request. expect a corresponding state_start event for the new request, and a state_stop for the redirected request. state_transferring 0x00000004 this flag indicates that data for a request is being transferred to an end consumer. this flag indicates that the request has been targeted, and that the user may start seeing content corresponding to the request. state_negotiating 0x00000008 this flag is not used. ...
... the loading of its corresponding document have completed. this includes other document requests (for example corresponding to html <iframe> elements). the document corresponding to a document request is available via the domwindow attribute of onstatechange()'s awebprogress parameter. state_is_network 0x00040000 this flag indicates that the state transition corresponds to the start or stop of activity in the indicated nsiwebprogress instance. this flag is accompanied by either state_start or state_stop, and it may be combined with other state type flags. unlike state_is_window, this flag is only set when activity within the nsiwebprogress instance being observed starts or stops. if activity only occurs in a child nsiwebprogress instance, then this flag will be set to i...
...And 4 more matches

Using COM from js-ctypes
the windows api mostly concerns itself with the interaction between the operating system and an application. for communication between the different windows applications among themselves, microsoft has developed a series of technologies alongside the main windows api. this started out with dynamic data exchange (dde), which was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework. com is c++ and it cannot be written directly with js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 5...
...ode. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c. after that, we can pass a pointer . speech synthesis example let's start with following c++ code, which invokes microsoft speech api and says "hello, firefox!" with system default voice, then wait until the speaking done. #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; hresult hr = cocreateinstance(clsid_spvoice, null, clsctx_all, iid_ispvoice, (void**)&pvo...
... coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.c, and run following command in the directory. $ cl ole32.lib test.c c code with pseudo struct needs pseudo struct description here. ...
...And 4 more matches

console - Web APIs
sage. you may use string substitution and additional arguments with this method. console.exception() an alias for error(). console.group() creates a new inline group, indenting all following output by another level. to move back out a level, call groupend(). console.groupcollapsed() creates a new inline group, indenting all following output by another level. however, unlike group() this starts with the inline group collapsed requiring the use of a disclosure button to expand it. to move back out a level, call groupend(). console.groupend() exits the current inline group. console.info() informative logging of information. you may use string substitution and additional arguments with this method. console.log() for general output of logging information. you may use string substitut...
...utton to expand it. to move back out a level, call groupend(). console.groupend() exits the current inline group. console.info() informative logging of information. you may use string substitution and additional arguments with this method. console.log() for general output of logging information. you may use string substitution and additional arguments with this method. ...
... console.timelog() logs the value of the specified timer to the console. ...
...And 4 more matches

Using Fetch - Web APIs
it assumes the text is utf-8, and doesn't handle fetch errors). ...
...nse = await fetch(fileurl); const reader = response.body.getreader(); let { value: chunk, done: readerdone } = await reader.read(); chunk = chunk ? utf8decoder.decode(chunk) : ''; const re = /\n|\r|\r\n/gm; let startindex = 0; let result; for (;;) { let result = re.exec(chunk); if (!result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({ value: chunk, done: readerdone } = await reader.read()); chunk = remainder + (chunk ? ...
... utf8decoder.decode(chunk) : ''; const re = /\n|\r|\r\n/gm; let startindex = 0; let result; for (;;) { let result = re.exec(chunk); if (!result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({ value: chunk, done: readerdone } = await reader.read()); chunk = remainder + (chunk ? ...
...And 4 more matches

Using the Gamepad API - Web APIs
array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0). timestamp: this returns a domhighrestimestamp representing the last time the data for this gamepad was updated, allowing developers to determine if the axes and button data have been updated from the hardware. the value must be relative to the navigationstart attribute of the performancetiming interface. values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. note that this property is not currently supported in firefox. note: the gamepad object is available on the gamepadconnected event rather than the window object itself, fo...
...t will be updated every time the gamepad's state changes. using button information let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. you can view the demo live, and find the source code on github. to start with, we declare some variables: the gamepadinfo paragraph that the connection info is written into, the ball that we want to move, the start variable that acts as the id for requestanimation frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the requestanimationframe() and cancelanimationframe() cross browser forks. ...
...ll that we want to move, the start variable that acts as the id for requestanimation frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the requestanimationframe() and cancelanimationframe() cross browser forks. var gamepadinfo = document.getelementbyid("gamepad-info"); var ball = document.getelementbyid("ball"); var start; var a = 0; var b = 0; next we use the gamepadconnected event to check for a gamepad being connected. when one is connected, we grab the gamepad using navigator.getgamepads()[0], print information about the gamepad into our gamepad info div, and fire the gameloop() function that starts the whole ball movement process up. window.addeventlistener("gamepadconnected", function(e) { var gp = navi...
...And 4 more matches

Ajax navigation example - Web APIs
iles (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this mechanism, please take a look at the paragraph submitting forms and uploading files. ...
...ge"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" . $page_title . ...
..."; ?> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> second_page.php: <?php $page_title = "second page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include ...
...And 4 more matches

ReadableStreamDefaultReader.read() - Web APIs
ot ending on line boundaries and converting from uint8array to strings. ...
... response = await fetch(fileurl); let reader = response.body.getreader(); let {value: chunk, done: readerdone} = await reader.read(); chunk = chunk ? utf8decoder.decode(chunk) : ""; let re = /\r\n|\n|\r/gm; let startindex = 0; let result; for (;;) { let result = re.exec(chunk); if (!result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({value: chunk, done: readerdone} = await reader.read()); chunk = remainder + (chunk ? ...
...nk ? utf8decoder.decode(chunk) : ""; let re = /\r\n|\n|\r/gm; let startindex = 0; let result; for (;;) { let result = re.exec(chunk); if (!result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({value: chunk, done: readerdone} = await reader.read()); chunk = remainder + (chunk ? ...
...And 4 more matches

TouchEvent - Web APIs
chevent.metakey read only a boolean value indicating whether or not the meta key was down when the touch event was fired. touchevent.shiftkey read only a boolean value indicating whether or not the shift key was down when the touch event was fired. touchevent.targettouchesread only a touchlist of all the touch objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event. touchevent.touches read only a touchlist of all the touch objects representing all current points of contact with the surface, regardless of target or changed status. touchevent.rotation read only change in rotation (in degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticloc...
...he digits at the beginning of the event. values below 1.0 indicate an inward pinch (zoom out). values above 1.0 indicate an outward unpinch (zoom in). initial value: 1.0 touch event types there are several types of event that can be fired to indicate that touch-related changes have occurred. you can determine which of these has happened by looking at the event's touchevent.type property. touchstart sent when the user places a touch point on the touch surface. the event's target will be the element in which the touch occurred. touchend sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface). this is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the scr...
...event's target will be the element in which the touch occurred. touchend sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface). this is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the screen. ...
...And 4 more matches

WebGL model view projection - Web APIs
iety of useful transformations. in fact, the typical perspective projection matrix uses the division by the w component to achieve its transformation. the clipping of points and polygons from clip space actually happens after the homogeneous coordinates have been transformed back into cartesian coordinates (by dividing by w). this final space is known as normalized device coordinates or ndc. to start playing with this idea the previous example can be modified to allow for the use of the w component. //redefine the triangles to use the w component var data = new float32array([ //triangle 1 settings.left, settings.bottom, settings.depth, settings.w, settings.right, settings.bottom, settings.depth, settings.w, settings.left, settings.top, settings.depth, settings.w, //triangle 2...
... the cube still doesn't have any perspective. the next section will take this setup and modify the w values to provide some perspective. exercises shrink down the box using the scale matrix and position it in different places within clip space. try moving it outside of clip space. resize the window and watch as the box skews out of shape. add a rotatez matrix. divide by w an easy way to start getting some perspective on our model of the cube is to take the z coordinate and copy it over to the w coordinate. normally when converting a cartesian point to homogeneous it becomes (x,y,z,1), but we're going to set it to something like (x,y,z,z). in reality we want to make sure that z is greater than 0 for points in view, so we'll modify it slightly by changing the value to ((1.0 + z) * scale...
...der and play around with the scale factor and watch how it shrinks vertices more towards the surface. completely change the w component values for really trippy representations of space. in the next section we'll take this step of copying z into the w slot and turn it into a matrix. simple projection the last step of filling in the w component can actually be accomplished with a simple matrix. start with the identity matrix: var identity = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ]; mdn.multiplypoint(identity, [2, 3, 4, 1]); //> [2, 3, 4, 1] then move the last column's 1 up one space. var copyz = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, ]; mdn.multiplypoint(copyz, [2, 3, 4, 1]); //> [2, 3, 4, 4] however in the last example we performed (z + 1) * scal...
...And 4 more matches

Lifetime of a WebRTC session - Web APIs
e of the content will move to other pages as the webrtc guide material is built out. pardon our dust! establishing the connection the internet is big. really big. it’s so big that years ago, smart people saw how big it was, how fast it was growing, and the limitations of the 32-bit ip addressing system, and realized that something had to be done before we ran out of addresses to use, so they started working on designing a new 64-bit addressing system. but they realized that it would take longer to complete the transition than 32-bit addresses would last, so other smart people came up with a way to let multiple computers share the same 32-bit ip address. network address translation (nat) is a standard which supports this address sharing by handling routing of data inbound and outbound to an...
...signaling server. the exact contents and form of this identifier is up to you. each peer connects to an agreed-upon signaling server, such as a websocket server they both know how to exchange messages with. each peer tells the signaling server that they want to join the same webrtc session (identified by the token established in step 4). descriptions, candidates, etc. -- more coming up ice restart sometimes, during the lifetime of a webrtc session, network conditions change. one of the users might transition from a cellular to a wifi network, or the network might become congested, for example. when this happens, the ice agent may choose to perform ice restart. this is a process by which the network connection is renegotiated, exactly the same way the initial ice negotiation is performed, ...
...ay choose to perform ice restart. this is a process by which the network connection is renegotiated, exactly the same way the initial ice negotiation is performed, with one exception: media continues to flow across the original network connection until the new one is up and running. then media shifts to the new network connection and the old one is closed. note: different browsers support ice restart under different sets of conditions. not all browsers will perform ice restart due to network congestion, for example. if you need to change the configuration of the connection in some way (such as changing to a different set of ice servers), you can do so before restarting ice by calling rtcpeerconnection.setconfiguration() with an updated rtcconfiguration dictionary before restarting ice. to ...
...And 4 more matches

Using the Web Speech API - Web APIs
color to change the background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> </div> the css provides a very simple responsive styling so that it looks ok across devices. javascript let's look at the javascript in a bit more detail. ...
...nitionlist.addfromstring(grammar, 1); we then add the speechgrammarlist to the speech recognition instance by setting it to the value of the speechrecognition.grammars property. we also set a few other properties of the recognition instance before we move on: speechrecognition.continuous: controls whether continuous results are captured (true), or just a single result each time recognition is started (false). speechrecognition.lang: sets the language of the recognition. setting this is good practice, and therefore recommended. speechrecognition.interimresults: defines whether the speech recognition system should return interim results, or just final results. final results are good enough for this simple demo. speechrecognition.maxalternatives: sets the number of alternative potential mat...
...completely clear and you want to display a list if alternatives for the user to choose the correct one from. but it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; starting the speech recognition after grabbing references to the output <div> and the html element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. this is achieved by calling speechrecognition.start(). the foreach() method is used to output colored ...
...And 4 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
event does, see the msdn event constants page. check with your assistive technology partners to find out what events you need to support. ...
...logy partners to find out what events you need to support. ...
...e they won't ask for more than the events marked [important]: event_system_sound event_system_alert [can be important, to have auto-speaking for newly created role_alerts] event_system_foreground event_system_menustart [important] event_system_menuend [important] event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragdropend event_system_dialogstart event_system_dialogend event_system_scrollingstart event_system_scrollingend [possibly important, talk to at vendor] event_system_switchstar...
...And 4 more matches

Logical properties for floating and positioning - CSS: Cascading Style Sheets
sitioning properties used with positioned layout. this guide takes a look at how to use these. mapped properties and values the table below details the properties and values discussed in this guide along with their physical mappings. they assume a horizontal writing-mode, with a left-to-right direction. ...
... these. mapped properties and values the table below details the properties and values discussed in this guide along with their physical mappings. they assume a horizontal writing-mode, with a left-to-right direction. ...
...es discussed in this guide along with their physical mappings. they assume a horizontal writing-mode, with a left-to-right direction. logical property or value physical property or value float: inline-start float: left float: inline-end float: right clear: inline-start clear: left clear: inline-end clear: right inset-inline-start left inset-inline-end right inset-block-start top inset-block-end bottom text-align: start text-align: left text-align: end text-align: right in addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. these have no mapping to physical...
...And 4 more matches

CSS Logical Properties and Values - CSS: Cascading Style Sheets
vertical writing modes. for standard english text, it is the horizontal dimension. ...
...es. for standard english text, it is the horizontal dimension. ...
...ext, it is the horizontal dimension. ...
...And 4 more matches

CSS reference - CSS: Cascading Style Sheets
drop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-...
...lorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusb...
...)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-i...
...And 4 more matches

animation - CSS: Cascading Style Sheets
s%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path...
...s%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20p...
...s%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-be...
...And 4 more matches

box-align - CSS: Cascading Style Sheets
a property of the original css flexible box layout module draft, and has been replaced by a newer standard. the box-align css property specifies how an element aligns its contents across its layout in a perpendicular direction. the effect of the property is only visible if there is extra space in the box. see flexbox for information about the current standard. ...
... baseline the box aligns the baselines of the contents (lining up the text). ...
... baseline the box aligns the baselines of the contents (lining up the text). this only applies if the box's orientation is horizontal. ...
...And 4 more matches

grid-row - CSS: Cascading Style Sheets
the grid-row css shorthand property specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. 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. ...
... nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash. ...
...ractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash. ...
...And 4 more matches

<input type="button"> - HTML: Hypertext Markup Language
an empty button: <input type="button"> using buttons <input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively). to make buttons do anything, you have to write javascript code to do the work. ...
...mit"> and <input type="reset"> are used to submit and reset forms, respectively). to make buttons do anything, you have to write javascript code to do the work. ...
...starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the dom, saving this refence in the variable button. addeventlistener() is then used to establish a ...
...And 4 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
ending 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. see cors settings attributes for additional information. currenttime reading currenttime returns a double-precision floating-point value indicating the current playback position of the media specified in seconds. if the media has not started playing yet, the time offset at which it will begin is returned. setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded. if the media is being streamed, it's possible that the user agent may not be able to obtain some parts of the resource if that data has expired from the media buffer. other media may hav...
...at which it will begin is returned. setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded. if the media is being streamed, it's possible that the user agent may not be able to obtain some parts of the resource if that data has expired from the media buffer. other media may have a media timeline that doesn't start at 0 seconds, so setting currenttime to a time before that would fail. the getstartdate() method can be used to determine the beginning point of the media timeline's reference frame. disablepictureinpicture prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases. disableremoteplayback a boolean attribute used to...
... this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. specifically, the image would raster at these dimensions and naturalwidth/naturalheight on images would return the values specified in this attribute. explainer, examples loop a boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video. muted a boolean attribute that indicates the default setting of the audio contained in the video. if set, the audio will be initially silenced. its default value is false, meaning that the audio will be played when the video is played. playsinline a boolean attribute indicating that the video is to be played "inline", that is within the element's playback a...
...And 4 more matches

A re-introduction to JavaScript (JS tutorial) - JavaScript
avascript is notorious for being the world's most misunderstood programming language. it is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful language features await. javascript is now used by an incredible number of high-profile applications, showing that deeper knowledge of this technology is an important skill for any web or mobile developer. it's useful to start with an overview of the language's history. javascript was created in 1995 by brendan eich while he was an engineer at netscape. javascript was first released with netscape 2 early in 1996. it was originally going to be called livescript, but it was renamed in an ill-fated marketing decision that attempted to capitalize on the popularity of sun microsystem's java language — despite the two havi...
...d c languages — many structures from those languages apply to javascript as well. javascript supports object-oriented programming with object prototypes, instead of classes (see more about prototypical inheritance and es2015 classes). javascript also supports functional programming — because they are objects, functions may be stored in variables and passed around like any other object. let's start off by looking at the building blocks of any language: the types. javascript programs manipulate values, and those values all belong to a type. javascript's types are: number string boolean function object symbol (new in es2015) ... oh, and undefined and null, which are ... slightly odd. and array, which is a special kind of object. and date and regexp, which are objects that you get fo...
...e if you declare a variable without assigning any value to it, its type is undefined. an important difference between javascript and other languages like java is that in javascript, blocks do not have scope; only functions have a scope. so if a variable is defined using var in a compound statement (for example inside an if control structure), it will be visible to the entire function. however, starting with ecmascript 2015, let and const declarations allow you to create block-scoped variables. operators javascript's numeric operators are +, -, *, / and % which is the remainder operator (which is the same as modulo.) values are assigned using =, and there are also compound assignment statements such as += and -=. these extend out to x = x operator y. x += 5; x = x + 5; you can use ++ and...
...And 4 more matches

begin - SVG: Scalable Vector Graphics
each individual value can be one of the following : <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <accesskey-value>, <wallclock-sync-value> or the keyword indefinite. ...
...is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation start time is defined relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. <event-value> this value...
...to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. <event-value> this value defines an event and an optional offset that determines the time at which the element's animation should begin. the animation start time is defined relative to the time that the specified event is fired. a valid event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, ...
...And 4 more matches

text-anchor - SVG: Scalable Vector Graphics
it is not applicable to other types of auto-wrapped text. for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
...any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m30,40 l90,40 m30,75 l90,75 m30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="110">a</text> <!-- materialisation of anchors --> <circle cx="60" cy="40" r="3" fill="red" /> <circle cx="60" cy="75" r="3" fill="red" /> <circle cx="60" cy="110" r="3" fill="red" /> <style><![cdata[ text { font: bold 36px verdana, helvetica, arial, sans-serif; } ]...
...for an element with a direction property value of ltr (typical for most european languages), the left side of the text is rendered at the initial text position. for an element with a direction property...
...And 4 more matches

Tutorials
the links on this page lead to a variety of tutorials and training materials. whether you are just starting out, learning the basics, or are an old hand at web development, you can find helpful resources here for best practices. these resources are created by forward-thinking companies and web developers who have embraced open standards and best practices for web development and that provide or allow translations, through an open content license such as creative commons. for complete beginners to the web getting started with the web getting started with the web is a concise series introducing you to the practicalities of web development. you'll set up the tools you need to construct a simple webpage and publish your own simple code. html tutorials introductory level intro...
... can be a challenge. this module covers basic table markup, along with more complex features such as implementing captions and summaries. advanced level html forms forms are a very important part of the web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. this module gets you started with creating the client-side parts of forms. tips for authoring fast-loading html pages optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and internet connection. css tutorials introductory level css basics css (cascading style sheets) is the code you use to style your webpage. css basics takes you through what you need t...
...h creating the client-side parts of forms. tips for authoring fast-loading html pages optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and internet connection. css tutorials introductory level css basics css (cascading style sheets) is the code you use to style your webpage. css basics takes you through what you need to get started. we'll answer questions like: how do i make my text black or red? how do i make my content show up in such-and-such a place on the screen? how do i decorate my webpage with background images and colors? css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple colum...
...And 4 more matches

Windows - Archive of obsolete content
and the components object is deprecated. it will soon be removed. draggable windows to make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events. the following code does not care which element is clicked on, simply responding to all mousedown events equally. ...
...d. draggable windows to make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events. the following code does not care which element is clicked on, simply responding to all mousedown events equally. you could improve this code by checking the event.target element and only setting the startpos if the element matches some criteria. ...
...able by clicking on the window's contents, you can use the mousedown and mousemove events. the following code does not care which element is clicked on, simply responding to all mousedown events equally. you could improve this code by checking the event.target element and only setting the startpos if the element matches some criteria. ...
...And 3 more matches

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
works with the javascript in extensions and firefox itself, the debugger can be a good way to learn about design methods. installing this is bundled with the mozilla suite and the current version of seamonkey, but it needs to be installed as an extension in firefox. see https://addons.mozilla.org/firefox/216/. install the extension in firefox directly from the above url and relaunch firefox. starting up select “javascript debugger” from the tools menu. targeting javascript for debugging. when venkman first launches, it can only debug the file currently open in your web browser. this is because a lot of javascript files can slow down the browser down if they’re opened for debugging, but you’ll need to lift this restriction in order to develop extensions. uncheck the “exclude br...
...ate venkman, and then select open windows:quicknote.xul:files on the top-left of the screen. double-click on quicknote.js to open it in source-code view (figure 2). fixme: figure 2: selecting source code inserting breakpoints now you’ll want to set some breakpoints. try inserting one within the quicknote_savenote function, around line 345 (figure 3). fixme: figure 3: inserting a breakpoint start debugger type in some text into the quicknote screen, and then select save current tab from the menu. this should halt the program at the spot where you inserted the breakpoint with venkman, and start the debugger. the local variables screen should always display variables and objects during step-by-step execution. with functions that include a lot of variables, this will be hard to read, so yo...
...te example, we first set one breakpoint and then stepped through it. use step over to avoid a function, and step into to always call it; once you are done investigating a function, use step out, and then you can step into the next function. set breakpoints in locations of interest where you’re not sure what’s going on, and the next time you run it, use continue to shift to that location and start investigating again. fixme: figure 4: adding a watch target mozunit mozunit is a tool for javascript that assists with unit testing. it provides an ui similar to that of eclipse’s junit test runner. it should be very easy for java programmers to get up to speed on it quickly. installing mozunit is a feature of mozlab. install mozlab from the following url and relaunch firefox. http://hype...
...And 3 more matches

Tabbed browser - Archive of obsolete content
the attributes to which changes result in this event being sent are: label crop ...
...entlistener("tabopen", exampletabadded, false); container.removeeventlistener("tabmove", exampletabmoved, false); container.removeeventlistener("tabclose", exampletabremoved, false); note: starting in gecko 1.9.1, there's an easy way to listen on progress events on all tabs. notification when a tab's attributes change requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) starting in gecko 2.0, you can detect when a tab's attributes change by listening for the tabattrmodified event. the attributes to which changes result in this event being sent are: label crop busy image selected function exampletabattrmodified(event) { var tab = event.target; // now you can check what's changed on the tab } // during initialization var container = gbrowser.tabcontainer; ...
...you can detect when a tab becomes pinned or unpinned by watching for the tabpinned and tabunpinned events. function exampletabpinned(event) { var browser = gbrowser.getbrowserfortab(event.target); // browser is the xul...
...And 3 more matches

MMgc - Archive of obsolete content
in 17.41 millis (2.0015 s) how mmgc works mark/sweep the mmgc garbage collector uses a mark/sweep algorithm. this is one of the most common garbage collection algorithms. every object in the system has an associated "mark bit." a garbage collection is divided into two phases: mark and sweep. in the mark phase, all of the mark bits are cleared. the garbage collector is aware of "roots", which are starting points from which all "live" application data should be reachable. the collector starts scanning objects, starting at the roots and fanning outwards. for every object it encounters, it sets the mark bit. when the mark phase concludes, the sweep phase begins. in the sweep phase, every object that wasn't marked in the mark phase is destroyed and its memory reclaimed. if an object didn't have its...
...ing of a mark/sweep collector: (temporarily not working) <gflash>600 300 gc.swf</gflash> one pass the mark sweep algorithm described above decomposes into clearmarks/mark/finalize/sweep. in our original implementation clearmarks/finalize/sweep visited every gc page and every object on that page. 3 passes! now we have one pass where marks are cleared during sweep so clear marks isn't needed at the start. also finalize builds up a lists of pages that need sweeping so sweep doesn't need to visit every page. this has been shown to cut the finalize/sweep pause in half (which happens back to back atomically). overall this wasn't a huge performance increase due to the fact the majority of our time is spent in the mark phase. conservative collection mmgc is a conservative mark/sweep collector. conserva...
...memory the application is using). one way to avoid this unbounded pause is to break up the work the gc needs to do into "increments". in order to collect garbage we must trace all the live objects and mark them. this is the part of the gc work that takes the most time and the part that needs to be incrementalized. in order to incrementalize marking it needs to be a process that can be stopped and started. our marking algorithm is a conservative marking algorithm that makes marking automatic, there are no mark() methods the gc engine needs to call, marking is simply a tight loop that processes a queue. the way it works is that all gc roots are registered with the gc library and it can mark everything by traversing the roots. at the beginning all the gc roots are pushed onto the work queue. items...
...And 3 more matches

Creating regular expressions for a microsummary generator - Archive of obsolete content
tutorial, you should know some basics about regular expressions and understand how to create expressions that match urls. for detailed documentation about regular expressions, see core_javascript_1.5_reference:global_objects:regexp. to learn how to create a microsummary generator, see creating a microsummary. urls 101 urls for auction item pages on ebay, like those on many other sites, usually start with the string "http://" and contain a domain name, a file path, and some query parameters. here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018439106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=280018439106". matching an ebay url to match this url with...
... backwards slash (\). here's a regular expression that matches our example url: http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=280018439106 it looks almost the same as the url. the only difference is that the regular expression has backwards slashes before the periods and the question mark, since both of those characters have special meaning in regular expressions. matching from the start of the url while this expression matches the url, it also matches other urls that contain this url in their query parameters, for example: http://www.example.com/redirect.php?url=http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018439106 that's probably not what we want, since urls that contain our example url probably aren't auction item pages themselves. in order to restrict our regul...
...ression matches the url, it also matches other urls that contain this url in their query parameters, for example: http://www.example.com/redirect.php?url=http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018439106 that's probably not what we want, since urls that contain our example url probably aren't auction item pages themselves. in order to restrict our regular expression to urls that start with our example url, we prepend a caret (^) to the regular expression: ^http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=280018439106 when a caret is the first character of a regular expression, it signifies that the expression must be found at the beginning of the string being matched. now that we've prepended a caret to our regular expression, it will only match urls that look like t...
...And 3 more matches

Drag and Drop - Archive of obsolete content
ed around and dropped onto other objects. the drag and drop interface many user interfaces allow one to drag particular objects around within the interface. for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. mozilla and xul provide a number of events that can handle when the user attempts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. the drag stops when the user releases the mouse. event handlers are called when the user starts and ends dragging, and at various points in-between. mozilla implements dragging by using a drag session. when a user requests to drag something that can be dragged, a drag session should be started. the drag session handles updating the ...
...because the user generally has only one mouse, only one drag session is in use at a time. note that drag sessions can be created from within mozilla itself or from other applications. mozilla will translate the data being dragged as needed. ...
...tself or from other applications. mozilla will translate the data being dragged as needed. the list below describes the event handlers that can be called, which may be placed on any element. you only need to put values for the handlers where you need to do something when the event occurs. ondrag called periodically throughout the drag and drop operation. ...
...And 3 more matches

Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
cts in java is not that much different than doing so in c++. prerequisites java 1.4.2 or newer xulrunner 1.8.0.1 or newer embedding in order to embed mozilla in your java application, you will need to add the library mozillainterfaces.jar (located in xulrunner/sdk/lib folder) to your classpath. this library provides the interfaces necessary to bootstrap mozilla and call xpcom methods. to start embedding, we use the methods provided by the mozilla singleton class. first, the java application must find a suitable xulrunner installation: mozilla mozilla = mozilla.getinstance(); greversionrange[] range = new greversionrange[1]; range[0] = new greversionrange("1.8.0", true, "1.9", false); // work with trunk nightly version 1.9a1 ^^ try { file grepath = mozilla.getgrepathwithpro...
...owcreator, which implements the nsiwindowcreator interface, and we want to register it with mozilla. to do so, we first get the service manager, through which we can get a reference to mozilla's window watcher. ...
...ow watcher. ...
...And 3 more matches

Multiple Queries - Archive of obsolete content
the results from the first query are generated first and output generated for it, followed by the results and output for the second query, and so forth for all of the queries. ...
...generated first and output generated for it, followed by the results and output for the second query, and so forth for all of the queries. ...
... <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action> </queryset> </template> </hbox> this template contains two queries, the first contains a <triple> which matches only the photo with a title of 'canal'. the second query doesn't contain such a triple and will match all three of the photos. it the fi...
...And 3 more matches

Recursive Generation - Archive of obsolete content
graph, item c has a relateditem arrow pointing out of it to item d. this extra arrow which neither b or d have causes an extra set of buttons to be created. after generating content, the template builder always repeats the generation for inner levels as far as it can go. thus, the builder can be said to generate content from the graph recursively. after generating a result's content, the builder starts again using a new parent and starting point. naturally, the parent will be the new result's content, rather than the outer containing element, and the starting point will be the endpoint of the previous iteration. for the top level generation the parent insertion point is the element with the datasources attribute, in this example a <vbox>. for nested results, the insertion point is the generate...
...the top level generation the parent insertion point is the element with the datasources attribute, in this example a <vbox>. for nested results, the insertion point is the generated element. ...
...nt insertion point is the element with the datasources attribute, in this example a <vbox>. for nested results, the insertion point is the generated element. ...
...And 3 more matches

Custom toolbar button - Archive of obsolete content
r custom button as a self-contained extension in your profile. you can use the sample code provided here to make buttons that do various useful things. if you know how to program in javascript, then you can write your own code that does other things. you can use this page if all you really want is a button for some special purpose. you can also use this page to learn about extensions, and as a starting point if you plan to write a more complex extension. note that this extension is very simplified. use other tutorials and articles to find out more—the main extensions page here is a good starting point. in particular, the articles creating toolbar buttons and building an extension explain the process in more detail. supported applications you can use the steps on this page with any or all...
...oad the extension image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same directory as the files you have just created. ensure that the name of the saved file is: icon.png explanation: this image is displayed in the application's extension manager window. testing your new button restart the application. either get a context menu for the application's toolbar (for example, by right-clicking it) and choose customize..., or choose view – toolbars – customize... from the application's menu bar. drag your new button to where you want it on the toolbar. press done to close the toolbar palette window. click the button to test it. you should see the pop-up message. further devel...
... it. you should see the pop-up message. further development this section describes how you can develop your button further. uninstalling the button if you ever want to uninstall the button, delete the directory that you created in step 2. alternatively, use the application's extensions window to uninstall the extension in the normal way. the application deletes the directory the next time it starts. restart the application. troubleshooting if the button does not appear in the toolbar customization palette, or if you find some other problem, check that you have followed all the steps exactly. if necessary, uninstall the button and start again, this time without making any changes to the files. after you get the button working, customize the files carefully. to see the effect of any ch...
...And 3 more matches

Manifest Files - Archive of obsolete content
and referenced with chrome urls. a package can contain any kinds of files and may be split into subdirectories for different parts of the package. a package can be stored either as a directory or as a jar archive. manifest files a manifest file describes a package and maps its location on disk to a chrome url. ...
...use manifest flags to configure the scenarios in which the secondary manifest is imported. ...
...e path in that line should point to the directory created above. if you aren't sure what the file path is, open that directory in a browser and copy the url from the address field. that's it! now, all you need to do is add some xul files into that new directory, and you will be able to load them by typing in a chrome url of the form chrome://tests/content/<filename>. of course, you will need to restart the browser for the changes to take effect. if the file doesn't load, make sure that the file path is correct. the basic syntax of the lines in the manifest file for content packages is: 'content <packagename> <filepath>' the first field 'content' indicates a content package. for themes, 'skin' is used while 'locale' is used for locales. the packagename in the example above is 'tests', which mean...
...And 3 more matches

Tree Selection - Archive of obsolete content
ms in a multiple selection tree are not necessarily contiguous, you can retrieve each block of contigous selections using the getrangecount() and getrangeat() functions. the first function returns the number of selection ranges there are. if only one value is selected, this value will be 1. ...
...s, calling getrangeat() to get the actual indices of the start and end of the range. the getrangeat() function takes three arguments. the first is the range index. the second is an object which will be filled in by the function with the index of the first selected item. the third argument is an object which will be filled in with the index of the last selected item. getrangeat example var start = new object(); var end = new object(); var numranges = tree.view.selection.getrangecount(); for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t,start,end); for (var v = start.value; v <= end.value; v++){ alert("item " + v + " is selected."); } } we create two objects called 'start' and 'end'. then, we iterate over the set of ranges, the number of which is returned b...
...an alert is displayed for each index. ...
...And 3 more matches

Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
a xulrunner application has no installer by default; however, these instructions can help you to easily create a windows installer with inno setup. the tutorial here uses the my app example from the article getting started with xulrunner. step 1: installing inno setup download inno setup from inno setup downloads. if you only want to compile the installer, install the stable release. if you want to edit scripts, you should get the quickstart pack (which includes istool, the script editor. however, if you don't get the quickstart pack, you can later get istool from inno setup third-party files. step 2: creating the application to make your application standalone, deploy your application according to the deploying xulrunner 1.8 article. my app's example follows. myapp/ appli...
...ublisher properties to the same values specified in your xulrunner application's application.ini file. my app's .iss file sample as follows: ; script generated by the inno setup script wizard. ...
...pplication.ini file. my app's .iss file sample as follows: ; script generated by the inno setup script wizard. ...
...And 3 more matches

Sunbird Theme Tutorial - Archive of obsolete content
the theme a file that registers the theme with sunbird some files containing the theme itself set up your theme in sunbird's profile directory. for information on how to find the profile directory, see the mozillazine article: profile folder inside the profile directory, go to the <tt>extensions</tt> directory. note: if the <tt>extensions</tt> directory is empty, you are in the wrong place—start again and follow the instructions more carefully. creating a unique identifier create an identifier that is likely to be unique, in the form: <tt>something@domain-name</tt> it must contain an at-sign (<tt>@</tt>), making it look something like an e-mail address, but it does not need to be a real e-mail address. before and after the at-sign, it can only contain the characters a-z, a-z, 0-9, f...
...change the next six lines to describe your theme. ensure that the internal name is a single word. note: if your theme is for a version of sunbird later than 0.4, then also change the maxversion. save the file. registering your theme to register your theme, create a plain tex...
...t>. copy and paste the content from here (just one line): skin calendar testing chrome/calendar/ change <tt>testing</tt> to your theme's one-word internal name. save the file. creating the theme itself to create the theme itself, go to sunbird's program directory. note: if you do not know where the program directory is, look at the properties of the shortcut or launcher icon that you use to start sunbird. there you can see the location of the directory. in the program directory, go to the <tt>chrome</tt> directory. use a jar tool or zip tool to unpack the file <tt>calendar.jar</tt> there. go to the <tt>skin</tt> directory that has just been created, then to the <tt>classic</tt> directory there. copy the <tt>calendar</tt> directory that you find there. in your theme directory, create a new...
...And 3 more matches

Table Reflow Internals - Archive of obsolete content
overview review of reflow table frames table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body). the initial chunk of an xml doc is loaded. the initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. the container posts a dirty reflow command with itself as the target. content is inserted, appended, or deleted through the dom. the container posts a dirty reflow command with itself as the target. ...
... chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. the container posts a dirty reflow command with itself as the target. content is inserted, appended, or deleted through the dom. the container posts a dirty reflow command with itself as the target. style changes through the dom - javascript, browser change font (ctrl+/-), a preference changes, etc. review of reflow reflow starts with pres shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc. ususally it starts when the pres shell processes its queue of reflow commands. the reflower positions reflowee (if it can) before actually reflowing in case views are involved (e.g. absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in...
...s. its height is hard to determine. the image needs to be as high as the cell. ...
...And 3 more matches

Windows Media in Netscape - Archive of obsolete content
pe 7.1 and later or ie, and have installed windows media player 7 or above, the snippet of code below should produce a windows media control and play a song. this is the example: needs to be embedded in wiki page (can it just be put here?) <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full"> <param name="autostart" value="true"> <param name="url" value="media/preludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7.1. <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="aut...
... value="true"> <param name="url" value="media/preludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7.1. <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="preludesteel.wma" /> your browser does not support the activex windows media player </object> the classid attribute references the clsid of windows media player 7 and above -- windows media player versions before 7 used a different clsid. examples in this article all assume that the user is running windows media player 7 and later, although netscap...
...such retrieval. therefore detecting whether the component was successfully instantiated can help provide users with the right component if a failed instantiation is detected. the code listing below provides a mechanism to to this. <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="preludesteel.wma" /> </object> <script type="text/javascript"> if(!document.playerex2.versioninfo) { // control not installed -- the versioninfo property returns null // redirect users to http://www.microsoft.com/windows/windowsmedia/download/default.asp } else { //control was correctly created //proceed with scripting calls, etc. } </script>...
...And 3 more matches

Common causes of memory leaks in extensions - Extensions
t document is unloaded, by adding an unload event listener or by similar means. another solution would be to use the setinterval()/settimeout() instances content windows provide, but there is a big drawback with this idea: if the user disables javascript globally or locally (such as by using an add-on like noscript), then using the content window functions won't work. problems in bootstrapped (restartless) add-ons bootstrapped extensions use a bootstrap.js compartment. if you put a reference to anything within this compartment into a long-lived window object (such as browser.xul), javascript module or xpcom component, the bootstrap.js compartment will become a zombie. for example, the following code snippets — part of a bootstrap.js — will leak: function leakref() {} function modifydocu...
...l prevent // that function object from being garbage collected and hence // will leak the whole bootstrap compartment. document.body.someproperty = leakref; } see also kris maglione's guide to cleaning up bootstrapped extensions. failing to clean up event listeners extensions can be disabled and removed by user actions, but it also happens when an add-on is updated. if a bootstrapped (restartless) extension fails to clean up event listeners when disabled or removed, the listeners will still reference the enclosing scope — usually the bootstrap.js sandbox — and therefore keep that scope (and its enclosing compartment) alive until the window is unloaded. if the window in question is browser.xul or some long-lived web app such as gmail, the leaked compartment might survive for quite ...
...tlistener("leaky", leakref, false), window); // this is the right way to do it remove the listener. unload(function() window.removeeventlistener("leaky", leakref, true), window); } note: the unload() function is an external function which can be added in your add-on to easily provide a way to undo changes upon unloading of your add-on or a specific part/object. it is part of edward lee's restartless boilerplate. causes of other kinds of leaks other than javascript compartments, add-ons may also leak entities that do not get a dedicated compartment, most commonly chrome dom windows and javascript code modules. forgetting to unregister observers holding onto event observers for too long is another problem. observers that use strong references are a common cause of leaking whole chrome...
...And 3 more matches

Building up a basic demo with the PlayCanvas engine - Game development
that's quite an impressive list of features — let's see some in action. we will try putting together a simple demo first — a cube rendered on the screen. if you have already worked through our building up a basic demo with three.js article (or you are familiar with other 3d libraries) you'll notice that playcanvas works on similar concepts: camera, light and objects. environment setup to start developing with playcanvas, you don't need much. you should start off by: making sure you are using a modern browser with good webgl support, such as the latest firefox or chrome. creating a directory to store your experiments in. saving a copy of the latest playcanvas engine inside your directory. opening the playcanvas documentation in a separate tab — it is useful to refer to. html s...
...write our example code in the second 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 you...
...as 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(pc.fillmode_fill_window); app.setcanvasresolution(pc.resolution_auto); camera now when the setup code is in place we need to think about implementing the standard scene components: camera, lights and objects. let's start with the camera — add these lines to your code, below the previous ones. 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. note: an entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it ca...
...And 3 more matches

Buttons - Game development
« previousnext » this is the 15th step out of 16 of the gamedev phaser tutorial. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson15.html. instead of starting the game right away we can leave that decision to the player by adding a start button they can press. let's investigate how to do that. new variables we will need a variable to store a boolean value representing whether the game is currently being played or not, and another one to represent our button. add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation. add the following to the bottom o...
...unction: game.load.spritesheet('button', 'img/button.png', 120, 40); a single button frame is 120 pixels wide and 40 pixels high. you also need to grab the button spritesheet from github, and save it in your /img directory. adding the button to the game adding the new button to the game is done by using the add.button method. ...
...on frame is 120 pixels wide and 40 pixels high. you also need to grab the button spritesheet from github, and save it in your /img directory. adding the button to the game adding the new button to the game is done by using the add.button method. add the following lines to the bottom of your create() function: startbutton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startgame, this, 1, 0, 2); startbutton.anchor.set(0.5); the button() method's parameters are as follows: the button's x and y coordinates the name of the graphic asset to be displayed for the button a callback function that will be executed when the button is pressed a reference to this to specify the execution context the frames that will be used for the over, out and down events. note: th...
...And 3 more matches

Fallback alignment - MDN Web Docs Glossary: Definitions of Web-related terms
in css box alignment, a fallback alignment is specified in order to deal with cases where the requested alignment cannot be fullfilled. ...
...alignment, a fallback alignment is specified in order to deal with cases where the requested alignment cannot be fullfilled. ...
...ment is specified in order to deal with cases where the requested alignment cannot be fullfilled. for example, if you specify justify-content: space-between there must be more than one alignment subject. ...
...And 3 more matches

Cascade and inheritance - Learn web development
ies when there is such a conflict. which rule is styling your element may not be the one you expect, so you need to understand how these mechanisms work. also significant here is the concept of inheritance, which means that some css properties by default inherit values set on the current element's parent element, and some don't. this can also cause some behavior that you might not expect. let's start by taking a quick look at the key things we are dealing with, then we'll look at each in turn and see how they interact with each other and 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...
...n, which lists a number of data points about that property, including whether it is inherited or not. see the color property specifications section, for example. understanding how the concepts work together these three concepts together control which css applies to what element; in the below sections we'll see how they work together. it can sometimes seem a little bit complicated, but you will start to remember them as you get more experienced with css, and you can always look up the details if you forget! even experienced developers don't remember all the details. the below video shows how you can use the firefox devtools to inspect a page's cascade, specificity, and more: understanding inheritance we'll start with inheritance. in the example below we have a <ul>, with two levels of un...
... new color for the <a> element — for example a { color: red; }? resetting all property values the css shorthand property all can be used to apply one of these inheritance values to (almost) all properties at once. its value can be any one of the inheritance values (inherit, initial, unset, or revert). it's a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes. in the below example we have two blockquotes. the first has styling applied to the blockquote element itself, the second has a class applied to the blockquote which sets the value of all to unset. try setting the value of all to some of the other available values and observe what the difference is. understanding the cascade we now understand why a par...
...And 3 more matches

Test your skills: Selectors - Learn web development
t or further help section at the bottom of this page. selectors one without changing the html, use css to do the following things: make h1 headings blue. give h2 headings a blue background and white text. cause text wrapped in a span to have a font-size of 200%. 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. selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background. give the element with a class of alert a 1px grey border. if the element with a class of alert also has a class of stop, make the background red.
...d of special a yellow background. give the element with a class of alert a 1px grey border. if the element with a class of alert also has a class of stop, make the background red. if the element with a class of alert also has a class of go, make the background green. 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. selectors three in this example, try making the following changes without adding to the html. style links, making the link-state orange, visited links green, and remove the underline on hover. make the first element inside the container font-size: 150% and the first line of that element red. stripe every other row i...
...reen, and remove the underline on hover. make the first element inside the container font-size: 150% and the first line of that element red. stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white. 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. selectors four in this task try the following: make any paragraph that directly follows an h2 element red. remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list. try updating the live code below to recreate the finished example: for asses...
...And 3 more matches

Fundamental text and font styling - Learn web development
overview: styling text next in this article we'll start you on your journey towards mastering text styling with css. here we'll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing. prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css). objective: to learn the fundamental properties and techniques needed to style text on web pages. ...
...c computer literacy, html basics (study introduction to html), css basics (study introduction to css). 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 cr...
...an't guarantee the availability of the fonts you want to use on your webpages (even a web font could fail for some reason), you can supply a font stack so that the browser has multiple fonts it can choose from. this simply involves a font-family value consisting of multiple font names separated by commas, e.g. p { font-family: "trebuchet ms", verdana, sans-serif; } in such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. if it is, it applies that font to the selected elements. if not, it moves on to the next font, and so on. it is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. to ...
...And 3 more matches

Styling lists - Learn web development
line-height on the description list terms and descriptions as we did with the paragraphs and list items. again, consistency is good! we also make the description terms have bold font, so they visually stand out easier. list-specific styles now we've looked at general spacing techniques for lists, let's explore some list-specific properties. there are three properties you should 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. list-style-image: allows you to use a c...
...for the bullet points. in our example, we've set the ordered list to use uppercase roman numerals, with: ol { list-style-type: upper-roman; } this gives us the following look: you can find a lot more options by checking out the list-style-type reference page. bullet position the list-style-position property sets whether the bullets appear inside the list items, or outside them before the start of each item. the default value is outside, which causes the bullets to sit outside the list items, as seen above. if you set the value to inside, the bullets will sit inside the lines: ol { list-style-type: upper-roman; list-style-position: inside; } using a custom bullet image the list-style-image property allows you to use a custom image for your bullet. the syntax is pretty simple: ...
...; } the values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside). if both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason. controlling list counting sometimes you might want to count differently on an ordered list — e.g. ...
...And 3 more matches

Web fonts - Learn web development
lternative, which works very well, right back to ie version 6. web fonts are a css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it. ...
... they are web fonts or not. this video provides a nice walkthrough: active learning: a web font example with this in mind, let's build up a basic web font example from first principles. it is difficult to demonstrate this using an embedded live example, so instead, we would like you to follow the steps detailed in the below sections, to get an idea of the process. you should use the web-font-start.html and web-font-start.css files as a starting point to add your code to (see the live example). make a copy of these files in a new directory on your computer now. in the web-font-start.css file, you'll find some minimal css to deal with the basic layout and typesetting of the example. finding fonts for this example, we'll use two web fonts, one for the headings, and one for the body text. to...
...fonts are created by font foundries and are stored in different file formats. there are generally three types of sites where you can obtain fonts: a free font distributor: this is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). ...
...And 3 more matches

JavaScript basics - Learn web development
what is javascript? javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website. it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. javascript is versatile and beginner-friendly. ...
... what is javascript? javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website. it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. javascript is versatile and beginner-friendly. ...
...guage, and offers an opportunity to play with a few browser api features too. have fun! a hello world! example javascript is one of the most popular modern web technologies! as your javascript skills grow, your websites will enter a new dimension of power and creativity. however, getting comfortable with javascript is more challenging than getting comfortable with html and css. you may have to start small, and progress gradually. to begin, let's 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. w...
...And 3 more matches

The web and web standards - Learn web development
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 we have sites like mdn web docs), but instead ar...
...e best known web standards body, but there are others such as the whatwg (who were responsible for the modernization of the html language), ecma (who publish the standard for ecmascript, which javascript is based on), khronos (who publish technologies for 3d graphics, such as webgl), and others. "open" standards one of the key aspects of web standards, which timbl and the w3c agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written. because web technologies are created openly, in collaboration between many different companies, it means that no one co...
...se you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). as you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work. being a web developer is good the web industry is a very attractive market to enter if you are looking for a job. recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. and at the same time, there is a ...
...And 3 more matches

Advanced text formatting - Learn web development
t fundamentals article. the elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to use lesser-known html elements to mark up advanced semantic features. description lists in html text fundamentals, we walked through how to mark up basic lists in html, but we didn't mention the third type of list you'll occasionally come across — description lists. the purpos...
...ner('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the...
...ner('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the...
...And 3 more matches

What’s in the head? Metadata in HTML - Learn web development
itle>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup. prerequisites: basic html familiarity, as covered in getting started with html. objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html document. what is the html head? let's revisit the simple html document we covered in the previous article: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this ...
...e> </head> in larger pages however, the head can get quite full. try going to some of your favorite websites and use the developer tools to check out their head contents. our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. let's get started. adding a title we've already seen the <title> element in action — this can be used to add a title to the document. this however can get confused with the <h1> element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. but they are different things! the <h1> element appears on the page when loaded in the browser — ge...
...to do this, either copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place. press the "raw" button on the github page, which causes the raw code to appear (possibly in a new browser tab). next, choose your bro...
...And 3 more matches

From object to iframe — other embedding technologies - Learn web development
<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 m...
...ner('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the...
...age usable sooner and decreases your official page load time (an important seo metric.) security concerns above we mentioned security concerns — let's go into this in a bit more detail now. we are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using <iframe>s in your experiments and work. also, there is no need to be scared and not use <iframe>s — you just need to be careful. read on... browser makers and web developers have learned the hard way that iframes are a common target (official term: attack vector) for bad people on the web (often termed hackers, or more accurately, crackers) to attack if they are trying to mal...
...And 3 more matches

Video and Audio APIs - Learn web development
you to control video and audio players programmatically — for example htmlmediaelement.play(), htmlmediaelement.pause(), etc. this interface is available to both <audio> and <video> elements, as the features you'll want to implement are nearly identical. let's go through an example, adding features as we go. our finished example will look (and function) something like the following: getting started to get started with this example, download our media-player-start.zip and unzip it into a new directory on your hard drive. 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. exploring the html open the html index file. you'll se...
...sting bits here. first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden. in our javascript later on, we will set the controls to visible, and remove the controls attribute from the <video> element. this is so that, if the javascript doesn't load for some reason, users can still use the video with the native controls. we give the controls an opacity of 0.5 by default, so that they are less distracting when ...
...oving classes, etc. we use the classlist.contains() method to check whether the list contains the active class. this returns a boolean true/false result. if active has been set on the rwd button, we remove it using classlist.remove(), clear the interval that has been set when the button was first pressed (see below for more explanation), and use htmlmediaelement.play() to cancel the rewind and start the video playing normally. if it hasn't yet been set, we add the active class to the rwd button using classlist.add(), pause the video using htmlmediaelement.pause(), then set the intervalrwd variable to equal a setinterval() call. when invoked, setinterval() creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value o...
...And 3 more matches

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). we'll also wire up our "clear completed" button. along the way, we'll learn about using conditional rendering in our templates. 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. ...
...sites: 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. a deeper understanding 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. 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 comp...
...x" aria-label="toggle the completion of this todo" checked={{ @todo.iscompleted }} {{ on 'change' (fn this.todos.togglecompletion @todo) }} > note: the above snippet uses a new ember-specific keyword — fn. fn allows for partial application, which is similar to bind, but it never changes the invocation context; this is equivalent to using bind with a null first argument. ...
...And 3 more matches

Accessibility in React - Learn web development
e features we set out to implement. a user can add a new task, check and uncheck tasks, delete tasks, or edit task names. and they can filter their task list by all, active, or completed tasks. or, at least: they can do all of these things with a mouse. unfortunately, these features are not very accessible to keyboard-only users. let's explore this now. exploring the keyboard usability problem start by clicking on the input at the top of our app, as if you're going to add a new task. you'll see a thick, dashed outline around that input. this outline is your visual indicator that the browser is currently focused on this element. press the tab key, and you will see the outline appear around the "add" button beneath the input. this shows you that the browser's focus has moved. press tab a few ...
...r useeffect to focus on the edit button if isediting is false? let's try it now — update your useeffect() call like so: useeffect(() => { if (isediting) { editfieldref.current.focus(); } else { editbuttonref.current.focus(); } }, [isediting]); this kind of mostly works. head back to your browser and you’ll see that your focus moves between edit <input> and "edit" button as you start and end an edit. however, you may have noticed a new problem — the "edit" button in the final <todo /> component is focussed immediately on page load, before we even interact with the app! our useeffect() hook is behaving exactly as we designed it: it runs as soon as the component renders, sees that isediting is false, and focuses the "edit" button. because there are three instances of <todo /...
...isediting) { editbuttonref.current.focus(); } }, [wasediting, isediting]); note that the logic of useeffect() now depends on wasediting, so we provide it in the array of dependencies. again try using the "edit" and "cancel" buttons to toggle between the templates of your <todo /> component; you'll see the browser focus indicator move appropriately, without the problem we discussed at the start of this section. focusing when the user deletes a task there's one last keyboard experience gap: when a user deletes a task from the list, the focus vanishes. we're going to follow a pattern similar to our previous changes: we'll make a new ref, and utilize our useprevious() hook, so that we can focus on the list heading whenever a user deletes a task. why the list heading? sometimes, the pla...
...And 3 more matches

Componentizing our React app - Learn web development
for our components. the following commands make a components directory and then, within that, a file called todo.js. make sure you're in the root of your app before you run these! mkdir src/components touch src/components/todo.js our new todo.js file is currently empty! open it up and give it its first line: import react from "react"; since we're going to make a component called todo, you can start adding the code for that to todo.js too, as follows. in this code, we define the function and export it on the same line: export default function todo() { return ( ); } this is ok so far, but our component has to return something! go back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() ...
...ls other developers "this data will never change after being defined here”. rendering with iteration to render our array of objects, we have to turn each one into a <todo /> component. javascript gives us an array method for transforming data into something else: array.prototype.map(). above the return statement of app(), make a new const called tasklist and use map() to transform it. ...
...by="list-heading" > {tasklist} </ul> </div> ); } export default app; with this in place, we’re almost ready to tackle some interactivity in our react app! summary and that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. ...
...And 3 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about conditional rendering in react, and implementing list filtering and an editing ui in our app. editing the name of a task we don’t have a user interface for editing the name of a task yet. we'll get to that in a moment. to start with, we can at least implement an edittask() function in app.js. it’ll be similar to deletetask() because it'll take an id to find its target object, but it'll also take a newname property containing the name to update the task to. we'll use array.prototype.map() instead of array.prototype.filter() because we want to return a new array with some changes, instead of deleting something from the ...
...ditingtemplate : viewtemplate}</li>; your browser should render all your tasks just like before. to see the editing template, you will have to change the default isediting state from false to true in your code for now; we will look at making the edit button toggle this in the next section! toggling the <todo /> templates at long last, we are ready to make our final core feature interactive. to start with, we want to call setediting() with a value of true when a user presses the "edit" button in our viewtemplate, so that we can switch templates. update the "edit" button in the viewtemplate like so: <button type="button" classname="btn" onclick={() => setediting(true)}> edit <span classname="visually-hidden">{props.name}</span> </button> now we'll add the same onclick handler to the "canc...
...todo items to toggle between templates. the next step is to actually make the editing functionality work. editing from the ui much of what we're about to do will mirror the work we did in form.js: as the user types in our new input field, we need to track the text they enter; once they submit the form, we need to use a callback prop to update our state with the new name of the task. we'll start by making a new hook for storing and setting the new name. still in todo.js, put the following underneath the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but before the templates: function handlechange(e) { setnewname(e.target.value); } now we'll update our editingtemplate's <inpu...
...And 3 more matches

Beginning our React todo list - Learn web development
ekeeping create-react-app has made a few files we won't be using at all for our project. we're not going to write per-component stylesheets, so first delete the app.css import from the top of app.js. we are also not going to be using the logo.svg file, so remove that import too. then, copy and paste the following commands into your terminal to delete some unneeded files. make sure you’re starting in the app's root directory! # move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css logo.svg serviceworker.js setuptests.js # move back up to the root of the project cd .. notes: two of the files we’re deleting are for testing the application. we will not cover testing here. if you stopped your server to do the terminal tasks mentioned above...
...ot directory! # move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css logo.svg serviceworker.js setuptests.js # move back up to the root of the project cd .. notes: two of the files we’re deleting are for testing the application. we will not cover testing here. if you stopped your server to do the terminal tasks mentioned above, you’ll have to start it again using npm start. project starter code as a starting point for this project, we're going to provide two things: an app() function to replace the one you have now, and some css to style your app. the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <div classname="todoapp ...
...d; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } save and look back at your browser, and your app should now have reasonable styling. summary now our todo list app actually looks a bit more like a real app! the problem is: it doesn’t actually do anything. ...
...And 3 more matches

Git and GitHub - Learn web development
later on. the most popular vcs (at least among web developers) is git, along with github, a site that provides hosting for your repositories and several tools for working with them. this module aims to teach you what you need to know about both of them. overview vcses are essential for software development: it is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. you need to have some kind of mechanism in place to manage the occurences, and help avoid loss of work as a result. when working on a project on your own or with others, you'll want to be able to back up the code in a centra...
...ame time. you need to have some kind of mechanism in place to manage the occurences, and help avoid loss of work as a result. when working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks. you will also want to be able to roll back to earlier versions if a problem is later discovered. you might have started doing this in your own work by creating different versions of the same file, e.g. mycode.js, mycode_v2.js, mycode_v3.js, mycode_final.js, mycode_really_really_final.js, etc., but this is really error-prone and unreliable. different team members will commonly want to create their own separate versions of the code (called branches in git), work on a new feature in that version, and then get it m...
...e codebase is made on your computer (and everyone else's). you make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites to use git and github, you need: a desktop computer with git installed on it (see the git downloads page). a tool to use git. depending on how you like to work, you could use a git gui client (we'd recommend github desktop, sourcetree or git kraken) or just stick to using a terminal window. in fact, it is probably useful for you to get to know at least the basics of git ter...
...And 3 more matches

Introducing a complete toolchain - Learn web development
t the production version still runs on a wide variety of browsers, modern and older. post development: tooling that comes into play after you are done with the body of development to ensure that your software makes it to the web and continues to run. in this case study we'll look at adding tests to your code, and deploying your app using netlify so it is available for all the web to see. let's start working on these, beginning with our development environment. creating a development environment this part of the toolchain is sometimes seen to be delaying the actual work, and it can be very easy to fall into a "rabbit hole" of tooling where you spend a lot of time trying to get the environment "just right". but you can look at this in the same way as setting up your physical work environmen...
...sic" issues will be caught early on. using the command line, we can create the project, install the initial tooling, and create rudimentary configuration files. again, once you've repeated this process a few times, you'll get a feel for what your default setup should be. of course, this is just one possible configuration. initial setup ok, let's get the initial project setup out the way. start off by opening your terminal, and navigating to a place that you'll be able to find and get to easily. the desktop perhaps, or your home or documents folder? next, run the following commands to create a folder to keep your project in, and go inside the folder: mkdir will-it-miss cd will-it-miss now we will create a new directory for all of our web site's development code to live in...
...der: mkdir will-it-miss cd will-it-miss now we will create a new directory for all of our web site's development code to live in. run the following now: mkdir src code organization tends to be quite subjective from team to team. for this project, the source code will live in src. making sure you are inside the root of the will-it-miss directory, enter the following command to start git’s source control functionality working on the directory: git init this means that you'll now be able to start storing revisions to the folder's contents, saving it to a remote repository, etc. more on this later! next, enter the following command to turn your directory into an npm package, with the advantages that we discussed in the previous article: npm init --force this...
...And 3 more matches

Package management basics - Learn web development
ride 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 package ecosystem let’s run through an example to get you started with using a package manager and registry to install a command line utility. parcel is a(nother) tool that developers commonly use in their development process. parcel is clever in that it can watch the contents of our code for calls to dependencies and automatically installs any dependencies it sees that our code needs. it can also automatically build our code. in our previous chapter we ins...
...o 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. description: a quick description of the app's purpose. type in something really simple, like "a simple npm package to learn about using npm", then press return. entry point: this will be the top-level javascript file of the app. the default index.js is fine for now — press return. test command, git repositor...
...mmand: parcel index.html you should see something like this printed to your terminal: server running at http://localhost:1234 ✨ built in 193ms. note: if you have trouble with the terminal returning a "command not found" type error, try running the above command with the npx utility, i.e. npx parcel index.html. now we're ready to benefit from the full javascript package ecosystem. for a start, there is now a local web server running at http://localhost:1234. go there now and you’ll not see anything for now, but what is cool is that when you do make changes to your app, parcel will rebuild it and refresh the server automatically so you can instantly see the effect your update had. now for some page content. let's say we want to show human-readable relative dates, such as "2 hours ag...
...And 3 more matches

Debugging on Mac OS X
$home/.lldbinit is sufficient: settings set target.load-cwd-lldbinit true however, if you will run lldb from a different directory, or if you will be running it indirectly by debugging in xcode (xcode always runs lldb from "/"), then this setting will not help you. instead, add the following to your $home/.lldbinit: # this automatically sources the mozilla project's .lldbinit as soon as lldb # starts or attaches to a mozilla app (that's in an object directory). # # this is mainly a workaround for xcode not providing a way to specify that # lldb should be run from a given directory. (xcode always runs lldb from "/", # regardless of what directory xcode was started from, and regardless of the # value of the "custom working directory" field in the scheme's run options. # therefore setting `set...
... the breakpoint runs some commands to # figure out the object directory path from the attached target and then # sources the .lldbinit from there. ...
... the breakpoint runs some commands to # figure out the object directory path from the attached target and then # sources the .lldbinit from there. # # note: this scripts actions take a few seconds to complete, so the custom # formatters, commands etc. ...
...And 3 more matches

Debugging on Windows
this document explains how to debug mozilla-derived applications such as firefox, thunderbird, and seamonkey on windows using the visual c++ ide. if vc++ and your mozilla application hang shortly after you launch the application under the debugger, see problems loading debug symbols. ways to start the debugger first of all, it's necessary to install a visual studio extension to be able to follow child processes as they are created. firefox, in general, and even in non-e10s mode, does not start the main process directly, it starts it via a launcher process. this means that visual studio will only attach to the first process it finds, and will not hit any break-point (and even notifies you that it cannot find their location). microsoft child process debugging power tool allows automati...
...ocess, gpu process, etc. enable it by going its configuration menu in "debug > other debugging targets > child process debugging settings", and ticking the box. if you have followed the steps in building firefox for windows and have a local debug build, you can execute ./mach run --debug from the same command line. it would open visual studio with firefox's run options configured. you can click "start" button to run firefox then, already attached in the debugger. alternatively, if you have generated the visual studio solution, via ./mach build-backend -b visualstudio, opening this solution allows you to run firefox.exe directly in the debugger. making it the startup project, by right clicking on it (it appears bold when it's the case) can be useful. breakpoints are kept across runs, this can ...
... run the program until you hit an assertion. you will get a dialog box asking if you would like to debug. hit "cancel". ...
...And 3 more matches

Gecko Logging
rned on normally. verbose 5 a message that will be printed a lot, useful for debugging program flow and will probably impact performance. ...
...l be printed a lot, useful for debugging program flow and will probably impact performance. ...
...stuff() { moz_log(slogger, loglevel::info, ("doing stuff.")); int i = 0; int start = time::nowms(); moz_log(slogger, loglevel::debug, ("starting loop.")); while (i++ < 10) { moz_log(slogger, loglevel::verbose, ("i = %d", i)); } // only calculate the elapsed time if the warning level is enabled. if (moz_log_test(slogger, loglevel::warning)) { int elapsed = time::nowms() - start; if (elapsed > 1000) { moz_log(slogger, loglevel::warning, ("loop took %dms!", elapsed)); } } if (i != 10) { moz_log(slogger, loglevel::error, ("i should be 10!")); } } enabling logging the log level for a module is controlled by setting an environment variable before launching the application. it can also be adjusted by setting prefs. by default all logging output is...
...And 3 more matches

How to get a stacktrace with WinDbg
ou need a firefox version for which symbols are availables from the mozilla symbol server to use with windbg. you can use any official nightly build or released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. ...
...efox version for which symbols are availables from the mozilla symbol server to use with windbg. you can use any official nightly build or released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. debugging to begin debugging, ensure that firefox is not already running and open windbg from the start menu. ...
...he start menu. (start->all programs->debugging tools for windows->windbg) next, open the "file" menu and choose "open executable...". in the file chooser window that appears, open the firefox.exe executable in your firefox program folder (c:\program files\mozilla firefox). you should now see a "command" text window with debug output at the top and an input box at the bottom. before debugging can start, several commands must be entered into the one-line input box at the bottom of the command window. tip: all commands must be entered exactly as written, one line at a time, into the bottom of the command box. copying and pasting each line is the easiest method to avoid mistakes some commands start with a period (.) or a pipe character (|), which is required. (the keystroke for a pipe charac...
...And 3 more matches

Addon
dd-on is a third party add-on installation or not. id read only string the id of the add-on. no other installed add-on will have the same id. isactive read only boolean true if the add-on is currently functional. for some add-ons this will change immediately based on the appdisabled and userdisabled properties; for others it will only change after an application restart. iscompatible read only boolean true or false depending on whether the add-on is compatible with the current application version and platform version. isplatformcompatible read only boolean true or false depending on whether the add-on is compatible with the current operating system. name read only string the name of the add-on. pendingoper...
... isplatformcompatible read only boolean true or false depending on whether the add-on is compatible with the current operating system. name read only string the name of the add-on. pendingoperations read only integer a bitfield holding all of the current operations that are waiting to be performed for this add-on. operations are generally deferred when a restart is necessary to accomplish them. permissions read only integer a bitfield holding all the the operations that can be performed on this add-on. operations my be restricted based on system policies (e.g., the system administrator may not allow certain add-ons to be uninstalled), add-on type (e.g., themes may not be disabled), or add-on state (e.g., an incompatible add-on cannot be e...
...the addoninstall that will install this add-on. only available if this add-on is in the process of being installed. installdate read only date the date that the add-on was first installed. optionsurl read only string the url of the options dialog to display for this add-on. pendingupgrade read only addon if this add-on will be replaced on the next restart, this property will hold the new addon object. releasenotesuri read only nsiuri a uri for release notes for this version. screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of preview images for the add-on. size read only integer the size of the add-on's files in bytes. for an add-on that has not yet been dow...
...And 3 more matches

Add-on Manager
tes using the findupdates() method. it must be passed an updatelistener to receive information about compatibility information and new update information. any available update is returned as an addoninstall which is ready to be downloaded and installed. ...
... passed an updatelistener to receive information about compatibility information and new update information. any available update is returned as an addoninstall which is ready to be downloaded and installed. detecting add-on changes requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) you can also get lists of add-ons that, at startup, were changed in various ways. ...
...ate is returned as an addoninstall which is ready to be downloaded and installed. detecting add-on changes requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) you can also get lists of add-ons that, at startup, were changed in various ways. the getstartupchanges() method lets you find out which add-ons were installed, removed, updated, enabled, or disabled at application startup. ...
...And 3 more matches

OS.File for the main thread
see the promise object documentation for details. also, os.file plays very nicely with task.jsm. ...
...epending on other fields, it may also be opened for writing. write if true, the file will be opened for writing. depending on other fields, it may also be opened for reading. prior to gecko 27, unless create or truncate are set or explicit unixflags are given, the file will be opened for appending on unix/linux. however, the file is not opened for appending on windows. see bug 924858. starting with gecko 27, you may use the append flag instead. for an example using append see here. truncate | trunc if true, the file will be opened for writing. if the file does not exist, it will be created. if the file exists, its contents will be removed. cannot be used with create. create if true, file will be opened for writing. the file must not exist. if the file already exists, t...
... >= 27, it is enough, but crucial, to set the correct append flag. var outfile = yield os.file.open("file.tmp", {write: true, append: false}, options); try { // ... do something with that file } finally { yield outfile.close(); } }); example of opening file and keeping it locked this uses tasks.jsm to open a file and keep it open. when you are done with it, like in shutdown of restartless add-on, you should close the file so it becomes editable again. let options = { winshare: 0 // exclusive lock on windows }; if (os.constants.libc.o_exlock) { // exclusive lock on *nix options.unixflags = os.constants.libc.o_exlock; } let file = yield os.file.open(..., options); then when you want to unlock the file so it can be edited from other places, close the file. file.close(); ...
...And 3 more matches

Gecko Profiler FAQ
below. 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. for js code, the profiler platform doesn’t capture any information about lines. it only knows what function was executed and what line this function starts at. for native code, the profiler captures the necessary information but doesn’t have a way to display it. similarly it also can’t show you instruction level information about where each sample was captured (this is why there is no support for line-level sampling for native code either.) at this point the granularity of each sample it displays is a native function. ...
... on your platform of choice (for example xperf/vtune on windows, instruments on osx, and perf/zoom on linux.) one workaround is to break the hot function into several explicitly-non-inline helpers, recompile, and re-profile. this can change some performance characteristics, but is a decent way to get a sense of which parts of a large function are expensive. how to profile startup code that regresses just a little (<10-15ms ts_paint/tpaint) [mstange] we currently don’t have a good way to do that. you can write your own tools to assist you in this process, though. i did something like this a few years ago with the old profiler and i think something similar would work here: i think there are three main challenges here. you need deterministic profi...
...inistic profiles that can be compared meaningfully, you need to gather enough data / samples, and you need a way to compare profiles. to increase determinism, you really want an automated way of gathering the data. and you’ll want to make sure the profiles only contain data for the time range you’re interested in. to stop the profiler from gathering more samples after the “startup end” marker that you’re interested in, you can call services.profiler.pause(); or you can insert a marker with a special string and then write a script that filters out all samples that were gathered after your marker. to increase the amount of data, you should run your automated gathering procedure many times, and then combine multiple profiles into one. we don’t have a...
...And 3 more matches

Index
n later be used to easily identify and retrieve it. it's important to note that nss requires strict cleanup for all handles returned by nss. the application should always call the appropriate dereference (destroy) functions once a handle is no longer needed. this is particularly important for applications that might need to close a database and reinitialize nss using a different one, without restarting. such an operation might fail at runtime if data elements are still being referenced. in addition to the freebl, softoken, and ckbi modules, there is an utility library for general operations (e.g., encoding/decoding between data formats, a list of standardized object identifiers (oid)). nss has an ssl/tls module that implements the secure sockets layer/transport layer security network prot...
...as, which are an attempt to simplify management with the limited offerings of c (because there are no destructors). the idea is to group multiple memory allocations in order to simplify cleanup. performing an operation often involves allocating many individual data items, and the code might be required to abort a task at many positions in the logic. an arena is requested once processing of a task starts, and all memory allocations that are logically associated to that task are requested from the associated arena. the implementation of arenas makes sure that all individual memory blocks are tracked. once a task is done, regardless whether it completed or was aborted, the programmer simply needs to release the arena, and all individually allocated blocks will be released automatically. often free...
...ble and works fine in all simple scenarios, for example if all (b) candidate issuer certificates have the same subject and issuer names and differ by validity period; however, it works only in a limited amount of more advanced scenarios. unfortunately, the world of certificates has become more complex in the recent past. new certificate authorities enter the global pki market, and in order to get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates. as a result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level). as a consequence, it will be necessary to try multiple diffe...
...And 3 more matches

Setting up an update server
explorer and selecting properties. you'll find the correct size in bytes at the end of the line that begins "size", not the one that begins "size on disk". be sure to remove the commas when you paste this number into the xml file. ...
... you'll find the correct size in bytes at the end of the line that begins "size", not the one that begins "size on disk". be sure to remove the commas when you paste this number into the xml file. ...
... you paste this number into the xml file. on macos, you can get the exact size of your mar by running the command: stat -f%z <filename> or on linux, the same command would be: stat --format "%s" <filename> starting your update server now, start an update server to serve the update files on port 8000. an easy way to do this is with python. remember to navigate to the correct directory before starting the server. ...
...And 3 more matches

Animated PNG graphics
ned to allow incremental display of frames before the entire image has been read. this implies that some errors may not be detected until partway through the animation. it is strongly recommended that when any error is encountered decoders should discard all subsequent frames, stop the animation, and revert to displaying the default image. a decoder which detects an error before the animation has started should display the default image. an error message may be displayed to the user if appropriate. structure an apng stream is a normal png stream as defined in the png specification, with three additional chunk types describing the animation and providing additional frame data. to be recognized as an apng, an 'actl' chunk must appear in the stream before any 'idat' chunks. the 'actl' structure...
... appear after the 'fdat' chunks from frame n-1 and before the 'fdat' chunks for frame n. other ancillary chunks are allowed to appear among the apng chunks, including between 'fdat' chunks. exactly one 'fctl' chunk is required for each frame. byte offset field name field type description 0 sequence_number unsigned int sequence number of the animation chunk, starting with 0. 4 width unsigned int width of the following frame. 8 height unsigned int height of the following frame. 12 x_offset unsigned int x position at which to render the following frame. 16 y_offset unsigned int y position at which to render the following frame. 20 delay_num unsigned short frame delay fr...
...filter byte at the beginning of each scanline, similar to the uncompressed data of all the 'idat' chunks. it utilizes the same bit depth, color type, compression method, filter method, interlace method, and palette (if any) as the default image. byte offset field name field type description 0 sequence_number unsigned int sequence number of the animation chunk, starting from 0. 4 frame_data x bytes frame data for this frame. each frame inherits every property specified by any critical or ancillary chunks before the first 'idat' in the file, except the width and height, which come from the 'fctl' chunk. if the png 'phys' chunk is present, the apng images and their x_offset and y_offset values must be scaled in the same way as the main...
...And 3 more matches

Finishing the Component
using frozen interfaces the core functionality of blocking sites is still missing, however. ...
... using frozen interfaces the core functionality of blocking sites is still missing, however. ...
...nge the nsisupports implementation macro to include nsicontentpolicy so that other parts of gecko will know weblock supports the nsicontentpolicy interface without modifying this macro. ns_impl_isupports3(weblock, nsiobserver, iweblock, nsicontentpolicy); receiving notifications to receive notifications, you must register as a new category. you have already registered as a category to receive startup notification. this time, the category name to use is "content-policy". to add the weblock component to this category, modify the weblockregistration callback function so that it looks like this: static ns_method weblockregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, ...
...And 3 more matches

nsDependentCSubstring external
equalsliteral find rfind findchar rfindchar appendint tointeger base classes nscstringcontainer data members no public members. ...
...blic members. ...
... parameters char** begin cha...
...And 3 more matches

nsDependentSubstring external
g&, print32, print32 (*) rfind findchar rfindchar appendint tointeger base classes nsstringcontainer data members no public members. ...
...c members. ...
... parameters pr...
...And 3 more matches

nsIDBChangeListener
the nsimsgdbhdr of the message that changed. aoldflags the original flags on the message. can be used to figure out what changed. flags are defined in nsmsgmessageflags. anewflags the new flags on the message. can be used to figure out what changed. flags are defined in nsmsgmessageflags. ainstigator the caller who changed the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onhdrdeleted() called when a header is deleted from the database. void onhdrdeleted(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was removed. aparentkey the key of the parent fo...
...elistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was removed. aparentkey the key of the parent folder for deleted header. the typedef of nsmsgkey is given in mailnewstypes2.idl. aflags the flags on the message. flags are defined in nsmsgmessageflags. ainstigator the caller who deleted the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onhdradded() called when a header is added to the database. void onhdradded(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was added. aparentkey the key of the parent folder for new hea...
...idbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was added. aparentkey the key of the parent folder for new header. the typedef of nsmsgkey is given in mailnewstypes2.idl. aflags the flags on the message. flags are defined in nsmsgmessageflags. ainstigator the caller who added the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onparentchanged() called when a message's parent is changing (i.e. most likely it is being moved). void onparentchanged(in nsmsgkey akeychanged, in nsmsgkey oldparent, in nsmsgkey newparent, in nsidbchangelistener ainstigator); parameters akeychanged the key of the message that changed. t...
...And 3 more matches