High-level guides - Web APIs
webrtc (web real-time communications) is a broad, multi-component system for setting up and operating complex audio, video, and data channels across networks among two or more peers on the web. the high-level guides listed below introduce webrtc technology from a top-down perspective, describing the overall architecture, the life cycle of a webrtc connection, and basic security and technological issues you might run into as you explore and build web content or apps using the webrtc api. in addition, you'll find suggestions as to tools, libraries, and frameworks that might be helpful and compatibility information so you know which parts of the overall suite of webrtc features can be safely used given your target audience. there are no subpages at this time. when you're ready to explo...

-webkit-tap-highlight-color - CSS: Cascading Style Sheets
-webkit-tap-highlight-color is a non-standard css property that sets the color of the highlight that appears over a link while it's being tapped. the highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on. -webkit-tap-highlight-color: red; -webkit-tap-highlight-color: transparent; /* for removing the highlight */ syntax values a <color value>. formal definition initial valueblackapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) |...

Index - Web APIs
b. 297 blobevent.data api, blobevent, dom, dom reference, experimental, media stream recording, property, reference the blobevent.data read-only property represents a blob associated with the event. 298 blobevent.timecode api, blobevent, media, media stream recording, property, reference the timecode readonlyinline property of the blobevent interface a domhighrestimestamp indicating the difference between the timestamp of the first chunk in data, and the timestamp of the first chunk in the first blobevent produced by this recorder. 299 bluetooth api, bluetooth, experimental, interface, reference, web bluetooth api the bluetooth interface of the web bluetooth api returns a promise to a bluetoothdevice object with the specified optio...
...d value are strictly equal. to return a value of true, all passed values must be of the same type and value and must be in the same order. this allows structural equality to be tested quickly. 424 cssnumericvalue.max() api, css typed object model api, cssnumericvalue, experimental, houdini, method, reference, max() the max() method of the cssnumericvalue interface returns the highest value from among the values passed. the passed values must be of the same type. 425 cssnumericvalue.min() api, css typed object model api, cssnumericvalue, experimental, houdini, method, reference, min() the min() method of the cssnumericvalue interface returns the lowest value from among those values passed. the passed values must be of the same type. 426 cssnu...
...mportant properties we can use: fillstyle and strokestyle. 521 basic animations canvas, graphics, html, html5, intermediate, tutorial probably the biggest limitation is, that once a shape gets drawn, it stays that way. if we need to move it we have to redraw it and everything that was drawn before it. it takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on. 522 basic usage of canvas canvas, graphics, html, intermediate, tutorial at first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. indeed, the <canvas> element has only two attributes, width and height. these are both optional and can also be set...
...And 33 more matches

Web video codec guide - Web media technologies
at a typical 30 frames per second, each second of hd video would occupy 248,832,000 bytes (~249 mb). a minute of hd video would need 14.93 gb of storage. ...
...k to a section below which offers additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of. ...
...inds of shapes and patterns, or aren't good at replicating sharp edges, or tend to lose detail in dark areas, or any number of possibilities. it all depends on the underlying algorithms and mathematics. the potential effect of source video format and contents on the encoded video quality and size feature effect on quality effect on size color depth (bit depth) the higher the color bit depth, the higher the quality of color fidelity is achieved in the video. additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors. depending on ...
...And 29 more matches

Index - Archive of obsolete content
uns on that software. or perhaps you're just curious about the history of an obsolete feature or api, and how it worked. 2 .htaccess ( hypertext access ) 301 redirect, cache control, custom error pages, htaccess, permanent redirect, redirect file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other. syntax highliting support for .htaccess files less. 3 2015 mdn fellowship program 2015, archive, fellowship no summary! 4 api api, archive archived documentation about obsolete web standards apis. 5 navigator api, navigator features that used to hang off the navigator interface, but have since been removed. 6 navigator.moznotification ...
... 42 base64 add-on sdk no summary! 43 clipboard add-on sdk interact with the system clipboard, setting and getting its contents. 44 context-menu add-on s...
... no summary! 439 firefox archive, firefox out-of-date information about the firefox project. 440 block and line layout cheat sheet gecko the details of block and line layout are tricky; this document serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on. it's a work-in-progress, with questions in red highlight. if you know the answer, please pass it along to me so i can update the document. 441 building firefox with rust code build documentation, gecko, junk, build, rust firefox uses the rust programming language extensively. this page is a rough guide for people using rust in firefox. see also the documentation on this topic on the oxidation wiki page. 442 content ...
...And 20 more matches

Using the CSS Painting API - Web APIs
then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc. to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet. it takes two parameters. the first is the name we give the worklet — this is the name we will use in our css as the parameter of the paint() function when we want to apply this styling to an element. the second parameter is the class that ...
... paint worklet. it takes two parameters. the first is the name we give the worklet — this is the name we will use in our css as the parameter of the paint() function when we want to apply this styling to an element. the second parameter is the class that does all the magic, defining the context options and what to paint to the two-dimensional canvas that will be our image. registerpaint('headerhighlight', class { /* define if alphatransparency is allowed alpha is set to true by default. if set to false, all colours used on the canvas will be fully opaque */ static get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context a subset of the html5 canvas api. */ paint(ctx) { ctx.fillstyle = '...
...et from our main script. css.paintworklet.addmodule('nameofpaintworkletfile.js'); this can be done using the paint worklet's addmodule() method in a <script> within the main html or in an external javascript file linked to from the document. in our example, the paintworklet is stored on github. ...
...And 18 more matches

The "codecs" parameter in common media types - Web media technologies
ading zeros. av1 codec parameter string components component details p the one-digit profile number: av1 profile numbers profile number description 0 "main" profile; supports yuv 4:2:0 or monochrome bitstreams with bit depth of 8 or 10 bits per component. 1 "high" profile adds support for 4:4:4 chroma subsampling. 2 "professional" profile adds support for 4:2:2 chroma subsampling and 12 bit per component color. ll the two-digit level number, which is converted to the x.y format level format, where x = 2 + (ll >> 2) and y = ll & 3. see appendix a, section 3 in the av1 specification for details. ...
...2 chroma subsampling and 12 bit per component color. ll the two-digit level number, which is converted to the x.y format level format, where x = 2 + (ll >> 2) and y = ll & 3. see appendix a, section 3 in the av1 specification for details. t the one-character tier indicator. for the main tier (seq_tier equals 0), this character is the letter m. for the high tier (seq_tier is 1), this character is the letter h. the high tier is only available for level 4.0 and up. dd the two-digit component bit depth. this value must be one of 8, 10, or 12; which values are valid varies depending on the profile and other properties. m the one-digit monochrome flag; if this is 0, the video includes the u and v planes in addition to the y plane.
...g the contents, while ppccll is six hexadecimal digits specifying the profile number (pp), constraint set flags (cc), and level (ll). see avc profiles for the possible values of pp. ...
...And 17 more matches

Web audio codec guide - Web media technologies
for web developers, an even bigger concern is the network bandwidth needed in order to transfer audio, whether for streaming or to download it for use during gameplay. the processing of audio data to encode and decode it is handled by an audio codec (coder/decoder). in this article, we look at audio codecs used on the web to compress and decompress audio, what their capabilities and use cases are, and offer guidance when choosing audio codecs to use for your content. ...
...y both directly (by masking details of the foreground audio) and indirectly (by making the audio waveform more complicated and therefore difficult to reduce in size while maintaining precision). hiss, static, or background noise increases the audio complexity, which generally reduces the amount of compression which is possible. sample rate the more samples available per second, the higher the resulting encoded audio fidelity is likely to be. increasing the sample rate increases the encoded audio file's size. sample size the larger the samples, the more detail each sample can contain, resulting in more accurate representation of each sample. depends on the codec; codecs typically have an internal sample format that may or may not be the same as the original samp...
...ncoding the audio. for example, if the encoder is configured to reduce the sample rate, the sample rate's effect on the output file will be reduced in kind. for more information about these and other features of audio data, see audio data format and structure in digital audio concepts. the effect of codec configuration on encoded audio output audio codecs typically employ cleverly-designed and highly-complex mathematical algorithms to take source audio data and compress it to take substantially less space in memory or network bandwidth. in addition to choosing the type of encoder to use, you may have the opportunity to adjust the encoder using parameters that choose specific algorithms, tune those algorithms, and specify how many passes to apply while encoding. audio encoder configuratio...
...And 15 more matches

WebGL best practices - Web APIs
you can rely on this document to guide your choice of approach, and ensure you're on the right track no matter what browser or hardware your users run. general topics address and eliminate webgl errors your application should run without generating any webgl errors (as returned by geterror). every webgl error is reported in the web console as a javascript warning with a descriptive message. ...
...m(prog); if (!gl.getprogramparameter(vs, gl.link_status)) { console.error('link failed: ' + gl.getprograminfolog(prog)); console.error('vs info-log: ' + gl.getshaderinfolog(vs)); console.error('fs info-log: ' + gl.getshaderinfolog(fs)); } be precise with glsl variable precision annotations if you expect to pass an essl300 int between shaders, and you need it to have 32-bits, you must use highp or you will have portability problems. (works on desktop, not on android) if you have a float texture, ios requires that you use highp sampler2d foo;, or it will very painfully give you lowp texture samples! (+/-2.0 max is probably not good enough for you) implicit defaults the vertex language has the following predeclared globally scoped default precision statements: precision highp float; ...
...ill have portability problems. ...
...And 13 more matches

Digital audio concepts - Web media technologies
comprising the planet itself (if you've ever heard the rumble or boom of an earthquake, you've experienced this phenomenon), but nearly all of the sounds you hear every day travel to your ears through the air. the sounds a person hears every day are, then, actually vibrations in the air which cause the inner workings of the ear. the farther the air molecules move with each pulse of the wave, the higher the amplitude of the wave, and the louder the sound is. the faster the molecules vibrate, the higher the frequency of the wave. the higher the amplitude (height) of the wave, the louder the sound is at that instant. the shorter the wavelength (the closer together the crests of the wave are), the higher the frequency (or pitch) of the sound that's produced. computers, however, are digital. i...
...ephony uses a sample rate of 8000 hz (8 khz). this is enough for human speech to be comprehensible. 44100 hz the 44.1 khz sample rate is used for compact disc (cd) audio. cds provide uncompressed 16-bit stereo sound at 44.1 khz. computer audio also frequently uses this frequency by default. 48000 hz the audio on dvd is recorded at 48 khz. this is also often used for computer audio. 96000 hz high-resolution audio. 192000 hz ultra-high resolution audio. not commonly used yet, but this will change over time. there is a reason why 44.1 khz is considered the minimum "high fidelity" sampling rate. the nyquist-shannon sampling theorem dictates that to reproduce a sound accurately, it must be sampled at twice the rate of the sound's frequency. since the range of human hearing is from around ...
... to provide additional room for a low-pass filter in order to avoid distortion caused by aliasing, an additional 2.05 khz transition band is added to the pre-sampling frequency (resulting in 22,050 hz). doubling that per the nyquist theorem results in a final minimum frequency of (you guessed it) 44.1 khz. ...
...And 13 more matches

How to build custom form controls - Learn web development
n the open state. the user hits the up or down arrow keys when the control is in its active state. the value does not change when: the user hits the up arrow key when the first option is selected. the user hits the down arrow key when the last option is selected. finally, let's define how the control's options will behave: when the control is opened, the selected option is highlighted when the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state for the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. for example, what do you think will happen if the user hits the tab key while the control is in its open state? the answ...
...the open state? this one is a little bit trickier. if you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state. on the other hand, if you consider that the active state and the open state overlap a bit, the value may change but the option will definitely not be highlighted accordingly, once again because we did not define any keyboard interactions over options when the control is in its opened state (we have only defined what should happen when the control is opened, but nothing after that). we have to think a little further: what about the escape key? pressing esc key closes an open select. remember, if you want to provide the same functionality as the exi...
... (because we haven't set a width, the list will adjust its width automatically. ...
...And 9 more matches

Power profiling overview
rate from the processor. c-states intel processors have aggressive power-saving features. the first is the ability to switch frequently (thousands of times per second) between active and idle states, and there are actually several different kinds of idle states. these different states are called c-states. c0 is the active/busy state, where instructions are being executed. the other states have higher numbers and reflect increasing deeper idle states. the deeper an idle state is, the less power it uses, but the longer it takes to wake up from. note: the acpi standard specifies four states, c0, c1, c2 and c3. intel maps these to processor-specific states such as c0, c1, c2, c6 and c7. and many tools report c-states using the latter names. the exact relationship is confusing, and chapter 13 ...
...ke up from. note: the acpi standard specifies four states, c0, c1, c2 and c3. intel maps these to processor-specific states such as c0, c1, c2, c6 and c7. and many tools report c-states using the latter names. the exact relationship is confusing, and chapter 13 of the intel optimization manual has more details. the important thing is that c0 is always the active state, and for the idle states a higher number always means less power consumption. the other thing to note about c-states is that they apply both to cores and the entire package — i.e. if all cores are idle then the entire package can also become idle, which reduces power consumption even further. the fraction of time that a package or core spends in an idle c-state is called the c-state residency. this is a misleading term —...
..., which consumes power and obscures firefox's natural wakeup patterns. for this reason, integrating power measurements into the gecko profiler is unlikely to be useful, and other power profiling tools typically use much lower sampling rates (e.g. 1hz.) p-states intel processors also support multiple p-states. p0 is the state where the processor is operating at maximum frequency and voltage, and higher-numbered p-states operate at a lower frequency and voltage to reduce power consumption. processors can have dozens of p-states, but the transitions are controlled by the hardware and os and so p-states are of less interest to application developers than c-states. power and power-related measurements there are several kinds of power and power-related measurements. some are global (whole-system...
...And 9 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
are used to model smooth curves that can be scaled indefinitely. 45 cdn glossary, infrastructure a cdn (content delivery network) is a group of servers spread out over many locations. these servers store duplicate copies of data so that servers can fulfill data requests based on which servers are closest to the respective end-users. cdns make for fast service less affected by high traffic. 46 cia glossary, security cia (confidentiality, integrity, availability) (also called the cia triad or aic triad) is a model that guides an organization's policies for information security. 47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or re...
... control characters or bytecode that can be used to mark a line break in a text file. 52 crud glossary, infrastructure crud (create, read, update, delete) is an acronym for ways one can operate on stored data. it is a mnemonic for the four basic functions of persistent storage. crud typically refers to operations performed in a database or datastore, but it can also apply to higher level functions of an application such as soft deletes where data is not actually deleted but marked as deleted via a status. 53 csp glossary, http, infrastructure a csp (content security policy) is used to detect and mitigate certain types of website related attacks like xss and data injections. 54 csrf glossary, security csrf (cross-site request forge...
...hey insure the integrity of transmitted data. this provides the basis for hmac's, which provide message authentication. 202 head codingscripting, glossary, html, head, metadata the head is the part of an html document that contains metadata about that document, such as author, description, and links to css or javascript files that should be applied to the html. 203 high-level programming language codingscripting, glossary a high-level programming language has a significant abstraction from the details of computer operation. it is designed to be easily understood by humans and for this reason they must be translated by another software. unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely hide) ...
...And 8 more matches

JS_GetGCParameter
e collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
.... value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
..._setgcparameter only) the value to assign to the parameter. ...
...And 8 more matches

tabs - Archive of obsolete content
abs that are hosted by private browser windows. tabs hosted by private browser windows won't be seen if you enumerate the tabs module itself, and you won't receive any events for them. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. ...
... private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. converting to xul tabs to convert from the high-level tab objects used in this api to the low-level xul tab objects used in the tabs/utils api and by traditional add-ons, use the viewfor() function exported by the viewfor module. to convert back the other way, from a xul tab to a high-level tab object, use the modelfor() function, exported by the modelfor module. ...
...rting to xul tabs to convert from the high-level tab objects used in this api to the low-level xul tab objects used in the tabs/utils api and by traditional add-ons, use the viewfor() function exported by the viewfor module. to convert back the other way, from a xul tab to a high-level tab object, use the modelfor() function, exported by the modelfor module. ...
...And 7 more matches

Handling common accessibility problems - Learn web development
previous overview: cross browser testing next next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross browser testing. objective: to be able to diagnose common accessibility problems, and use appropriate tools and techniques to fix them. what is accessibility? when we say accessibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnificatio...
...ther non-mouse features) to activate website functionality. people with hearing impairments relying on captions/subtitles or other text alternatives for audio/video content. however, it is wrong to say that accessibility is just about disabilities. really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers. some examples might include: users on mobile devices. users on alternative browsing devices such as tvs, watches, etc. users of older devices that might not have the latest browsers. users of lower spec devices that might have slow processors. in a way, this whole module is about accessibility — cross browser testing makes sure that your sites can be used by a...
...ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>. you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the <select> e...
...And 7 more matches

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

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
ovement is removed. example this example has an annoying animation unless you turn on reduce motion in your accessibility preferences. ...
...this example has an annoying animation unless you turn on reduce motion in your accessibility preferences. ...
... class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation. this will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight. syntax the -ms-high-contrast media feature is specified as one of the following values. values active indicates that the subsequent styling rules will be applied when the system is placed ...
...And 6 more matches

Performance fundamentals - Web Performance
to the user's eyes in some pattern. by manipulating pixels, a reader app emits photons in a similar pattern to "fool" the user's eyes. as your brain infers, motion is not jerky and discrete, but rather "updates" smoothly and continuously. (strobe lights are fun because they turn that upside down, starving your brain of inputs to create the illusion of discrete reality). on a computer display, a higher framerate simply makes for a more faithful imitation of reality. note: humans usually cannot perceive differences in framerate above 60hz. that's why most modern electronic displays are designed to refresh at that rate. a television probably looks choppy and unrealistic to a hummingbird, for example. memory usage memory usage is another key metric. unlike responsiveness and framerate, user...
...cko contributes to performance generally, below the level of all applications. from a developer's or user's perspective, this answers the question, "what does the platform do for you?" web technologies the web platform provides many tools, some better suited for particular jobs than others. all application logic is written in javascript. to display graphics, developers can use html or css (i.e. high-level declarative languages), or use low-level imperative interfaces offered by the <canvas> element (which includes webgl). somewhere "in between" html/css and canvas is svg, which offers some benefits of both. html and css greatly increase productivity, sometimes at the expense of framerate or pixel-level control over rendering. text and images reflow automatically, ui elements automatically r...
...enes are rendered using special dedicated composition hardware, while the gpu idles or turns off. fully static content is the exception rather than the rule for rich applications. rich applications use dynamic content with animation and transition effects. 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!
...And 6 more matches

XUL Migration Guide - Archive of obsolete content
elopment and xul development. whether you should migrate a particular add-on is largely a matter of how well the sdk's supported apis meet its needs. if your add-on can accomplish everything it needs using only the supported apis, it's a good candidate for migration. if your add-on needs a lot of help from third party packages, low-level apis, or xpcom, then the cost of migrating is high, and may not be worth it at this point. if your add-on only needs a little help from those techniques, and can accomplish most of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future releases to meet important use cases. user interface components xul-based add-ons typically implement a user interface using a combination...
...ranted over a normal remote web page script. a xul-based add-on will need to be reorganized to respect this distinction. the main reason for this design is security: it reduces the risk that a malicious web page will be able to access privileged apis. there's much more information on content scripts in the working with content scripts guide. using the supported apis the sdk provides a set of high level apis providing some basic user interface components and functionality commonly required by add-ons. because we expect to keep these apis compatible as new versions of firefox are released, we call them the "supported" apis. see the tutorials and the high-level api reference. if the supported apis do what you need, they're the best option: you get the benefits of compatibility across firefo...
...u want, this is a great way to use features not supported in the sdk without having to use the low-level apis. see the guide to adding firefox menu items. some useful third party packages are collected in the jetpack wiki. note, though, that by using third party packages you're likely to lose the security and compatibility benefits of using the sdk. using the low-level apis in addition to the high-level apis, the sdk includes a number of low-level apis some of which, such xhr and window/utils, expose powerful browser capabilities. but note that unlike the supported apis, low-level apis do not come with a compatibility guarantee, so we do not expect code using them will necessarily continue to work as new versions of firefox are released. in this section we'll use low-level modules how to...
...And 5 more matches

Release notes - Archive of obsolete content
jpm beta released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. ...
... jpm beta released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. ...
...erywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. added tab.readystate. added a browserwindow parameter to sidebar.show() and sidebar.hide(), to control the window for which the sidebar will be shown or hidden. details github commits made between firefox 32 and firefox 33. this will not include any uplifts made after this release entered aurora. b...
...And 5 more matches

Introduction to the server side - Learn web development
after reading this article you'll understand the additional power available to websites through server-side coding. prerequisites: basic computer literacy. a basic understanding of what a web server is. ...
...programming. most large-scale websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g. html and javascript). perhaps the most significant benefit of server-side code is that it allows you to tailor website content for individual users. dynamic sites can highlight content that is more relevant based on user preferences and habits. it can also make sites easier to use by storing personal preferences and information — for example reusing stored credit card details to streamline subsequent payments. it can even allow interaction with users of the site, sending notifications and updates via email or through other channels. all of these capabilities ena...
...personal preferences and information — for example reusing stored credit card details to streamline subsequent payments. it can even allow interaction with users of the site, sending notifications and updates via email or through other channels. all of these capabilities enable much deeper engagement with users. in the modern world of web development, learning about server-side development is highly recommended. what is server-side website programming? web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, an http request is sent from your browser to the target server. the request includes a url identifying the affected resource, a method that defines the required action (for example to...
...And 5 more matches

source-editor.jsm
sourceeditor object. sourceeditor.prefs.expand_tab "devtools.editor.expandtab" a boolean value that indicates whether or not to automatically expand tabs out to a series of spaces. sourceeditor.prefs.tab_size "devtools.editor.tabsize" an integer value that specifies the number of spaces per tab. editor mode constants these constants are used to set the syntax highlighting mode for the editor by calling its setmode() method, or in the configuration object when first initializing the editor using its init() method. constant value description sourceeditor.modes.css "css" cascading style sheet. sourceeditor.modes.html "html" html document. sourceeditor.modes.javascript "js" javascript source code. ...
... cascading style sheet. sourceeditor.modes.html "html" html document. sourceeditor.modes.javascript "js" javascript source code. sourceeditor.modes.text "text" utf-8 text document. sourceeditor.modes.xml "xml" xml document. theme constants these constants are used to identify the available themes that can be used by the syntax highlighter. only one is provided by default at this time. constant value description sourceeditor.themes.mozilla "mozilla" the default mozilla syntax highlighter theme. configuration defaults constants these constants represent the default values for each of the available configuration options. see the editor configuration object for details on configuring the e...
...er theme. configuration defaults constants these constants represent the default values for each of the available configuration options. see the editor configuration object for details on configuring the editor. ...
...And 5 more matches

PerformanceNavigationTiming - Web APIs
r text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation". performanceentry.name read only returns the document's address. performanceentry.starttime read only returns a domhighrestimestamp with a value of "0". performanceentry.duration read only returns a timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties. this interface also extends following performanceresourcetiming properties for navigation performance entry types by qualifying and constraining them as follows: performanceresourceti...
... and performanceentry.starttime properties. this interface also extends following performanceresourcetiming properties for navigation performance entry types by qualifying and constraining them as follows: performanceresourcetiming.initiatortyperead only returns "navigation". the interface also supports the following properties: performancenavigationtiming.domcomplete read only a domhighrestimestamp representing a time value equal to the time immediately before the browser sets the current document readiness of the current document to complete. performancenavigationtiming.domcontentloadedeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. performancenavigationtiming.d...
...l to the time immediately before the browser sets the current document readiness of the current document to complete. performancenavigationtiming.domcontentloadedeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. performancenavigationtiming.domcontentloadedeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document. ...
...And 5 more matches

stroke-linejoin - SVG: Scalable Vector Graphics
not supported. --> <path d="m3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter-clip" /> <!-- bottom right path: effect of the "arcs" value with fallback to "miter" if not supported. ...
...3.5" stroke="black" fill="none" stroke-linejoin="miter-clip" /> <!-- bottom right path: effect of the "arcs" value with fallback to "miter" if not supported. ...
...the following pink lines highlight the position of the path for each stroke --> <g id="highlight"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x="6" /> <use xlink:href="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="6" /> <use xlink:href="#highlight" x="8" y="6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value miter animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browse...
...And 5 more matches

A first splash into JavaScript - Learn web development
basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to have a first bit of experience at writing some javascript, and gain at least a basic understanding of what writing a javascript program involves. you won't be expected to understand all of the code in detail immediately — we just want to introduce you to the high-level concepts for now, and give you an idea of how javascript (and other programming languages) work. in subsequent articles, you'll revisit all these features in a lot more 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. thi...
...width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. ...
...sult.textcontent = '!!!game over!!!'; loworhi.textcontent = ''; setgameover(); } else { lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } 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.adde...
...And 4 more matches

The Firefox codebase: CSS Guidelines
serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common. but camelcase is also used sometimes. try to follow the style of existing or related code. other tips assume ="true" in attribute selectors. example: use option[checked], not option[checked="true"]. avoid id selectors unless it is really the wanted goal, since ids have higher specificity and therefore are harder to override. using descendant selectors is good practice for performance when possible: for example: .autocomplete-item[selected] > .autocomplete-item-title would be more efficient than .autocomplete-item[selected] .autocomplete-item-title overriding css before overriding any css rules, check whether overriding is really needed. sometimes, wh...
...ss logical properties and values for more information. testing to test for rtl layouts, you can go to about:config and set intl.uidirection to -1. ...
...ometimes the needed value is already in the color or on the parent element. this is especially useful in conjunction with icons using -moz-context-properties: fill; where the icon can adjust to the right platform color automatically from the text color. it is also possible to use currentcolor with other properties like opacity or fill-opacity to have different opacities of the platform color. high contrast mode content area on windows high contrast mode, in the content area, gecko does some automatic color adjustments regarding page colors. part of those adjustments include making all box-shadow invisible, so this is something to be aware of if you create a focus ring or a border using the box-shadow property: consider using a border or an outline if you want the border/focus ring to sta...
...And 4 more matches

nsIDBFolderInfo
obsolete since gecko 1.8 void setmailboxname(in nsstring newboxname); native code only! obsolete since gecko 1.8 void setproperty(in string propertyname, in astring propertystr); void setuint32property(in string propertyname, in unsig...
...obsolete since gecko 1.8 void setmailboxname(in nsstring newboxname); native code only! obsolete since gecko 1.8 void setproperty(in string propertyname, in astring propertystr); void setuint32property(in string propertyname, in unsigned long propertyvalue...
... type description charactersetoverride boolean expiredmark nsmsgkey expungedbytes long flags long folderdate unsigned long foldername string foldersize unsigned long highwater nsmsgkey imaphierarchyseparator wchar imaptotalpendingmessages long imapuidvalidity long imapunreadpendingmessages long knownartsset string locale astring mailboxname astring ...
...And 4 more matches

PerformanceResourceTiming - Web APIs
performanceresourcetiming interface enables retrieval and analysis 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: ...
...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). ...
...manceresourcetiming.workerstartread only 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. performanceresourcetiming.redirectstartread only a domhighrestimestamp that represents the start time of the fetch which initiates the redirect. performanceresourcetiming.redirectendread only a domhighrestimestamp immediately after receiving the last byte of the response of the last redirect. performanceresourcetiming.fetchstartread only a domhighrestimestamp immediately before the browser starts to fetch the resource. performanceresourcetiming.do...
...And 4 more matches

Using the Performance API - Web APIs
a fundamental requirement of web performance is a precise and consistent definition of time. the domhighrestimestamp type (a double) is used by all performance interfaces to hold such time values. additionally, there must be a way to create a timestamp for a specific point in time; this is done with the now() method. web performance interfaces are defined in a suite of standards. the base interface for these standards is the performance interface and its methods and properties are extended by different standards. this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. ...
...s. the base interface for these standards is the performance interface and its methods and properties are extended by different standards. this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. other web performance guides (listed in the see also section) describe how to use additional methods and properties of the performance interface. high precision timing high precision timing is achieved by using the domhighrestimestamp type for time values. the unit is milliseconds and should be accurate to 5 µs (microseconds). however, if the browser is unable to provide a time value accurate to 5 microseconds (because of hardware or software constraints, for example), the browser can represent the value as a time in milliseconds accurate to ...
...by calling this method before and after a task, the time it takes to do the task can be measured. ...
...And 4 more matches

Lighting in WebGL - Web APIs
ht, for example, is considered directional light. point light is light that is being emitted from a point, radiating in all directions. this is how many real-world light sources usually work. a light bulb emits light in all directions, for example. for our purposes, we're going to simplify the lighting model by only considering simple directional and ambient lighting; we won't have any specular highlights or point light sources in this scene. instead, we'll have our ambient lighting plus a single directional light source, aimed at the rotating cube from the previous demo. once you drop out the concept of point sources and specular lighting, there are two pieces of information we'll need in order to implement our directional lighting: we need to associate a surface normal with each vertex...
...tex shader so it generates a shading value for each vertex based on the ambient lighting as well as the directional lighting. ...
...alue for each vertex based on the ambient lighting as well as the directional lighting. ...
...And 4 more matches

<color> - CSS: Cascading Style Sheets
listed here with mixed case for readability. activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module. they are now deprecated. for use on public web pages. act...
... keywords the following keywords were defined in earlier versions of the css color module. they are now deprecated. for use on public web pages. activeborder active window border. activecaption active window caption. should be used with captiontext as foreground color. appworkspace background color of multiple document interface. background desktop background. buttonhighlight the color of the border facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border. buttonshadow the color of the border away from the light source for 3-d elements that appear 3-d due to that layer of surrounding border. captiontext text in caption, size box, and scrollbar arrow box. should be used with the activecaption background color.
... scroll bars. threeddarkshadow the color of the darker (generally outer) of the two borders away from the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border. threedface the face background color for 3-d elements that appear 3-d due to two concentric layers of surrounding border. should be used with the buttontext foreground color. threedhighlight the color of the lighter (generally outer) of the two borders facing the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border. threedlightshadow the color of the darker (generally inner) of the two borders facing the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border. threedshadow the col...
...And 4 more matches

windows - Archive of obsolete content
sing module. converting to chrome windows to convert from the browserwindow objects used in this api to the chrome window objects used in the window/utils api, use the viewfor() function exported by the viewfor module. to convert back the other way, from a chrome window to a browserwindow object, use the modelfor() function, exported by the modelfor module. ...
...in particular, depending on w...
...in particular, depending on what you do with these ob...
...And 3 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
hat is built on the activex architecture. here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points to a "clsid:" urn followed by the unique identifier of an activex control (in the above example, the string beginning with "d27..."). this is, in fact, the unique identifier of macromedia's flash plugin, and developers are expected to know such...
...but rather, mime type based. mozilla-based browsers support the use of the object element along with a mime type. here is an example of this usage, once again for the macromedia flash plugin: <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <p>you need flash -- get the latest version from <a href= "http://www.macromedia.com/downloads/">here.</a></p> </object> in the above example, application/x-shockwave-flash is the flash mime type, and will invoke the netscape-specific flash architecture in mozilla-based browsers. the data attribute points to the swf file to play, and t...
...me animation twice since it also understands the mime type for flash: <!-- usage will not work as intended --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id="myflashnscp"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <p>you need flash -- get the latest version from <a href="http://www...
...And 3 more matches

Index - Game development
have a choice and can pick whatever tools suit you best. ...
...ycanvas page, or go back a level higher to the main 3d games on the web page. 20 building up a basic demo with the playcanvas engine 3d, animation, beginner, canvas, games, playcanvas, tutorial, webgl, camera, engine, lighting, rendering now you can continue reading the playcanvas editor article, go back to the building up a basic demo with playcanvas page, or go back a level higher to the main 3d games on the web page. 21 building up a basic demo with three.js 3d, animation, beginner, canvas, games, tutorial, webgl, camera, lighting, rendering, three.js in this article we'll take you through the real basics of using three, including setting up a development environment, structuring the necessary html, the fundamental objects of three, and how to build...
...is article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible. 27 crisp pixel art look with image-rendering 2d, 3d, css, canvas, games, javascript, webgl, image-rendering, pixel this article discusses a useful technique for giving your canvas/webgl games a crisp pixel art look, even on high definition monitors. 28 efficient animation for web games animation, games, javascript this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. we touch on css transitions and css animations, and javascript loops involving window.requestanimationframe. 29 imple...
...And 3 more matches

Cascade and inheritance - Learn web development
, but could still apply to the same element. it is basically a measure of how specific a selector's selection will be: an element selector is less specific — it will select all elements of that type that appear on a page — so will get a lower score. a class selector is more specific — it will select only the elements on a page that have a specific class attribute value — so will get a higher score. example time! below we again have two rules that could apply to the h1. the below h1 ends up being colored red — the class selector gives its rule a higher specificity, and so it will be applied even though the rule with the element selector appears further down in the source order. we'll explain specificity scoring and other such things later on. inheritance inheritance also n...
... can think of this as rules which are nearer the element itself overwriting early ones until the last one wins and gets to style the element. specificity once you understand the fact that source order matters, at some point you will run into a situation where you know that a rule comes later in the stylesheet, but an earlier, conflicting, rule is applied. this is because that earlier rule has a higher specificity — it is more specific, and therefore is being chosen by the browser as the one that should style the element. as we saw earlier in this lesson, a class selector has more weight than an element selector, so the properties defined on the class will override those applied directly to the element. something to note here is that although we are thinking about selectors, and the rules...
...mate example for ease of understanding. in actuality, each selector type has its own level of specificity that cannot be overwritten by selectors with a lower specificity level. for example, a million class selectors combined would not be able to overwrite the rules of one id selector. a more accurate way to evaluate specificity would be to score the specificity levels individually starting from highest and moving on to lowest when necessary. only when there is a tie between selector scores within a specificity level do you need to evaluate the next level down; otherwise, you can disregard the lower specificity level selectors since they can never overwrite the higher specificity levels. !important there is a special piece of css that you can use to overrule all of the above calculations, ...
...And 3 more matches

Server-side web frameworks - Learn web development
esponses as we saw in the last article, web servers and browsers communicate via the http protocol — servers wait for http requests from the browser and then return information in http responses. web frameworks allow you to write simplified syntax that will generate server-side code to work with these requests and responses. this means that you will have an easier job, interacting with easier, higher-level code rather than lower level networking primitives. the example below shows how this works in the django (python) web framework. every "view" function (a request handler) receives an httprequest object containing request information, and is required to return an httpresponse object with the formatted output (in this case a string). # django view function from django.http import httpresp...
...t cannot be run. other frameworks provide similar protection, but it is not always enabled by default. there are many other possible factors, including licensing, whether or not the framework is under active development, etc. if you're an absolute beginner at programming then you'll probably choose your framework based on "ease of learning". in addition to "ease of use" of the language itself, high quality documentation/tutorials and an active community helping new users are your most valuable resources. we've chosen django (python) and express (node/javascript) to write our examples later on in the course, mainly because they are easy to learn and have good support. note: let's go to the main websites for django (python) and express (node/javascript) and check out their documentation and...
... on, and discuss a few specific server-side web frameworks. the server-side frameworks below represent a few of the most popular available at the time of writing. all of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. there are many other great server-side frameworks that you can discover using a basic internet search. note: descriptions come (partially) from the framework websites! django (python) django is a high-level python web framework that encourages rapid development and clean, pragmatic design. built by experienced developers, it takes care of much of the hassle of web developm...
...And 3 more matches

Working with data
ber object, use the ctypes.int64.int64() method to create a new 64-bit signed integer, or the ctypes.uint64.uint64() method to create a new unsigned 64-bit integer. for example: var num1 = ctypes.uint64(5000); var num2 = ctypes.int64(-42); if you need to create a 64-bit integer whose value can't be represented by a javascript number, you have two options. you can build the new number using the high and low 32-bit numbers, or you can create it using a string representation. creating a 64-bit value using a string you can simply pass a string representation of a 64-bit number into the int64 or uint64 constructor, like this: var num1 = ctypes.int64("400000000000"); var num2 = ctypes.uint64("-0x1234567890abcdef"); as you can see, you can use this technique with both decimal and hexadecimal ...
...64 constructor, like this: var num1 = ctypes.int64("400000000000"); var num2 = ctypes.uint64("-0x1234567890abcdef"); as you can see, you can use this technique with both decimal and hexadecimal source strings. creating a 64-bit value using join() the join() method offered by the int64 and uint64 objects provides another way to construct 64-bit integers. ...
... for example, adding two 64-bit integers can be done like this. ...
...And 3 more matches

Index - Firefox Developer Tools
g glass it shows the color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: 34 index tools found 158 pages: 35 json viewer firefox includes a json viewer. if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting. arrays and objects are shown collapsed, and you can expand them using the "+" icons. 36 measure a portion of the page design, devtools, developer, firefox, layout, measure, measuring, measuring tool, tools using the measuring tool you can measure a specific area of a web page. 37 memory devtools, firefox, mozilla, tools the memory tool lets you t...
...sing the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more. 58 edit css filters css, devtools, filters, page inspector, tools css filter properties in the rules view have a circular gray and white swatch next to them: 59 edit shape paths in css css, devtools, page inspector, rules view, tools, highlighter, shapes the shape path editor is a tool that helps you see and edit shapes created using clip-path and also the css shape-outside property and <basic-shape> values. this guide walks you through all of the available options. 60 edit fonts fonts, guide, inspector, tools, variable fonts this article provides a tour of the font tools available in the firefox devtools...
...nts in the page starting in firefox 48 you can move absolutely positioned elements by dragging them around the page. 68 select an element guide, inspector, tools the selected element is the element in the page that the inspector is currently focused on. the selected element is shown in the html pane and its css is displayed in the css pane. 69 select and highlight elements the selected element is the element in the page that the inspector is currently focused on. the selected element is shown in the html pane and its css is displayed in the css pane. 70 use the inspector api inspector, reference, référence(2), tools firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/i...
...And 3 more matches

Performance API - Web APIs
the high resolution time standard defines a performance interface that supports client-side latency measurements within applications. the performance interfaces are considered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). the interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource). since a platform's system clock is subject to various skews (such as ntp adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. as such, the performance api defines a domhighrestimestamp type rather than using the date.now() interface. ...
... calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource). since a platform's system clock is subject to various skews (such as ntp adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. as such, the performance api defines a domhighrestimestamp type rather than using the date.now() interface. domhighrestimestamp the domhighrestimestamp type, as its name implies, represents a high resolution point in time. this type is a double and is used by the performance interfaces. the value could be a discrete point in time or the difference in time between two discrete points in time. the unit of domhighrestimestamp is milliseconds and should be accurate to 5 µs (microseconds). however, if the browse...
...hrestimestamp is milliseconds and should be accurate to 5 µs (microseconds). however, if the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond. methods the performance interface has two methods. the now() method returns a domhighrestimestamp whose value that depends on the navigation start and scope. if the scope is a window, the value is the time the browser context was created and if the scope is a worker, the value is the time the worker was created. the tojson() method returns a serialization of the performance object, for those attributes that can be serialized. properties the performance interface has two propert...
...And 3 more matches

Migrating from webkitAudioContext - Web APIs
ar iscustom = (osc.type == "custom"); // iscustom will be true biquadfilternode.type biquadfilternode's type property has been changed to use web idl enums. ...
...(osc.type == "custom"); // iscustom will be true biquadfilternode.type biquadfilternode's type property has been changed to use web idl enums. ...
...enums. ...
...And 3 more matches

Specificity - CSS: Cascading Style Sheets
nd negation pseudo-class (:not()) have no effect on specificity. (the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity. the !important exception when an important rule is used on a style declaration, this declaration overrides any other declarations. although technically !important has nothing to do with specificity, it interacts directly with it. using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your st...
...verrides foreign css (from external libraries, like bootstrap or normalize.css). never use !important when you're writing a plugin/mashup. never use !important on site-wide css. instead of using !important, consider: make better use of the css cascade use more specific rules. by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <span>text</span> </div> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific. (also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules) as a nonsense special case for (2), duplicate simple selectors to increase specifi...
...rtain styles in your global css file as !important, thus overriding inline styles set directly on elements. <div class="foo" style="color: red;">what color am i?</div> .foo[style*="color: red"] { color: firebrick !important; } many javascript frameworks and libraries add inline styles. using !important with a very targeted selector is one way to override these inline styles. ...
...And 3 more matches

HTML documentation index - HTML: Hypertext Markup Language
and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission. 41 html attribute: maxlength attribute, attributes, constraint validation the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>. this must be an integer value 0 or higher. 42 html attribute: min attribute, attributes, constraint validation, min the min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. if the value of the element is less than this, the element fails constraint validation. this value must be less than or equal to the value of the max attribute. if a value is specified for ...
...l to the value of the max attribute. if a value is specified for min that isn't a valid number, the input has no minimum value. 43 html attribute: minlength attribute, input, reference, minlength, textarea the minlength attribute defines the minimum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>. this must be an integer value 0 or higher. if no minlength is specified, or an invalid value is specified, the input has no minimum length. this value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria. 44 html attribute: multiple attribute, attributes, constraint validation the boolean multiple attribute, if set, means the form c...
...ute, attributes, constraint validation, forms, required the boolean required attribute 49 html attribute: size attribute, html, input, reference, select the size attribute defines the width of the <input> and the height of the <select> element. for the input, if the type attribute is text or password then it's the number of characters. this must be an integer value 0 or higher. if no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. if css targets the element with properties impacting the width, css takes precedence. 50 html attribute: step attribute, attributes, constrain validation, step valid for the numeric input types, including the dat...
...And 3 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
width) units for these — 1vw is equivalent to 1% of the viewport width. this makes the dimensions scale up and down nicely along with the viewport width. last for this section, we absolutely positioned all buttons at the bottom of the cards they are in, so the layout looks ok at different viewport size variations. we then add a rule that positions the second button in any card a button's width higher up the card. when you click on an image in the gallery it brings up options to delete or cancel deletion of the card, and you don't want two buttons on top of one another. x-card:nth-child(3) img { width: 50%; } this rule simply changes the width of the gallery images so now there are two per line. nav { width: 100%; position: absolute; z-index: 1000; display: ...
...concerned with mobile browsers and media queries. if we viewed my example in a mobile browser in its current state, we wouldn't see our nice mobile layout. instead, we'd see the below image. i'm sure you'll agree that this really isn't what we wanted — why is this happening? in short, mobile browsers lie. they don't render web pages at their true viewport width. instead, they render pages at a higher assumed viewport width (something approaching a laptop screen), and then shrink the result down to fit inside the mobile screen. this is a sensible defensive mechanism — most old school sites that don't have media queries would look terrible when rendered at say, 320px or 480px wide. but this doesn't help us responsible web developers, who have written small screen layouts into our css using ...
...r that mobile apps have much smaller viewport dimensions available than desktop apps, so you should try to give mobile devices a smaller image to download. mobiles in general (more commonly in some parts of the world than others) are on lower bandwidth connections and have less memory available than desktop devices, so yes, those extra kilobytes really do count. another challenge is dealing with high resolution screens — raster graphics designed for low resolutions are in danger of appearing tiny when displayed on a high resolution screen, so devices often apply a default zoom factor to rendered pages to avoid this. the trouble with this, then, is that raster images are zoomed in and as a result can start to look pixellated. css background images for css background images this is a fairly...
...And 3 more matches

Creating annotations - Archive of obsolete content
-mod to find page elements that the user can annotate, and a panel for the user to enter the annotation text itself. selector page-mod selector content scripts the content script for the selector page-mod uses jquery to examine and manipulate the dom. its main job is to maintain a matched element: this is the page element that is the current candidate for an annotation. the matched element is highlighted and has a click handler bound to it which sends a message to the main add-on code. the selector page mod can be switched on and off using a message from the main add-on code. it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor)...
...nt. when a mouseenter event is triggered the selector checks whether the element is eligible for annotation. an element is eligible if it, or one of its ancestors in the dom tree, has an attribute named "id". the idea here is to make it more likely that the annotator will be able to identify annotated elements correctly later on. if the page element is eligible for annotation, then the selector highlights that element and binds a click handler to it. the click handler sends a message called show back to the main add-on code. the show message contains: the url for the page, the id attribute value, and the text content of the page element. $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id...
...otatorison; } we'll be using this url in all our screenshots. because cfx run doesn't preserve browsing history, if you want to play along it's worth taking a note of the url. save the file and execute cfx run again. activate the annotator by clicking the widget and load a page: the screenshot below uses http://blog.mozilla.com/addons/2011/02/04/ overview-amo-review-process/. you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review. annotation editor panel s...
...And 2 more matches

Index - Archive of obsolete content
isual layouts. underlined text may be read by the screen reader. 5 attribute (xul) xul attributes, xul reference no summary! 6 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. 7 accelerated xul, xul attribute, xul reference no summary! 8 acceltext xul attributes, xul reference no summary! 9 accessible xul attributes, xul reference no summ...
...dechrome xul attributes, xul reference no summary! 139 hidecolumnpicker xul attributes, xul reference no summary! 140 hideheader xul attributes, xul reference no summary! 141 hideseconds xul attributes, xul reference no summary! 142 hidespinbuttons xul attributes, xul reference no summary! 143 highlightaccesskey no summary! 144 highlightnonmatches xul attributes, xul reference no summary! 145 homepage xul attributes, xul reference no summary! 146 href xul attributes, xul reference no summary! 147 icon xul attributes, xul reference no summary! 148 iconsize toolbar, xul, xul attribute...
... 596 other resourc...
...And 2 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. ...
...ltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange ex...
...en pressed, will open a dropdown menu of all available results. focused type: boolean this attribute is true if the element is focused. forcecomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the textbox will be filled in with the best match when it loses the focus. if false, it will only be filled in when the user selects an item. highlightnonmatches new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, then the autocomplete field will be highlighted when no match has been found. ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: stri...
...And 2 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
f the textbox. the sessions can be set using the searchsessions attribute or by calling the addsession method. ...
...e, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods a...
...cus. if false, it will only be filled in when the user selects an item. as of gecko 1.9.1, this attribute is now always specified in lower case. forcecomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the textbox will be filled in with the best match when it loses the focus. if false, it will only be filled in when the user selects an item. highlightnonmatches new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, then the autocomplete field will be highlighted when no match has been found. ignoreblurwhilesearching obsolete since gecko 1.9.1 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. as of gecko 1.9.1, this attribute ...
...And 2 more matches

Anatomy of a video game - Game development
your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in webgl). long calculations can be performed on a web worker or a gpu at the same time as the browser uses its main thread to manage garbage collection, its other tasks, or handle asynchronous events. while we are on the topic of budgeting time, many web browsers have a tool called high resolution time. the date object is no longer the recognised method for timing events because it is very imprecise and can be modified by the system clock. high resolution time, on the other hand, counts the number of milliseconds since navigationstart (when the previous document is unloaded). this value is returned as a decimal number accurate to a thousandth of a millisecond. it is known as a d...
... note: systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. ...
... and precisely determine how much time elapsed between those two points. to acquire one of these timestamps, you can call window.performance.now() and store the result as a variable. var tnow = window.performance.now(); back to the topic of the main loop. you will often want to know when your main function was invoked. because this is common, window.requestanimationframe() always provides a domhighrestimestamp to callbacks as an argument when they are executed. this leads to another enhancement to our previous main loops. /* * 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...
...And 2 more matches

CSS and JavaScript accessibility best practices - Learn web development
background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red). in addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g. via tabbing) or activated. the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — bo...
...ent. there is an easy way to check whether your contrast is large enough to not cause problems. there are a number of contrast checking tools online that you can enter your foreground and background colors into, to check them. for example webaim's color contrast checker is simple to use, and provides an explanation of what you need to conform to the wcag criteria around color contrast. note: a high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight. another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. instead of marking required form fields in red, for example, mark them with an asterisk and in red. hiding thin...
...y adrian gordon for the equivalent ie instructions. it is probably easier to do it using an extension, for example the stylish extension is available for firefox, safari, opera, and chrome. users might do this for a variety of reasons. a visually impaired user might want to make the text bigger on all websites they visit, or a user with severe color deficiency might want to put all websites in high contrast colors that are easy for them to see. whatever the need, you should be comfortable with this, and make your designs flexible enough so that such changes will work in your design. as an example, you might want to make sure your main content area can handle bigger text (maybe it will start to scroll to allow it all to be seen), and won't just hide it, or break completely. javascript java...
...And 2 more matches

Other form controls - Learn web development
ions filled in on a questionnaire. the content inside the <progress> element is a fallback for browsers that don't support the element and for screen readers to vocalize it. meter a meter bar represents a fixed value in a range delimited by max and min values. ...
...r a meter bar represents a fixed value in a range delimited by max and min values. this value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other set values: the low and high values divide the range in three parts: the lower part of the range is between the min and low values, inclusive. the medium part of the range is between the low and high values, exclusive. the higher part of the range is between the high and max values, inclusive. the optimum value defines the optimum value for the <meter> element. ...
...he low and high values divide the range in three parts: the lower part of the range is between the min and low values, inclusive. the medium part of the range is between the low and high values, exclusive. the higher part of the range is between the high and max values, inclusive. the optimum value defines the optimum value for the <meter> element. in conjuction with the low and high value, it defines which part of the range is prefered: if the optimum value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part, and the higher range is considered to be the worst part. if the optimum value is in the medium part of the range, the lower range is considered to be an average part, th...
...And 2 more matches

Responsive images - Learn web development
wports below that width, the body will stay at 100% of the width of the viewport. the header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. if the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, and the excess is lost off either side. it is 200px high. the content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it. however, issues arise when you start to view the site on a narrow screen device. the header below looks ok, but it's starting to take up a lot of the screen height for a mobile device. and at this size, it...
... was meant for. doing so can waste bandwidth; in particular, mobile users don't want to waste bandwidth by downloading a large image intended for desktop, when a small image would do for their device. ideally, you would have multiple resolutions available and serve the appropriate size depending upon the device accessing the data on the website. to make things more complicated, some devices have high resolution screens that need larger images than you might expect to display nicely. this is essentially the same problem, but in a slightly different context. you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them wherever possible. however, they aren't suitable for all image types. ve...
...— the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset. so if the device accessing the page has a standard/low resolution display, with one device pixel representing each css pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) if the device has a high resolution of two device pixels per css pixel or more, the elva-fairy-640w.jpg image will be loaded. the 640px image is 93kb, whereas the 320px image is only 39kb. art direction to recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. for example, a web page includes a large landscape shot with a person in the middle when viewed o...
...And 2 more matches

Index - Learn web development
nt, beginner, learn, wai-aria, test your skills this aim of this skill test is to assess whether you've understood our wai-aria basics article. 12 what is accessibility? at, accessibility, article, beginner, css, codingscripting, html, javascript, learn, tools, users, assistive technology, keyboard, screan reader, screenreader this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. you should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why html is a good basis for accessibility. 13 aprender y obtener ayuda beginner, learn, learning, web d...
...nt in css. an understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. it will help you in understanding css even if you never use a writing mode other than a horizontal one. 120 images, media, and form elements beginner, css, forms, images, learn, media, replaced content this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html tables. 121 organizing your css beginner, css, codingscripting, learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide as y...
...r, server-side programming congratulations, you've reached the end of the first article about server-side programming. 222 server-side web frameworks beginner, codingscripting, guide, intro, learn, server, server-side programming, web frameworks this article has shown that web frameworks can make it easier to develop and maintain server-side code. it has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. you should now have at least an idea of how to choose a web framework for your own server-side development. if not, then don't worry — later on in the course we'll give you detailed tutorials on django and express to give you some experience of actually working with a web framework. ...
...And 2 more matches

Drawing graphics - Learn web development
le fallback here.</p> </canvas> we have added a class to the <canvas> element so it will be easier to select if we have multiple canvases on the page, but we have removed the width and height attributes for now (you could add them back in if you wanted, but we will set them using javascript in a below section). canvases with no explicit width and height default to 300 pixels wide by 150 pixels high. now add the following lines of javascript inside the <script> element: const canvas = document.queryselector('.mycanvas'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; here we have stored a reference to the canvas in the canvas constant. in the second line we set both a new constant width and the canvas' width property equal to wi...
...f paint overlaps and may even hide what's underneath. you can't do anything to change this, so you have to think carefully about the order in which you draw the graphics. note that you can draw semi-transparent graphics by specifying a semi-transparent color, for example by using rgba(). the a value defines what's called the "alpha channel, " or the amount of transparency the color has. the higher its value, the more it will obscure whatever's behind it. add the following to your code: ctx.fillstyle = 'rgba(255, 0, 255, 0.75)'; ctx.fillrect(25, 100, 175, 50); now try drawing some more rectangles of your own; have fun! strokes and line widths so far we've looked at drawing filled rectangles, but you can also draw rectangles that are just outlines (called strokes in graphic d...
... is to be drawn on the screen, and the sprite number we want to display. let sprite = 0; let posx = 0; let's explain the spritesheet image (which we have respectfully borrowed from mike thomas' create a sprite sheet walk cycle using css animation). the image looks like this: it contains six sprites that make up the whole walking sequence — each one is 102 pixels wide and 148 pixels high. to display each sprite cleanly we will have to use drawimage() to chop out a single sprite image from the spritesheet and display only that part, like we did above with the firefox logo. the x coordinate of the slice will have to be a multiple of 102, and the y coordinate will always be 0. the slice size will always be 102 by 148 pixels. now let's insert an empty draw() function at the bot...
...And 2 more matches

Multimedia: Images - Learn web development
nging fruit. this article looks at optimizing image and video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time. this is a high-level introduction to optimizing multimedia delivery on the web, covering general principles and techniques. for a more in-depth guide, see https://images.guide. why optimize your multimedia? for the average website, 51% of its bandwidth comes from imagery, followed by video at 25%, so it's safe to say it's important to address and optimize your multi-media content. you need to be considera...
...ilable in internet explorer and edgehtml based edge. doesn't support progressive display and the image decoding is not hardware accellerated and therefore resource intensive on the browser's main thread. jpeg2000 — once to be successor to jpeg but only supported in safari. doesn't support progressive display either. in the future browsers might add support for even more advanced formats like high efficiency image file format (heif) or av1 still image file format (avif). given the narrow support for jpeg-xr and jpeg2000, and also taking decode costs into the equation, the only serious contender for jpeg today is webp. which is why you could consider offering your images in that flavor, too, for the browsers that support it. this can be done via the <picture> element with the help of a <so...
... <source type="video/mp4" src="giphy.mp4"> <source type="image/webp" src="giphy.webp"> <img src="giphy.gif"> </picture> serving the optimal size in image delivery the "one size fits all" approach will not yield the best results, meaning that for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens. on top of that you'd also want to serve higher resolution images to those devices that boast a high dpi screen (e.g. "retina"). so apart from creating plenty of intermediate image variants you also need a way to serve the right file to the right browser. that's where you would need to upgrade your <picture> and <source> elements with media and/or sizes attributes. a detailed article on how to combine all of these attributes can be found her...
...And 2 more matches

Software accessibility: Where are we today?
h as dyslexia. additionally, text-to-speech is used by those who cannot speak, in place of their own voice. finally, this technology could be useful to mainstream users, on portable information appliances, or to access information when the eyes are busy elsewhere. ...
... the optacon provides access to printed words, graphics and on-screen information by means of an array vibrating pins the size of an index finger. the user uses one hand to read the vibrating pins, and the other hand moves a mini-camera over the material to be read. ...
...et reading, for detailed work, and by deaf-blind users. this can come in the form of hard copy braille printed on braille embossers, or from a refreshable braille display (see below). these technologies requires special drivers, braille formatting routines and software based text-to-braille translation. the importance of braille itself must be emphasized. for those that read it, braille can offer higher levels of employment and life fulfillment. refreshable braille displays of various sizes a braille embosser audio- and braille- based user interfaces are concepts that software designers are historically untrained for. the basic concept is easy - dealing with information when you're blind is like seeing everything through a mail slot - sequ...
...And 2 more matches

Mozilla’s UAAG evaluation report
r configurable guideline 10. orient the user. checkpoint title status notes/plans checkpoint title status notes/plans 10.1 table orientation. ...
...tatus notes/plans checkpoint title status notes/plans 10.1 table orientation. (p1) ni we don't make use of scope, headers, axis, or any other table accessibility features we have nothing under properties, or anywhere else, to orient users reading a table 10.2 highlight selection and content focus. ...
... 10.1 table orientation. (p1) ni we don't make use of scope, headers, axis, or any other table accessibility features we have nothing under properties, or anywhere else, to orient users reading a table 10.2 highlight selection and content focus. ...
...And 2 more matches

Accessible Toolkit Checklist
toolkit it's important to: implement standard keyboard behavior, which can vary from platform to platform. expose your ui - a way for assistive technologies such as screen readers, screen magnifiers and voice dictation software to understand your software. provide theme compatibility with the operating system, at least as an option. some low vision users will be running your software with high contrast or large font themes. go beyond section 508. implement true usability for everyone, and make your toolkit follow the guidelines for each platform. the approaches there are two basic kinds of toolkits, which each provide different challenges when implementing accessibility: native widget toolkits , like eclipse and wxwidgets, already have some accessibility built-in.
... define mnemonics for all standard common dialogs (like yes/no confirmations and retry/exit error dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high contrast checkbox is set (in accessibility control panel, spi_gethighcontrast), or when user selects a "native" skin option in your software, then get all look and feel from current os skin. the high contrast theme can be toggled dynamically with leftalt+leftshift+printscreen expose the spi_getscreenreader flag to xml/scripts so that apps can alter behavior use system highlight ...
... current os skin. the high contrast theme can be toggled dynamically with leftalt+leftshift+printscreen expose the spi_getscreenreader flag to xml/scripts so that apps can alter behavior use system highlight color where possible for item selection, but never use that exact color in more than 1 place at a time, otherwise screen reader will read everything with that color whenever highlight changes pay attention to spi_getcaretwidth for the correct width of the caret pay attention to 'route mouse pointer to default button' setting it's possible that the user wants mnemonics hidden except when the alt key is pressed. this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified l...
...And 2 more matches

Performance best practices for Firefox front-end engineers
knowing it. note that given the same changes to the dom of a chrome ui document, a single synchronous uninterruptible reflow is no more computationally expensive than an interruptible reflow triggered by the 16ms tick. it is, however, advantageous to strive for reflow to only occur in the one place (the layout step of the 16ms tick) as opposed to multiple times during the 16ms tick (which has a higher probability of running through the 16ms budget). how do i avoid triggering uninterruptible reflow? here's a list of things that javascript can ask for that can cause uninterruptible reflow, to help you think about the problem. note that some items in the list may be browser-specific or subject to change, and that an item not occurring explicitly in the list doesn't mean it doesn't cause reflo...
...ve if the dom has been written to. otherwise, we're doing a cheap look-up of cached information. if we work hard to move all dom writes into requestanimationframe(), then we can be sure that all size and position queries are cheap. it's also possible (though less infallible than promisedocumentflushed) to queue javascript to run very soon after the frame has been painted, where the likelihood is highest that the dom has not been written to, and layout and style information queries are still cheap. this can be done by using a settimeout or dispatching a runnable inside a requestanimationframe callback, for example: requestanimationframe(() => { settimeout(() => { // this code will be run asap after style and layout information have // been calculated and the paint has occurred. unle...
... for style and layout information // here should be cheap. }, 0); }); // or, if you are running in privileged javascript and want to avoid the timer overhead, // you could also use: requestanimationframe(() => { services.tm.dispatchtomainthread(() => { // same-ish as above. }); }); this also implies that querying for size and position information in requestanimationframe() has a high probability of causing a synchronous reflow. other useful methods below you'll find some suggestions for other methods which may come in handy when you need to do things without incurring synchronous reflow. these methods generally return the most-recently-calculated value for the requested value, which means the value may no longer be current, but may still be "close enough" for your needs. u...
...And 2 more matches

Examine and edit HTML - Firefox Developer Tools
the breadcrumbs bar has its own keyboard shortcuts. searching the page inspector's search box matches all markup in the current document and in any frames. ...
...finding elements that start with a specific text, for example. html tree the rest of the pane shows you the page's html as a tree (this ui is also called the markup view). just to the left of each node is an arrow: click the arrow to expand the node. if you hold the alt key while clicking the arrow, it expands the node and all the nodes underneath it. moving the mouse over a node in the tree highlights that element in the page. nodes that are not visible are shown faded/desaturated. this can happen for different reasons such as using display: none or that the element doesn't have any dimensions. there is an ellipsis shown between the opening and closing tag of an element when the node is collapsed if it has larger contents. now children are indicated in the tree with this icon: at the...
...rs and allows you for each listener to switch to the line of javascript code in the debugger where the listener is defined. scroll the element is a scroll container, i.e. it has overflow: scroll or overflow: auto applied to it, and it has scrollable overflow. grid the element is a grid container, i.e. it has display: grid applied to it. clicking the marker enables the grid highlighter. flex the element is a flex container, i.e. it has display: flex applied to it. clicking the marker enables the flexbox highlighter. inline-grid the element is an inline grid container, i.e. it has display: inline-grid or display: inline grid applied to it. clicking the marker enables the grid highlighter. inline-flex the element is an inline flex contai...
...And 2 more matches

CSS Painting API - Web APIs
providing a subset of canvasrenderingcontext2d settings. examples to draw directly into an element's background using javascript in our css, we define a paint worklet using the registerpaint() function, tell the document to include the worklet using the paintworklet addmodule() method, then include the image we created using the css paint() function. ...
...to draw directly into an element's background using javascript in our css, we define a paint worklet using the registerpaint() function, tell the document to include the worklet using the paintworklet addmodule() method, then include the image we created using the css paint() function. ...
...custom properties are accessible to the paintwor...
...And 2 more matches

RTCIceCandidatePairStats - Web APIs
ing the number of times the circuit-breaker has been triggered for this particular 5-tuple (the set of five values comprising a tcp connection: source ip address, source port number, destination ip address, destination port number, and protocol). the circuit breaker is triggered whenever a connection times out or otherwise needs to be automatically aborted. consentexpiredtimestamp optional a domhighrestimestamp value indicating the time at which the most recent stun binding response expired. this value is undefined if no valid stun binding responses have been sent on the candidate pair; this can only happen if responsesreceived is 0. consentrequestssent optional the total number of consent requests that have been sent on this candidate pair. currentroundtriptime optional a floating-point...
...umber of consent requests that have been sent on this candidate pair. currentroundtriptime optional a floating-point value indicating the total time, in seconds, that elapsed elapsed between the most recently-sent stun request and the response being received. this may be based upon requests that were involved in confirming permission to open the connection. firstrequesttimestamp optional a domhighrestimestamp value which specifies the time at which the first stun request was sent from the local peer to the remote peer for this candidate pair. lastpacketreceivedtimestamp optional a domhighrestimestamp value indicating the time at which the last packet was received by the local peer from the remote peer for this candidate pair. timestamps are not recorded for stun packets. lastpacketsentt...
... specifies the time at which the first stun request was sent from the local peer to the remote peer for this candidate pair. lastpacketreceivedtimestamp optional a domhighrestimestamp value indicating the time at which the last packet was received by the local peer from the remote peer for this candidate pair. timestamps are not recorded for stun packets. lastpacketsenttimestamp optional a domhighrestimestamp value indicating the time at which the last packet was sent from the local peer to the remote peer for this candidate pair. timestamps are not recorded for stun packets. lastrequesttimestamp optional a domhighrestimestamp value which specifies the time at which the last (most recent) stun request was sent from the local peer to the remote peer for this candidate pair. lastresponset...
...And 2 more matches

Range.commonAncestorContainer - Web APIs
of a node, consider using the various methods available to set the start and end positions of the range, such as range.setstart() and range.setend(). syntax rangeancestor = range.commonancestorcontainer; example in this example, we create an event listener to handle pointerup events on a list. the listener gets the common ancestors of each piece of selected text, and triggers an animation to highlight them. html <ul> <li>strings <ul> <li>cello</li> <li>violin <ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline. .h...
... <li>strings <ul> <li>cello</li> <li>violin <ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline. ...
...llo</li> <li>violin <ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline. ...
...And 2 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
check with your assistive technology partners to find out what roles you need to support. there's a very good chance they won't ask for more than the roles marked [important]: there is no need to support the objects marked [inserted by syst...
...plication. read the manual or help, and find the keystroke or commands for training the caret, and save this information in the configuration file. make sure the caret always has the same width (1px or 2px) within a given window class. don't support the msaa caret unless you need home page reader's desktop reader application to work with your application -- no one else uses the msaa caret. hacky highlight tracking causes problems problem: screen readers ignore the msaa focus whenever a highlight bar moves, speaking the current highlighted text instead. the implementation of automated highlight tracking simply reads any text that is currently highlighted, even if it resides in several places on the screen. it does not take into account the problems that commonly occur with this feature, such ...
... text that is currently highlighted, even if it resides in several places on the screen. it does not take into account the problems that commonly occur with this feature, such as speaking the wrong thing, speaking the right thing twice or speaking two different things. problems can easily happen merely by having two listboxes visible at the same time, because selected listbox items use the system highlight color, even when the listbox itself is not focused. other problems occur when a piece of static text which has the same color background, which will cause that text to be repeated each time the focus or highlight moves. ...
...And 2 more matches

String.prototype.charCodeAt() - JavaScript
value of the character at the given index. if index is out of range, charcodeat() returns nan. description unicode code points range from 0 to 1114111 (0x10ffff). the first 128 unicode code points are a direct match of the ascii character encoding. (for information on unicode, see the javascript guide.) note: charcodeat() will always return a value that is less than 65536. this is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. because of this, in order to examine (or reproduce) the full character for individual character values of 65536 or greater, for such characters, it is necessary to retrieve not only charcodeat(i), but also charcodeat(i+1) (as if manipulating a string with two let...
...ence earlier in the string is unknown this version might be used in for loops and the like when it is unknown whether non-bmp characters exist before the specified index position. function fixedcharcodeat(str, idx) { // ex. fixedcharcodeat('\ud800\udc00', 0); // 65536 // ex. ...
...sed in for loops and the like when it is unknown whether non-bmp characters exist before the specified index position. function fixedcharcodeat(str, idx) { // ex. fixedcharcodeat('\ud800\udc00', 0); // 65536 // ex. ...
...And 2 more matches

JavaScript Daemons Management - Archive of obsolete content
for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/daemon.js.git. or, at your choice, directly download this .zip file. about the “callback arguments” polyfill in order to make this...
...able 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.js - a javascript highly scalable daemons manager. |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /**************************** * the daemon system * **************************...
... this library requires daemon.js to work. the daemon.safe constructor is a dependent-clone of daemon which uses a recursive invocation of the settimeout timer rather than a single invocation of setinterval. /*\ |*| |*| ******************************* |*| * daemon-safe.js * |*| ******************************* |*| |*| ver. 1.0 rev. 2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /************************************** * the safe-daemon sub-system * *******...
...dularity). when a method requires the presence of another method (it is relatively rare), there is a comment which explains why. if there are not comments to that method it depends only on the base system. /*\ |*| |*| ******************************* |*| * daemon-methods.js * |*| ******************************* |*| |*| ver. 1.0 rev. 2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /* system not required daemon instances methods */ /* movement */ daemon.prototype.sy...

Layout System Overview - Archive of obsolete content
this could be used to introduce other layout systems, but it might be worth noting that there was no specific facility designed into the layout system to accommodate this. layout deals with frames, but as long as the layout system being considered has no need to influence presentational elements from other layout systems, it can be adapted using a frame-based adapter, ala xul. core classes at the highest level, the layout system is a group of classes that manages the presentation within a fixed width and either unlimited height (galley presentation) or discrete page heights (paged presentation). digging just a tiny bit deeper into the system we find that the complexity (and interest) mushrooms very rapidly. the idea of formatting text and graphics to fit within a given screen area sounds simpl...
...t the complexity (and interest) mushrooms very rapidly. the idea of formatting text and graphics to fit within a given screen area sounds simple, but the interaction of in-flow and out-of-flow elements, the considerations of incremental page rendering, and the performance concerns of dynamic content changes makes for a system that has a lot of work to do, and a lot of data to manage. here are the high-level classes that make up the layout system. of course this is a small percentage of the total classes in layout (see the detailed design documents for the details on all of the classes, in the context of their actual role). presentation shell / presentation context together the presentation shell and the presentation context provide the root of the current presentation. the original design prov...
...focus states, whereby the selection and caret updates can be made visible. there are dozens of other data objects managed by the presentation shell and presentation context, all necessary for the internal implementation. these data members and their roles will be discussed in the presentation shell design documents. for this overview, the frames, style set, and reflow queue are the most important high-level parts of the presentation shell. frame manager the frame manager is used to, well, manage frames. frames are basic formatting objects used in layout, and the frame manager is responsible for making frames available to clients. there are several collections of frames maintained by the frame manager. the most basic is a list of all of the frames starting at the root frame. clients generally d...
...ainer frame is a specialization of the base frame class that introduces the ability to manage a list of child frames. all frames that need to manage child frames (e.g. frames that are not themselves leaf frames) derive from container frame. block frame reflow state reflow metrics space manager styleset stylecontext see also layout faq document history 05/20/2002 - marc attinasi: created, wrote highest level introduction to general layout concepts, links to relevant specs and existing documents. original document information author(s): marc attinasi last updated date: november 20, 2005 ...

Mozilla Application Framework in Detail - Archive of obsolete content
nterface elements, and even construct your own xml language for defining your ui. for instance imagine that you wanted to create a chess style game. you could easily create xml elements such as <chessboard> or <chesspiece> and via xbl map these to images and application logic. this is very powerful since you could make improvements to the underlying application logic without having to rewrite the higher level code. our platform also can take advantage of other internet standards such as xslt and rdf. rdf, a core element to the framework, allows you to define dynamic elements in your ui (elements that may change after you have completed the application, such as a "history" menu item). xslt could be used to translate information from web services, rss, soap, or other xml-based languages and conv...
...rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices. this innovation in browser technology offers small size, speed and industry leading standards support. gecko is the premier cross-platform, full-featured, mature and well-tested layout engine available, providing robust and high quality support for a massive array of standards. its ability to render web content correctly is exceptional. gecko consists roughly of an html parser and xml parser, a dom implementation, a css parser and style system, and the code for css-based and html-based layout and rendering. as personal connectivity expands from the desktop computer to new web-enabled products and devices, gecko is a brow...
...-platform installation technology is used to provide a simple installation and registration facilities for mozilla application developers. the mozblog application hosted at mozdev.org, for example, uses xpinstall to make several different versions available simultaneously as updates are made and the browser itself advances versions. ...
...ersions available simultaneously as updates are made and the browser itself advances versions. ...

TCP/IP Security - Archive of obsolete content
at each layer, the logical units are typically composed of a header and a payload. the payload consists of the information passed down from the previous layer, while the header contains layer-specific information such as addresses. ...
...ontains layer-specific information such as addresses. at the application layer, the payload is the actual application data. the lowest layer sends the accumulated data through the physical network; the data is then passed up through the layers to its destination. essentially, the data produced by a layer is encapsulated in a larger container by the layer below it. the four tcp/ip layers, from highest to lowest, are shown below. application layer. this layer sends and receives data for particular applications, such as domain name system (dns), hypertext transfer protocol (http), and simple mail transfer protocol (smtp). transport layer. this layer provides connection-oriented or connectionless services for transporting application layer services between networks. the transport layer ...
...ocols at the network layer are internet control message protocol (icmp) and internet group management protocol (igmp). data link layer. this layer handles communications on the physical network components. the best-known data link layer protocol is ethernet. security controls exist for network communications at each layer of the tcp/ip model. as previously explained, data is passed from the highest to the lowest layer, with each layer adding more information. because of this, a security control at a higher layer cannot provide protection for lower layers, because the lower layers perform functions of which the higher layers are not aware. security controls that are available at each layer include: application layer. separate controls must be established for each application. for e...
... lower layers perform functions of which the higher layers are not aware. security controls that are available at each layer include: application layer. separate controls must be established for each application. for example, if an application needs to protect sensitive data sent across networks, the application may need to be modified to provide this protection. while this provides a very high degree of control and flexibility over the application’s security, it may require a large resource investment to add and configure controls properly for each application. designing a cryptographically sound application protocol is very difficult, and implementing it properly is even more challenging, so creating new application layer security controls is likely to create vulnerabilities. also...

The Business Benefits of Web Standards - Archive of obsolete content
ss has made it possible to transform table-based layouts into css-based layouts. typically this reduces page size by 25 to 50%. this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load. the style sheet only needs to load once and then it is cached. the payload might be slightly higher for the first page. but for accessing multiple pages of a site over many visits the savings in bandwidth are huge. improve search engine optimization without costs being well-placed in search engines is one of the hardest challenges faced by webmasters. in this case, every bit helps. by using semantic markup we greatly assist the search engines in their indexing process. these things come n...
... to index it, but for ranking and indexing purposes they can only process text. dynamic effects such as those created by javascript are not taken into account, and text rendered with graphics cannot be read and parsed either. separating presentation from content increases the information/markup ratio, making css-based documents more pertinent with regard to the search terms, which makes them rank higher in search results. using css to render titles instead of graphics also helps in this regard. there are very significant differences in how search engines operate. instead of worrying about each engine and attempting to artificially manipulate the results, web standards pages index and rank properly (where they deserve to) across all search engines. in the same way that standards hugely reduce ...
...displayed differently in various browsers. such rendering differences do exist in older browsers, but most of them are well known and documented. in many cases, rendering differences are caused by ambiguous coding. for developers who are in commercial environments and are in a postion to measure these time costs some of the figures are astonishing. a single inconsistency between the browsers in a high end feature for the site can absorb the lead developers in hours of painful and frustrating forum hunting and bug fixing. by using standards to start with we have a known benchmark to measure the known deviations of legacy user agents. nearly all of those deviations are now well documented and the fixes are well published and well known. conversely fixing tag soup is a black hole of time and mone...
...nsional coding gymnastics to cope with the vendors of browsers and other user agents. foremost among the goals of standards led development to improve that user experience are the great twins usability and accessibility. put simply - and quite crudely - a pleasing, satisfying and fulfilling user experience translates, into more traffic, more repeat visitors, fewer bounces, greater loiter time and higher click throughs. ultimately that better user experience delivers the business or operational objectives of the site. greater dialogue, more sales, more people interacting with the site operator in some way. sites which are built using web standards methodologies, processes and practises perform far better for every single metric. they load faster, they are easy to find in search engines, and th...

What text editors are available? - Learn web development
prerequisites: you should already know about various software you need to build a website. objective: learn how to choose a text editor that best suits your needs as a web developer. summary a website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely. the sheer number of choices is a bit overwhelming, since a text editor is so basic to computer science (yes, web development is computer science). ideally, you'd try as many editors as you can and get a feel for what suits your workflow. but we'll give you some pointers for getting started. ...
...may already be installed with one of the editors suggested above (e.g. gedit if you use gnome desktop, kate if you use kde etc.), if not then you should try installing one or more text editors of your choosing. try digging through the settings of your editor and read the manual or documentation to see what its capabilities are. ...
...ly speaking, any text editor can open any text file. that works great for writing notes to yourself, but when you're doing web development and writing in html, css, and javascript, you can produce some pretty large, complex files. make it easier on yourself by choosing a text editor that understands the technologies you're working with. many text editors help you out with features like: syntax highlighting. make your file more legible by color-coding keywords based on the technology you're using. code completion. save you time by auto-completing recurring structures (for example, automatically close html tags, or suggesting valid values for a given css property). code snippets. as you saw when starting a new html document, many technologies use the same document structure over and over. s...
... auto-completing recurring structures (for example, automatically close html tags, or suggesting valid values for a given css property). code snippets. as you saw when starting a new html document, many technologies use the same document structure over and over. save yourself the hassle of retyping all this by using a code snippet to pre-fill your document. most text editors now support syntax highlighting, but not necessarily the other two features. make sure in particular that your text editor supports highlighting for html, css, and javascript. what kind of basic features do i expect from my text editor? it depends on your needs and plans. these functionalities are often helpful: search-and-replace, in one or multiple documents, based on regular expressions or other patterns as need...

Example 4 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist =...
...ptlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.opti...
...st.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window...
...tor('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { ...

Example 5 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist =...
...ptlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.opti...
... var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window...
...eryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (ev...

What’s in the head? Metadata in HTML - Learn web development
le to understand who wrote the page, if you have any questions about the content and you would like to contact them. some content management systems have facilities to automatically extract page author information and make it available for such purposes. specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine result pages. let's go through an exercise to explore this go to the front page of the mozilla developer network. view the page's source (right/ctrl + click on the page, choo...
...rnet explorer 6.) adding the following line into your html's <head> block to reference it: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well. ...
...icon in a bookmarks panel: there are lots of other icon types to consider these days as well. ...
... don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. the main purpose here is to let you know what such things are, in case you come across them while browsing other websites' sou...

Aprender y obtener ayuda - Learn web development
earning methods it is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning: focused learning is what you might more traditionally associate with academic subjects. you concentrate deeply on a low-level topic and solving the specific problems that it brings. you are focused on a narrow area. diffuse learning is more to do with high-level thinking around a wider area. you let your mind wander more widely, and seemingly make random connections between different things. this is more the kind of thinking you do while you are in the shower, or during a coffee break. from the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at o...
...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 how to fix problem b with tool b. not know how to fix problem c. let's say you focus on problem c for a while and get frust...
...n problem c for a while and get frustrated because you can't think how to solve it. but then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool a and tool b, and realize that you can use them together to fix problem c! it isn't always this simple, but it is also surprising how many times this does happen. this also highlights the importance of taking regular breaks when you are studying in front of the computer. different learning materials it is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with. textual articles you'll find a lot of written articles on the web to teach you about web design. like most of this course,...
...hen you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks. for example, if you are looking at a task of "build a simple two-column website", you could break it down as follows: create the html structure work out basic site typography work out a basic color scheme implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer. implement a horizontal navigation menu etc. then you could break it down further, for example, "implement horizontal navigation menu" could be written out as: make a list of menu items sit horizontally in a line. remove unneeded defaults, like list spacing and bullet points. sty...

Handling common HTML and CSS problems - Learn web development
css code, and what tools can be used to prevent problems from happening, or fix problems that occur. this includes linting code, handling css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross browser testing. objective: to be able to diagnose common html and css cross browser problems, and use appropriate tools and techniques to fix them. the trouble with html and css some of the trouble with html and css lies with the fact that both languages are fairly simple, and often developers don't take them seriously, in terms of making sure the co...
...rch for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-csslint plugin for linting css, and the linter-tidy plugin for linting html. after the packages have finished installing, try loading up an html file and a css file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes. other popular editors have similar linting packages available. for example, see: sublimelinter for sublime text notepad++ linter vscode linters browser developer tools the develo...
... are unsure, you can also find out by doing some testing directly in browsers. try this simple example: open up google.com, or another site that has a prominent heading or other block-level element. right/cmd + click on the element in question and choose inspect/inspect element (or whatever the option is in your browser) — this should open up the dev tools in your browser, with the element highlighted in the dom inspector. look for a feature you can use to select that element. for example, at the time of writing, the main google logo had an id of hplogo. store a reference to this element in a variable, for example: const test = document.getelementbyid('hplogo'); now try to set a new value for the css property you are interested in on that element; you can do this using the style ...
...ing the autoprefixer settings button and entering the query in the text field in the settings section on the page. in your code, you can select sections of css you want to add prefixes to, open the command pallette (cmd/ctrl + shift + p), then type in autoprefixer and select the autoprefixer result that autocompletes. as an example, we entered the following code: body { display: flex; } we highlighted it and ran the autoprefixer command, and it replaced it with this: body { display: -webkit-box; display: -ms-flexbox; display: flex; } layout issues another problem that might come up is differences in layouts between browsers. historically this used to be much more of a problem, but recently, with modern browsers tending to support css more consistently, layout issues tend to be ...

Introduction to cross browser testing - Learn web development
view 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. 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. as a web developer, it is your responsibility to make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or...
...s and smartphones, through smart tvs, right down to cheap tablets and even older feature phones that may run browsers with limited capabilities. people with disabilities, who use the web with the aid of assistive technologies like screenreaders, or don't use a mouse (some people use only the keyboard). remember that you are not your users — 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 brow...
...use those, or convert your code to old fashioned syntax using some kind of cross-compiler where needed. some devices may have constraints that cause a web site to run slowly, or display badly. for example, if a site has been designed to look nice on a desktop pc, it will probably look tiny and be hard to read on a mobile device. if your site includes a load of big animations, it might be ok on a high spec tablet, but might be sluggish or jerky on a low end device. and more reasons besides. in later articles, we'll explore common cross browser problems, and look at solutions to those. workflows for cross browser testing all of this cross browser testing business may sound time consuming and scary, but it needn't be — you just need to plan carefully for it, and make sure you do enough te...
...as been made, you'll want to repeat your testing process to make sure your fix is working ok, and hasn't caused the site to break in other places or in other browsers. reporting bugs just to reiterate on what was said above, if you discover bugs in browsers, you should report them: firefox bugzilla edgehtml issue tracker safari chrome opera summary this article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing. armed with this knowledge, you are now ready to move on and start learning about cross browser testing strategies. overview: cross browser testing next in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling...

Strategies for carrying out testing - Learn web development
gotta test 'em all? when doing cross-browser testing, you need to work out a list of browsers you will need to test on to start with. there is no way you can test on every combination of browser and device your users might use to view you...
...ns 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 every combination of browser and device your users might use to view your site — there are just too many, and new ones appear all the time. instead, you should try to make ...
...t accuracy in terms of behaviour and overall user experience. you'll probably want something like the following, for a reasonable low-level device lab: a mac, with the browsers installed that you need to test — this can include firefox, chrome, opera, and safari. a windows pc, with the browsers installed that you need to test — this can include edge (or ie), chrome, firefox, and opera. a higher-spec android phone and tablet with browser installed that you need to test — this can include chrome, firefox, and opera mini for android, as well as the original android stock browser. a higher-spec ios phone and tablet with the browsers installed that you need to test — this can include ios safari and chrome, firefox, and opera mini for ios. the following are also good options, if you ...
...ies and temp files are not saved. these steps are designed to make sure that the browser you are testing in is as "pure" as possible, i.e. there is nothing installed that could affect the results of the tests. note: another useful lo-fi option, if you have the hardware available, is to test your sites on low-end phones/other devices — as sites get larger and feature more effects, there is a higher chance of the site slowing down, so you need to start giving performance more consideration. trying to get your functionality working on a low end device will make it more likely that the experience will be good on higher-end devices. note: some server-side development environments provide useful mechanisms for rolling out site changes to only a subset of users, providing a useful mechanism ...

Script security
this page provides an overview of the script security architecture in gecko. like any web browser, gecko can load javascript from untrusted and potentially hostile web pages and run it on the user's computer. the security model for web content is based on the same-origin policy, in which code gets full access to objects from its origin but highly restricted access to objects from a different origin. the rules for determining whether an object is same-origin with another, and what access is allowed cross-origin, are now mostly standardized across browsers. gecko has an additional problem, though: while its core is written in c++, the front-end code is written in javascript. this javascript code, which is commonly referred to as chrome code, runs with system privileges. if the code i...
... code, which is commonly referred to as chrome code, runs with system privileges. if the code is compromised, the attacker can take over the user's computer. legacy sdk extensions also run with chrome privileges. having the browser front end in javascript has benefits: it can be much quicker to develop in javascript than in c++, and contributors do not need to learn c++. however, javascript is a highly dynamic, malleable language, and without help it's difficult to write system-privileged code that interacts safely with untrusted web content. from the point of view of chrome code, the script security model in gecko is intended to provide that help to make writing secure, system-privileged javascript a realistic expectation. security policy gecko implements the following security policy: ...
...tem-privileged javascript a realistic expectation. security policy gecko implements the following security policy: objects that are same-origin are able to access each other freely. for example, the objects associated with a document served from https://example.org/ can access each other, and they can also access objects served from https://example.org/foo. objects that are cross-origin get highly restricted access to each other, according to the same-origin policy. for example, code served from https://example.org/ trying to access objects from https://somewhere-else.org/ will have restricted access. objects in a privileged scope are allowed complete access to objects in a less privileged scope, but by default they see a restricted view of such objects, designed to prevent them from be...
...s example of this kind of security relation is between system-privileged chrome code and untrusted web content, but there are other examples in gecko. the add-on sdk runs content scripts in sandboxes, which are initialized with an expanded principal, giving them elevated privileges with respect to the web content they operate on, but reduced privileges with respect to chrome. if the caller has a higher privilege than the target object, the caller gets an xray wrapper for the object. xrays are designed to prevent untrusted code from confusing trusted code by redefining objects in unexpected ways. for example, privileged code using an xray to a dom object sees only the original version of the dom object. any expando properties are not visible, and if any native dom properties have been redef...

about:memory
quire any preparation to be used. how to generate memory reports let's assume that you want to measure firefox's memory usage. perhaps you want to investigate it yourself, or perhaps someone has asked you to use about:memory to generate "memory reports" so they can investigate a problem you are having. follow these steps. at the moment of interest (e.g. once firefox's memory usage has gotten high) open a new tab and type "about:memory" into the address bar and hit "enter". if you are using a communication channel where files can be sent, such as bugzilla or email, click on the "measure and save..." button. this will open a file dialog that lets you save the memory reports to a file of your choosing. (the filename will have a .json.gz suffix.) you can then attach or upload the file approp...
...rbose" checkbox before measuring, all trees will be shown fully expanded and no artificial nodes will be inserted. the "js-non-window" sub-tree represents javascript memory usage that doesn't come from windows, but from the browser core. the "heap-unclassified" value represents heap-allocated memory that is not measured by any memory reporter. this is typically 10--20% of "explicit". if it gets higher, it indicates that additional memory reporters should be added. dmd can be used to determine where these memory reporters should be added. there are measurements for other content such as images and workers, and for browser subsystems such as the startup cache and xpconnect. some add-on memory usage is identified, as the following example shows. ├───40,214,384 b (04.17%) -- add-ons ...
...e-temporary-peak 0 ── page-faults-hard 203,349 ── page-faults-soft 274.99 mb ── resident 251.47 mb ── resident-unique 1,103.64 mb ── vsize some measurements of note are as follows. "resident". physical memory usage. if you want a single measurement to summarize memory usage, this is probably the best one. "vsize". virtual memory usage. this is often much higher than any other measurement (particularly on mac). it only really matters on 32-bit platforms such as win32. there is also "vsize-max-contiguous" (not measured on all platforms, and not shown in this example), which indicates the largest single chunk of available virtual address space. if this number is low, it's likely that memory allocations will fail due to lack of virtual address space quite...
... ...

Preference reference
xt.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or c...
... ...
... ...
... ...

Introduction to NSPR
roduce the nspr approach to these three aspects of thread scheduling. setting thread priorities preempting threads interrupting threads for reference information on the nspr api used for thread scheduling, see threads. setting thread priorities the host operating systems supported by nspr differ widely in the mechanisms they use to support thread priorities. ...
...this preference is still subject to resource availability, and must not be used in place of proper synchronization. for more information on thread synchronization, see nspr thread synchronization. ...
...there may be an arbitrary (and perhaps large) number of local threads being supported by a more limited number of virtual processors (an internal application of global threads). in such situations, each virtual processor will have some number of local threads associated with it, though exactly which local threads and how many may vary over time. nspr guarantees that for each virtual processor the highest-priority, schedulable local thread is the one executing. this thread implementation strategy is referred to as the m x n model. preempting threads preemption is the act of taking control away from a ready thread at an arbitrary point and giving control to another appropriate thread. it might be viewed as taking the executing thread and adding it to the end of the ready queue for its appropr...
...model. preempting threads preemption is the act of taking control away from a ready thread at an arbitrary point and giving control to another appropriate thread. it might be viewed as taking the executing thread and adding it to the end of the ready queue for its appropriate priority, then simply running the scheduling algorithm to find the most appropriate thread. the chosen thread may be of higher priority, of the same priority, or even the same thread. it will not be a thread of lower priority. some operating systems cannot be made preemptable (for example, mac os and win 16). this puts them at some risk in supporting arbitrary code, even if the code is interpreted (java). other systems are not thread-aware, and their runtime libraries not thread-safe (most versions of unix). these sys...

Index
spidermonkey no summary! 7 gcintegration developing mozilla, firefox, garbage collection, intermediate, intro, jsapi, needsupdate, spidermonkey, tools, memory the spidermonkey garbage collector (gc) will be changing a lot in the future. this page is intended to explain the changes that are happening, with a focus on how they will affect gecko code that uses jsapi. at a high level, there are three issues to be aware of: 8 getting spidermonkey source code guide, spidermonkey you can get the spidermonkey source code in gzipped form or directly from the mercurial repository. 9 hacking tips spidermonkey this page list a few tips to help you investigate issues related to spidermonkey. all tips listed here are dealing with the java...
...r a single js function to associate with an object. an application typically has an array of jsfunctionspec to define all the functions for an object and calls js_definefunctions or js_initclass to create the functions and assign them to an object. 111 jsgetobjectops jsapi reference, obsolete, spidermonkey jsobjectops is used by js_newobject's internals to discover the set of high-level object operations to use for new objects of the given class. all native objects have a jsclass, which is stored as a private (int-tagged) pointer in object slots. in contrast, all native and host objects have a jsobjectmap at obj->map, which may be shared among a number of objects, and which contains the jsobjectops *ops pointer used to dispatch object operations from api calls. 112 ...
...de is executed in. if callbacks is null, it sets callbacks to default value. 339 js_getstringbytes jsapi reference, obsolete, spidermonkey js_getstringbytes and js_getstringbytesz convert the specified javascript string, str, to a c string (an array of 8-bit chars). if js_cstringsareutf8 is true, then the returned string is utf-8, and the conversion is lossless. otherwise the high byte is simply dropped from each jschar. on success, the return value is a pointer to the char array, which is null-terminated. on failure, js_getstringbytes returns a pointer to a null-terminated empty string; js_getstringbytesz returns null. 340 js_getstringcharat jsapi reference, reference, référence(2), spidermonkey js_getstringcharat and js_getflatstringcharat get the ...
...e. it is mainly of interest to people working on spidermonkey itself. see js_threadsafe for a gentler introduction to using spidermonkey in a multi-threaded application. 537 tracing jit deprecated, spidermonkey the tracing jit in spidermonkey consists of a generic, low level component called nanojit which is co-maintained between adobe and mozilla, and a spidermonkey-specific high level component called jstracer. the nanojit component is language agnostic, and contains no knowledge about spidermonkey or any other part of the mozilla codebase. the jstracer component consists of a monitor and a recorder. the monitor watches the executing spidermonkey interpreter. when the monitor determines that the interpreter has entered a region of code that would benefit from native comp...

Tracing JIT
the nanojit component is language agnostic, and contains no knowledge about spidermonkey or any other part of the mozilla codebase. the jstracer component consists of a monitor and a recorder. the monitor watches the executing spidermonkey interpreter. ...
...ve*.* files. an assembler runs in a single pass over its input, transforming one lins value to zero or more nins values. it is important to keep in mind that this pass runs backwards from the last lins in the input lir code to the first, generating native code in reverse. running backwards sometimes makes the logic difficult to follow, but it is an essential factor in maintaining the assembler's high speed and small size. in the spidermonkey tracing jit there is only ever one assembler active at a time, associated with the currently active fragmento. nanojit/regalloc.* nanojit's register allocator. this is a local register allocator, meaning that it does not allocate registers across basic blocks. it is correspondingly very simple: register allocation is done immediately, step-by-step as c...
...e architecture-specific methods within the assembler class. only one architecture-specific variant is included into any given build of the assembler; the architecture is selected and fixed when the build is configured. the architecture-specific methods found in these files are the only functions within nanojit or tracemonkey that emit raw bytes of machine-code into memory. spidermonkey-specific high level component: jstracer.* the files jstracer.cpp and jstracer.h contain a the mechanisms of monitoring and recording the activity of the interpreter. each spidermonkey jscontext holds a trace monitor of type jstracemonitor. the trace monitor maintains some book-keeping information, as well as the collection of recorded fragments, held in a hashtable keyed by the interpreter's program counter...
...g it any longer. if the recorder completes recording at a backward branch back to the initial pc value that triggered recording mode, it is said to have successfully closed the loop. a closed loop is passed through the nanojit assembler and thereby compiled to native machine code. the associated fragment is placed in the monitor's fragment table and the monitor returns to monitoring mode, with a high likelihood of immediately transitioning to executing mode on the next bytecode interpreted. the compiled fragment of code returned to the monitor on successful loop-close is called a trace. if the recorder is asked to record a bytecode that implies a call to a native function elsewhere in spidermonkey -- some helper function written in c -- and that native happens to re-enter the interpreter to ...

Index
de mozilla, and it lets you talk about their interfaces as well. 60 using components deprecated, guide, needscontent, xpcom, xpcom:language bindings, xpconnect xpconnect works transparently in mozilla and xpcshell to give you access to xpcom components. 61 xpconnect wrappers guide, needscontent, xpcom, xpcom:language bindings, xpconnect this document is a high-level overview of xpconnect wrapper objects (for the more technical description see xpconnect security membranes). for practical advice on dealing with wrappers, see safely accessing content dom from chrome. 62 appshellservice xpcom:language bindings, xpconnect quitting mozilla: 63 nsiprofile interfaces, xpcom, xpcom:language bindings, xpconnect this inte...
...oziplaceinfo no summary! 199 moziplacesautocomplete interfaces, interfaces:scriptable, places, xpcom, xpcom interface reference mark a page as being currently open. 200 moziregistry outdated_articles clients will rely on nsrepository to create instances of a given class. clients requiring dynamic "binding" of clsids will be required to use some higher-level services (tbd) to figure out the clsids they should use. the intent is that such services themselves be built on top of the new moziregistry interface. 201 mozirepresentativecolorcallback interfaces, interfaces:scriptable, places, xpcom api reference, xpcom interface reference will be called when color analysis finishes. 202 mozispellcheckingengine inte...
...nsidomwindowutils has provided the methods which dispatched keyboard events and composition events almost directly. therefore they sometimes caused impossible scenarios in automated tests (what's tested with such events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch events with wrong rules. for solving that issue, methods of this interface have been designed for pe...
... tells details of a request or notification to ime. when gecko supports new notification to ime, this interface may have some new attributes. so, nsitextinputprocessorcallback won't be changed for keeping backward compatibility. 1006 nsithread firefox 3, interfaces, interfaces:scriptable, threads, xpcom, xpcom api reference, xpcom interface reference this interface provides a high-level abstraction for an operating system thread. 1007 nsithreadeventfilter firefox 3, interfaces, threads, xpcom, xpcom api reference, xpcom interface reference the nsithreadeventfilter interface may be implemented to determine whether or not an event may be accepted by a nested event queue; see nsithreadinternal.pusheventqueue() for more information. 1008 nsithre...

Filelink Providers
filelink is a thunderbird feature that makes it easy for users to upload large attachments to web-based storage services such as hightail. this document explains how to extend thunderbird to support additional web-based storage services. nsimsgcloudfileprovider note: cloudfiles and bigfiles were the two temporary feature names that were used while filelink was under construction. both refer to the filelink feature. filelink storage providers must implement the nsimsgcloudfileprovider interface. the hightail implementation is a great place to look for examples and inspiration. the nsimsgcloudfileprovider implementation must be registered as a component. if the provider is being merged into the comm-central code repository (and thus added to the official thunderbird build), you must...
... well as this document on chrome.manifest files. the account setup dialog the account setup dialog allows the user to select what account type they would like to create from a menulist. some providers require thunderbird to do very little in order to connect a user to their account. other providers however may require the user to fill in additional details in order to connect to the service. hightail, for example, requires a username and password. other services may require the user to fill in a server string or port number. a provider implementation can choose what information it gets from the user from the setup dialog by pointing the settingsurl attribute of their nsimsgcloudfileprovider implementation to a chrome url for an xhtml page that contains a form with the extra information. ...
...ing the preferences api. saving the preferences is handled automatically by the dialog code. providers need only provide an extraargs function in the iframe content which returns an object specifying the name, type, and value to save. the format for the returned object is: { field_name: {type: field_type, value: field_value} } where field_type is "int", "bool", or "char". for example, the hightail implementation provides the following function: function extraargs() { var usernamevalue = document.getelementbyid("username").value; return { "username": {type: "char", value: usernamevalue}, }; } in this example, the username value is read from the input, and then the specially-crafted object is returned. once this is done, the field is accessible from within the implementatio...
...type: "char", value: usernamevalue}, }; } in this example, the username value is read from the input, and then the specially-crafted object is returned. once this is done, the field is accessible from within the implementation via the preferences api using the key mail.cloud_files.accounts.account_key.username where account_key is the value passed into the implementations init function. the hightail settings.xhtml and settings.js file have examples of this. management interface once an account has been created, it is manageable from within the preferences dialog, in the attachment pane, in the outgoing tab. the content to the right of the menulist is an iframe, pointed at a url read from the providers managementurl attribute, which should point to an xhtml page. the xhtml page shou...

Plug-in Basics - Plugins
let, and runs only from the browser. although plug-ins are platform-specific, the plug-in api is designed to provide the maximum degree of flexibility and to be functionally consistent across all platforms. this guide notes platform-specific differences in coding for the ms windows, mac os x, and unix platforms. you can use the plug-in api to write plug-ins that are media type driven and provide high performance by taking advantage of native code. plug-ins give you an opportunity to seamlessly integrate platform-dependent code and enhance the gecko core functionality by providing support for new data types. the plug-in file type depends on the platform: ms windows: .dll (dynamic link library) files unix: .so or .dso (shared objects) files mac os x: ppc/x86/universal loadable mach-o bund...
...ing object elements</title> <style type="text/css"> .myplugin { width: 470px; height: 231px; } </style> </head> <body><p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" class="myplugin"> <param name="movie" value="foo.swf"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object data="foo_movie.swf" type="application/x-shockwave-flash" class="myplugin"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object type="*" class="myplugin"> <param name="plu...
...ement nested within an object element, which is necessary for browsers that do not support the embed element. ...
...ect classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" width="749" height="68"> <param name="movie" value="foo.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#eeeeee"> <param name="salign" value="tl"> <param name="menu" value="0"> <embed src="foo.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash" type="application/x-shockwave-flash" width="749" height="68" bgcolor="#eeeeee" salign="tl" menu="0"> </embed> </object> using custom embed attributes in addition to these standard attributes, you can create private, plug-in-specific attributes and use them in the embed attr...

Accessibility Inspector - Firefox Developer Tools
e item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the url in the corresponding <a> element's href. domnode — the type of dom node that the item in the accessibility tree represents. you can click on the "target" icon that comes after it to select the node in the page inspector. hovering over the "target" icon highlights the dom node in the page content. description — any further description provided on the element, usually by the content of a title attribute. keyboardshortcut — any keyboard shortcut that is available to activate the element, as specified in an accesskey attribute. note that this works correctly as of firefox 62 (bug 1467381). childcount — the number of child items the current i...
...en you choose the inspect accessibility properties/show accessibility properties context menu options, the accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties. note: some dom elements do not have accessibility properties — in that case, the inspect accessibility properties/show accessibility properties context menu item is grayed out. highlighting of ui items in the accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the ui items they relate to, if appropriate. the role and name of the item will be shown in a small information bar along with color contrast information if appropriate. this is useful for determining how the items in the accessibility tree relate to ...
...you can see a semi-transparent highlight appear over the ui items they relate to, if appropriate. the role and name of the item will be shown in a small information bar along with color contrast information if appropriate. this is useful for determining how the items in the accessibility tree relate to the ui items on the actual page. in the following example, you can see that the image has been highlighted and its role, graphic, name, "road, asphalt, sky, clouds, fall", and the color contrast ratio, 3.46, appears in the information bar above it. color contrast contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be un...
...a and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the criteria for enhanced contrast, or level aaa. see color contrast for more information on color contrast. accessibility picker like the element picker button on the page inspector, the accessibility tab's element picker button allows you to hover and select ui items on the current page highlight objects in the accessibility tree. the accessibility tab element picker looks slightly different from the page inspector html pane picker, as shown below: when you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. note, however, that if you hold the shift key down when "performing a pick", you can "preview" the...

Set a breakpoint - Firefox Developer Tools
hen stepping through code, this option tells the debugging to continue execution through to this point. unconditional breakpoints an unconditional breakpoint is one where the code will always pause execution when it is reached. you can set an unconditional breakpoint using the context menu (see above), or by: clicking on the line number for the line you want to break at in the source pane. highlighting the line you want to break at in the source pane and pressing ctrl + b (windows/linux) or cmd + b (macos). the line number is highlighted in blue: in addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it. these are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the funct...
... to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each relevant one. conditional breakpoints a conditional breakpoint is one where the code will pause execution when it is reached, only if a certain condition is met, such a variable having a certain value at the time. ...
...context menu (see above), or by highlighting the line you want to break at in the source pane and pressing ctrl + shift + b (windows/linux) or cmd + shift + b (macos). when you first choose to set a conditional breakpoint, a text entry line will appear into which you add the condition you want it to break on: once you've entered your condition and pressed enter/return, the line number will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one: unsetting a breakpoint once a breakpoint has been set, you can unset it again in various ways: click on the line number highlight. ...
... once you've entered your condition and pressed enter/return, the line number will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one: unsetting a breakpoint once a breakpoint has been set, you can unset it again in various ways: click on the line number highlight. highlight the line of code the breakpoint is set on and pressing ctrl + b (windows/linux) or cmd + b (macos). bring up the context menu over the line highlight and choose the remove breakpoint option. other context menu options worth mentioning are: disable breakpoint: turn it off, but don't remove it completely. disable breakpoints on line and remove breakpoints on line: remove or disable co...

Examine and edit CSS - Firefox Developer Tools
t to unsupported css properties or rules that have invalid values. this can help you understand why certain styles are not being applied. in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations. highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector. overridden declaration: declarations that are overridden by later rules are crossed out. see overridden declarations. inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives ...
...uted view.) user-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule. it represents the css properties assigned to the element via its style attribute. this also gets the target icon: , giving you a convenient way to highlight the currently selected element in the page. filtering rules there's a box at the top of the rules view labeled "filter styles": as you type: any rules which don't contain the typed string at all are hidden any declarations which contain the typed string are highlighted click the "x" at the end of the search box to remove the filter. while in the rules view, you can press ctrl / ...
...: any rules which don't contain the typed string at all are hidden any declarations which contain the typed string are highlighted click the "x" at the end of the search box to remove the filter. while in the rules view, you can press ctrl / cmd + f to focus the search field. once you've typed in a filter, you can press esc to remove it again. strict search by default, the search box highlights all declarations which contain any part of the string. ...
...typed string are highlighted click the "x" at the end of the search box to remove the filter. while in the rules view, you can press ctrl / cmd + f to focus the search field. once you've typed in a filter, you can press esc to remove it again. strict search by default, the search box highlights all declarations which contain any part of the string. for example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.: if you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them. displaying pseudo-elements the rule vi...

View Source - Firefox Developer Tools
vate view source: context-click in the page and select view page source press ctrl + u on windows and linux, or cmd + u on macos the command opens a new tab with the source for the current page. view source features view source has three additional features, which can be accessed from the context menu in the view source tab: go to line scrolls to the specified line. if the number is higher than the lines in a file, you receive an error message. wrap long lines (toggle) wraps long lines to the width of the page. syntax highlighting (toggle) applies syntax highlighting to the code.when syntax highlighting is on, view source also highlights parsing errors in red. hovering your mouse over errors displays a tooltip explaining the error. this feature is useful when you're looki...
...ong the errors that don't get reported: bytes that are illegal according to the document's encoding aren't marked as errors. forbidden characters aren't reported as errors. errors related to the end-of-file aren't reported. tree builder errors relating to text (as opposed to tags, comments, or doctypes) aren't reported. parse errors related to xmlns attributes aren't reported. ...
...re illegal according to the document's encoding aren't marked as errors. forbidden characters aren't reported as errors. errors related to the end-of-file aren't reported. tree builder errors relating to text (as opposed to tags, comments, or doctypes) aren't reported. parse errors related to xmlns attributes aren't reported. xml syntax highlighting view source uses the html tokenizer when highlighting xml source. ...
...ters aren't reported as errors. errors related to the end-of-file aren't reported. tree builder errors relating to text (as opposed to tags, comments, or doctypes) aren't reported. parse errors related to xmlns attributes aren't reported. xml syntax highlighting view source uses the html tokenizer when highlighting xml source. while the tokenizer has support for processing instructions when highlighting xml source, that's the only xml-specific capability provided. because of this, doctypes that have an internal subset are not highlighted correctly, and entity references to custom entities are also not highlighted correctly. this mishighlighting can be seen by viewing the source of firefox chrome files (such as xul documents). however, this shouldn't be a problem in practice when viewing...

Performance - Web APIs
an object of this type can be obtained by calling the window.performance read-only attribute. note: this interface and its members are available in web workers, except where indicated below. also, note that performance markers and measures are per context. if you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa. ...
...ble in workers. performance.timing read only a legacy performancetiming object containing latency-related performance information. not available in workers. performance.memory read only a non-standard extension added in chrome, this property provides an object with basic memory usage information. you should not use this non-standard api. performance.timeorigin read only returns the high resolution timestamp of the start time of the performance measurement. methods the performance interface doesn't inherit any methods. performance.clearmarks() removes the given mark from the browser's performance entry buffer. performance.clearmeasures() removes the given measure from the browser's performance entry buffer. performance.clearresourcetimings() removes all performance ent...
....getentriesbytype() returns a list of performanceentry objects of the given entry type. performance.mark() creates a timestamp in the browser's performance entry buffer with the given name. performance.measure() creates a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively). performance.now() returns a domhighrestimestamp representing the number of milliseconds elapsed since a reference instant. performance.setresourcetimingbuffersize() sets the browser's resource timing buffer size to the specified number of "resource" type performance entry objects. performance.tojson() is a jsonizer returning a json object representing the performance object. events listen to these events using addeventlisten...
...bject representing the performance object. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. resourcetimingbufferfull fired when the browser's resource timing buffer is full. also available via the onresourcetimingbufferfull property. specifications specification status comment high resolution time level 2the definition of 'performance' in that specification. recommendation defines tojson() method. high resolution timethe definition of 'performance' in that specification. recommendation defines now() method. performance timeline level 2the definition of 'performance extensions' in that specification. candidate recommendation changes getent...

Range.getBoundingClientRect() - Web APIs
at bounds the contents of the range; this is a rectangle enclosing the union of the bounding rectangles for all the elements in the range. this method is useful for determining the viewport coordinates of the cursor or selection inside a text box. see element.getboundingclientrect() for details on the returned value. ...
...rectangle enclosing the union of the bounding rectangles for all the elements in the range. this method is useful for determining the viewport coordinates of the cursor or selection inside a text box. see element.getboundingclientrect() for details on the returned value. syntax boundingrect = range.getboundingclientrect() example html <div id="highlight"></div> <p>this example positions a "highlight" rectangle behind the contents of a range. ...
...ndingclientrect() for details on the returned value. syntax boundingrect = range.getboundingclientrect() example html <div id="highlight"></div> <p>this example positions a "highlight" rectangle behind the contents of a range. the range's content <b>starts here</b> and continues on until it <b>ends here</b>. ...
...tangle contains everything selected in the range.</p> css #highlight { background: yellow; position: absolute; z-index: -1; } p { width: 200px; } javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid('highlight'); highlight.style.left = `${clientrect.x}px`; highlight.style.top = `${clientrect.y}px`; highlight.style.width = `${clientrect.width}px`; highlight.style.height = `${clientrect.height}px`; result specification specification status comment css object model (cssom) view modulethe definition of 'range.getboundingclientrect()' in...

Resource Timing API - Web APIs
the resource timing interfaces enable retrieving and analyzing 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 deta...
...ils about the interfaces including examples see each interface's reference page, using the resource timing api, and the references in the see also section. for a graphical representation of the resource timing processing model see the resource timing phases figure. the performanceresourcetiming interface extends the performanceentry for performance entries which have an entrytype of "resource". ...
...ge, using the resource timing api, and the references in the see also section. for a graphical representation of the resource timing processing model see the resource timing phases figure. the performanceresourcetiming interface extends the performanceentry for performance entries which have an entrytype of "resource". high-resolution timestamps several of the resource timing properties return high-resolution timestamps. these timestamps have a domhighrestimestamp type and as its name implies, they represent a high-resolution point in time. this type is a double and its value is a discrete point in time or the difference in time between two discrete points in time. the unit of domhighrestimestamp is milliseconds and should be accurate to 5 µs (microseconds). however, if the browser is una...
...ther properties the nexthopprotocol property returns the network protocol used to fetch the resource. the initiatortype property returns the type of resource that initiated the performance entry such as "css" for a css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg). if the current context is a worker, the workerstart property can be used to obtain a domhighrestimestamp when the worker was started. methods the resource timing api includes two methods that extend the performance interface. the clearresourcetimings() method removes all "resource" type performance entries from the browser's resource performance entry buffer. the setresourcetimingbuffersize() method sets the resource performance entry buffer size to the specified number of resource per...

WebGL constants - Web APIs
width 0x0b21 passed to getparameter to get the current linewidth (set by the linewidth method). aliased_point_size_range 0x846d passed to getparameter to get the current size of a point drawn with gl.points aliased_line_width_range 0x846e passed to getparameter to get the range of available widths for a line. returns a length-2 array with the lo value at 0, and hight at 1. cull_face_mode 0x0b45 passed to getparameter to get the current value of cullface. should return front, back, or front_and_back front_face 0x0b46 passed to getparameter to determine the current value of frontface. should return cw or ccw. depth_range 0x0b70 passed to getparameter to return a length-2 array of floats giving the current depth rang...
... the depth test. can also be used with getparameter to query the depth test. dither 0x0bd0 passed to enable/disable to turn on/off dithering. can also be used with getparameter to find the current dithering method. polygon_offset_fill 0x8037 passed to enable/disable to turn on/off the polygon offset. useful for rendering hidden-line images, decals, and or solids with highlighted edges. can also be used with getparameter to query the scissor test. sample_alpha_to_coverage 0x809e passed to enable/disable to turn on/off the alpha to coverage. used in multi-sampling alpha channels. sample_coverage 0x80a0 passed to enable/disable to turn on/off the sample coverage. used in multi-sampling. scissor_test 0x0c11 passed to enable...
... to specify the front face of a polygon is drawn in the counter clockwise direction hints constants passed to webglrenderingcontext.hint() constant name value description dont_care 0x1100 there is no preference for this behavior. fastest 0x1101 the most efficient behavior should be used. nicest 0x1102 the most correct or the highest quality option should be used. generate_mipmap_hint 0x8192 hint for the quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap(). data types constant name value description byte 0x1400 unsigned_byte 0x1401 short 0x1402 unsigned_short 0x1403 ...
...3 0x8b58 bool_vec4 0x8b59 float_mat2 0x8b5a float_mat3 0x8b5b float_mat4 0x8b5c sampler_2d 0x8b5e sampler_cube 0x8b60 shader precision-specified types constant name value description low_float 0x8df0 medium_float 0x8df1 high_float 0x8df2 low_int 0x8df3 medium_int 0x8df4 high_int 0x8df5 framebuffers and renderbuffers constant name value description framebuffer 0x8d40 renderbuffer 0x8d41 rgba4 0x8056 rgb5_a1 0x8057 rgb565 0x8d62 depth_compone...

WritableStream.WritableStream() - Web APIs
ose(), but abort() will be called even if writes are queued up — those chunks will be thrown away. if this process is asynchronous, it can return a promise to signal success or failure. the reason parameter contains a domstring describing why the stream was aborted. queuingstrategy optional an object that optionally defines a queuing strategy for the stream. this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before backpressure is applied. size(chunk) a method containing a parameter chunk — this indicates the size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrat...
...efore backpressure is applied. size(chunk) a method containing a parameter chunk — this indicates the size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. if no queuingstrategy is supplied, the default used is the same as a countqueuingstrategy with a high water mark of 1. return value an instance of the writablestream object. examples the following example illustrates several features of this interface. it shows the creation of the writablestream with a custom sink and an api-supplied queuing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's ...
.../ call ready again to ensure that all chunks are written // before closing the writer. ...
...appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example. backpressure because of how backpressure is supported in the api, its implementation in code may be less than obvious. to see how backpressure is implemented look for three things. the highwatermark property, which is set when creating the counting strategy (line 35), sets the maximum amount of data that the writablestream instance will handle in a single write() operation. in this example, it's the maximum amount of data that can be sent to defaultwriter.write() (line 11). the defaultwriter.ready property returns a promise that resolves when the sink (the first property of the wri...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
those that are common to most or all input types are defined in greater detail below. attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages. this element includes the global attributes. those with extra importance as it relates to <input> are highlighted. attributes for the <input> element include global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type. required for accessibility autocomplete all hint for form autofill feature autofocus all automa...
... dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 pm to 4 am. maxlength valid for text, search, url, tel, email, and password, it defines the maximum number of characters (as utf-16 code units) the user can enter into the field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-16 code units long. by default, browsers prevent users from entering more characters than allowed by th...
...are valid. several errors could occur, including a rangeunderflow error if the value is less than 2, rangeoverflow if greater than 10, stepmismatch if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the step attribute), or typemismatch if the value is not a number. for the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the max and min properties to be reversed, which indicates that the range of permitted values starts at min, wraps around to the lowest possible value, then continues on until max is reached. this is particularly useful for dates and times, such as when you want to allow the range ...
... true, valid will be true, and the form can be submitted. function validate(input) { let validitystate_object = input.validity; if(validitystate_object.valuemissing) { input.setcustomvalidity('a value is required'); } else if (input.rangeunderflow) { input.setcustomvalidity('your value is too low'); } else if (input.rangeoverflow) { input.setcustomvalidity('your value is too high'); } else { input.setcustomvalidity(''); } } the last line, setting the custom validity message to the error string is vital. if the user makes an error, and the validity is set, it will fail to submit, even if all of the values are valid, until the message is null. example if you want to present a custom error message when a field fails to validate, you need to use the constraint vali...

<link>: The External Resource Link element - HTML: Hypertext Markup Language
ute indicates the language of the linked resource. it is purely advisory. allowed values are determined by bcp47. use this attribute only if the href attribute is present. importance indicates the relative importance of the resource. priority hints are delegated using the values: auto: indicates no preference. the browser may use its own heuristics to decide the priority of the resource. high: indicates to the browser that the resource is of high priority. low: indicates to the browser that the resource is of low priority. note: the importance attribute may only be used for the <link> element if rel="preload" or rel="prefetch" is present. integrity contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you’re telling the browser to fetc...
...le"> <link href="fancy.css" rel="alternate stylesheet" title="fancy"> <link href="basic.css" rel="alternate stylesheet" title="basic"> providing icons for different usage contexts you can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as hints. ...
...> providing icons for different usage contexts you can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as hints. ...
...ditionally loading resources with media queries you can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. ...

<mark>: The Mark Text element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
...ludes the global attributes. usage notes typical use cases for <mark> include: when used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance. ...
... don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance. ...
...d by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } mark::before { content: " [highlight start] "; } mark::after { content: " [highlight end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understanding. short note on making your mark (more accessib...

<meter>: The HTML Meter element - HTML: Hypertext Markup Language
ax attribute), if specified. if unspecified, the minimum value is 0. max the upper numeric bound of the measured range. this must be greater than the minimum value (min attribute), if specified. if unspecified, the maximum value is 1. low the upper numeric bound of the low end of the measured range. this must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified. if unspecified, or if less than the minimum value, the low value is equal to the minimum value. high the lower numeric bound of the high end of the measured range. this must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute...
... if less than the minimum value, the low value is equal to the minimum value. high the lower numeric bound of the high end of the measured range. this must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified. if unspecified, or if greater than the maximum value, the high value is equal to the maximum value. optimum this attribute indicates the optimal numeric value. it must be within the range (as defined by the min attribute and max attribute). when used with the low attribute and high attribute, it gives an indication where along the range is considered preferable. for example, if it is between the min attribute and the low attribute, then the lower range is ...
...ith its ancestor <form> element, if any. this attribute is only used if the <meter> element is being used as a form-associated element, such as one displaying a range corresponding to an <input type="number">. ...
...range corresponding to an <input type="number">. examples simple example html <p>heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p> result on google chrome, the resulting meter looks like this: high and low range example note that in this example the min attribute is omitted. this is allowed, as it will default to 0. html <p>he got a <meter low="69" high="80" max="100" value="84">b</meter> on the exam.</p> result on google chrome, the resulting meter looks like this: specifications specification status comment html living standardthe definition of '<meter>' in that specification. living standard html5the definition of '<meter>' in that specification. recommendation initial definition ...

Inline elements - HTML: Hypertext Markup Language
instead of breaking the flow of the content. in this article, we'll examine html inline-level elements and how they differ from block-level elements. an inline element does not start on a new line and only takes up as much width as necessary. inline vs. block-level elements: a demonstration this is most easily demonstrated with a simple example. first, some simple css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text. within that text is a <sp...
.../div> in this example, the <div> block-level element contains some text. within that text is a <span> element, which is an inline element. ...
...the <p> e...
... now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } rendered using the same css as before, we get: see the difference? the <p> element totally changes the layout of the text, splitting it into three segments: the text before the <p>, then the <p>'s text, and finally the text following the <p>. changing element levels you can change the visual presentation of an element using the css display property. for ex...

A re-introduction to JavaScript (JS tutorial) - JavaScript
it's useful to start with an overview of the language's history. ...
...bracket notation upon being created. {[phonetype]: 12345} is possible instead of just var userphone = {}; userphone[phonetype] = 12345. arrays arrays in javascript are actually a special type of object. they work very much like regular objects (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called 'length'. this is always one more than the highest index in the array. one way of creating arrays is as follows: var a = new array(); a[0] = 'dog'; a[1] = 'cat'; a[2] = 'hen'; a.length; // 3 a more convenient notation is to use an array literal: var a = ['dog', 'cat', 'hen']; a.length; // 3 note that array.length isn't necessarily the number of items in the array. consider the following: var a = ['dog', 'cat', 'hen']; a[100] = 'fox'; a...
...new array(); a[0] = 'dog'; a[1] = 'cat'; a[2] = 'hen'; a.length; // 3 a more convenient notation is to use an array literal: var a = ['dog', 'cat', 'hen']; a.length; // 3 note that array.length isn't necessarily the number of items in the array. consider the following: var a = ['dog', 'cat', 'hen']; a[100] = 'fox'; a.length; // 101 remember — the length of the array is one more than the highest index. if you query a non-existent array index, you'll get a value of undefined in return: typeof a[90]; // undefined if you take the above about [] and length into account, you can iterate over an array using the following for loop: for (var i = 0; i < a.length; i++) { // do something with a[i] } es2015 introduced the more concise for...of loop for iterable objects such as arrays: f...
... javascript allows you to call functions recursively. this is particularly useful for dealing with tree structures, such as those found in the browser dom. function countchars(elm) { if (elm.nodetype == 3) { // text_node return elm.nodevalue.length; } var count = 0; for (var i = 0, child; child = elm.childnodes[i]; i++) { count += countchars(child); } return count; } this highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? javascript lets you name function expressions for this. you can use named iifes (immediately invoked function expressions) as shown below: var charsinbody = (function counter(elm) { if (elm.nodetype == 3) { // text_node return elm.nodevalue.length; } var count = 0; for (var...

String.prototype.charAt() - JavaScript
apt this line at the top of each loop, passing in the whole string and // the current iteration and returning a variable to represent the // individual character console.log(chr); } function getwholechar(str, i) { var code = str.charcodeat(i); if (number.isnan(code)) { return ''; // position not found } if (code < 0xd800 || code > 0xdfff) { return str.charat(i); } // high surrogate (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd800 <= code && code <= 0xdbff) { if (str.length <= (i + 1)) { throw 'high surrogate without following low surrogate'; } var next = str.charcodeat(i + 1); if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate'; }...
... (i + 1)) { throw 'high surrogate without following low surrogate'; } var next = str.charcodeat(i + 1); if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate'; } return str.charat(i) + str.charat(i + 1); } // low surrogate (0xdc00 <= code && code <= 0xdfff) if (i === 0) { throw 'low surrogate without preceding high surrogate'; } var prev = str.charcodeat(i - 1); // (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd800 > prev || prev > 0xdbff) { throw 'low surrogate without preceding high surrogate'; } // we can pass over low surrogates now as the second component // in a pair which we have already processed return false; } in an ecmasc...
...iteration and returning an array with the individual character // and 'i' value (only changed if a surrogate pair) console.log(chr) } function getwholecharandi(str, i) { let code = str.charcodeat(i) if (number.isnan(code)) { return '' // position not found } if (code < 0xd800 || code > 0xdfff) { return [str.charat(i), i] // normal character, keeping 'i' the same } // high surrogate (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd800 <= code && code <= 0xdbff) { if (str.length <= (i + 1)) { throw 'high surrogate without following low surrogate' } let next = str.charcodeat(i + 1) if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate' } ...
...1)) { throw 'high surrogate without following low surrogate' } let next = str.charcodeat(i + 1) if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate' } return [str.charat(i) + str.charat(i + 1), i + 1] } // low surrogate (0xdc00 <= code && code <= 0xdfff) if (i === 0) { throw 'low surrogate without preceding high surrogate' } let prev = str.charcodeat(i - 1) // (could change last hex to 0xdb7f to treat high private surrogates // as single characters) if (0xd800 > prev || prev > 0xdbff) { throw 'low surrogate without preceding high surrogate' } // return the next character instead (and increment) return [str.charat(i + 1), i + 1] } fixing charat() to support non-basic-multilingual-...

encodeURI() - JavaScript
// -_.!~*'() console.log(encodeuricomponent(set3)); // abc%20abc%20123 (the space gets encoded as %20) note that encodeuri() by itself cannot form proper http get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests. encodeuricomponent(), however, does encode these characters. ...
...that encodeuri() by itself cannot form proper http get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests. encodeuricomponent(), however, does encode these characters. ...
...f cannot form proper http get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests. encodeuricomponent(), however, does encode these characters. ...
...tprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests. encodeuricomponent(), however, does encode these characters. ...

Operator precedence - JavaScript
operator precedence determines how operators are parsed concerning each other. operators with higher precedence become the operands of operators with lower precedence. 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. precedence and associativity consider an expression describable by the representation below. note that both op1 and op2 are fill-in-the-blanks for operators. ...
...ntribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. precedence and associativity consider an expression describable by the representation below. note that both op1 and op2 are fill-in-the-blanks for operators. a op1 b op2 c if op1 and op2 have different precedence levels (see the table below), the operator with the highest precedence goes first and associativity does not matter. observe how multiplication has higher precedence than addition and executed first, even though addition is written first in the code. console.log(3 + 10 * 2); // logs 23 console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous console.log((3 + 10) * 2); // logs 26 because the parentheses change the order left-a...
...ges the order and results in the 64 seen in the table above. remember that precedence comes before associativity. so, mixing division and exponentiation, the exponentiation comes before the division. for example, 2 ** 3 / 3 ** 2 results in 0.8888888888888888 because it is the same as (2 ** 3) / (3 ** 2). note on grouping and short-circuiting in the table below, grouping is listed as having the highest precedence. however, that does not always mean the expression within the grouping symbols ( … ) is evaluated first, especially when it comes to short-circuiting. short-circuiting is jargon for conditional evaluation. for example, in the expression a && (b + c), if a is falsy, then the sub-expression (b + c) will not even get evaluated, even if it is in parentheses. we could say that the log...
...ed` a?.b.c; // evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined` examples 3 > 2 && 2 > 1 // returns true 3 > 2 > 1 // returns false because 3 > 2 is true, then true is converted to 1 // in inequality operators, therefore true > 1 becomes 1 > 1, which // is false. adding parentheses makes things clear: (3 > 2) > 1. table the following table is ordered from highest (21) to lowest (1) precedence. precedence operator type associativity individual operators 21 grouping n/a ( … ) 20 member access left-to-right … . … computed member access left-to-right … [ … ] new (with argument list) n/a new … ( … ) function call left-to-right … ( … ) ...

Animation performance and frame rate - Web Performance
occur. users expect all interface interactions to be smooth and all user interfaces to be responsive. animation can help make a site feel faster and responsive, but animations can also make a site feel slower and janky if not done correctly. responsive user interfaces have a frame rate of 60 frames per second (fps). while it is not always possible to maintain 60fps, it is important to maintain a high and steady frame rate for all animations. let's take a look at how we can use browser tools to inspect the frame rate. we'll also discuss some tips to create and maintain a fast and steady frame rate. the developer tool's frame rate and waterfall charts provide insight into the work the browser is performing to animate code. using these tools you can measure an application's animation frame rate...
...perties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine. an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform. the intention of this scenario isn't to convince you that animating using margin is always a bad idea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play alon...
...d in user interaction. waterfall the rest of the recording shows the waterfall view. if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall. in each animation frame, we recalculate styles for every element, then perform a single layout, then a repaint. you can see that paint especially is hurting performance here. in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints ent...
...rding. it will look something like this: waterfall overview compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation. frame rate compared with the version that uses margin, this is looking pretty good. we're averaging nearly 60fps, and apart from one dip near the start, we're getting a consistently high frame rate. waterfall the timeline view shows the reason for the improved frame rate. compared with the version that uses margin, we're not spending any time time in layout or (more importantly in this case) in paint: in this case, using transform significantly improved the site's performance, and the performance tools were able to show how and why it did. ...

Web Performance
vest in performance and make it a priority. in this article, we'll discuss creating a clear business case to convince decision-makers to make the investment.understanding latencylatency is the time it takes for a packet of data to travel from source to a destination. in terms of performance optimization, it's important to optimize to reduce causes of lacency and to test site performance emulating high latency to optimizer for users with lousy connections. this article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.using dns-prefetchdns-prefetch is an attempt to resolve domain names before resources get requested. this could be a file loaded later or link target a user tries to follow. beginner's tutorials the mdn web performance lear...
...r, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu and battery life, it is important to consider the performance of your web content on these platforms. this article looks at mobile-specific performance considerations. using performance apis performance api this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. resource timing api resource loading and timing the loading of those resources, including managing the resource buffer and coping with cors the performance timeline the performance timeline standard defines extensions to the performance interface to support client-side latency measurements within applications. together, these interfaces can be used to help identify a...
...performance documents yet to be written javascript performance best practices javascript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. this article outlines some javascript best practices that can ensure even complex content's performance is the highest possible. mobile performance with web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu, and battery life, it is important to consider the performance of your web content on these platforms. this article also looks at mobile-specific performance considerations. web font performance an often overlooked ...
... on performance, memory, and network requests. knowing how to read waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance tools. alternative media formats when it comes to images and videos, there are more formats than you're likely aware of. some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. in this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them. analyzing javascript bundles no doubt, javascript is a big part of modern web devel...

Graphic design for responsive sites - Progressive web apps (PWAs)
in 1996, many people involved in building the web would have laughed at you if you had told them that less than 20 years in the future we would be developing web sites that worked well on mobile phones, tablets, tvs, even cars and home lighting. but today it is very much a reality. this article provides a high level discussion aimed at helping you to choose the best option for your graphical needs. textual content is not a problem, as text boxes are innately responsive, but the picture starts to get ugly when you start including graphics and complex layouts on your pages — especially when those graphics and layouts need to adapt to different displays! this is why we have included an entire docs section covering each of these topics (the one you are currently in, and app layout.) ...
...epending on context. there are a number of workarounds, but none of them are perfect right now. for an overview of what's available, read choosing a responsive image solution. coping with different resolutions in this section we'll review different strategies for dealing with getting images to work across devices with different resolutions. ...
...ter images, when rendered on high res devices, are in danger of appearing tiny because the same number of pixels is being shown in a much smaller screen space. most hi res devices apply a default zoom factor to the whole web page so that the content is a bit more legible, but the downside of this is that the images in question start to look pixellated and ugly because they have been zoomed in. high res and low res image copies one option here is to create a hi res and a low res set of images, then use resolution media queries to serve the hi res images only to hi res devices. programmatic images you should also try to use programmatic/vector graphics as much as possible, as they theoretically scale infinitely so will still look crisp at high resolutions. you could use css3 properties for...
...olutions. you could use css3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using svg for other ui elements, instead of raster graphics formats. the downsides here are that css3 properties and svg don't work on old browsers such as ie6-8 (although polyfills are available, and you could build in fallbacks), and svg isn't suitable for high detail images, such as photographs. using fonts for icons another technique to consider is using web fonts for icons. text is infinitely scalable on the web, and you can also use css text properties to style your web font icons, such as text-shadow and color. making your own font file can be a bit fiddly, but there are a number of good icon font services available such as font awesome. intera...

stroke-linecap - SVG: Scalable Vector Graphics
on a zero length subpath, the path ...
...not be rendered at all. ...
...he subpath's point. ...
...ubpath's point. example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "square" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="square" /> <!-- effect of the "square" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the da...

Module structure of the SDK - Archive of obsolete content
part of a commonjs module, including: sdk modules: the javascript modules which the sdk provides, such as panel and page-mod. local modules: each of the javascript files under your add-on's "lib" directory. external modules: reusable modules developed and maintained outside the sdk, but usable by sdk-based add-ons. ...
...ed into two sorts: high-level modules like panel and page-mod provide relatively simple, stable apis for the most common add-on development tasks. low-level modules like heritage and namespace provide more powerful functionality, and are typically less stable and more complex. to use sdk modules, you can pass require() a complete path, starting with "sdk", to the module you want to use. ...
...evelopment tasks. low-level modules like heritage and namespace provide more powerful functionality, and are typically less stable and more complex. to use sdk modules, you can pass require() a complete path, starting with "sdk", to the module you want to use. for high-level modules this is just sdk/<module_name>, and for low-level modules it is sdk/<path_to_module>/<module_name>: // load the high-level "tabs" module var tabs = require("sdk/tabs"); // load the low-level "uuid" module var uuid = require('sdk/util/uuid'); the path to specify for a low-level module is given along with the module name itself in the title of the module's documentation page (for example, system/environment). although the sdk repository in github includes copies of these modules, they are built into firefox a...

SDK and XUL Comparison - Archive of obsolete content
we've designed the apis to be forward-compatible with the new multiple process architecture (codenamed electrolysis) planned for firefox. ...
... we've designed the apis to be forward-compatible with the new multiple process architecture (codenamed electrolysis) planned for firefox. ...
...r. using only the sdk's supported apis you have much more limited options for your ui. xpcom traditional add-ons have access to a vast amount of firefox functionality via xpcom. the sdk's supported apis expose a relatively small set of this functionality. low-level apis and third-party modules that's not the whole story. if you need more flexibility than the sdk's high-level apis provide, you can use its low-level apis to load xpcom objects directly or to manipulate the dom directly as in a traditional bootstrapped extension. alternatively, you can load third-party modules, which extend the sdk's core apis. note that by doing this you lose some of the benefits of programming with the sdk including simplicity, compatibility, and to a lesser extent security. ...

page-mod - Archive of obsolete content
might want to run a script in the context of the currently active tab when the user clicks a button: to block certain content, to change the font style, or to display the document's dom structure. using the attach method of the tab object, you can attach a set of content scripts to a particular tab. the scripts are executed immediately. ...
...hange the font style, or to display the document's dom structure. using the attach method of the tab object, you can attach a set of content scripts to a particular tab. the scripts are executed immediately. ...
... display the document's dom structure. using the attach method of the tab object, you can attach a set of content scripts to a particular tab. the scripts are executed immediately. ...

Handling Preferences - Archive of obsolete content
preferences are used to store settings and information to change their default behavior. to open the preferences window in firefox, select the following from the main menu: on windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different platforms. if you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system. tip: you can use window.navigator.platform in your chrome code to figure out the operating system firefox is running on. ...
...e settings: these preferences are stored in a file that usually has the name mozilla.cfg or netscape.cfg. the file may be located on a network. it is intended to be used by an administrator or isp to set settings centrally. in addition, certain preferences may be locked such that users cannot change them. locked preferences are disabled in the preferences window. firefox exposes its most common high-level preferences through the preferences window and other parts of its ui. in reality there are thousands of other preferences firefox handles that are not readily available to the user. these are hidden because they are too advanced or obscure for regular users to manage, and because the preferences window should be as easy to use as possible. to access all other preferences, enter "about:confi...
...ly or break altogether. you can type on the "filter" textbox to search for specific preferences. if you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. right-clicking on the list reveals several options that allow you to modify preference values and add new ones. preferences with non-default values are highlighted in bold. all changes done in about:config are saved to the prefs.js file. the list in about:config is not complete. some firefox preferences have no default value, so they are left out unless you add them manually. an extensive specification of firefox preferences can be seen in this page. you don't need to know them by heart; if doing task x requires some preference, then it's better to ...

JXON - Archive of obsolete content
on () { return null; }; function objectify (vval) { return vval === null ? new emptytree() : vval instanceof object ? vval : new vval.constructor(vval); } function createobjtree (oparentnode, nverb, bfreeze, bnesteattr) { const nlevelstart = acache.length, bchildren = oparentnode.haschildnodes(), battributes = oparentnode.hasattributes && oparentnode.hasattributes(), bhighverb = boolean(nverb & 2); var sprop, vcontent, nlength = 0, scollectedtxt = "", vresult = bhighverb ? {} : /* put here the default value for empty nodes: */ true; if (bchildren) { for (var onode, nitem = 0; nitem < oparentnode.childnodes.length; nitem++) { onode = oparentnode.childnodes.item(nitem); if (onode.nodetype === 4) { scollectedtxt += onode.nod...
...objectify(vbuiltval) : {}; } for (var nelid = nlevelstart; nelid < nlevelend; nelid++) { sprop = acache[nelid].nodename.tolowercase(); vcontent = createobjtree(acache[nelid], nverb, bfreeze, bnesteattr); if (vresult.hasownproperty(sprop)) { if (vresult[sprop].constructor !== array) { vresult[sprop] = [vres...
...rparent[saprefix + oattrib.name.tolowercase()] = parsetext(oattrib.value.trim()); } if (bnesteattr) { if (bfreeze) { object.freeze(oattrparent); } vresult[sattrprop] = oattrparent; nlength -= nattrlen - 1; } } if (nverb === 3 || (nverb === 2 || nverb === 1 && nlength > 0) && scollectedtxt) { vresult[svalprop] = vbuiltval; } else if (!bhighverb && nlength === 0 && scollectedtxt) { vresult = vbuiltval; } if (bfreeze && (bhighverb || nlength > 0)) { object.freeze(vresult); } acache.length = nlevelstart; return vresult; } function loadobjtree (oxmldoc, oparentel, oparentobj) { var vvalue, ochild; if (oparentobj.constructor === string || oparentobj.constructor === number || oparentobj.constructor...

Localizing an extension - Archive of obsolete content
he strings into a string bundle. string bundles are created by establishing a property file that maps keys to string values. for a detailed explanation of how this works, see xul tutorial:property files. create a properties file the first thing we do is create a property file for the literal strings used by the javascript code in stockwatcher2.js: changestring=chg: openstring=open: lowstring=low: highstring=high: volumestring=vol: the stockwatcher2.properties file shown above maps five keys (changestring, openstring, lowstring, highstring, and volumestring) to the corresponding text in english. create the string bundle the next step is to modify the stockwatcher2.xul file to reference this property file. we do this by creating a string bundle, using the following code: <stringbundleset id="s...
...inforeceived() function to use the loaded, localized, strings instead of string literals. we add to refreshinformation() the following code: var stringsbundle = document.getelementbyid("string-bundle"); var changestring = stringsbundle.getstring('changestring') + " "; var openstring = stringsbundle.getstring('openstring') + " "; var lowstring = stringsbundle.getstring('lowstring') + " "; var highstring = stringsbundle.getstring('highstring') + " "; var volumestring = stringsbundle.getstring('volumestring') + " "; this code gets a reference to the string bundle element we added to stockwatcher2.xul by calling document.getelementbyid(), specifying the id "string-bundle". then it fetches all the strings we need from the bundle, one by one, by calling the string bundle's getstring() method,...
... in this case, we're also appending a space to the end of each string. that's just how this particular program works, and isn't something that you have to do. then we replace any occurrences of the literal strings with the appropriate variables: samplepanel.tooltiptext = changestring + fieldarray[4] + " | " + openstring + fieldarray[5] + " | " + lowstring + fieldarray[6] + " | " + highstring + fieldarray[7] + " | " + volumestring + fieldarray[8]; localizing the description in install.rdf see localizing extension descriptions. adding more localizations to add another localization for a new language, all you need to do is add another line to the chrome manifest referencing the new locale. for example, to add a spanish localization, you would add: locale stockwatcher2 es-es...

Source code directories overview - Archive of obsolete content
or the auto-completion feature on the url edit box (stored in netscape.hst in mozilla classic) and for the cached pages index (stored in fat.db in mozilla classic). this code originated at uc berkeley. directory contains the ldap sdk. docshell contains c interfaces and code for loading and displaying a single web page (e.g. scroll). the [#seamonkey-embedding embedding] code wraps this code with higher level browser functions like forward, back and history. dom contains c interfaces and code for implementing and tracking dom (document object model) objects in javascript. it forms the c substructure which creates, destroys and manipulates built-in and user-defined objects according to the javascript script. for example, if the javascript script adds a user-defined attribute to the document (e...
...omponent which can edit both plain text and html. it is used for the html editor (i.e. composer in mozilla classic), for plain text and html mail composition and for text fields and text areas throughout the product. the editor is designed like a "browser window with editing features" with extra classes for editing text and managing undo/redo. embedding contains c interfaces and code for generic high-level browser functions (e.g. forward, back, history). the [#seamonkey-webshell webshell] code wraps these interfaces according to the particular platform and way (e.g. activex) that is being supported. extensions contains c interfaces, c code, xul and javascript code for various add-ins that are related to browsing. these include: cookies, irc, wallet, dom inspector, p3p, schema validation, spe...
...ng, .gif), allowing drop-in java virtual machines (called oji, for "open java interface"), supporting plug-ins and reading various compression formats (e.g. jar, zip, zlib). this code originated from mozilla as well as various different companies and individual people. netwerk contains c interfaces and code for low-level access to the network (using sockets and file and memory caches) as well as higher-level access (using various protocols such as http, ftp, gopher, castanet). this code is also known by the names, "netlib" and "necko." nsprpub contains c code for the cross platform "c" runtime library. the "c" runtime library contains basic non-visual c functions to allocate and deallocate memory, get the time and date, read and write files, handle threads and handling and compare strings ac...

Bookmark Keywords - Archive of obsolete content
kmark..." menu option. to open the bookmark manager go to "bookmarks" menu and select the "manage bookmarks" option. this will open up the bookmark manager. in figure 2, we can see the bookmark has been filed into a folder called "widgets." you can create a folder with another name, or not put your keymarks into a folder at all. changing the properties to alter the properties of the bookmark, highlight the bookmark and select the "properties..." button at the top of the bookmark manager. this will open up a dialog box that will let you edit the properties of the bookmark. the original title of the bookmark won't apply. you can name the bookmark whatever you want, but it's often handy to make the title very similar to the keyword you plan to use. that way, if you ever forget the keyword you...
..." or anything besides "av." (see bugzilla entry 119201 for details.) since this bookmark is intended to look up bugzilla entries, we'll call it "bz," as shown in figure 3. here's where the power starts to show up. switch to the "location:" field and go all the way to the end. replace the bug's number (82839) with the string %s. you should end up with the result shown in figure 4, without the red highlighting. the %s is a little flag that means "insert user input here." it doesn't have to go at the end of the location field-- it can be anywhere inside the field. you just need to fill in whatever piece of a url it is you want to be able to "fill in" when you use the keymark. all we need now is a keyword, and our keymark will be ready to go. fill in the value bz, as shown in figure 5. with tha...
...wser will jump right to the bug with that number. this is illustrated in figure 6. that's all it takes! setting up a google keymark to set up a keymark that will search google directly form the address bar, go to google and run a search for any word. once you get a result page, bookmark that page. you'll need to replace the word for which you searched. one such example, with the relevant term highlighted, is shown in figure 7. once this result page has been bookmarked, we need only adjust the boookmark's properties. in this case, we'll give it a keyword and title of google and replace the term "geitost" with the %s, as shown (with extra highlighting) in figure 8. now we can run google searches straight from the address bar. these searches can be as complex as google will tolerate, since ...

LIR - Archive of obsolete content
ing serious with it. ...
... its operand is always a lir_calli, but one that specifies a function that returns a double. it indicates that the double result is returned via two 32-bit integer re...
... its operand is always a lir_calli, but one that specifies a function that returns a double. it indicates that the double result is returned via two 32-bit integer registers. the result is always used as the second operand of a lir_ii2d. ...

Learn XPI Installer Scripting by Example - Archive of obsolete content
atform that mozilla supports. about browser.xpi browser.xpi is the xpi archive in which the main components of the mozilla browser are archived for installation. mozilla cross-platform installations use the xpi format as a way to organize, compress, and automate software installations and software updates. ...
...and automate software installations and software updates. a xpi is a pkzip-compressed archive (like zip and jar files) with a special script at the highest level that manages the installation. that installer script , usually named install.js, is the subject of this article. ...
...ecial script at the highest level that manages the installation. that installer script , usually named install.js, is the subject of this article. ...

XUL Events - Archive of obsolete content
to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
...mmandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. this event would be used to update the disabled status of its commands.dommenuitemactivethe dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.dommenuiteminactivethe dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.popupshowingthe popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible. the default action of the event can be prevented to prevent the ...
...ze. this applies to boxes and other layout elements with a css overflow property other than 'visible'. the underflow event can be used to indicate that a scrolling mechanism is no longer necessary. attribute: onunderflow dommenuitemactive this event is sent when a menu or menuitem is hovered over, or highlighted. this event bubbles. dommenuiteminactive this event is sent when a menu or menuitem is no longer being hovered over, or highlighted. this event bubbles. window events the following events are dispatched to top-level dom windows and can be listened to u...

findbar - Archive of obsolete content
the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser element by either setting the findbar's browserid attribute to the id of the browser element before the findbar element is bound, or by setting the findbar's browser property to the browser element itself. attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached. ...
...t to which the findbar is attached. this attribute is only used when the findbar is constructed. you should use the browser property to get and set this value from a script. findnextaccesskey type: string the access key for the "find next" toolbar button in the findbar. findpreviousaccesskey type: string the access key for the "find previous" toolbar button in the findbar. highlightaccesskey type: string the access key for the "highlight" toolbar button in the findbar. matchcaseaccesskey type: string the access key for the "match case" checkbox in the findbar. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , ,...
..., 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. togglehighlight( highlight ) return type: no return value turns highlighting of text matching the search term on and off; specify false to disable highlighting or true to enable it. ...

appendNotification - Archive of obsolete content
label - label to appear on the notification. this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. ...
...notification priority; see priority levels. buttons - array of button descriptions to appear on the notification. eventcallback optional - a javascript function to call to notify you of interesting things that happen with the notification box. see notification box events. priority levels (defined as properties of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medium priority_critical_high priority_critical_block buttons : the buttons argument is an array of button descriptions. each description is an object with the following properties: accesskey - the accesskey to appear on the button callback - function to be called when th...
..."menu-button" or "menu". ...

Menus - Archive of obsolete content
menu a label of a menu on a menubar, for instance 'file' or 'tools'. a menu can also be used as the label of a submenu. menupopup a popup containing items to appear on a menu. the menupopup in the example above is a child of the 'file' menu and will appear when the menu label is clicked. menuitem a single item to appear on a menu. when the user moves the mouse over a menuitem, it will highlight the item. the cursor keys can also be used to adjust which menuitem is the current item. a menuitem is associated with a command to carry out. menuseparator a separator between items in a menu. in the example above, the 'file' menu has four menuitems and one menuseparator on it. the menu and each menuitem has a label indicating its purpose. other types of tags should not appear on a ...
...example below, the menu has the label 'view'. <menu label="view"> <menupopup> <menuitem label="toolbar"/> <menuitem label="status bar"/> </menupopup> </menu> when the menu is clicked, it opens the menupopup contained within it. for this reason, a menupopup should be placed as a direct child of the menu. the menu can also be opened by using the keyboard. the user can press a key to highlight the menu labels and navigate with the cursor keys. the key is different for each platform; on windows f10 can be used. another way is to add shortcut keys called access keys for each menu element to make it easier to access the menu commands. on some platforms, adding an access key will underline a letter in the menu label indicating the key to press. for this reason, the access key should a...
...window: function initmenus() { var item = document.getelementbyid("menu-file-open"); item.hidden = true; } the hidden property is set to true to hide the menu with the id 'menu-fileopen'. this function may be called from within an onload attribute on the window. accessing and setting the active item in a menu, there will usually be an item that is considered "active". this item will be highlighted, and will do certain functions depending on the kind of item it is, and the way in which it has been activated, whether via the keyboard or mouse. for example, if it is a menu element and has been activated via a mouseover, then the menu will open. if it has been activated via navigation with the up or down arrow on the keyboard, then pressing the return key or right arrow key will open ...

PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu. this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary. ...
...if a menuitem is selected, this will close the menu and fire the menuitem's command event. if a menu is selected, the menu will open. escape closes the menu. if a chain of submenus is open, only one level of menus is closed. ...
...if a menuitem is selected, this will close the menu and fire the menuitem's command event. ...

XUL Event Propagation - Archive of obsolete content
heard". the availability of event listeners is also somewhat pre-determined, though xul provide generalized event listeners (i.e., oncommand event listeners) for most of the elements in the widget hierarchy. event handlers are written by you, the developer of the interface. ...
... the combination of basic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. ...
...y as many as four different alert dialogs as the event bubbles up the hierarchy. for example, when you click the new menuitem from the file menu, the event handlers display alerts for "new item alert", "menu handler", "box handler", and "window handler." any or all of these event handler locations might be useful in your interface development. (see it happen.) for an event to be useful somewhere higher up, however, it is very often necessary to determine which element below the handler actually raised the event. for example, if an event handler at the menu is handling an event raised by one of the menu items, then the menu should be able to identify the raising element and take the appropriate action, as in the following example, where a javascript function determines which menuitem was selec...

tree - Archive of obsolete content
one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbox, this is new in firefox 3.5. statedatasource type: uri chrome xul may specify an rdf datasource to use to store tree state information. this is used to hold which tree items are open and which items are collapsed. this information will be remembered for the next time the xul file is opened. if you do not specify ...
...ems are open and which items are collapsed. this information will be remembered for the next time the xul file is opened. if you do not specify this attribute, state information will be stored in the local store (rdf:local-store). tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. treelines type: boolean when set to true, lines are drawn connecting the lines in the tree; when false, the lines are not drawn. this is false by default. properties accessibletype type: integer a value indicating the type of accessibility object for the element. builderview type: nsixultreebuilder a reference to t...
...the first treecol element, which or may not be the first column displayed in the tree. inputfield type: textbox element read-only property that holds the textbox that is used for editing. seltype type: string gets and sets the value of the seltype attribute. selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected. otherwise, the entire row will be highlighted. to see the difference, compare the selection style in the folder list and the message list in mozilla mail. tabindex type: integer gets and sets the value of the tabindex attribute. treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the...

Introduction to Public-Key Cryptography - Archive of obsolete content
odel, the root ca is at the top of the hierarchy. the root ca's certificate is a self-signed certificate: that is, the certificate is digitally signed by the same entity-the root ca-that the certificate identifies. the cas that are directly subordinate to the root ca have ca certificates signed by the root ca. cas under the subordinate cas in the hierarchy have their ca certificates signed by the higher-level subordinate cas. organizations have a great deal of flexibility in terms of the way they set up their ca hierarchies. figure 6 shows just one example; many other arrangements are possible. certificate chains ca hierarchies are reflected in certificate chains. a certificate chain is series of certificates issued by successive cas. figure 7 shows a certificate chain leading from a certif...
...tures or make other sensitive decisions, the issuing process may require notarized documents, a background check, and a personal interview. depending on an organization's policies, the process of issuing certificates can range from being completely transparent for the user to requiring significant user participation and complex procedures. in general, processes for issuing certificates should be highly flexible, so organizations can tailor them to their changing needs. issuing certificates is one of several managements tasks that can be handled by separate registration authorities. certificates and the ldap directory the lightweight directory access protocol (ldap) for accessing directory services supports great flexibility in the management of certificates within an organization. system a...
... management and renewing and revoking certificates, can be partially or fully automated with the aid of the directory. information stored in the directory can also be used with certificates to control access to various network resources by different users or groups. issuing certificates and other certificate management tasks can thus be an integral part of user and group management. in general, high-performance directory services are an essential ingredient of any enterprise certificate management strategy. key management before a certificate can be issued, the public key it contains and the corresponding private key must be generated. sometimes it may be useful to issue a single person one certificate and key pair for signing operations, and another certificate and key pair for encryption...

Introduction to SSL - Archive of obsolete content
t and routing of data over the internet. other protocols, such as the hypertext transport protocol (http), lightweight directory access protocol (ldap), or internet messaging access protocol (imap), run "on top of" tcp/ip in the sense that they all use tcp/ip to support typical application tasks such as displaying web pages or running email servers. the ssl protocol runs above tcp/ip and below higher-level protocols such as http or imap. it uses tcp/ip on behalf of the higher-level protocols, and in the process allows an ssl-enabled server to authenticate itself to an ssl-enabled client, allows the client to authenticate itself to the server, and allows both machines to establish an encrypted connection. these capabilities address fundamental concerns about communication over the internet ...
...n the server's list of trusted cas. this confirmation might be important if the server, for example, is a bank sending confidential financial information to a customer and wants to check the recipient's identity. an encrypted ssl connection requires all information sent between a client and a server to be encrypted by the sending software and decrypted by the receiving software, thus providing a high degree of confidentiality. confidentiality is important for both parties to any private transaction. in addition, all data sent over an encrypted ssl connection is protected with a mechanism for detecting tampering-that is, for automatically determining whether the data has been altered in transit. the ssl protocol includes two sub-protocols: the ssl record protocol and the ssl handshake protoc...
....0. cipher suites are listed from strongest to weakest. table 1. cipher suites supported by the ssl protocol that use the rsa key-exchange algorithm strength category and recommended use cipher suites strongest cipher suite permitted for deployments within the united states only. this cipher suite is appropriate for banks and other institutions that handle highly sensitive data. red hat console does not support this cipher suite. triple des with 168-bit encryption and sha-1 message authentication triple des is the strongest cipher supported by ssl, but it is not as fast as rc4. triple des uses a key three times as long as the key for standard des. because the key size is so large, there are more possible keys than for any other cipher-approximately 3...

Building a Theme - Archive of obsolete content
s why we copied the default styles in the setup step. when writing a theme, the easiest way to determine what css selectors you need to write is to use the dom inspector which you should have installed in the setup step. you can use this to inspect any element in a web page or an xul document, which makes it invaluable for themes. updating the toolbar's styling note in firefox 4.0 and up, the highlight feature of dom inspector is broken. to workaround this, disable hardware acceleration in firefox' options. open up the dom inspector now (located under the "tools" menu), and go to "file->inspect chrome document". this will be a menu containing all the xul documents currently open in firefox. pick the first document with a web page title, like "firefox start page" and select it. for this...
... user has the sample theme selected, use the directory browser/ to look up skins for the browser package." more concisely, this means that the url chrome://browser/skin/some/path/file.css will look for a file browser/some/path/file.css in your theme's root directory. save the file. test first, we need to tell firefox about your theme. during the development phase for firefox versions 2.0 and higher, you can point firefox to the folder where you are developing the theme, and it'll load it up every time you restart firefox. locate your profile folder and beneath it the profile you want to work with (e.g. firefox/profiles/<profile_id>.default/). open the extensions/ folder, creating it if need be. create a new text file and put the full path to your development folder inside (e.g. c:\th...
...heme for free. your theme will be hosted on mozilla's mirror network to guarantee your download even though it might be very popular. mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. in addition, mozilla add-ons allows users to comment and provide feedback on your theme. it is highly recommended that you use mozilla add-ons to distribute your themes! visit https://addons.mozilla.org/developers/ to create an account and begin distributing your themes! note: your theme will be passed faster and downloaded more if you have a good description and some screenshots of the theme in action. themes ______________________________ ...

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
technical (what do we follow). organizations implement internal procedural standards so they are able to operate efficiently. they may also incorporate external procedural and/or technical standards. technical standards have traditionally been pioneered through consortiums or standards bodies. the technical standards can be either public, standards-based or a proprietary de facto standard. ...
... designed and developed the star office system. it was an elegant workstation with an iconic desktop developed by the engineers at parc (palo alto research center). the star office system offered functionality that neither microsoft nor apple has been able to match with their current offerings. the engineers developed star on a proprietary development operating system known as pilot. pilot had a highly-integrated debugging tool called co-pilot that allowed the xerox development organization to quickly and easily debug issues. however, what xerox neglected to understand was that regardless of how powerful pilot and co-pilot was, the star workstation could not evolve with the times because it was proprietary. xerox was bound to a unique hardware platform and to a closed development operating sy...
.... by adopting a set of standards, the qa organization can produce a set of test suites that they can use across multiple projects. by having a standardized set of test suites, the qa organization can easily maintain, verify, and certify the tests, and eliminate redundant testing databases to ensure consistency and reliability. like the engineers, standardization also helps the qa engineers become highly proficient and capable of shifting from project to project. summary as organizations expand product development across multiple devices and product families, integration and compatibility must be a key requirement. adhering to a set of future-focused international standards will make cross-functional integration possible. adopting standards will not only help an organizations end users enjoy ...

Efficient animation for web games - Game development
ecommend, you really ought to use css transitions and/or css animations, rather than javascript-powered animations. though javascript animations can be easier to express at times, unless you have a great need to synchronise ui animation state with game animation state, you’re unlikely to be able to do a better job than the browser. the reason for this is that css transitions/animations are much higher level than javascript, and express a very specific intent. because of this, the browser can make some assumptions that it can’t easily make when you’re manually tweaking values in javascript. to take a concrete example, if you start a css transition to move something from off-screen so that it is fully visible on-screen, the browser knows that the related content will end up completely vis...
...ng the browser will take to draw a particular frame. requestanimationframe causes the browser to redraw and call your function before that frame gets to the screen. the downside of using this vs. settimeout is that your animations must be time-based instead of frame-based, i.e. you must keep track of time and set your animation properties based on elapsed time. requestanimationframe includes a domhighrestimestamp in its callback function prototype, which you definitely should use (as opposed to using the date object), as this will be the time the frame began rendering, and ought to make your animations look more fluid. you may have a callback that ends up looking something like this: var starttime = -1; var animationlength = 2000; // animation length in milliseconds function doanimation(time...
...uality or physics detail when compromise to framerate and input response would be less noticeable. measure performance there are some popular animation-related libraries and ui toolkits with animation functions that still do things like using settimeout to drive their animations, drive all their animations completely individually, or other similar things that aren’t conducive to maintaining a high frame-rate. one of the goals for the puzzowl game is for it to be a solid 60fps on reasonable hardware (for the record, it’s almost there on galaxy nexus-class hardware) while still being playable on low-end devices (such as a firefox os geeksphone keon). it would have been good to use as much third party software as possible, but most of what we tried was either too complicated for simple use-...

asm.js - Game development
this article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples. what is asm.js, exactly? it is a very small, strict subset of javascript that only allows things like `while`, `if`, numbers, top-level named functions, and other simple constructs. it does not allow objects, strings, closures, and basically anything that requires heap allocation. asm.js code resembles c in many ways, but it's still completely valid javascript that will run in all current engines. ...
...allocation. asm.js code resembles c in many ways, but it's still completely valid javascript that will run in all current engines. it pushes js engines to optimize this kind of code, and gives compilers like emscripten a clear definition of what kind of code to generate. we will show what asm.js code looks like and explain how it helps and how you can use it. this subset of javascript is already highly optimized in many javascript engines using fancy just-in-time (jit) compiling techniques. however, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much performance as we can out of it. it makes it easier to collaborate across multiple js engines because it's easy to talk about and benchmark. the idea is that this kind of code should run very...
...ore and getting as much performance as we can out of it. it makes it easier to collaborate across multiple js engines because it's easy to talk about and benchmark. the idea is that this kind of code should run very fast in each engine, and if it doesn't, it's a bug and there's a clear spec that engines should optimize for. it also makes it easy for people writing compilers that want to generate high-performant code on the web. they can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns. emscripten, a c/c++ to javascript compiler, emits asm.js code to make it run with near native performance on several browsers. additionally, if an engine chooses to specially recognize asm.js code, there even more optimizations that can be made. firefox is the only brows...

What is accessibility? - Learn web development
ions. publish an accessibility statement on your site and engage with people having problems. accessibility guidelines and the law there are numerous checklists and sets of guidelines available for basing accessibility tests on, which might seem overwhelming at first glance. our advice is to familiarize yourself with the basic areas in which you need to take care, as well as understanding the high-level structures of the guidelines that are most relevant to you. for a start, the w3c has published a large and very detailed document that includes very precise, technology-agnostic criteria for accessibility conformance. these are called the web content accessibility guidelines (wcag), and they are not a short read by any means. the criteria are split up into four main categories, which spe...
... are not a short read by any means. the criteria are split up into four main categories, which specify how implementations can be made perceivable, operable, understandable, and robust. the best place to get a light introduction and start learning is wcag at a glance. there is no need to learn all of the wcag — be aware of the major areas of concern, and use a variety of techniques and tools to highlight any areas that don't conform to the wcag criteria (see below for more). your country may also have specific legislation governing the need for websites serving their population to be accessible — for example en 301 549 in the eu, section 508 of the rehabilitation act in the us, federal ordinance on barrier-free information technology in germany, the accessibility regulations 2018 in the u...
... ios: uiaccessibility where the native semantic information provided by the html elements in your web apps falls down, you can supplement it with features from the wai-aria specification, which add semantic information to the accessibility tree to improve accessibility. you can learn a lot more about wai-aria in our wai-aria basics article. summary this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. 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. overview: accessibility next in this module what is accessibili...

Images, media, and form elements - Learn web development
previous overview: building blocks next in this lesson we will take a look at how certain special elements are treated in css. images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes. understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the way that some elements behave unusually when styled with css. replaced elements images and video are described as re...
...hing like following: img { width: 100%; height: 100%; } this would however stretch the image, so probably isn't what you'd want to do. form elements form elements can be a tricky issue when it comes to styling with css, and the web forms module contains detailed guides to the trickier aspects of styling form elements, which i will not fully reproduce here. there are a few key basics worth highlighting in this section of the article. many form controls are added to your page by way of the <input> element — this defines simple form fields such as text inputs, through to more complex fields added in html5 such as color and date pickers. there are some additional elements, such as <textarea> for multiline text input, and also elements used to contain and label parts of forms such as <fi...
...e a look at the two articles in the html section of these guides. styling web forms advanced form styling test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: images and form elements. summary this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html tables. previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes...

Fundamental text and font styling - Learn web development
he text inside an element is all affected as one single entity. you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor.) fonts let's move straight on to look at properties for styling fonts. in this example we'll apply some different css properties to the same html sample, which looks like this: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his might...
...story to tell. but it was a rare occasion such as this that he did.</p> font size in our previous module's css values and units article, we reviewed length and size units. font size (set with the font-size property) can take values measured in most of these units (and others, such as percentages), however the most common units you'll use to size text are: px (pixels): the number of pixels high you want the text to be. this is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. ems: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter m contained inside the parent element.) this can become tricky to work out if you have a lot of...
...an take most available css length and size units, but you'll most commonly use px; positive values move the shadow right, and negative values left. this value has to be included. the vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. this value has to be included. the blur radius — a higher value means the shadow is dispersed more widely. if this value is not included, it defaults to 0, which means no blur. this can take most available css length and size units. the base color of the shadow, which can take any css color unit. if not included, it defaults to black. multiple shadows you can apply multiple shadows to the same text by including multiple shadow values separated by ...

Example 1 - Learn web development
st { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* ---------...
...st { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for active state open state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------...
...e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #fff; } result for open state ...

Example 3 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist =...
...ptlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widg...
...tor('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (ev...

HTML text fundamentals - Learn web development
ers style this as italic by default, but you shouldn't use this tag purely to get italic styling. to do that, you'd use a <span> element and some css, or perhaps an <i> element (see below). <p>i am <em>glad</em> you weren't <em>late</em>.</p> strong importance to emphasize important words, we tend to stress them in spoken language and bold them in written language. for example: this liquid is highly toxic. i am counting on you. do not be late! in html we use the <strong> (strong importance) element to mark up such instances. as well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. to do that, you'd use a <span> el...
... importance) element to mark up such instances. as well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. to do that, you'd use a <span> element and some css, or perhaps a <b> element (see below). <p>this liquid is <strong>highly toxic</strong>.</p> <p>i am counting on you. <strong>do not</strong> be late!</p> you can nest strong and emphasis inside one another if desired: <p>this liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p> active learning: let's be important! in this active learning section, we've provided an editable example. inside it, we'd like you to ...
...he most common hummingbird in eastern north america. </p> <!-- foreign words --> <p> the menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. </p> <!-- a known misspelling --> <p> someday i'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better. </p> <!-- highlight keywords in a set of instructions --> <ol> <li> <b>slice</b> two pieces of bread off the loaf. </li> <li> <b>insert</b> a tomato slice and a leaf of lettuce between the slices of bread. </li> </ol> test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained ...

Introduction to web APIs - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, javascript basics (see first steps, building blocks, javascript objects). objective: to gain familiarity with apis, what they can do, and how you can use them in your code. ...
... plug socket and it works. you don't try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt. image source: overloaded plug socket by the clear communication people, on flickr. in the same way, if you want to say, program some 3d graphics, it is a lot easier to do it using an api written in a higher-level language such as javascript or python, rather than try to directly write low level code (say c or c++) that directly controls the computer's gpu or other graphics functions. note: see also the api glossary entry for further description. apis in client-side javascript client-side javascript, in particular, has many apis available to it — these are not part of the javascript language...
...des a special set of constructs you can use to query the twitter service and return specific information. relationship between javascript, apis, and other javascript tools so above, we talked about what client-side javascript apis are, and how they relate to the javascript language. let's recap this to make it clearer, and also mention where other javascript tools fit in: javascript — a high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. note that javascript is also available in other programming environments, such as node. browser apis — constructs built into the browser that sits on top of the javascript language and allows you to implement functionality more easily. third-party apis — constructs built into third-par...

Manipulating documents - Learn web development
en in lower camel case whereas the css versions are hyphenated (e.g. backgroundcolor versus background-color). make sure you don't get these mixed up, otherwise it won't work. there is another common way to dynamically manipulate styles on your document, which we'll look at now. delete the previous five lines you added to the javascript. ...
... which method you choose is up to you; both have their advantages and disadvantages. ...
...ckground-color: black; padding: 10px; width: 250px; text-align: center; } </style> now we'll turn to a very useful method for general html manipulation — element.setattribute() — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to. in this case we will set a class name of highlight on our paragraph: para.setattribute('class', 'highlight'); refresh your page, and you'll see no change — the css is still applied to the paragraph, but this time by giving it a class that is selected by our css rule, not as inline css styles. which method you choose is up to you; both have their advantages and disadvantages. the first method takes less setup and is good for simple uses, whereas the second method is more purist (no mixing c...

Handling text — strings in JavaScript - Learn web development
ring literal into a template literal, you have to replace the quote marks (' ', or " ") with backtick characters (` `). so, taking a simple example: let song = 'fight the youth'; would be turned into a template literal like so: song = `fight the youth`; if we want to concatenate strings, or include expression results inside them, traditional strings can be fiddly to write: let score = 9; let highestscore = 10; let output = 'i like the song "' + song + '". i gave it a score of ' + (score/highestscore * 100) + '%.'; template literals simplify this enormously: output = `i like the song "${ song }". i gave it a score of ${ score/highestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be wrapped in a single pair of backticks. when y...
...hestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be wrapped in a single pair of backticks. when you want to include a variable or expression inside the string, you include it inside a ${ } construct, which is called a placeholder. you can include complex expressions inside template literals, for example: let examscore = 45; let examhighestscore = 70; examreport = `you scored ${ examscore }/${ examhighestscore } (${ math.round((examscore/examhighestscore*100)) }%). ${ examscore >= 49 ? 'well done, you passed!' : 'bad luck, you didn\'t pass this time.' }`; the first two placeholders here are pretty simple, only including a simple value in the string. the third one calculates a percentage result and rounds it to the nearest int...
...t to the nearest integer. the fourth one includes uses a ternary operator to check whether the score is above a certain mark and print a pass or fail message depending on the result. another point to note is that if you want to split a traditional string over multiple lines, you need to include a newline character, \n: output = 'i like the song "' + song + '".\ni gave it a score of ' + (score/highestscore * 100) + '%.'; template literals respect the line breaks in the source code, so newline characters are no longer needed. this would achieve the same result: output = `i like the song "${ song }". i gave it a score of ${ score/highestscore * 100 }%.`; we would recommend that you get used to using template literals as soon as possible. they are well-supported in modern browsers, and the ...

What went wrong? Troubleshooting JavaScript - Learn web development
error. an error message to indicate what's gone wrong: "typeerror: guesssubmit.addeventlistener is not a function" a "learn more" link that links through to an mdn page that explains what this error means in greater detail. the name of the javascript file, which links through to the debugger tab of the developer tools. if you follow this link, you'll see the exact line where the error is highlighted. the line number where the error is, and the character number in that line where the error is first seen. in this case, we've got line 86, character number 3. if we look at line 86 in our code editor, we'll find this line: guesssubmit.addeventlistener('click', checkguess); the error message says "guesssubmit.addeventlistener is not a function", which means that the function w...
...nside the checkguess() { ... } block). as you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. in this case, the code was not run and the error was not thrown until the checkguess() function was run by line 86. have a look at line 78, and you'll see the following code: loworhi.textcontent = 'last guess was too high!'; this line is trying to set the textcontent property of the loworhi constant to a text string, but it's not working because loworhi does not contain what it's supposed to. let's see why this is — try searching for other instances of loworhi in the code. the earliest instance you'll find in the javascript is on line 48: const loworhi = document.queryselector('loworhi'); at this point w...
...d give us a random number between 0 and 99: math.floor(math.random()*100); hence us wanting to add 1, to give us a random number between 1 and 100: math.floor(math.random()*100) + 1; try updating both lines like this, then save and refresh — the game should now play like we are intending it to! other common errors there are other common errors you'll come across in your code. this section highlights most of them. syntaxerror: missing ; before statement this error generally means that you have missed a semicolon at the end of one of your lines of code, but it can sometimes be more cryptic. for example, if we change this line inside the checkguess() function: var userguess = number(guessfield.value); to var userguess === number(guessfield.value); it throws this error because it thi...

Getting started with Svelte - Learn web development
ow to setup our development environment, create a sample app, understand the structure of the project, and see how to run it locally and build it for production. 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. svelte is a compiler that generates minimal and highly optimized javascript code from our sources; you'll need a terminal with node + npm installed to compile and build your app. objective: to setup a local svelte development environment, create and build a starter app, and understand the basics of how it works. svelte: a new approach to building rich user interfaces svelte provides a different approach to building web apps ...
...ow it works. svelte: a new approach to building rich user interfaces svelte provides a different approach to building web apps than some of the other frameworks covered in this module. while frameworks like react and vue do the bulk of their work in the user's browser while the app is running, svelte shifts that work into a compile step that happens only when you build your app, producing highly-optimized vanilla javascript. the outcome of this approach is not only smaller application bundles and better performance, but also a developer experience that is more approachable for people that have limited experience of the modern tooling ecosystem. svelte sticks closely to the classic web development model of html, css, and js, just adding a few extensions to html and javascript. it argu...
...to an existing application. nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power devices: applications built with svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power. less code means less kb to download, parse, execute, and keep hanging around in memory. highly interactive pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive. onboarding people with basic web development knowledge: svelte has a shallow learning curve. web developers with basic htm...

Understanding client-side JavaScript frameworks - Learn web development
g about choosing a framework to learn, and what alternatives there are to client-side frameworks. 2. framework main features each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience. this article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them. react tutorials note: react tutorials last tested in may 2020, with react/reactdom 16.13.1 and create-react-app 3.4.1. if you need to check your code against our version, you can find a finished version of the sample react app code in our todo-react repository. for a running live version, see https://mdn.github.io/todo-react-build/. 1. getting star...
...k your code against our version, you can find a finished version of the sample vue app code in our todo-vue repository. for a running live version, see https://mdn.github.io/todo-vue/dist/. 1. getting started with vue 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. 2. creating our first vue component now it's time to dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. along the way, we'll learn about a few important con...
...up-to-date anyway, as new ones appear all the time. as a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. keeping the list short is therefore helpful. we want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. we just think they score highly on the above criteria. note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. if your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! get in touch with us via matrix, or discourse, o...

Client-side tooling overview - Learn web development
your favourite search engine and look for "front-end developer tools" you're going to hit a huge spectrum of results ranging from text editors, to browsers, to the type of pens you can use to take notes. though your choice of code editor is certainly a tooling choice, this series of articles will go beyond that, focusing on developer tools that help you produce web code more efficiently. from a high-level perspective, you can put client-side tools into the following three broad categories of problems to solve: safety net — tools that are useful during your code development. transformation — tools that transform code in some way, e.g. turning an intermediate language into javascript that a browser can understand. post-development — tools that are useful after you have written your ...
...ypes they are, and what code lines they are present on. often linters can be configured to not only report errors, but also report any violations of a specified style guide that you team might be using (for example code that is using the wrong number of spaces for indentation, or using template literals rather than regular string literals). eslint is the industry standard javascript linter — a highly configurable tool for catching potential syntax errors and encouraging "best practices" throughout your code. some companies and projects have also shared their eslint configs. you can also find linting tools for other languages, such as csslint. also well-worth looking at is webhint, a configurable, open-source linter for the web that surfaces best practices including approaches to accessibi...
...gain, you’ll probably go through several different tools as you search for the right ones for you, trying them out to see if they make sense, are well-supported, and do what you want them to do. this is fine — it is all good for learning, and the road will get smoother as you get more experience. summary that rounds off our gentle introduction to the topic of client-side web tooling, from a high level. next up we provide you with a crash course on the command line, which is where a lot of tooling is invoked from. we’ll take a look at what the command line can do and then try installing and using our first tool. overview: understanding client-side tools next in this module client-side tooling overview command line crash course package management basics introducing a compl...

Accessibility API cross-reference
aria-invalid this window is currently the active window n/a active active n/a identifies the currently active element when focus is on a composite widget, textbox, group, or application. ...
...for receiving text input, see focused n/a armed armed available to javascript as document.activeelement indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. n/a n/a aria-atomic ...
...n/a resizable resizable this object and all of its ancestors are visible n/a showing showing this text object can only contain 1 line of text n/a single_line single_line tells accessibility aid "don't add event listener - this object doesn't generate any". for example, could be used with higher level containers. n/a transient transient the descendents of composite roles behave rather like this. for grayed-out (disabled) vs. available (enabled) items. html attribute also removes element from tab sequence and 'grays it out'. aria attribute keeps it 'perceivable'. unavailable enabled n/a aria-disabled=true disabled (boolean attribut...

Eclipse CDT
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. ...
...tor window and select "open type hierarchy" or, "quick type hierarchy" from the context menu. the results for "open type hierarchy" will show all classes in the class inheritance tree, and the classes that have methods that override the method will have a triangular red marker beside them. if you select one of these classes, then in the method pane to the right the method you searched for will be highlighted (you may need to scroll to it) - double click to see its definition. the results for "quick type hierarchy" will only show those classes in the inheritance tree that override the method. double click on a class to go straight to its override's definition. building from eclipse in short, don't do this. eclipse doesn't have good facilities for building incrementally in individual directori...
...ed in the area below. tick this (all of its sub-options should then be ticked), click "next" twice, accept the license agreement, and then click "finish". eclipse should now update itself and ask you to restart. troubleshooting: if you get an error when trying to update, try clicking "available software sites" in the "install" window, make sure "juno" is still unticked, that "nightly" is ticked, highlight "nightly", click "reload", "ok", and then try again. troubleshooting here is a list of problems people have encountered, and suggestions for solutions. problem occurred (java heap space) if eclipse becomes glacially slow or hangs and then you get this error message, see the increasing memory limits section above. if you already carried out the instructions in that section, then double ch...

Activity Monitor, Battery Status Menu and top
urement (i.e. task_power_info::task_platform_idle_wakeups obtained from the task_info function.) in mac os 10.10 it appears to have been changed to measure interrupt-level wakeups (a superset of idle wakeups), which are less interesting. this is the same value as powermetrics' "intr" measurement (i.e. task_power_info::task_interrupt_wakeups obtained from the task_info function.) requires high perf gpu: many macs have two gpus: a low-power, low-performance integrated gpu, and a high-power, high-performance external gpu. using the high-performance gpu can greatly increase power consumption, and should be avoided whenever possible. this column indicates which gpu is being used. activity monitor can be useful for cursory measurements, but for more precise and detailed measurements other...
... profiling applications. when you open this menu for the first time in a while it says “collecting power usage information” for a few seconds, and if you have top open during that time you'll see that, once again, systemstats is running and using a lot of cpu. ...
...e opened and that application’s entry will be highlighted. based on these facts it seems reasonable to assume that “energy impact” is again being used to determine which applications are "using significant energy". testing shows that once an energy-intensive application is started it takes less than a minute for it to show up in the battery status menu. and once the application stops using high amounts of energy it takes a few minutes to disappear. the exception is when the application is closed, in which case it disappears immediately. and it appears that a program with an “energy impact” of roughly 20 or more will eventually show up as significant, and programs that have much higher “energy impact” values tend to show up more quickly. all of these battery status menu observat...

Profiling with the Firefox Profiler
content (aka "child") processes. tip: long-running tasks in the parent process will block all input or drawing with the browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz. tracing markers red: these indicate that the event loop is being unresponsive. note that high priority events such as vsync are not included here. also note that this indicates what would have happened had there been an event waiting and not necessarily that there was an event pending for that long. black: these indicate synchronous ipc calls. ranges ranges of time can be zoomed in on by clicking and dragging anywhere in the tracing marker or thread areas. once a range is selected, ...
...gs is checked. javascript stack the javascript stack is collected by the js engine. this is controlled by the "javascript" checkbox in the gecko profiler add-on's settings panel. label stack the label stack (formerly called "pseudo stack") uses function entry/exit tags added by hand to important points in the code base. the stacks you see in the ui are chains of these tags. this is good for highlighting particularly interesting parts of the code, but they miss out on un-annotated areas of the code base, and give no visibility into system libraries or drivers. tagging is done by adding macros of the form auto_profiler_label("namespace", "name"). these add raii helpers, which are used by the profiler to track entries/exits of the annotated functions. for this to be effective, you need to...
... in this screenshot, composite #143 has been selected. the layer tree structure can be seen in the left panel. it contains, for each layer, the type of the layer, and various metrics about the layer, such as the visible region and any transforms. in the right panel, a visualization of the layer tree (based entirely on the aforementioned metrics) is shown. hovering over a layer in the left panel highlights the layer in the right panel. this is useful for identifying what content each layer corresponds to. here, i'm hovering over the last layer in the layer tree (a paintedlayercomposite), and a strip at the top of the right panel is highlighted, telling me that this layer is for the system notification bar in b2g. viewing textures sometimes, it's useful to see not only the structure of the l...

Index
network security services (nss) is a set of libraries designed to support cross-platform development of security-enabled client and server applications. applications built with nss can support ssl v3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, x.509 v3 certificates, and other security standards. 2 an overview of nss internals api, intermediate, intro, nss, tools a high-level overview to the internals of network security services (nss) software developed by the mozilla.org projects traditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss). nss is a library written in the c programming language. it's free and open source software, a...
...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 different alternative routes while searching for (z), in a recursive manner. only the newer verification engine (internally named libpkix) is capable of doing that properly. it's worth mentioning the extended validation (ev) principle, which is an effort by software vendors and cas to define a stricter set of rules for iss...
... meta-inf directory to conform with the jar format. for example, -b signatures causes the files to be named signatures.rsa and signatures.sf. the default is signtool. -c# specifies the compression level for the -j or -z option. the symbol # represents a number from 0 to 9, where 0 means no compression and 9 means maximum compression. the higher the level of compression, the smaller the output but the longer the operation takes. if the -c# option is not used with either the -j or the -z option, the default compression value used by both the -j and -z options is 6. -d certdir specifies your certificate database directory; that is, the directory in which you placed yo...

Web Replay
o different behavior between recording and replay. data races are bugs in and of themselves, however, so this sort of non-determinism should be fixed regardless. this design allows the replaying process to behave differently from the recording process, which allows for a fairly straightforward implementation of ipc and debugger integration. microsoft's and webkit's replay projects operate at a higher level than rr. inputs to the browser and non-deterministic behaviors are recorded so that they can be replayed later. in microsoft's project the abstraction layer appears to be the boundary between the js engine and the rest of the browser, while in webkit's project the layer appears to be at internal webkit apis that can cause js to run or the behavior of js code to vary. broadly, all of th...
... process; the boundary is the system calls which are made into the kernel. this project records all behavior outside of system library calls which the process makes, with exceptions carved out for the allowed non-determinism and for draw targets. microsoft's and webkit's projects record a smaller subset of the browser's behavior. this project is at a good point on this spectrum. compared to a higher level project, this is able to operate on stable, thoroughly documented library apis. by focusing on intercepting these apis, browser instrumentation, recording overhead, and the maintenance burden going forward are all minimized. compared to a lower level project, this is able to tolerate more non-determinism. all code whose behavior is recorded is compiled into gecko (rather than being par...
...ting the system library functions which the process calls into — rewriting their machine code so they invoke a record/replay specific function with the same signature, which records any results of the function and then replays those results later without actually invoking the underlying library function. redirected functions include both low level system call wrappers like sendmsg/recvmsg, and higher level functions such as various cocoa interfaces. the list of redirected functions can be found in toolkit/recordreplay/processredirectdarwin.cpp. when calls are added to gecko for new system library functions, those functions may need redirections. in general, redirections are needed for any function that is (a) not compiled as part of gecko, and either (b) may behave differently between re...

Observer Notifications
ng used is changed; this is sent even when the user is previewing a theme, not just when the theme is actually selected. lightweight-theme-list-changed - the list of available lightweight themes has changed. developer tools these topics let you know about things that have happened related to firefox's built-in developer tools. topic data description highlighter-ready - sent when the highlighter component is initialized. note: this is used by the inspector to detect when it should begin its initialization process. inspector-closed - sent when the inspector tool is closed. inspector-editor-closed - sent after the attribute-value editor has been closed. inspector-editor-opened - sent a...
... inspector-closed - sent when the inspector tool is closed. inspector-editor-closed - sent after the attribute-value editor has been closed. inspector-editor-opened - sent after the attribute-value editor has been opened and initialized. inspector-editor-saved - sent when changes have been saved in the attribute-value editor. inspector-highlighting - sent every time a different node in the page gets highlighted. inspector-opened - sent after the inspector tool has finished its initialization. inspector-ruleview-ready - sent when the inspector's css rule view is opened and initialized. inspector-state-restored - sent when the inspector is re-opened after a tab switch. inspec...
... sent after the inspector tool has finished its initialization. inspector-ruleview-ready - sent when the inspector's css rule view is opened and initialized. inspector-state-restored - sent when the inspector is re-opened after a tab switch. inspector-treepanel-ready - sent when the inspector's tree panel is opened and initialized. inspector-unhighlighting - sent every time the highlighter stops highlighting a node. remote-listening string sent after when the remote agent is listening for incoming connections after remoteagent.listen() is called. the data is a string containing a fully qualified url to the main target’s websocket endpoint. telemetry topic data description gathe...

nsIMutableArray
re the element using a weak reference. exceptions thrown ns_error_failure when a weak reference is requested, but the element does not support nsiweakreference. clear() clear the entire array, releasing all stored objects. void clear(); parameters none. insertelementat() insert an element at the given position, moving the element currently located in that position, and all elements in higher position, up by one. void insertelementat( in nsisupports element, in unsigned long index, in boolean weak ); parameters element the element to insert. index the position in the array: if the position is lower than the current length of the array, the elements at that position and onwards are bumped one position up. if the position is equal to the current length of the a...
...ts element, in unsigned long index, in boolean weak ); parameters element the element to insert. index the position in the array: if the position is lower than the current length of the array, the elements at that position and onwards are bumped one position up. if the position is equal to the current length of the array, the new element is appended. an index lower than 0 or higher than the current length of the array is invalid and will be ignored. weak whether or not to store the element using a weak reference. exceptions thrown ns_error_failure when a weak reference is requested, but the element does not support nsiweakreference. removeelementat() remove an element at a specific position, moving all elements stored at a higher position down one. to r...
...d replaceelementat( in nsisupports element, in unsigned long index, in boolean weak ); parameters element the new element to insert. index the position in the array. if the position is lower than the current length of the array, an existing element will be replaced. if the position is equal to the current length of the array, the new element is appended. if the position is higher than the current length of the array, empty elements are appended followed by the new element at the specified position. an index lower than 0 is invalid and will be ignored. weak whether or not to store the new element using a weak reference. exceptions thrown ns_error_failure when a weak reference is requested, but the element does not support nsiweakreference. see also n...

nsIVariant
l] out wstring str); native code only! attributes attribute type description datatype pruint16 read only. native code only! methods native code only!getasacstring acstring getasacstring(); parameters none. return value the value is converted to an 8-bit string in the iso-8859-1 character set. if the value was utf16 then the high bits are lost. if the value was utf8 then it is converted to utf16 and the high bits are discarded. arrays and interface pointers cannot be converted to a string. violates the xpcom interface guidelines getasarray() nsresult getasarray( out pruint16 type, out nsiid iid, out pruint32 count, out voidptr ptr ); parameters type the type of the array elements. iid ...
... of the object is incremented.) native code only!getasjsval jsval getasjsval(); parameters none. return value returns the underlying js value, if the variant was created by passing a js object into xpconnect. native code only!getasstring string getasstring(); parameters none. return value the value is converted to an 8-bit string in the iso-8859-1 character set. if the value was utf16 then the high bits are lost. if the value was utf8 then it is converted to utf16 and the high bits are discarded. arrays and interface pointers cannot be converted to a string. native code only!getasstringwithsize void getasstringwithsize( out pruint32 size, [size_is(size), retval] out string str ); parameters size the length of the returned string. useful in case the string contains embedd...
...erted to a string. native code only!getasstringwithsize void getasstringwithsize( out pruint32 size, [size_is(size), retval] out string str ); parameters size the length of the returned string. useful in case the string contains embedded null characters. str the value is converted to an 8-bit string in the iso-8859-1 character set. if the value was utf16 then the high bits are lost. if the value was utf8 then it is converted to utf16 and the high bits are discarded. arrays and interface pointers cannot be converted to a string. native code only!getasuint16 pruint16 getasuint16(); parameters none. return value if the internal value is a string, it is first converted to a double, if possible. if it within the numeric limits of a pruint16 then the value is retu...

nsIWebProgressListener
state_is_broken 0x00000001 this flag indicates an unknown security state. this may mean that the request is being loaded as part of a page in which some content was received over an insecure channel. state_is_secure 0x00000002 this flag indicates that the data corresponding to the request was received over a secure channel. the degree of security is expressed by state_secure_high, state_secure_med, or state_secure_low. security strength flags these flags describe the security strength and accompany state_is_secure in a call to the onsecuritychange() method. these flags are mutually exclusive. these flags are not meant to provide a precise description of data transfer security. these are instead intended as a rough indicator that may be used to, for example, color...
...nsecuritychange() method. these flags are mutually exclusive. these flags are not meant to provide a precise description of data transfer security. these are instead intended as a rough indicator that may be used to, for example, color code a security indicator or otherwise provide basic data transfer security feedback to the user. constant value description state_secure_high 0x00040000 this flag indicates a high degree of security. state_secure_med 0x00010000 this flag indicates a medium degree of security. state_secure_low 0x00020000 this flag indicates a low degree of security. state identity flags these flags describe the level of identity verification in a call to the onsecuritychange() method. constant val...
...dicates a medium degree of security. state_secure_low 0x00020000 this flag indicates a low degree of security. state identity flags these flags describe the level of identity verification in a call to the onsecuritychange() method. constant value description state_identity_ev_toplevel 0x00100000 state bits for ev == extended validation == high assurance. the topmost document uses an ev cert. location change flags constant value description location_change_same_document 0x00000001 this flag is on when awebprogress did not load a new document. for example, the location change is due to an anchor scroll or a pushstate/popstate/replacestate. location_change_error_page 0x00000002 ...

Int64
her it's not a number, string, or 64-bit integer object, or it's a string that is incorrectly formatted or contains a value outside the range that can be represented in 64 bits. this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer. method overview number compare(a, b); number hi(a); int64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is: -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown typeerror one or both of ...
... methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is: -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown typeerror one or both of the specified values is not a 64-bit integer (either signed or unsigned). hi() returns the high 32 bits of the specified value. number hi( num ); parameters num the value whose high 32 bits are to be returned. return value the high 32 bits of num are returned. this is essentially num >> 32. exceptions thrown typeerror num is not a 64-bit integer object. lo() returns the low 32 bits of the specified value. number lo( num ); parameters num the int64 value whose lo...
... lo() returns the low 32 bits of the specified value. number lo( num ); parameters num the int64 value whose low 32 bits are to be returned. return value the low 32 bits of num are returned. this is essentially num & 0xffffffff. exceptions thrown typeerror num is not a 64-bit integer object. join() creates a 64-bit integer object whose value is constructed using the specified high and low order 32-bit values. int64 join( high, low ); parameters high the high-order 32 bits of the value to create. low the low-order 32 bits of the value to create. return value a new 64-bit integer object comprised of the two values merged together. the returned value is (high << 32) + low. exceptions thrown typeerror one or both of the specified numbers is not a javascrip...

UInt64
er it's not a number, string, or 64-bit integer object, or it's a string that is incorrectly formatted or contains a value outside the range that can be represented in 64 bits. this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer. method overview number compare(a, b); number hi(a); uint64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown typeerror one or both of the sp...
...]); methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown typeerror one or both of the specified values is not a 64-bit integer (either signed or unsigned). hi() returns the high 32 bits of the specified value. number hi( num ); parameters num the value whose high 32 bits are to be returned. return value the high 32 bits of num are returned. this is essentially num >> 32. exceptions thrown typeerror num is not a 64-bit integer object. lo() returns the low 32 bits of the specified value. number lo( num ); parameters num the int64 value whose ...
... lo() returns the low 32 bits of the specified value. number lo( num ); parameters num the int64 value whose low 32 bits are to be returned. return value the low 32 bits of num are returned. this is essentially num & 0xffffffff. exceptions thrown typeerror num is not a 64-bit integer object. join() creates a 64-bit integer object with a value constructed using the specified high and low order 32-bit values. uint64 join( high, low ); parameters high the high-order 32 bits of the value to create. low the low-order 32 bits of the value to create. return value a new 64-bit integer object comprised of the two values merged together. the returned value is (high << 32) + low. exceptions thrown typeerror one or both of the specified numbers is not a javascri...

Edit Shape Paths in CSS - Firefox Developer Tools
guide walks you through all of the available options. activate / deactivate the shape path editor the shape path editor is accessed via the css rules panel, which can be opened as described in the guide to opening the inspector. once you have selected your element, you should see the shape icon alongside any valid value, e.g. one for shape-outside. clicking the icon will cause the editor to highlight the shape. to deactivate the shape path editor click on the icon again, or select another element or a different editor. note that the shape path editor does not persist between page reloads — if you reload your page you will need to select the element again. understanding the lines drawn by the editor once you have selected a shape on your page, the shape path editor will draw lines ...
...er depending on the type of basic shape that you are editing. options can be accessed by activating the shape path editor with a regular click on the icon, and you can use the context menu (ctrl/cmd + click) to access additional functionality. circle() if the value of shape-outside is circle(), you are creating a circle basic shape. clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to resize the circle or move its center. if you move or resize the circle past the margin box, the edges become clipped by it. in the rules panel you can see the values for circle() change as you edit the shape. you can then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside i...
...pes icon will activate the shapes path editor and give you the option to move any of the points of your polygon shape. double-click anywhere on a line of the shape and you will get a new point to adjust. double click on an existing point and it will be removed. remember that a polygon needs at least three points. moving and scaling shapes there is extra functionality available on the shape highlight — if you ctrl/cmd + click on the shapes icon for your shape the highlight will change, instead providing the ability to scale and/or move it. once again, clipping will occur if you exceed the bounds of the margin box. if your shape is a polygon, you also get the ability to rotate it around an axis. browser support the shape path editor currently works for shapes generated via clip-pat...

Paint Flashing Tool - Firefox Developer Tools
with the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness. repaints and responsiveness when the browser renders a web page it parses the html and css, determines how to lay it out, and then paints it to actually display the content on the screen. ...
...epaints, and for more of the screen, than necessary. this can then cause a site to be slow responding to user input (also known as "janky"). that's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to. using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page. after moving the mouse around and scrolling a bit, the above page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at t...
... example: css transitions one area where implementation choices can affect repaint efficiency is in css transitions. the example below shows two different ways to move an element using a css transition. the first way applies the transition to the element's margin-left, while the second way moves the element using the transform property. <body> <...

Call Tree - Firefox Developer Tools
ksort. to do this, it generates some arrays filled with random integers and sorts them using each algorithm in turn. we've zoomed into the part of the recording that shows a long javascript marker: the call tree presents the results in a table. each row represents a function in which at least one sample was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest. samples is the number of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function). total time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. these numbers should roughly be the same as the number of sample...
...alculated as the time spent in that particular function, excluding its children. this comes from the captured stacks where this function is the leafmost function. self cost is calculated from self time as a percentage of the total number of samples in the selected portion of the recording. in the current version of the call tree, these are the most important columns. functions with a relatively high self cost are good candidates for optimization, either because they take a long time to run, or because they are called very often. the inverted call tree is a good way to focus on these self cost values. this screenshot tells us something we probably already knew: bubble sort is a very inefficient algorithm. we have about six times as many samples in bubble sort as in selection sort, and 13 ...
...s might not show up as samples recorded in your code, but it is still your problem. in our example, there are 679 samples assigned to gecko - the second-largest group after bubblesort(). let's expand that: this result is telling us that 614 of those samples, or about 20% of the total cost, are coming from our sort() call. if we look at the code for sort(), it should be fairly obvious that the high platform data cost is coming from repeated calls to console.log(): function sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } it would certainly be worthwhile considering more efficient ways of implementing this. one thing to be aware of here is that idle time is classified as gecko, so parts of your profile wher...

Animating CSS properties - Firefox Developer Tools
perties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine. an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform. the intention of this scenario isn't to convince you that animating using margin is always a bad idea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play alon...
...d in user interaction. waterfall the rest of the recording shows the waterfall view. if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall. in each animation frame, we recalculate styles for every element, then perform a single layout, then a repaint. you can see that paint especially is hurting performance here. in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints ent...
...rding. it will look something like this: waterfall overview compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation. frame rate compared with the version that uses margin, this is looking pretty good. we're averaging nearly 60fps, and apart from one dip near the start, we're getting a consistently high frame rate. waterfall the timeline view shows the reason for the improved frame rate. compared with the version that uses margin, we're not spending any time time in layout or (more importantly in this case) in paint: in this case, using transform significantly improved the site's performance, and the performance tools were able to show how and why it did. ...

BiquadFilterNode() - Web APIs
a new biquadfilternode object, which represents a simple low-order filter, and is created using the audiocontext.createbiquadfilter() method. syntax var biquadfilternode = new biquadfilternode(context, options) parameters inherits parameters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional options are as follows: type: one of "lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass". the meaning of the other options depends on the value of this one. the defaults for all are as follows: q: 1 detune: 0 frequency: 350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-o...
...uencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. highpass: a highpass filter is the opposite of a lowpass filter. frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for t...
...ot used. lowshelf: the lowshelf filter allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. it implements a second-order lowshelf filter. q: not used. frequency: the upper limit of the frequences where the boost, or attenuation, is applied. gain: the boost, in db, to be applied. if the value is negative, the frequencies are attenuated. highshelf: the highshelf filter is the opposite of the lowshelf filter and allows all frequencies through, but adds a boost to the higher frequencies. it implements a second-order highshelf filter. q: not used. frequency: the lower limit of the frequences where the boost, or attenuation, is applied. gain: the boost, in db, to be applied. if the value is negative, the frequencies are attenuate...

Using the Geolocation API - Web APIs
osition, and queries the positioning hardware to get up-to-date information. when the position is determined, the defined callback function is executed. you can optionally provide a second callback function to be executed if an error occurs. a third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position. note: by default, getcurrentposition() tries to answer as fast as possible with a low accuracy result. it is useful if you need a quick answer regardless of the accuracy. devices with a gps, for example, can take a minute or more to get a gps fix, so less accurate data (ip location or wifi) may be returned to getcurrentposition(). navigator.geolocation.getcurrentpos...
...ntify the requested position watcher; you use this value in tandem with the clearwatch() method to stop watching the user's location. navigator.geolocation.clearwatch(watchid); fine tuning the response both getcurrentposition() and watchposition() accept a success callback, an optional error callback, and an optional positionoptions object. this object allows you to specify whether to enable high accuracy, a maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out. a call to watchposition could look like: function success(position) { d...
...he browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out. a call to watchposition could look like: function success(position) { dosomething(position.coords.latitude, position.coords.longitude); } function error() { alert('sorry, no position available.'); } const options = { enablehighaccuracy: true, maximumage: 30000, timeout: 27000 }; const watchid = navigator.geolocation.watchposition(success, error, options); describing a position the user's location is described using a geolocationposition object instance, which itself contains a geolocationcoordinates object instance. the geolocationposition instance contains only two things, a coords property that contains the ge...

Drag Operations - Web APIs
er 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 events bubble up as most other events do. within the dragstart event, you can specify the drag data, the feedback image, and the drag effects, all of which are described below. however, only the drag data is required. (the default image and drag effects are suitable in most situations.) drag data all drag events have a property called datatransfer which holds the drag data (...
...date as necessary depending on the value of the dropeffect property. although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. this mouse pointer feedback is sufficient in many cases. however, you can also update the user interface with an insertion point or highlight as needed. for simple highlighting, you can use the :-moz-drag-over css pseudoclass on a drop target. .droparea:-moz-drag-over { outline: 1px solid black; } in this example, the element with the class droparea will receive a 1 pixel black outline while it is a valid drop target, that is, if the preventdefault() method was called during the dragenter event. note: you must cancel the dr...
...ment the mouse is pointing at. naturally, you may need to move the insertion marker around a dragover event as well. you can use the event's clientx and clienty properties as with other mouse events to determine the location of the mouse pointer. finally, the dragleave event will fire at an element when the drag leaves the element. this is the time when you should remove any insertion markers or highlighting. you do not need to cancel this event. any highlighting or other visual effects specified using the :-moz-drag-over pseudoclass will be removed automatically. the dragleave event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event. performing a drop when the user releases the mouse, the drag and drop op...

MediaTrackSettings - Web APIs
tracks aspectratio a double-precision floating point value indicating the current value of the aspectratio property, specified precisely to 10 decimal places. this is the width of the image in pixels divided by its height in pixels. common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on tablets such as apple's ipad), 1.7777777778 (for the 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:10 aspect ratio common among widescreen computers and tablets). facingmode a domstring indicating the current value of the facingmode property, specifying the direction the camera is facing. the value will be one of: "user" a camera facing the user (commonly known as a "selfie cam"), used for self-portraiture and video calling. "e...
...ablets). facingmode a domstring indicating the current value of the facingmode property, specifying the direction the camera is facing. the value will be one of: "user" a camera facing the user (commonly known as a "selfie cam"), used for self-portraiture and video calling. "environment" a camera facing away from the user (when the user is looking at the screen). this is typically the highest quality camera on the device, used for general photography. "left" a camera facing toward the environment to the user's left. "right" a camera facing toward the environment to the user's right. framerate a double-precision floating point value indicating the current value of the framerate property, specifying how many frames of video per second the track includes. if the value ca...
...ls. resizemode a domstring indicating the current value of the resizemode property, specifying the mode used by the user agent to derive the resolution of the track. the value will be one of: "none" the track has the resolution offered by the camera, its driver or the os. "crop-and-scale" the track's resolution might be the result of the user agent using cropping or downscaling from a higher camera resolution. properties of shared screen tracks tracks containing video shared from a user's screen (regardless of whether the screen data comes from the entire screen or a portion of a screen, like a window or tab) are generally treated like video tracks, with the exception that they also support the following added settings: cursor a domstring which indicates whether or not...

performance.now() - Web APIs
the performance.now() method returns a domhighrestimestamp, measured in milliseconds. note: this feature is available in web workers. the returned value represents the time elapsed since the time origin. bear in mind the following points: in dedicated workers created from a window context, the value in the worker will be lower than performance.now() in the window who spawned that worker. it used to be the same as t0 of the main context, but this was changed. in shared or service workers, the value in the worker might be higher than that of the main context because that window can be created after those workers. it's important to keep in mind that to mitigate potential security threats such as spectre, browsers typically round the returned value by some amount in order to be less pred...
... 8781416 // 8781815 // 8782206 // ... // reduced time precision with `privacy.resistfingerprinting` enabled performance.now(); // 8865400 // 8866200 // 8866700 // ... in firefox, you can also enable privacy.resistfingerprinting — this changes the precision to 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger. starting with firefox 79, high resolution timers can be used if you cross-origin isolate your document using the cross-origin-opener-policy and cross-origin-embedder-policy headers: cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp these headers ensure a top-level document does not share a browsing context group with cross-origin documents. coop process-isolates your document and potential a...
...bedder-policy: require-corp these headers ensure a top-level document does not share a browsing context group with cross-origin documents. coop process-isolates your document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks. specifications specification status comment high resolution time level 2the definition of 'performance.now()' in that specification. recommendation stricter definitions of interfaces and types. high resolution timethe definition of 'performance.now()' in that specification. recommendation initial definition ...

Performance.timeOrigin - Web APIs
recommendation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... recommendation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... recommendation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

RTCRtpStreamStats - Web APIs
available to the device which is receiving the stream and is only available for video tracks. a fir packet is sent by the receiving end of the stream when it falls behind or has lost packets and is unable to continue decoding the stream; the sending end of the stream receives the fir packet and responds by sending a full frame instead of a delta frame, thereby letting the receiver "catch up." the higher this number is, the more often a problem of this nature arose, which can be a sign of network congestion or an overburdened receiving device. nackcount the number of times the receiver notified the sender that one or more rtp packets has been lost by sending a negative acknowledgement (nack, also called "generic nack") packet to the sender. this value is only available to the receiver. plico...
...sent a picture loss indiciation (pli) packet to the sender, indicating that it has lost some amount of encoded video data for one or more frames. only the receiver has this value, and it's only valid for video tracks. qpsum the sum of the quantization parameter (qp) values associated with every frame received to date on the video track described by this rtcrtpstreamstats object. in general, the higher this number is, the more heavily compressed the video track was. combined with rtcreceivedrtpstreamstats.framesdecoded or rtcsentrtpstreamstats.framesencoded, you can approximate the average qp over those frames, keeping in mind that codecs often vary the quantizer values even within frames. also keep in mind that the values of qp can vary from codec to codec, so this value is only potentially ...
...value is only potentially useful when compared against the same codec. slicount the number of times the receiver notified the sender that one or more consecutive (in scan order) encoded video macroblocks have been lost or corrupted; this notification is sent by the receiver to the sender using a slice loss indication (sli) packet. this is a fairly technical part of how codecs work and while the higher this value is, the more errors occurred in the stream, generally most of the time this value is only interesting to very intensively hardcore media developers. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats' in that specification. candidate recommendation initial definition. ...

ReadableStream.ReadableStream() - Web APIs
parameter passed to this method is a readablestreamdefaultcontroller or a readablebytestreamcontroller, depending on the value of the type property. this can be used by the developer to control the stream during set up. pull(controller) optional this method, also defined by the developer, will be called repeatedly when the stream's internal queue of chunks is not full, up until it reaches its high water mark. if pull() returns a promise, then it won't be called again until that promise fulfills; if the promise rejects, the stream will become errored. the controller parameter passed to this method is a readablestreamdefaultcontroller or a readablebytestreamcontroller, depending on the value of the type property. this can be used by the developer to control the stream as more chunks are fetc...
...allocatechunksize with a positive integer value to turn on the stream's auto-allocation feature. with this turned on, the stream implementation will automatically allocate an arraybuffer with a size of the given integer, and the consumer can also use a default reader. queuingstrategy optional an object that optionally defines a queuing strategy for the stream. this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before backpressure is applied. size(chunk) a method containing a parameter chunk — this indicates the size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrat...
...efore backpressure is applied. size(chunk) a method containing a parameter chunk — this indicates the size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. if no queuingstrategy is supplied, the default used is the same as a countqueuingstrategy with a high water mark of 1. return value an instance of the readablestream object. exceptions rangeerror the supplied type value is neither "bytes" nor undefined. examples in the following simple example, a custom readablestream is created using a constructor (see our simple random stream example for the full code). the start() function generates a random string of text every second and enque...

Using writable streams - Web APIs
if not, we suggest that you first read the streams concepts and usage overview and dedicated streams api concepts article, then come back. note: if you are looking for information about readable streams, try using readable streams instead. ...
...eam functionality in our demo works. constructing a writable stream to create a writable stream, we use the writablestream() constructor; the syntax looks complex at first, but actually isn’t too bad. the syntax skeleton looks like this: const stream = new writablestream({ start(controller) { }, write(chunk,controller) { }, close(controller) { }, abort(reason) { } }, { highwatermark, size() }); the constructor takes two objects as parameters. the first object is required, and creates a model in javascript of the underlying sink the data is being written to. the second object is optional, and allows you to specify a custom queueing strategy to use for your stream, which takes the form of an instance of bytelengthqueuingstrategy or countqueuingstrategy. the first ...
...am. it should do whatever is necessary to finalize writes to the underlying sink, and release access to it. abort(reason) — a method that will be called if the app signals that it wishes to abruptly close the stream and put it in an errored state. ...

WebGLRenderingContext.vertexAttribPointer() - Web APIs
array buffer. usually, your 3d geometry is already in a certain binary format, so you need to read the specification of that specific format to figure out the memory layout. however, if you are designing the format yourself, or your geometry is in text files (like wavefront .obj files) and must be converted into an arraybuffer at runtime, you have free choice on how to structure the memory. for highest performance, interleave the attributes and use the smallest data type that still accurately represents your geometry. the maximum number of vertex attributes depends on the graphics card, and you can call gl.getparameter(gl.max_vertex_attribs) to get this value. on high-end graphics cards, the maximum is 16, on lower-end graphics cards, the value will be lower. attribute index for each attr...
... application. however, these functions are great for debugging a webgl context without touching the application code. examples this example shows how to send your vertex attributes to the shader program. we use an imaginary data structure where the attributes of each vertex are stored interleaved with a length of 20 bytes per vertex: position: we need to store the x, y and z coordinates. for highest precision, we use 32-bit floats; in total this uses 12 bytes. normal vector: we need to store the x, y and z components of the normal vector, but since precision is not that important, we use 8-bit signed integers. for better performance, we align the data to 32 bits by also storing a fourth zero-valued component, bringing the total size to 4 bytes. also, we tell webgl to normalize the values...
...with node.js. then we could load the binary file and interpret it as an array buffer: const response = await fetch('assets/geometry.bin'); const buffer = await response.arraybuffer(); consume array buffer with webgl first, we create a new vertex buffer object (vbo) and supply it with our array...

Using textures in WebGL - Web APIs
p filtering and wrapping for the texture based on whether or not the image we download was a power of 2 in both dimensions or not. webgl1 can only use non power of 2 textures with filtering set to nearest or linear and it can not generate a mipmap for them. their wrapping mode must also be set to clamp_to_edge. on the other hand if the texture is a power of 2 in both dimensions then webgl can do higher quality filtering, it can use mipmap, and it can set the wrapping mode to repeat or mirrored_repeat. an example of a repeated texture is tiling an image of a few bricks to cover a brick wall. mipmapping and uv repeating can be disabled with texparameteri(). this will allow non-power-of-two (npot) textures at the expense of mipmapping, uv wrapping, uv tiling, and your control over how the devi...
...program also needs to be updated to use the textures instead of solid colors. the vertex shader we need to replace the vertex shader so that instead of fetching color data, it instead fetches the texture coordinate data. const vssource = ` attribute vec4 avertexposition; attribute vec2 atexturecoord; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying highp vec2 vtexturecoord; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; } `; the key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the vertex shader; this will indicate the location within the texture corresponding to the vertex. the ...
... * avertexposition; vtexturecoord = atexturecoord; } `; the key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the vertex shader; this will indicate the location within the texture corresponding to the vertex. the fragment shader the fragment shader likewise needs to be updated: const fssource = ` varying highp vec2 vtexturecoord; uniform sampler2d usampler; void main(void) { gl_fragcolor = texture2d(usampler, vtexturecoord); } `; instead of assigning a color value to the fragment's color, the fragment's color is computed by fetching the texel (that is, the pixel within the texture) based on the value of vtexturecoord which like the colors is interpolated bewteen vertices. attr...

Rendering and the WebXR frame animation callback - Web APIs
f what it's called, the unit of measurement applied is the hertz, or hz. a display that refreshes 60 times per second has a 60 hz refresh rate. that means that the maximum number of frames it can display in a second is 60. no matter how many frames per second you render beyond that, only 60 of them will make it to the screen in the course of a second. but not all displays run at 60 hz; nowadays, higher performance displays are beginning to use much higher refresh rates. 120 hz—or 120 frame per second—displays are increasingly common, for example. the browser always tries to refresh at the same rate as the display, which means that on some computers, your callback will be run a maximum of 60 times per second, while on others it might be called 90 or 120 times per second or even more, depen...
...oint within the framebuffer, we only need to clear a single framebuffer rather than cleaning it for each eye (or other viewpoints, if any) individually. next, the time elapsed since the previous frame was rendered is calculated by subtracting from the current time as specified by the currentframetime parameter the saved time at which the last frame was rendered, lastframetime. the result is a domhighrestimestamp value indicating the number of milliseconds that have elapsed since the last frame was rendered. we can use this value while drawing the scene to ensure we move everything the appopriate distance given the true elapsed time, rather than assuming that the callback will be fired at a consistent frame rate. this elapsed time is saved in the variable deltatime, and the value of lastframet...
... /* draw the scene */ } tick++; } this version of the frame callback maintains a tick counter. the frame is only rendered if tick is an odd value. this way, only every other frame gets rendered. you can similarly render every fourth frame using !(tick % 4), and so forth. matching your animation to the elapsed time the frame callback receives a time parameter for a good reason. this domhighrestimestamp value is a floating-point value indicating the time at which the frame was scheduled for rendering. because the execution of your callback is not going to happen at precise 1/60th of a second intervals—and, indeed, could happen at other rates if the user's display has a different framer ate—you can't rely on the simple fact that your code is running to assume that it's been 1/60th...

Window.requestAnimationFrame() - Web APIs
ser performs the next repaint. the number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per w3c recommendation. requestanimationframe() calls are paused in most browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life. the callback method is passed a single argument, a domhighrestimestamp, which indicates the current time (based on the number of milliseconds since time origin). when callbacks queued by requestanimationframe() begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload. this timestamp is a decimal number, in milliseconds, but with a minimal ...
...imestamp even though time has passed during the computation of every previous callback's workload. this timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs). ...
... return value a long integer value, the request id, that uniquely identifies the entry in the callback list. ...

ARIA annotations - Accessibility
on" and role="deletion" — semantically denote html elements whose contents represent an insertion to or deletion from the overall document. these are semantically equivalent to the html <ins> and <del> elements. note that these aren’t part of the new aria annotations features, but they are of central relevance. role="mark" — semantically denotes html elements containing text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. role="suggestion" — semantically denotes a single proposed change to an editable document. this should be used on an element that wraps a single insertion and deletion (see role="insertion" and role="deletion" above). role="comment" — semantically denotes a comment/reaction to some content on the page...
...ge of aria-description on an element to provide a description that can’t be gotten from the element’s text alone. ...
... <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> if the descriptive text does appear in the ui, you can link the description to the widget using aria-describedby, like so: <p id="fruit-desc">choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week.</p> <section aria-describedby="fruit-desc"> <form> <ul> <li><label>apple: <input type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value="banana"></label></li> </ul> ...

Web Accessibility: Understanding Colors and Luminance - Accessibility
ones, and vice versa. this is due to the physiological ways our eye are built. this affects the ability of a user to read text against a background. there's (at least) two kinds of adaptation that take place: local adaptation, and adaptation to an ambient environment. local adaptation takes place right on the "page" a reader is looking at. for example, if you have blue text within a gray "highlighted" area, your eyes will perceive that same blue text with a gray highlight differently if it is in a black div, or a white one. this is called local adaptation. this difference in the ability to perceive the text is affected even though the ambient lighting of the room does not change. the implication is that web developers who seek to improve legibility of text against a background can...
...the color pink. pink is considered a desaturated red. saturation and luminance there is a loss of saturation at the extremes of luminance, at the extremes of black and white. nasa's article, luminance contrast in color graphics, in the section titled, "the effect of luminance on saturation", points out that there is a loss of saturation at low luminances. and also, "..the loss of saturation at high luminances--the colors converge on white." the special case of "red" not all colors ("hue") are processed the same way by our brains. human physiology and psychology are affected by the color "red" generally speaking, in ways different from that of other colors. we respond physiologically as well as psychologically to colors. for example, it has been demonstrated that some colors are more lik...
...d gamuts (both rgb and cmyk), and its given rgb value is a poor approximation only." saturated red flashing: in addition to a red environment affecting the cognitive function of those with traumatic brain injury, color in the red spectrum wavelength requires special attention and tests. dr. gregg vanderheiden, when testing the photosensitive epilepsy analysis tool, noted seizure rates were much higher than expected. they found that we are much more sensitive to saturated red flashing. (see the video, the photosensitive epilepsy analysis tool) measuring color & luminance methods that measures color exploring the rgb color space further, as it is the color space used by the data type <color>, note that there are actually multiple "versions" of the rgb color space, such as srgb, scrgb, an...

::-webkit-meter-even-less-good-value - CSS: Cascading Style Sheets
syntax ::-webkit-meter-even-less-good-value specifications not part of any standard. ...
... syntax ::-webkit-meter-even-less-good-value specifications not part of any standard. ...
... syntax ::-webkit-meter-even-less-good-value specifications not part of any standard. ...

prefers-contrast - CSS: Cascading Style Sheets
less indicates that user has notified the system that they prefer an interface that has a lower level of contrast. ...
... less indicates that user has notified the system that they prefer an interface that has a lower level of contrast. ...
... of contrast. user preferences various operating systems do support such preferences and user agents are likely to rely on the settings provided by the operating system. examples this example has an annoying low contrast by default. html <div class="contrast">low contrast box</div> css .contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: high) { .contrast { outline: 2px solid black; } } result specifications specification status comment media queries level 5the definition of 'prefers-contrast' in that specification. editor's draft initial definition. ...

Ordering Flex Items - CSS: Cascading Style Sheets
follow the visual order and not the source order, making it behave differently to other browsers. this has now been fixed. you should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so. in the live example below i have added a focus style in order that as you tab from link to link you can see which is highlighted. if you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source. in the same way that changing the value of flex-direction does not change the order in which items are navigated to, changing this value does not change paint order. it is a visual reversal of the items only. the order property in addition ...
...becomes full width at the top of the layout, with the other items displaying below it. the items are displayed in what is described in the specification as order-modified document order. the value of the order property is taken into account before the items are displayed. order also changes the paint order of the items; items with a lower value for order will be painted first and those with a higher value for order painted afterwards. the order property and accessibility use of the order property has exactly the same implications for accessibility as changing the direction with flex-direction. using order changes the order in which items are painted, and the order in which they appear visually. it does not change the sequential navigation order of the items. therefore if a user is tabbin...
...focus use cases for order there are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. used carefully the order property can allow for some useful common patterns to be easily implemented. you might have a design, perhaps a card that will display a news item. the heading of the news item is the key thing to highlight and would be the element that a user might jump to if they were tabbing between headings to find content they wanted to read. the card also has a date; the finished design we want to create is something like this. visually the date appears above the heading, in the source. however, if the card was read out by a screen reader i would prefer that the title was announced first and then the p...

Microsoft CSS extensions - CSS: Cascading Style Sheets
ote: these properties will only work in microsoft applications, and are not on a standards track. ...
...tent-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms-high-contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wr...
...nap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
e currentcolor instead. ...
...ad. ...
...yperlinktext -moz-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communicationstext -moz-win-mediatext -moz-nativehyperlinktext display -moz-box -moz-inline-block -moz-in...

<length> - CSS: Cascading Style Sheets
vmax equal to the larger of vw and vh. absolute length units absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. this is done by anchoring one of the units to a physical unit, and then defining the others relative to it. the anchor is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers. for low-dpi devices, the unit px represents the physical reference pixel; other units are defined relative to it. thus, 1in is defined as 96px, which equals 72pt. the consequence of this definition is that on such devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) don't necessary match the size of the physical unit with the s...
...ices, such as printers. for low-dpi devices, the unit px represents the physical reference pixel; other units are defined relative to it. thus, 1in is defined as 96px, which equals 72pt. the consequence of this definition is that on such devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) don't necessary match the size of the physical unit with the same name. for high-dpi devices, inches (in), centimeters (cm), and millimeters (mm) are the same as their physical counterparts. therefore, the px unit is defined relative to them (1/96 of 1 inch). note: many users increase their user agent's default font size to make text more legible. absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings. for this re...
... users increase their user agent's default font size to make text more legible. absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings. for this reason, prefer relative lengths (such as em or rem) when setting font-size. px one pixel. for screen displays, it traditionally represents one device pixel (dot). however, for printers and high-resolution screens, one css pixel implies multiple device pixels. 1px = 1/96th of 1in. cm one centimeter. 1cm = 96px/2.54. mm one millimeter. 1mm = 1/10th of 1cm. q one quarter of a millimeter. 1q = 1/40th of 1cm. in one inch. 1in = 2.54cm = 96px. pc one pica. 1pc = 12pt = 1/6th of 1in. pt one point. 1pt = 1/72nd of 1in. mozmm , removed in firefox 59 an experimental unit that att...

paint() - CSS: Cascading Style Sheets
custom properties are accessible to the paintwor...
...custom properties are accessible to the paintworklet. specifications specification status comment css painting api level 1the definition of ...
...custom properties are accessible to the paintworklet. ...

Audio and video manipulation - Developer guides
er('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code. common audio filters these are some of the common types of audio filter you can apply: low pass: allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. ...
... peaking: allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies. notch: allows all frequencies through, except for a set of frequencies. ...
... the cutoff frequency to pass through and attenuates frequencies below the cutoff. band pass: allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. low shelf: allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. high shelf: allows all frequencies through, but adds a boost (or attenuation) to the higher frequencies. peaking: allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies. notch: allows all frequencies through, except for a set of frequencies. allpass: allows all frequencies through, but changes the phase relationship between the various frequencies. note: see biquadfilternode for more information. convolutions and impulses it's also possibl...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
tutorial to learn more. svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. svg commands are formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image. webgl the web graphics library is an opengl es-based api for drawing high-performance 2d and 3d graphics on the web. see our webgl tutorial to find out more. how to describe a color in order to represent a color in css, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. this is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or ...
...f you find something you like better. for example, if we don't like the proposed greenish-blue color, we can click the triad color scheme icon, which presents us with the following: that greyish blue in the top-right looks pretty good. clicking on it, we find that it's #556e8d. that would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site: now we have our base color and our accent. on top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. the colors can then be exported in a number of formats so you can make use of them. once you have these colors, you will probably still need to select appropriate neutral colors. common des...
... enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. it's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. if the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at. color, backgrounds, contrast, and printing what looks good on screen may look very different on paper. in addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. most browsers, by default, remov...

HTML attribute: rel - HTML: Hypertext Markup Language
e. alternate indicates an alternate representation of the current document. valid for link, a, and area, the meaning depends on the values of the other attributes. with the stylesheet keyword on a <link>, it creates an alternate stylesheet. <!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="highcontrast.css" title="high contrast"> with an hreflang attribute that differs from the document language, it indicates a translation. with the type attribute, it indicates that the referenced document is the same content in a different format. for example, with type="application/rss+xml" it creates a hyperlink referencing a syndication feed. <link rel="alternate" type="application/atom+xm...
...urrent document. the tag value denotes that the link refers to a document describing a tag applying to the document on which it is locatated. this link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the tag value of the rel attribute is for a single document. ...
...ed. this link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the tag value of the rel attribute is for a single document. ...

<img>: The Image Embed element - HTML: Hypertext Markup Language
tent. auto default: no preference for the decoding mode. the browser decides what is best for the user. height the intrinsic height of the image, in pixels. must be an integer without a unit. importance indicates the relative download importance of the resource. priority hints allow the values: auto: no preference. the browser may use its own heuristics to prioritize the image. high: the image is of high priority. low: the image is of low priority. intrinsicsize 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 ...
...ns. sizes one or more strings separated by commas, indicating a set of source sizes. each source size consists of: a media condition. this must be omitted for the last item in the list. a source size value. media conditions describe properties of the viewport, not of the image. for example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px. source size values specify the intended display size of the image. user agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. the selected source size affects the intrinsic size of the image (the image’s display size if no css styling is applied). if the srcset attribute is ...
...<img> tag inside the <a>. you should made the alternative text describe the resource the link is pointing to, as if you were using a text link instead. <a href="https://developer.mozilla.org"> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="visit the mdn site"> </a> using the srcset attribute in this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices. the image referenced in the src attribute is counted as a 1x candidate in user agents that support srcset. <img src="https://udn.realityripple.com/samples/61/869e27c81e.png" alt="mdn logo" srcset="/static/external/6c/6c98485e5d8acac9fecd7824ce30c9587f0d8548b946ee9fb1293d2eccdb6cf...

<keygen> - HTML: Hypertext Markup Language
and ec key generation. the keyparams attribute is required for dsa and ec key generation and ignored for rsa key generation. pqg is a synonym for keyparams. that is, you may specify keyparams="pqg-params" or pqg="pqg-params". for rsa keys, the keyparams parameter is not used (ignored if present). the user may be given a choice of rsa key strengths. currently, the user is given a choice between "high" strength (2048 bits) and "medium" strength (1024 bits). for dsa keys, the keyparams parameter specifies the dsa pqg parameters which are to be used in the keygen process. the value of the pqg parameter is the the base64 encoded, der encoded dss-parms as specified in ietf rfc 3279. the user may be given a choice of dsa key sizes, allowing the user to choose one of the sizes defined in the dsa st...
... specifies the name of the elliptic curve on which the key will be generated. it is normally a string from the table in nskeygenhandler.cpp. (note that only a subset of the curves named there may actually be supported in any particular browser.) if the keyparams parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "secp384r1" for high, and the curve named "secp256r1" for medium keys. (note: choice of the number of key strengths, default values for each strength, and the ui by which the user is offered a choice, are outside of the scope of this specification.) the <keygen> element is only valid within an html form. it will cause some sort of selection to be presented to the user for...
... the user is offered a choice, are outside of the scope of this specification.) the <keygen> element is only valid within an html form. it will cause some sort of selection to be presented to the user for selecting key size. the ui for the selection may be a menu, radio buttons, or possibly something else. the browser presents several possible key strengths. currently, two strengths are offered, high and medium. if the user's browser is configured to support cryptographic hardware (e.g. "smart cards") the user may also be given a choice of where to generate the key, i.e., in a smart card or in software and stored on disk. when the submit button is pressed, a key pair of the selected size is generated. the private key is encrypted and stored in the local key database. publickeyandchallenge :...

Details of the object model - JavaScript
in javascript, you add a prototypical instance as the value of the prototype property of the constructor function, then override the prototype.constructor to the constructor function. you can do so at any time after you define the constructor. in java, you specify the superclass within the class definition. you cannot change the superclass outside the class definition.
... and instances. however, in talking about javascript, "instance" can be used informally to mean an object created using a particular constructor function. so, in this example, you could informally say that jane is an instance of engineer. similarly, although the terms parent, child, ancestor, and descendant do not have formal meanings in javascript; you can use them informally to refer to objects higher or lower in the prototype chain. creating objects with simple definitions object hierarchy the following hierarchy is created using the code on the right side. individual objects = jim, sally, mark, fred, jane, etc. "instances" created from constructor var jim = new employee; // parentheses can be omitted if the // constructor takes no arguments. // jim.name is '' // jim.dept is 'gene...
...ted property such as name. if you want to specify an initial value for inherited properties in javascript, you need to add more code to the constructor function. so far, the constructor function has created a generic object and then specified local properties and values for the new object. you can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. the following figure shows these new definitions. specifying properties in a constructor, take 2 let's look at one of these definitions in detail. here's the new definition for the engineer constructor: function engineer(name, projs, mach) { this.base = workerbee; this.base(name, 'engineering', projs); this.machine = mach || ''; } suppose you create a new en...

Math.clz32() - JavaScript
eros) math.clz32(b); // 0 (this is equal to how many leading one's there are in a) using this logic, a clon function can be created as follows: var clz = math.clz32; function clon(integer){ return clz(~integer); } further, this technique could be extended to create jumpless "count trailing zeros" and "count trailing ones" functions as seen below. the ctrz function below fills in all the high bits with the lowest filled bit, then negates the bits to erase all higher set bits so that clz can then be used. var clz = math.clz32; function ctrz(integer){ // count trailing zeros // 1. fill in all the higher bits after the first one integer |= integer << 16; integer |= integer << 8; integer |= integer << 4; integer |= integer << 2; integer |= integer << 1; // 2. ...
.../ 2. now, inversing the bits reveals the lowest bits return 32 - clz(~integer) |0; // `|0` ensures integer coercion } function ctron(integer){ // count trailing ones // no shift-filling-in-with-ones operator is available in // javascript, so the below code is the fastest return ctrz(~integer); /* alternate implementation for demonstrational purposes: // 1. erase all the higher bits after the first zero integer &= (integer << 16) | 0xffff; integer &= (integer << 8 ) | 0x00ff; integer &= (integer << 4 ) | 0x000f; integer &= (integer << 2 ) | 0x0003; integer &= (integer << 1 ) | 0x0001; // 2. now, inversing the bits reveals the lowest zeros return 32 - clon(~integer) |0; */ } make these helper functions into asm.js ...
...hese helper functions into asm.js module; then, you have a true performance masterpiece. situations like these are exactly what asm.js was designed for. var counttrailsmethods = (function(stdlib, foreign, heap) { "use asm"; var clz = stdlib.math.clz32; function ctrz(integer) { // count trailing zeros integer = integer | 0; // coerce to an integer // 1. fill in all the higher bits after the first one // asmjs for some reason does not allow ^=,&=, or |= integer = integer | (integer << 16); integer = integer | (integer << 8); integer = integer | (integer << 4); integer = integer | (integer << 2); integer = integer | (integer << 1); // 2. now, inversing the bits reveals the lowest bits return 32 - clz(~int...

encodeURIComponent() - JavaScript
this will enc...
...this will encode "&" symbols that may ...
...this will encode "&" symbols that may inadvertently be generated during data entry for special html entities or o...

Understanding latency - Web Performance
this article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it. ...
...o get back to that user. on a first request, for the first 14kb bytes, latency is longer because it includes a dns lookup, a tcp handshake, the secure tls negotiation. subsequent requests will have less latency because the connection to the server is already set. latency describes the amount of delay on a network or internet connection. low latency implies that there are no or almost no delays. high latency implies that there are many delays. one of the main aims of improving performance is to reduce latency. the latency associated with a single asset, especially a basic html page, may seem trivial. but websites generally involve multiple requests: the html includes requests for multiple css, scripts, and media files. the greater the number and size of these requests, the greater the impac...
...ncy implies that there are many delays. one of the main aims of improving performance is to reduce latency. the latency associated with a single asset, especially a basic html page, may seem trivial. but websites generally involve multiple requests: the html includes requests for multiple css, scripts, and media files. the greater the number and size of these requests, the greater the impact of high latency on user experience. on a connection with low latency, requested resources will appear almost immediately. on a connection with high latency, there will be a discernible delay between the time that a request is sent, and the resources are returned. we can determine the amount of latency by measuring the speed with which the data moves from one network location to another. latency can be ...

Mobile first - Progressive web apps (PWAs)
this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. this guide looks at a few useful techniques inside the mobile first umbrella. ...
...desktop/wider screen styling first. this way, mobile devices don't have to load assets and other information twice. if you are using mechanisms like feature detection and matchmedia to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all browsers will need first, then progressively enhance browsers higher up the food chain. note: starting with very little and working up as the need arises usually makes more sense than starting with everything and then covering up things if they aren't needed! mobile constraints we have already mentioned the fact that mobiles generally have less memory, processing power and bandwidth than other devices (although bear in mind that smart tvs are also generall...
... button work, all you have to do is put a <button> on the page with an id of install-btn. magic! selectively include javascript libraries according to media query and feature tests (require.js is built in, which is helpful and very easy to use.) html structure for this example app, the html structure is going to be very simple: i am just including a heading, navigation menu and filler text to highlight the fact that articles can get very long on narrow screen devices. our html looks like this: <article> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">articles</a></li> <li><a href="#">videos</a></li> <li><a href="#">work</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> <header> <a id="top" ...

d - SVG: Scalable Vector Graphics
/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- cubic bézier curve with absolute coordinates --> <path fill="none" stroke="red" d="m 10,90 c 30,90 25,10 50,10 s 70,90 90,90" /> <!-- cubic bézier curve with relative coordinates --> <path fill="none" stroke="red" d="m 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" /> <!-- highlight the curve vertex and control points --> <g id="controlpoints"> <!-- first cubic command control points --> <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> <circle cx="30" cy="90" r="1.5"/> <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> <circle cx="25" cy="10" r="1.5"/> <!-- second smooth command control points (the first one is implicit) ...
...formulae: po′ = pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- quadratic bézier curve with implicit repetition --> <path fill="none" stroke="red" d="m 10,50 q 25,25 40,50 t 30,0 30,0 30,0 30,0 30,0" /> <!-- highlight the curve vertex and control points --> <g> <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> <circle cx="25" cy="25" r="1.5" /> <!-- curve vertex points --> <circle cx="10" cy="50" r="1.5"/> <circle cx="40" cy="50" r="1.5"/> <g id="smoothquadraticdown"> <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="...
...rcle cx="85" cy="25" r="1.5" fill="lightgrey" /> <circle cx="100" cy="50" r="1.5" /> </g> <use xlink:href="#smoothquadraticdown" x="60" /> <use xlink:href="#smoothquadraticup" x="60" /> <use xlink:href="#smoothquadraticdown" x="120" /> </g> </svg> elliptical arc curve elliptical arc curves are curves defined as a portion of an ellipse. it is sometimes easier to draw highly regular curves with an elliptical arc than with a bézier curve. command parameters notes a (rx ry angle large-arc-flag sweep-flag x y)+ draw an arc curve from the current point to the coordinate x,y. the center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two radii ...

WebAssembly Concepts - WebAssembly
vascript applications can be prohibitive. mobile and other resource-constrained platforms can further amplify these performance bottlenecks. webassembly is a different language from javascript, but it is not intended as a replacement. instead, it is designed to complement and work alongside javascript, allowing web developers to take advantage of both languages' strong points: javascript is a high-level language, flexible and expressive enough to write web applications. it has many advantages — it is dynamically typed, requires no compile step, and has a huge ecosystem that provides powerful frameworks, libraries, and other tools. webassembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level me...
...ed, requires no compile step, and has a huge ecosystem that provides powerful frameworks, libraries, and other tools. webassembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level memory models such as c++ and rust with a compilation target so that they can run on the web. (note that webassembly has the high-level goal of supporting languages with garbage-collected memory models in the future.) with the advent of webassembly appearing in browsers, the virtual machine that we talked about earlier will now load and run two types of code — javascript and webassembly. the different code types can call each other as required — the webassembly javascript api wraps exported webassembly code with java...
...al javascript functions. arbitrary javascript functions can also be synchronously called by webassembly code by passing in those javascript functions as the imports to a webassembly instance. since javascript has complete control over how webassembly code is downloaded, compiled and run, javascript developers could even think of webassembly as just a javascript feature for efficiently generating high-performance functions. in the future, webassembly modules will be loadable just like es2015 modules (using <script type='module'>), meaning that javascript will be able to fetch, compile, and import a webassembly module as easily as an es2015 module. how do i use webassembly in my app? above we talked about the raw primitives that webassembly adds to the web platform: a binary format for code ...

Understanding WebAssembly text format - WebAssembly
$i. finally, we use call_indirect to call a function from the table — it implicitly pops the value of $i off the stack. the net result of this is that the callbyindex function invokes the $i’th function in the table. you could also declare the call_indirect parameter explicitly during the command call instead of before it, like this: (call_indirect (type $return_i32) (local.get $i)) in a higher level, more expressive language like javascript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. the pseudo code would look something like tbl[i](). so, back to the typechecking. since webassembly is typechecked, and the funcref can be potentially any function signature, we have to supply the presumed signature of the callee at the c...
...e a shared memory using the shared keyword, like this: (memory 1 2 shared) unlike unshared memories, shared memories must specify a "maximum" size, in both the javascript api constructor and wasm text format. note: you can find a lot more details in the threading proposal for webassembly. ...
...accesses a number of new wasm instructions have been added that can be used to implement higher level features like mutexes, condition variables, etc. you can find them listed here. these instructions are allowed on non-shared memories as of firefox 80. note: the emscripten pthreads support page shows how to take advantage of this new functionality from emscripten. summary this finishes our high-level tour of the major components of the webassembly text format and how they get reflected in the webassembly js api. ...

Content Scripts - Archive of obsolete content
gets access to web content into separate scripts that are called content scripts. this page describes how to develop and implement content scripts. content scripts can be one of the more confusing aspects of working with the sdk, but you're very likely to have to use them. ...
...taches a content script to the current tab using the tabs module. in this case the content script is passed in as a string. the content script simply replaces the content of the page: // main.js var tabs = require("sdk/tabs"); var contentscriptstring = 'document.body.innerhtml = "<h1>this page has been eaten</h1>";' tabs.activetab.attach({ contentscript: contentscriptstring }); the following high-level sdk modules can use content scripts to modify web pages: page-mod: enables you to attach content scripts to web pages that match a specific url pattern. tabs: exports a tab object for working with a browser tab. the tab object includes an attach() function to attach a content script to the tab. page-worker: lets you retrieve a web page without displaying it. you can attach content scri...

Low-Level APIs - Archive of obsolete content
modules in this section implement low-level apis. these modules fall roughly into three categories: fundamental utilities such as collection. many add-ons are likely to want to use modules from this category. building blocks for higher level modules, such as events and worker. you're more likely to use these if you are building your own modules that implement new apis, thus extending the sdk itself. privileged modules that expose powerful low-level capabilities such as window/utils and net/xhr. ...
...implement new apis, thus extending the sdk itself. privileged modules that expose powerful low-level capabilities such as window/utils and net/xhr. you can use these modules in your add-on if you need to, but should be aware that the cost of privileged access is the need to take more elaborate security precautions. in many cases these modules have simpler, more restricted analogs among the "high-level apis" (for example, windows or request). these modules are still in active development, and we expect to make incompatible changes to them in future releases. /loader create commonjs module loaders. chrome the chrome module gives an add-on sdk add-on access to the components object, which in turn gives it access to a large set of privileged low-level firefox apis. console/pla...

cfx - Archive of obsolete content
-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb. -o, --overload-modules in early versions of the sdk, the sdk modules used by an add-on were themselves included in the add-on. the sdk modules now ship as part of firefox. from firefox 21 onwards, sdk add-ons built with sdk 1.14 or higher will use the sdk modules that are built into firefox, even if the add-on includes its own copies of the sdk modules. use this flag to reverse that behavior: if this flag is set and the add-on includes its own copies of the sdk modules, then the add-on will use the sdk modules in the add-on, not the ones built into firefox. this flag is particularly useful for sdk developers or people ...
...-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb. -o, --overload-modules in early versions of the sdk, the sdk modules used by an add-on were themselves included in the add-on. the sdk modules now ship as part of firefox. from firefox 21 onwards, sdk add-ons built with sdk 1.14 or higher will use the sdk modules that are built into firefox, even if the add-on includes its own copies of the sdk modules. use this flag to reverse that behavior: if this flag is set and the add-on includes its own copies of the sdk modules, then the add-on will use the sdk modules in the add-on, not the ones built into firefox. this flag is particularly useful for sdk developers or people ...

Developing for Firefox Mobile - Archive of obsolete content
he time being it's much easier to use the technique described below. setting up the environment first you'll need an android device capable of running the native version of firefox mobile. then: install the nightly build of the native version of firefox mobile on the device. enable usb debugging on the device (step 2 of this link only) on the development machine: install version 1.5 or higher of the add-on sdk install the correct version of the android sdk for your device using the android sdk, install the android platform tools next, attach the device to the development machine via usb. now open up a command shell. android platform tools will have installed adb in the "platform-tools" directory under the directory in which you installed the android sdk. make sure the "platform...
...vice: adb push my-addon.xpi /mnt/sdcard/ then open firefox mobile and type this into the address bar: file:///mnt/sdcard/my-addon.xpi the browser should open the xpi and ask if you want to install it. afterwards you can delete it using adb as follows: adb shell cd /mnt/sdcard rm my-addon.xpi module compatibility modules not supported in firefox mobile are marked in the tables below. ...

StringView - Archive of obsolete content
the aims of this library are: to create a c-like interface for strings (i.e., an array of character codes — an arraybufferview in javascript) based upon the javascript arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.prototype to create a collection of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immutable javascript strings to work with unicode encodings other than javascript's default utf-16 domstrings introduction as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when...
...n of 1-6 uint8 elements for utf-8, 1-2 uint16 elements for utf-16, 1 uint32 element for ucs4, 1 uint8 element for ascii, or something else. byte a collection of 8 bits. null codepoint the character whose codepoint is equal to 0 ('\0'). notes when you include the script stringview.js into a page, no variables other than stringview itself will be added to the global scope. stringview is a highly extensible library, that anyone can extend by adding methods to the object stringview.prototype. for example, imagine you want to create a method similar to string.replace(), but for stringview objects. maybe you would like to solve a situation like the following: var omystringview = new stringview("hello,&nbsp;strange&nbsp;people!"); // utf-8 var omyregexp = new clikeregexp("&nbsp;", "g");...

Enhanced Extension Installation - Archive of obsolete content
r difference is that since there is now only a single instance of this file in the profile location, the file paths are now absolute. <profile>/extensions.rdf -visible items this file contains non-startup and compatibility metadata for extensions that are visible to the user, whether they are enabled or disabled. if an extension is installed at two different install locations, the one with the higher importance is what is shown in this file. this replaces the individual extensions.rdf files at the old locations. <profile>/extensions-startup.manifest -all items this file contains a tab delimited set of lines, one per item. this is a list of all installed items, disabled or not, keyed first by install location name, then by guid. the following information is stored for each entry: the ...
...m the datasource. uninstall and staggered install locations if item foo 1.1 is installed in the user's profile directory install location, and foo 1.0 is installed in the application directory install location, when the user uninstalls foo 1.1, foo 1.0 should become visible due to install location ordering. this allows the user to shield items installed at lower locations by installing items at higher locations. when an item is uninstalled, the extension manager checks the startup cache to see if there is another copy of the item installed at a lower install location. if there is one, then the item is uninstalled and an entry is added to the pending operations list that indicates the item at the lower install location needs to be installed. the install operation finalization process loops ...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
e that can vary during a process. listing 29: check the value of variable foo alert(foo); dump in a windows environment, you can launch firefox with the -console argument, which opens a dump console. using the dump method, you can send text to the dump console (listing 30). the text output being sent to the console does not suspend any other processes, and this is most useful when there’s a high volume of messages being output. in order to use the dump method most effectively, you’ll need to follow the recommendations in “setting up your development environment”. note that in a windows environment, non-latin text sent to the dump console will get corrupted. listing 30: list the properties of obj for (var i in obj) { dump(i + " : " + obj[i] + "\n"); } error console the nslcons...
...on the xpcom interface are available from the mozilla cross-reference7, which includes source code with full-text searching available. 1 - in windows xp, you can use the “compress folder” command to create a zip archive, but i recommend installing a tool like 7-zip that lets you specify the compression ratio. it’s ok to have a low compression ratio when you are creating the jar file, and a high compression ratio when creating the xpi file. 2 - an event generated by an element “bubbles up” to the root. 3 - see code snippets: file i/o-mdc (http://developer.mozilla.org/en/docs..._special_files) for techniques on getting special folders, like the profile folder. 4 - see session store api-mdc (http://developer.mozilla.org/en/session_store_api) 5 - json is short for javascript object ...

Appendix F: Monitoring DOM changes - Archive of obsolete content
dom mutation events were introduced to html several years ago in order to allow web applications to monitor changes to the dom by other scripts. unfortunately, adding listeners for any of these events to a document has a highly deleterious effect on performance, an effect which is not mitigated in the slightest by later removing those listeners. for this reason, it is best to avoid using mutation listeners at all costs, especially from extensions. this document lays out some alternatives which do not have such severe performance impacts. mutation observers mutation observers are the more efficient, w3c speced replacement for the highly inefficient mutation events. their major advantage is in their performance and their ease of use, especially when combined with simple libraries. their main ...
... }; } now, whenever doawesomedomstuff() is called, the original function will be called, followed by your own doawesomerdomstuff() function, which can then further modify the dom as needed. variations on this method include modifying the arguments passed to the wrapped function, modifying its return value, and making changes both before and after the original method is called. this scheme is highly flexible and can be made to work under most circumstances. css animation events this technique, which works on firefox 5+, has some particular advantages. because it is based on css, it can be keyed to match new elements of any arbitrary css selector. and because it is css-based, and is triggered when css is being applied anyway, it does not slow dom mutations. the technique was adapted from ...

Introduction - Archive of obsolete content
» welcome to the xul school tutorial! this tutorial is meant to be the stepping stone that will turn you into a professional firefox extension developer in no time. we have poured years of xul experience into it, providing many solutions for problems extension developers commonly run into. xul school was created by appcoast (formerly glaxstar), one of the few companies dedicated to building high-quality firefox extensions. a team of over a dozen xul developers conformed glaxstar at the time this tutorial was created, and the combined experiences of years creating firefox extensions are reflected here. with this tutorial you'll learn how to develop firefox extensions. you'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to ...
... at their user agent string, which should include the gecko version. gecko versions are somewhat independent from firefox versions, and you can see a mapping of firefox versions and gecko versions at the gecko page. the user agent string for firefox at the time of this writing (in us english, mac os x) is: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:25.0.1) gecko/20100101 firefox/25.0.1 the highlighted section is the gecko version: 25.0.1. you can read and copy the user agent string of any firefox window, choosing "help > troubleshooting information" from the main menu. on to the tutorial with the basic concepts out of the way, we can now get right into extension development. you are probably still wondering what exactly is an extension, what can it do, and how can you make them. well,...

User Notifications and Alerts - Archive of obsolete content
xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.getstring("xulschoolhello.acceptbutton.accesskey"); acceptbutton.popup = null; acceptbutton.callback = function() { that.acceptrequest(); }; // similarly for decline button. nb.appendnotification( message, "xulschoolhello-friend-notification", "chrome://xulschoolhello/skin/friend-notification.png", nb.priority_info_high, [ acceptbutton, declinebutton ]); all browser tabs have a notification box by default, so you don't need to do any overlaying. the notificationbox elements can be obtained from the gbrowser object. in this case we don't pass any arguments to getnotificationbox so that we get the notification box that corresponds to the tab currently on display. the appendnotification method takes the message,...
... corresponds to the tab currently on display. the appendnotification method takes the message, id, image (32x32), level and buttons. the level argument determines the "strength" of the message, indicated by its background color when it is displayed. you should look for the level that better fits your message, and use the lowest applicable level, to prevent the user from getting used to dismissing high-level notifications. the buttons are represented by simple js data objects. this is all explained in detail in the notificationbox page. notification boxes are designed to be easily dismissed. all notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked. also, clicking on any of your custom buttons will cau...

Index of archived content - Archive of obsolete content
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 working with events xul migration guide high-level apis addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request ...
... textual data remote xul remote debugging rsyncing the cvs repository running windows debug builds downloaded from tinderbox sxsw 2007 presentations safe browsing safe browsing: design documentation safely loading uris same origin policy for xbl space manager detailed design space manager high level design standalone xpcom standard makefile header static analysis for windows code under linux stress testing string quick reference string rosetta stone structure of an installable bundle supporting per-window private browsing supporting private browsing mode table cellmap table cel...

MMgc - Archive of obsolete content
e positive can be ok. that doesn't mean we shouldn't worry about it at all, but often conservative gc suffices. it is possible that a future version of mmgc might do exact marking. this would be needed for a generational collector. deferred reference counting (drc) mmgc uses deferred reference counting (drc). drc is a scheme for getting more immediate reclamation of objects, while still achieving high performance and getting the other benefits of garbage collection. classic reference counting previous versions of the flash player, up to flash player 7, used reference counting to track object lifetimes. class object { public: object() { refcount = 0; } void addref() { refcount++; } void release() { if (!--refcount) delete this; } int refcount; } reference counting is a kind of au...
... reclaim them. the problem with going from reference counting to pure mark/sweep garbage collection is that a lot of time may be spent in the garbage collector. this time will pause the entire application, and give the impression of poor performance. even with an incremental collector that doesn't have big pauses, a gc sweep only kicks in every so often, so memory usage can grow very quickly to a high peak before the gc collects unused objects. so, some kind of reference counting is still attractive to lower the amount of work the gc has to do, and to get more immediacy on memory reclamation. however, reference counting is also slow because the reference counts need to be constantly maintained. so, it's attractive to find some form of reference counting that doesn't require maintaining referen...

JavaScript Client API - Archive of obsolete content
ntified by a unique id (unique among all records in the store) called guid. depending of what type of data you're working with, you might already have guids built into your data that you can make use of (note that guids must be allowed to change and should be url friendly). if not, you may have to invent your own mapping from data objects to guids as long as it's consistent. ...
...ts you listen for is entirely up to you. you can find out more about registering as an observer here: [link]. the score the '''score''' is stored in this.score, a variable defined by the base tracker class. set your score by assigning a value to this.score. the score number is used by the scheduler to decide when your engine will be synced. setting it to zero means "i have no need to sync". the higher you set this number, the more urgently the scheduler treats your request. setting it to 100 means "sync me immediately". it's up to you to figure out the best way to assign a score based on the current state of whatever data type you're tracking. your tracker score is automatically reset to zero after each time your engine syncs. the changed guid list the base class maintains a list of guids ...

jspage - Archive of obsolete content
se:function(){new cookie(this.key,$merge(this.options,{duration:-1})).write("");return this;}});cookie.write=function(b,c,a){return new cookie(b,a).write(c); };cookie.read=function(a){return new cookie(a).read();};cookie.dispose=function(b,a){return new cookie(b,a).dispose();};var swiff=new class({implements:[options],options:{id:null,height:1,width:1,container:null,properties:{},params:{quality:"high",allowscriptaccess:"always",wmode:"transparent",swliveconnect:true},callbacks:{},vars:{}},toelement:function(){return this.object; },initialize:function(l,m){this.instance="swiff_"+$time();this.setoptions(m);m=this.options;var b=this.id=m.id||this.instance;var a=document.id(m.container); swiff.callbacks[this.instance]={};var e=m.params,g=m.vars,f=m.callbacks;var h=$extend({height:m.height,width:m...
...ction(c){var e=this.get("tween"),d="opacity",a; c=$pick(c,"toggle");switch(c){case"in":e.start(d,1);break;case"out":e.start(d,0);break;case"show":e.set(d,1);break;case"hide":e.set(d,0);break;case"toggle":var b=this.retrieve("fade:flag",this.get("opacity")==1); e.start(d,(b)?0:1);this.store("fade:flag",!b);a=true;break;default:e.start(d,arguments);}if(!a){this.eliminate("fade:flag");}return this;},highlight:function(c,a){if(!a){a=this.retrieve("highlight:original",this.getstyle("background-color")); a=(a=="transparent")?"#fff":a;}var b=this.get("tween");b.start("background-color",c||"#ffff88",a).chain(function(){this.setstyle("background-color",this.retrieve("highlight:original")); b.callchain();}.bind(this));return this;}});fx.morph=new class({extends:fx.css,initialize:function(b,a){this.eleme...

Tamarin build documentation - Archive of obsolete content
, they do not appear as indexed. the threshold can be adjusted in eclipse preferences >> c/c++ >> editor >> scalability. *important* project-specific settings for the cdt indexer do not appear to work (it looks like a bug in eclipse), so you have to set these manually/globally. what we want is to have the indexer track the currently selected build config (so the correct conditional compiles are highlighted in the editor). to enable this go to eclipse preferences >> c/c++ >> indexer, then select 'use active build configuration' in the 'build configuration for the indexer' section. importing the project into eclipse file >> import >> general >> existing projects into workspace click next the root directory should be the full path to your top-level tamarin-redux directory ensure the 'av...
...all are available from the run menu. note: if you receive an error when trying to run/debug a newly imported project, try opening a file in the project first - eclipse can sometimes get confused as to what the 'current project' a...

A XUL Bestiary - Archive of obsolete content
et. there are, unfortunately, different document object models corresponding to different types of documents and also to different proprietary notions about what in a document should be exposed programmatically. the w3c has standardized on a particular dom and already has a candidate recommendation for an updated version. this is the dom that is reflected in xul and in the mozilla browser. at the highest level in the tree of nodes that is the dom sits the window object itself. the window has child nodes like the document itself, a history object which records the pages a user has seen, frame nodes, and so on, all of which are accessible programmatically. with the dramatic improvements in the object model and the power of the w3c dom level 2, the concept of the dom is displacing that of the mo...
...here, exactly, are these events fired? fired at whom? events that are fired by an object "bubble up" the hierarchical model that is the dom (or the aom) node by node. these events can be "handled" at any point in that hierarchy -- including in the same node in which they were raised. if no one at a particular level in the hierarchy is interested in the event, then the event bubbles up to the next highest level on out to the top of the hierarchy. the term isn't used very often, but an "event listener" is a special attribute of an object that listens to its own events. the document, for example, has an "onload" event listener to listen for its "load" event. xul buttons have "oncommand" event listeners. the event listener is really a convenience; instead of using it, you could find out when an o...

OpenClose - Archive of obsolete content
up. the fifth argument to openpopup, iscontextmenu, is a flag which indicates whether a popup is being opened as a context menu. pass true if so, or false if not. it should be obvious from how you are calling openpopup what to set this argument to. note that the same menu can be opened in either manner so this flag doesn't affect how the popup appears. ...
...now try opening a context menu on the same bookmark and note how the other menus aren't affected by mouse movement. this difference is handled by the use of the iscontextmenu flag. ...

The Joy of XUL - Archive of obsolete content
ee of separation results in applications that are easier to maintain by programmers and readily customized by designers and language translators. the work flow of these interdependent activities is more easily coordinated than with html-based web applications, with less impact on the overall stability and quality of the system. easy customization, localization, or branding another highly practical benefit of the separation that xul provides among application logic, presentation, and language text is the ease of customizing for different customers or groups of users. a developer can maintain one primary code base for their application and customize the logo and branding for each of their customers by supplying different skins. an application that is written and deployed with...
... overlays overlays are xul files used to describe extra content for the ui. they are a general mechanism for adding ui for additional components, overriding small pieces of a xul file without having to resupply the whole ui, and reusing particular pieces of the ui. overlays are a powerful mechanism for customizing and extending existing applications because they work in two related but highly different ways. in one respect, overlays are synonymous with "include" files in other languages because an application may specify that an overlay be included in its definition. but overlays can also be specified externally, enabling the designer to superimpose them upon an application without changing the original source. in practical terms, this enables developers to maintain one code st...

Tree Widget Changes - Archive of obsolete content
xt { cursor: pointer; } this allows you to create separate cursors for cells. ...
...to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. ...

Focus and Selection - Archive of obsolete content
e tab key is pressed, the next element is given the focus. to step backwards, the shift key and tab key can be pressed. rearranging the tab order you can change the order in which elements are focused when the user presses the tab key by adding a tabindex attribute to an element. this attribute should be set to a number. when the user presses tab, the focus will shift to the element with the next highest tab index. that means that you can order the elements by setting indices on elements in sequence. usually, however, you would not set the tabindex attribute. if you do not, pressing tab will set the focus to the next displayed element. you only need to set tab indices if you wish to use a different order. here is an example: example 1 : source view <button label="button 1" tabindex="2"/> <butt...
...n 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the focus event the focus event is used to respond when the focus is given to an element. the blur event is used to respond when the focus is removed from an element. you can respond to focus changes by adding an onfocus or onblur attribute on an element. they work just like their html counterparts. you might use these event handlers to highlight the element or display text on a status bar. the following example can be used to apply a function to handle a focus event. example 2 : source view <script> function displayfocus(){ var elem=document.getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" val...

Manifest Files - Archive of obsolete content
this as a subdirectory inside mozilla's chrome directory, but this isn't necessary. the directory could be anywhere and on any disk. put your xul files in this directory. create a file called contents.rdf and place it in this directory. copy the text in the box below into the new contents.rdf file. this file is used to identify the application id, its name, author, version and so on. change the highlighted parts of the file above to your own information. the red text 'myapplication' should be the id of your application. you make this up, but typically, the id is similar to your application's name. replace the blue highlighted text above with your application's title and author. if the 'chrome:extension' field is true, the application is a mozilla firefox extension and it will show up in the...
...ou created in step 1. open the file <mozilla-directory>/chrome/installed-chrome.txt, where <mozilla-directory> is the directory where mozilla is installed. exit mozilla before you do this. next, you are going to register the new application with mozilla so it will know where to find it. add a line at the end of installed-chrome.txt pointing to the new directory you created in step 1. change the highlighted text to the file url below of the directory. make sure that it url ends with a slash and that you press enter at the end of the line. if you aren't sure what the url is, open the directory created in step 1 into a mozilla browser and copy the url from the location field. note that the reference should always be a directory, not a file. delete the file <mozilla-directory>/chrome/chrome.rdf...

More Event Handlers - Archive of obsolete content
called when the a mouse button is double clicked. mousedown called when a mouse button is pressed down on an element. the event handler will be called as soon as a mouse button is pressed, even if it hasn't been released yet. mouseup called when a mouse button is released on an element. mouseover called when the mouse pointer is moved onto an element. you could use this to highlight the element, however css provides a way to do this automatically so you shouldn't do it with an event. you might, however, want to display some help text on a status bar. mousemove called when the mouse pointer is moved while over an element. the event may be called many times as the user moves the mouse so you should avoid performing lengthy tasks from this handler. mouseout ...
...u shouldn't do it with an event. you might, however, want to display some help text on a status bar. mousemove called when the mouse pointer is moved while over an element. the event may be called many times as the user moves the mouse so you should avoid performing lengthy tasks from this handler. mouseout called when the mouse pointer is moved off of an element. you might then unhighlight the element or remove status text. there are also a set of drag related events, which occur when the user holds down a mouse button and drags the mouse around. those events are described in drag and drop. mouse button event properties when a mouse button event occurs, a number of additional properties are available to determine which mouse buttons were pressed and the location of the mouse ...

Tree View Details - Archive of obsolete content
items have children and also which rows are open and closed. nesting level every row in the tree has a nesting level. the topmost rows are at level 0, the children of those rows are at level 1, their children at level 2 and so on. the tree will query the view for each row by calling its getlevel method to find out the level of that row. the view will need to return 0 for the outermost rows and higher values for inner rows. the tree will use this information to determine the hierarchical structure of the rows. in addition to the getlevel method, there is a hasnextsibling function which, given a row, should return true if there is another row afterwards at the same level. this function is used, specifically, to draw the nesting lines along the side of the tree. the getparentindex method is ...
...= 0; for (var t = idx + 1; t < this.visibledata.length; t++) { if (this.getlevel(t) > thislevel) deletecount++; else break; } if (deletecount) { this.visibledata.splice(idx + 1, deletecount); this.treebox.rowcountchanged(idx + 1, -deletecount); } first, the item is set closed in the array. then, we scan along the rows until we come to one that is at the same level. all those that have a higher level will need to be removed, but a row at the same level will be the next container which should not be removed. finally, we use the splice function to remove the rows from the visibledata array and call the rowcountchanged function to redraw the tree. when deleting rows, you will need to supply a negative count of the number of rows to delete. whether opening or closing a row, we need to t...

Using Spacers - Archive of obsolete content
in addition, different platforms may have special requirements on the user interface. ...
... up equally between the spacer and the button. the spacer has received half of the free space and the button has received the other half. the reason we're seeing this effect is that both the spacer and the find button have a flex attribute. because both are flexible, both the button and the spacer resize equally. what if you want to set one element to grow twice as large an another? you can use a higher number as the value of the flex attribute. the values of the flex element are a ratio. if one element has a flex of 1 and the next one has a flex of 2, the second one will grow at twice the rate of the first one. in effect, a flex of 2 says that this element has a flex that is two times the elements that have a flex of one. the flex attribute isn't used to specify an actual size. instead, it sp...

listbox - Archive of obsolete content
one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbox, this is new in firefox 3.5. suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods. if set to true, the select event is never fired. tabindex type: integer the tab order of the ele...
...uppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods. if set to true, the select event is never fired. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use a...

notificationbox - Archive of obsolete content
ttribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it. if another notification is already present with a higher priority, the new notification will be added behind it. label - label to appear on the notification. this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. keep in mind that this is all xul so using html elements for styling might still need additional css in order to work as you might expect. value - value used to identify the...
...notification priority; see priority levels. buttons - array of button descriptions to appear on the notification. eventcallback optional - a javascript function to call to notify you of interesting things that happen with the notification box. see notification box events. priority levels (defined as properties of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medium priority_critical_high priority_critical_block buttons : the buttons argument is an array of button descriptions. each description is an object with the following properties: accesskey - the accesskey to appear on the button callback - function to be called when th...

richlistbox - Archive of obsolete content
one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbox, this is new in firefox 3.5. suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods. if set to true, the select event is never fired. tabindex type: integer the tab order of the e...
...ppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods. if set to true, the select event is never fired. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use ...

scale - Archive of obsolete content
methods | related ] a scale (sometimes referred to as a "slider") allows the user to select a value from a range. a bar displayed either horizontally or vertically allows the user to select a value by dragging a thumb on the bar. use the orient attribute to specify the orientation of the scale. the default value is horizontal which displays a horizontal scale. lower values are to the left and higher values are to the right. set the orient attribute to vertical to use a vertical scale. the user may use the arrow keys to increment and decrement the value by one unit, or the page up and page down keys to increment and decrement the value by one page, as specified by the pageincrement attribute. the home and end keys set the scale's value to the minimum and maximum values, respectively. a sca...
...nt by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. the default value is 10. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use ...

textbox - Archive of obsolete content
n use spellcheck on input, textarea, and contenteditable elements. thespellcheck attribute works well paired with the autocomplete, autocapitalize, and autocorrect attributes too! added from david walsh's article on spell check. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. the default is 50 milliseconds. for search textboxes, the number of milliseconds before the timer fires a command event. the default is 500 milliseconds. for timed textboxes, the number of milliseconds before the timer ...
...e timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. value type: string the default value entered in a textbox. the attribute only holds the default value and is never modified when the user enters text. to get the updated value, use the value property. for number boxes, the default is 0 or the minimum value returned by the min property, whichever is higher. wrap type: string set this attribute to the value off to disable word wrapping in the textbox. if this attribute is not specified, word wrapping is enabled. wraparound type: boolean if true, the value of the number box will wrap around when the maximum or minimum value is exceeded. the minimum and maximum values must both not be infinity. properties accessiblety...

XULRunner Hall of Fame - Archive of obsolete content
sing html5 and latest css features of gecko for interactive e-books. version updates match the rapid release cycle. now available with xulrunner 30 with i18n support. mathml support is significant. includes smil audio overlays and idpf fixed layout. celtx all-in-one media pre-production software. source chatzilla a standalone version of the chatzilla irc client. conkeror a highly programmable web browser with a leopard-oriented design inspired by emacs. source evergreen - staff client evergreen is an open source library system. source ieditweb a client/server based content manager and internet application suite. ieditweb users can add pages, images, forms, ecommerce many special effects and much more using the xulrunner based client. it will comunicate d...
...ith the same api, except that it runs gecko instead of webkit, and it is not headless (but you can still use xvfb to have a headless slimerjs). sqlite manager manage all your sqlite databases using this lightweight extension for firefox, thunderbird, seamonkey, songbird, komodo etc. sqlite manager is also available as a xulrunner application. surebo browselorer a new, simple yet highly functional and customizable web browser, based on xulrunner 22. websecurify web application security testing environment. source yoono desktop win/mac application to get all your friend updates, update your status and share stuff easily across facebook, myspace, twitter, and more - all at once! simplify your online social life. zotero reference manager with firefox, chro...

Archived Mozilla and build documentation - Archive of obsolete content
the same time. proxy ui (recently added - some support for reading os and account settings.) remote xul how to use xul delivered from a webserver, not as part of chrome. space manager detailed design the space manager and related classes and structures are an important of the gecko layout system, specifically block layout. ...
...space manager detailed design the space manager and related classes and structures are an important of the gecko layout system, specifically block layout. see the high level design document for an overview of the space manager, and as an introduction to the classes, structures and algorithms container in this, the detailed design document. space manager high level design the space manager and associated classes and structures are used by block and line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them. when elements are floated to the left or right in a layout, they take up space and influence where other elements can be plac...

External resources for plugin creation - Archive of obsolete content
r the hood, regardless of the level of abstraction provided. framework: firebreath project home page project history description (from the project creators): firebreath is a cross-platform browser plugin framework written in c++. plugins created with firebreath work on all major browsers, including firefox 3.0 and later. platforms supported include windows, linux, and mac os x (intel). feature highlights include thread safety checks, unicode support (with std::wstring), activex support, built-in drawing model negotiation for mac, automatic type conversion (including javascript arrays and objects), advanced security features, and more. supported development environments are visual studio on windows, xcode on mac, and gcc on linux. all platforms rely on cmake for easy cross-platform builds. ...
...d for the needs of o3d, but is flexible enough to support a wide range of use cases. project: juce project home page description (from the home page): juce (jules' utility class extensions) is an all-encompassing c++ class library for developing cross-platform applications. it contains pretty much everything you're likely to need to create most applications, and is particularly good for creating highly-specialised uis and for handling graphics and sound. supported development environments are xcode, visual studio, gcc (and probably any other modern c++ compiler) browser plugins can be built as npapi (mac/windows), or activex (windows). project: qtbrowserplugin project home page description (from the home page): the qtbrowserplugin solution makes it easy to write browser plugins that can be u...

Adobe Flash - Archive of obsolete content
that the string format will be in the format flash major rminor where major can be a major revision such as "5" or "6" and minor is the subsidiary version number. example 1 also creates a constant flashversionosxscriptable that declares (arbitrarily) that macromedia will fix flash to be scriptable in mach-o browsers (on os x) by version 12. this is currently not the case, but 12 is a sufficiently high version number (current versions are version 6r.79) to allow for some leeway for fixing this down the road. when information about when this problem on mac os x will be addressed becomes available, the constant can be updated to reflect something less arbitrary. a complete code listing which expands on the above approach can be found in the flashversion.js file used in the samples. performance a...
...fscommand". the following code snippet illustrates the ideas behind the use of fscommands demonstrated in example 3: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="myflash" width="250" height="150" viewastext> <param name="movie" value="js2flash.swf" /> <param name="quality" value="high"></param> <embed src="js2flash.swf" width="250" height="150" swliveconnect="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="myflash"> </embed> </object> ..... function myflash_dofscommand(command, args) { // handle any callback logic that you may have designed into your flash plugin // the flash animation will...

Vulnerabilities - Archive of obsolete content
this article discusses vulnerabilities, explaining what they are and how they are present in all systems. a vulnerability is a weakness in a system that can be exploited to negatively impact confidentiality, integrity, and/or availability. there are many ways in which vulnerabilities can be categorized. this article uses three high-level vulnerability categories: software flaws, security configuration issues, and software feature misuse. these categories are described below. vulnerability categories a software flaw vulnerability is caused by an unintended error in the design or coding of software. an example is an input validation error, such as user-provided input not being properly evaluated for malicious character strings and overly long values associated with known attacks. an...
... security configuration settings and software feature misuse possibilities, plus the number of software flaw vulnerabilities on a system at any given time, there may be dozens or hundreds of vulnerabilities on a single system. these vulnerabilities are likely to have a wide variety of characteristics. some will be very easy to exploit, while others will only be exploitable under a combination of highly unlikely conditions. one vulnerability might provide root-level access to a system, while another vulnerability might only permit read access to an insignificant file. ultimately, organizations need to know how difficult it is for someone to exploit each vulnerability and, if a vulnerability is exploited, what the possible impact would be. website vulnerabilities owasp or open web security ...

Common Firefox theme issues and solutions - Archive of obsolete content
s from its inspect and markup panel buttons on its toolbar. to fix this issue you need to copy the files chrome://browser/skin/devtools/inspect-button.png and chrome://browser/skin/devtools/treepanel-button.png from the default theme into your browser/devetools/ folder. ...
...ault theme into your browser/devetools/ folder. you also need to insert the following style rules into the proper place in the browser/browser.css file in your theme theme: /* highlighter toolbar - html tree */ #inspector-treepanel-toolbutton { list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png"); -moz-margin-end: 0; -moz-image-region: rect(0px 18px 16px 0px); } /* highlighter toolbar */ #inspector-inspect-toolbutton { list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); -moz-image-region: rect(0px 16px 16px 0px); } style inspector is completely unstyled the style inspector that is part of firefox 10 and later needs to be styled. using the default theme in the latest firefox, please try tools > web developer > inspect to see how thi...

Create Your Own Firefox Background Theme - Archive of obsolete content
r design? you can submit it right now! creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have the most important ...
... in older versions of firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. it will be anchored to the bottom-left corner of the browser window. footer images are optional. view a sample theme footer here. image requirements dimensions should be 3000px wide × 100px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window. the left-hand side of the image should have the most im...

-ms-scrollbar-track-color - Archive of obsolete content
er> | <angle> examples this example uses -ms-scrollbar-track-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> elements with different scroll bar color schemes. ...
...elements with different scroll bar color schemes. div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="redscroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed dia...

CSS - Archive of obsolete content
pplied to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.-ms-hyphenate-limit-charsthe -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word. ...
...at specifies the base color of the main elements of a scroll bar.-ms-scrollbar-darkshadow-colorthe -ms-scrollbar-darkshadow-color css property is a microsoft extension that specifies the color of a scroll bar's gutter.-ms-scrollbar-face-colorthe -ms-scrollbar-face-color css property is a microsoft extension that specifies the color of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-highlight-colorthe -ms-scrollbar-highlight-color css property is a microsoft extension that specifies the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.-ms-scrollbar-shadow-colorthe -ms-scrollbar-shadow-color css property is a microsoft extension that specifies the color of the bottom and right edges of the scroll box and scroll arrows of a s...

VBArray.ubound - Archive of obsolete content
if omitted, ubound behaves as if a 1 was passed. remarks if the vbarray is empty, the ubound method returns undefined. if dim is greater than the number of dimensions in the vbarray, or is negative, the method generates a "subscript out of range" error. ...
...if omitted, ubound behaves as if a 1 was passed. remarks if the vbarray is empty, the ubound method returns undefined. if dim is greater than the number of dimensions in the vbarray, or is negative, the method generates a "subscript out of range" error. ...

New in JavaScript 1.2 - Archive of obsolete content
e documentation can be found on archive.org. netscape navigator 4.0 was released on june 11, 1997. netscape navigator 4.0 was the third major version of the browser with javascript support. javascript versions netscape navigator 4.0 executes javascript language versions up to 1.2. note that netscape navigator 3.0 and earlier ignored scripts with the language attribute set to "javascript1.2" and higher. <script language="javascript1.1"> <!-- javascript for navigator 3.0. --> <script language="javascript1.2"> <!-- javascript for navigator 4.0. --> new features in javascript 1.2 new objects you can create objects using literal notation (inspired by dictionary literal syntax from python 1.x). arrays can now be created using literal notation (inspired by list literal syntax from python 1.x...
...pt 1.2 you can now nest functions within functions. number now converts a specified object to a number. number now produces nan rather than an error if x is a string that does not contain a well-formed numeric literal. string now converts a specified object to a string. array.prototype.sort() now works on all platforms. it no longer converts undefined elements to null and sorts them to the high end of the array. string.prototype.split() it can take a regular expression argument, as well as a fixed string, by which to split the object string. it can take a limit count so that it won't include trailing empty elements in the resulting array. string.prototype.substring(): no longer swaps index numbers when the first index is greater than the second. tostring(): now converts...

Archive of obsolete content
information in a living product, it may not be appropriate to move it here. in general, it may be best to discuss it in the mdn web docs room on matrix before moving content here. .htaccess ( hypertext access ) file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other. syntax highliting support for .htaccess files less. 2015 mdn fellowship program add-ons archived add-ons documentation. adding preferences to an extension this article takes the creating a dynamic status bar extension sample to the next level, adding a popup menu that lets you quickly switch between multiple stocks to watch. it also adds a p...
...rsimple 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. security relying on these obsolete security articles is highly discouraged. doing so may put your systems at risk. solaris 10 build prerequisites sunbird theme tutorial this tutorial is a step-by-step guide to making a theme for sunbird 0.3a1 and later versions. it is designed for beginners. it does not cover advanced topics. table reflow internals key: tamarin tracing build documentation the...

Introduction to game development for the Web - Game development
the range of games that can be created is on par with desktop and native os counterparts. with modern web technologies and a recent browser, it's entirely possible to make stunning, top-notch games for the web. and we're not talking about simple card games or multi-player social games that have in the olden days been done using flash®. we're talking about kick-ass 3d action shooters, rpgs, and more. ...
...give you access to raw binary data from within javascript; this lets you manipulate gl textures, game data, or anything else, even if it's not in a native javascript format. web audio api this api for controlling the playback, synthesis, and manipulation of audio from javascript code lets you create awesome sound effects as well as play and manipulate music in real time. webgl lets you create high-performance, hardware-accelerated 3d (and 2d) graphics from web content. this is a web-supported implementation of opengl es 2.0. webrtc the webrtc (real-time communications) api gives you the power to control audio and video data, including teleconferencing and transmitting other application data back and forth between two users. want your players to be able to talk to each other while blowing...

Building up a basic demo with A-Frame - Game development
ework provides a markup language allowing us to build 3d vr landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of javascript or glsl. this article explains how to get up and running with a-frame, and how to use it to build up a simple demo. high level overview the current version of a-frame is 0.3.2, which means it's highly experimental, but it already works and you can test it right away in the browser. it runs on desktop, mobile (ios and android), and oculus rift, gear vr and htc vive. a-frame is built on top of webgl, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, ...
...are vr-enabled by default. environment setup let's start by setting up an environment to create something with a-frame. we'll then build up a demo and run it. you should start off by: making sure you are using a modern browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v54 or higher). (optional) set up a vr device such as oculus rift or google cardboard. create a new directory to store your project in. save a copy of the latest a-frame javascript library file inside your directory (check the github repository for latest stable a dev builds). open the a-frame documentation in a separate tab — it is useful to refer to. html structure the first step is to create an h...

Building up a basic demo with the PlayCanvas engine - Game development
ns! geometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up development playcanvas provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated shapes available. drawing everything for given shape is taken care of by the engine, so we can focus on the high level coding. let's start by defining the geometry for a cube shape — add the following new code below your previous additions: var box = new pc.entity(); box.addcomponent("model", { type: "box" }); app.root.addchild(box); box.rotate(10, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene. we also rotate the box a bit to show tha...
... ...

Building up a basic demo with Three.js - Game development
is perspective. to initialize it, we have to set its field of view and aspect ratio: the former is used to set how much is seen, and the latter is important for the objects on the screen to have the right proportions when rendered, and not look stretched. let's explain values we are setting for the code above: the value we set for the field of view, 70, is something we can experiment with: the higher the value, the greater the amount of scene the camera will show. imagine a normal camera view, versus a fish eye effect, which allows a lot more to be seen. the default value is 50. the aspect ratio is set to the current width and height of the window so it will be dynamically adjusted. we could set a fixed ratio — for example 16 ⁄ 9, which is the aspect ratio of a widescreen tv. the defau...
...e is properly rendering, we can start adding 3d shapes. to speed up development, three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. there's cubes, spheres, cylinders, and more complicated shapes available. detail like drawing required vertices and faces, for a given shape, is handled by the three framework, so we can focus on higher level coding. let's start, by defining the geometry for a cube shape, adding the following just above the render() function: var boxgeometry = new three.boxgeometry(10, 10, 10); in this case, we define a simple cube that is 10 x 10 x 10 units. the geometry itself is not enough though, we also need a material that will be used for our shape. material a material is what covers an object, the...

Crisp pixel art look with image-rendering - Game development
developers have been manually scaling up graphics so they are shown with blocks that represent pixels. two downsides to this method are larger file sizes and compression artifacts. ...
...developers have been manually scaling up graphics so they are shown with blocks that represent pixels. two downsides to this method are larger file sizes and compression artifacts. ...

Tiles and tilemaps overview - Game development
consisting of building the game world or level map out of small, regular-shaped images called tiles. this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) besides the performance gains, tilemaps can also be mapped to a logical grid, which can be used in other ways inside the game logic (for example creating a path-finding graph, or handling collisions) or to create a level editor. some popular games that use this technique are super mario bros, pacman, zelda: link's awakening, starcraft...
...s such as super mario bros.) static tilemaps a tilemap can either fit into the visible screen area screen or be larger. in the first case, the tilemap is static — it doesn't need to be scrolled to be fully shown. this case is very common in arcade games like pacman, arkanoid, or sokoban. rendering static tilemaps is easy, and can be done with a nested loop iterating over columns and rows. a high-level algorithm could be: for (var column = 0; column < map.columns; column++) { for (var row = 0; row < map.rows; row++) { var tile = map.gettile(column, row); var x = column * map.tilesize; var y = row * map.tilesize; drawtile(tile, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps. scrolling tilemaps...

Create the Canvas and draw on it - Game development
es here </script> </body> </html> we have a charset defined, <title> and some basic css in the header. the body contains <canvas> and <script> elements — we will render the game inside the first one and write the javascript code that controls it in the second one. the <canvas> element has an id of mycanvas to allow us to easily grab a reference to it, and it is 480 pixels wide and 320 pixels high. all the javascript code we will write in this tutorial will go between the opening <script> and closing </script> tags. canvas basics to actually be able to render graphics on the <canvas> element, first we have to grab a reference to it in javascript. add the following below your opening <script> tag. var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); here ...
...the beginpath() and closepath() methods. we are defining a rectangle using rect(): the first two values specify the coordinates of the top left corner of the rectangle on the canvas, while the second two specify the width and height of the rectangle. in our case the rectangle is painted 20 pixels from the left side of the screen and 40 pixels from the top side, and is 50 pixels wide and 50 pixels high, which makes it a perfect square. the fillstyle property stores a color that will be used by the fill() method to paint the square, in our case, red. we're not limited to rectangles — here's a piece of code for printing out a green circle. try adding this to the bottom of your javascript, saving and refreshing: ctx.beginpath(); ctx.arc(240, 160, 20, 0, math.pi*2, false); ctx.fillstyle = "gree...

Move the ball - Game development
define a starting point at the bottom center part of the canvas in variables called x and y, then use those to define the position the circle is drawn at. first, add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } now comes the important part: we want to add a small value to x and y after every frame has been drawn to make it appear that the ball is moving. let's define these small values as dx and dy and set their values to 2 and -2 respectively.
...me without removing the previous one. don't worry, because there's a method to clear canvas content: clearrect(). this method takes four parameters: the x and y coordinates of the top left corner of a rectangle, and the x and y coordinates of the bottom right corner of a rectangle. the whole area covered by this rectangle will be cleared of any content previously painted there. add the following highlighted new line to the draw() function: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); x += dx; y += dy; } save your code and try again, and this time you'll see the ball move without a trail. every 10 milliseconds the canvas is cleared,...

Track the score and win - Game development
it will be placed. the first parameter is the text itself — the code above shows the current number of points — and the last two parameters are the coordinates where the text will be placed on the canvas. to award a score each time a brick is hit, add a line to the collisiondetection() function to increment the value of the score variable each time a collision is detected. ...
...e draw(), just below the drawpaddle() call: drawscore(); displaying a winning message when all bricks have been destroyed collecting the points works well, but you won't be adding them forever — what about when all the bricks have been destroyed? it's the main purpose of the game after all, so you should display a winning message if all available points have been collected. ...

Quality values - MDN Web Docs Glossary: Definitions of Web-related terms
when not present, the default value is 1. ...
...when not present, the default value is 1. ...

HTML: A good basis for accessibility - Learn web development
f the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements. the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. other form elements have different controls, for example, the <select> ...
...ontent inside an image — screen readers simply can't access it. there are other disadvantages too — you can't select it and copy/paste it. just don't do it! when a screen reader encounters the second image, it reads out the full alt attribute — "a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.". this highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible. note that the contents of the alt attribute should always provide a direct representation of the image and what it conveys visually. any personal knowledge or extra description shouldn't be included here, as i...

HTML: A good basis for accessibility - Learn web development
f the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements. the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. other form elements have different controls, for example, the <select> ...
...ontent inside an image — screen readers simply can't access it. there are other disadvantages too — you can't select it and copy/paste it. just don't do it! when a screen reader encounters the second image, it reads out the full alt attribute — "a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.". this highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible. note that the contents of the alt attribute should always provide a direct representation of the image and what it conveys visually. any personal knowledge or extra description shouldn't be included here, as i...

Mobile accessibility - Learn web development
re interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard). user input — make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum). responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens. summary of screenreader testing on android and ios the most common mobile platforms have fully functional screen readers. these function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations. let's look at the main two: talkback on android and voiceover on ios. android talkback the talkback scree...
...such as media queries, viewport, and flexbox. conserving image sizes downloaded. in general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. therefore, it is wise to serve smaller images to narrow screen devices as appropriate. you can handle this using responsive image techniques. thinking about high resolutions. many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. again, you can serve images as appropriate using responsive image techniques. in addition, many image requirements can be fulfilled using the svg vector images format, which is well-supported across browsers today. svg has a small fil...

Type, class, and ID selectors - Learn web development
selecting any element which is the first-child of any descendant element of <article>: article *:first-child { } although both do the same thing, the readability is significantly improved. class selectors the class selector starts with a full stop (.) character and will select everything in the document with that class applied to it. in the live example below we have created a class called .highlight, and have applied it to several places in my document. all of the elements that have the class applied are highlighted. targeting classes on particular elements you can create a selector that will target specific elements with the class applied. in this next example we will highlight a <span> with a class of highlight differently to an <h1> heading with a class of highlight. we do this b...
...d with a type selector to only target the element if both the element and id match. you can see both of these uses in the following example: warning: using the same id multiple times in a document may appear to work for styling purposes, but don't do this. it results in invalid code, and will cause strange behavior in many places. note: as we learned in the lesson on specificity, an id has high specificity and will overrule most other selectors. this can make them difficult to deal with. in most cases it is preferable to add a class to the element rather than use an id, however if using the id is the only way to target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work. in the next article we'll continue exploring selectors b...

Positioning - Learn web development
top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.) web pages also have a z-axis: an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen). z-index values affect where positioned elements sit on that axis; positive values move them higher up the stack, and negative values move them lower down the stack. by default, positioned elements all have a z-index of auto, which is effectively 0. to change the stacking order, try adding the following declaration to your p:nth-of-type(1) rule: z-index: 1; you should now see the finished example, with the lime paragraph on top: <h1>z-index</h1> <p>i am a basic block level element. my a...
...ground: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } p:nth-of-type(1) { position: absolute; background: lime; top: 10px; right: 30px; z-index: 1; } note that z-index only accepts unitless index values; you can't specify that you want one element to be 23 pixels up the z-axis — it doesn't work like that. higher values will go above lower values, and it is up to you what values you use. using 2 and 3 would give the same effect as 300 and 40000. note: you can see the example at this point live at 5_z-index.html (see source code). fixed positioning let's now look at fixed positioning. this works in exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fi...

Supporting older browsers - Learn web development
sting website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. if you have no analytics or this is a brand new site, then there are sites such as statcounter that can provide statistics filtered by location. you should also consider the type of devices and the way people use your site, for example, you may expect a higher than an average number of mobile devices. accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical. in my experience, developers are often very worried about the experience of 1% of users in an old version of internet explorer, while not considering at all the far greater number who have accessibility needs. what is the ...
...rowsers and it will be ignored by non-microsoft browsers. edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid css. the guide to progressive enhancement in grid layout can help you understand the ie version of the grid, and we have included some additional useful links at the end of this lesson. however, unless you have a very high number of visitors in older ie versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers. testing older browsers with the majority of browsers supporting flexbox and grid, it can be reasonably hard to test older browsers. one way is to use an online testing tool such as sauce labs, as detailed in the cross browser testing module. you can also d...

How CSS is structured - Learn web development
he first step in fixing these kinds of issues. properties and values at its most basic level, css consists of two components: properties: these are human-readable identifiers that indicate which stylistic features you want to modify. for example, font-size, width, background-color. values: each property is assigned a value. this value indicates how to style the property. the example below highlights a single property and value. the property name is color and the value is blue. when a property is paired with a value, this pairing is called a css declaration. css declarations are found within css declaration blocks. in the example below, highlighting identifies the css declaration block.. finally, css declaration blocks are paired with selectors to produce css rulesets (or css rule...
... setting css properties to specific values is the primary way of defining layout and styling for a document. the css engine calculates which declarations apply to every single element of a page. ...

CSS FAQ - Learn web development
eight: normal; applied to all elements in the body. the use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. its use should be avoided as much as possible. specificity in css when multiple rules apply to a certain element, the rule chosen depends on its style specificity. inline style (in html style attributes) has the highest specificity and will override any selectors, followed by id selectors, then class selectors, and eventually element selectors. the text color of the below <div> will therefore be red. div { color: black; } #orange { color: orange; } .green { color: green; } <div id="orange" class="green" style="color: red;">this is red</div> the rules are more complicated when the selector has multiple par...
... note: for more information on dealing with prefixed properties, see handling common html and css problems — handling css prefixes from our cross-browser testing module. note: see the mozilla css extensions page for more information on the mozilla-prefixed css properties. how does z-index relate to positioning? the z-index property specifies the stack order of elements. an element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed). note: for more information, see our positioning learning article, and in particular the introducing z-index section. ...

How much does it cost to do something on the Web? - Learn web development
ty to you for a few dollars per month, though your budget might vary, depending on your location. isp access make sure that you have sufficient bandwidth: low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some css and javascript. that will likely cost you a few dozen dollars, including the rent for the modem. on the other hand, you'll need a high-bandwidth connection, such as dsl, cable, or fiber access, if you want a more advanced website with hundreds of files, or if you want to deliver heavy video/audio files directly from your web server. it could cost the same as low-bandwidth access, upwards to several hundred dollars per month for more professional needs. hosting understanding bandwidth hosting providers charge you according to...
... next steps now that you understand what kind of money your website may cost you, it's time to start designing that website and setting up your work environment. read on about how to choos...

What are browser developer tools? - Learn web development
lop ➤ show web inspector. if you can't see the develop menu, go to safari ➤ preferences ➤ advanced, and check the show develop menu in menu bar checkbox. opera: developer ➤ developer tools context menu: press-and-hold/right-click an item on a webpage (ctrl-click on the mac), and choose inspect element from the context menu that appears. (an added bonus: this method straight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot. this tool shows what the html on your page looks like at runtime, as well as what css is applied to each element on the page. it also allows you to instantly modify the html and css and ...
...re three panes in the javascript debugger on firefox. file list the first pane on the left contains the list of files associated with the page you are debugging. select the file you want to work with from this list. click on a file to select it and view its contents in the center pane of the debugger. source code set breakpoints where you want to pause execution. in the following image, the highlight on the number 18 shows that the line has a breakpoint set. watch expressions and breakpoints the right-hand pane shows a list of the watch expressions you have added and breakpoints you have set. in the image, the first section, watch expressions, shows that the listitems variable has been added. you can expand the list to view the values in the array. the next section, breakpoints, li...

What are hyperlinks? - Learn web development
the webpage. search engines not only follow links to discover the various pages of the website, but they also use the link's visible text to determine which search queries are appropriate for reaching the target webpage. links influence how readily a search engine will link to your site. the trouble is, it's hard to measure search engines' activities. companies naturally want their sites to rank highly in search results. we know the following about how search engines determine a site's rank: a link's visible text influences which search queries will find a given url. the more incoming links a webpage can boast of, the higher it ranks in search results. external links influence the search ranking both of source and target webpages, but it is unclear by how much. seo (search engine opti...
...improving a website's use of links is one helpful seo technique. next steps now you'll want to set up some webpages with links. ...

Advanced form styling - Learn web development
-webkit-appearance: none; appearance: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; ...
... corners to the controls on which it made sense: input[type="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } on other controls like range types, progress bars, and meters they just add an ugly box around the control area, so it doesn't make sense. let's talk about some specifics of each of these types of control, highlighting difficulties along the way. selects and datalists in modern browsers, selects and datalists are generally not too bad to style provided you don't want to vary the look and feel too much from the defaults. we've managed to get the basic look of the boxes looking pretty uniform and consisent. the datalist control is <input type="text"> anyway, so we knew this wouldn't be a problem. two ...

HTML Cheatsheet - Learn web development
emphasize some text <em>i'm posh</em> i'm posh italic textt you can mark a phrase in the text in <i>italics</i> you can mark a phrase in the text in italics bold some text <b>bold a word or phrase</b>within the text bold a word or phrase within the text mark text as important <strong>i'm important</strong> i'm important highlight some text <mark>notice me</mark> notice me draw a line through irrelevant text <s>i'm irrelevant</s> i'm irrelevant underline a non-textual annotation this is <u>mispelled</u> this is mispelled text displayed lower than normal text h₂o h2o small text used to represent the <small>small print </small>of a document used...
... a line break line 1<br>line 2 line 1 line 2 suggesting a line break it is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it...

Tips for authoring fast-loading HTML pages - Learn web development
optimizing page load performance is not just for content which will be viewed by narrowband dial-up or mobile device visitors. ...
...ce page-load time. use a content delivery network (cdn) for the purposes of this article, a cdn is a means to reduce the physical distance between your server and your visitor. as the distance between your server origin and visitor increases, the load times will increase. suppose your website server is located in the united states and it has a visitor from india; the page load time will be much higher for the indian visitor compared to a visitor from the us. a cdn is a geographically distributed network of servers that work together to shorten the distance between the user and your website. cdns store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing latency. further reading: understanding cdns reduce domain lookups ...

Basic math in JavaScript — numbers and operators - Learn web development
ve, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. let's try the following: change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator. change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator. change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator. change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators. change the line that cal...
... don't worry if you totally mess the code up. you can always press the reset button to get things working again. ...

What is JavaScript? - Learn web development
overview: first steps next welcome to the mdn beginner's javascript course! ...
...e will look at javascript from a high level, answering questions such as "what is it?" and "what can you do with it?", and making sure you are comfortable with javascript's purpose. prerequisites: basic computer literacy, a basic understanding of html and css. objective: to gain familiarity with what javascript is, what it can do, and how it fits into a web site. a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc. — you can bet that javascript is probably involved...

JavaScript First Steps - Learn web development
troduction to html. introduction to css. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides what is javascript? welcome to the mdn beginner's javascript course! in this first article we will look at javascript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with javascript's purpose. a first splash into javascript now you've learned something about the theory of javascript, and what you can do with it, we are going to give you a crash course in the basic features of javascript via a completely practical tutorial. here you'll build up a si...
... to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in javascript programs. storing the information you need — variables after reading the last couple of articles you should now know what javascript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. in this article we will get down to the real basics, looking at how to work with the most basic building blocks of javascript — variables. basic math in javascript — numbers and operators at this point in the course we discuss maths in javascript — how we can combine operators and other features to successfully manipulate numbers to do our bidding. handling text — strings in jav...

Server-side website programming first steps - Learn web development
in this module we answer a few fundamental questions about server-side programming — "what is it?", "how does it differ from client-side programming?", and "why is it so useful?". we then provide an overview of some of the most popular server-side web frameworks, along with guidance on how to select the most suitable framework for creating your first site. finally, we provide a high-level introductory article about web server security. prerequisites before starting this module, you don't need to have any knowledge of server-side website programming, or indeed any other type of programming. however, you do need to understand how the web works. we recommend that you first read the following topics: what is a web server? what software do i need to build a website? how do you upload fi...
...wing topics: what is a web server? what software do i need to build a website? how do you upload files to a web server? with that basic understanding, you'll be ready to work your way through the modules in this section. guides introduction to the server side welcome to the mdn beginner's server-side programming course! in this first article, we look at server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?". after reading this article, you'll understand the additional power available to websites through server-side coding. client-server overview now that you know the purpose and potential benefits of server-side programming, we're going to examine in detail what happens ...

Introduction to client-side frameworks - Learn web development
ream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. the web allows us to do things that used to be possible only in native applications installed on our computers. these modern, complex, interactive websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. javascript frameworks power muc...
...pt react modern (ie9+ with polyfills) jsx jsx; typescript vue ie9+ html-based html-based, jsx, pug ember modern (ie9+ in ember version 2.18) handlebars handlebars, typescript note: dsls we've described as "html-based" do not have official names. they are not really true dsls, but they are non-standard html, so we believe they are worth highlighting. citations for this table: react browser support: official docs ember browser support: ember 3.0 release announcement ember templating language (official docs) does the framework have a strong community? this is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. you can check a project's number of github stars or ...

Introduction to automated testing - Learn web development
e-consuming. to handle this efficiently, you should become familiar with automation tools. in this article, we look at what is available, how to use task runners, and how to use the basics of commercial browser test automation apps such as lambdatest, sauce labs, browserstack, and testingbot. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing. objective: to provide an understanding of what automated testing entails, how it can make your life easier, and how to make use of some of the commercial products that make things easier. automation makes things easy throughout this module we have detailed loads of different ways in which you can test your websites and apps, and expla...
... based on your configurations. once loaded, you can perform live, interactive cross-browser testing with a website. if you notice an issue with the ui, then you can share it with your colleagues by capturing a screenshot of your vm with the screenshot button. you can also record a video of your test session by hitting the recorder button in your test session. with the in-built image editor, highlight your screenshot before you push it to your colleagues. using the mark as bug button you can push bugs to numerous third-party tools such as jira, asana, trello, and more. that way you can log a bug directly from your test session on lambdatest to your project management instance. check out all the third-party lambdatest integrations. note: all the videos and images captured inside a...

Handling common JavaScript problems - Learn web development
now we'll look at common cross-browser javascript problems and how to fix them. this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing. objective: to be able to diagnose common javascript cross-browser problems, and use appropriate tools and techniques to fix them. the trouble with javascript historically, javascript was plagued with cross-browser compatibility problems — back in the 1990s, the main browser choices back then (internet explorer and netscape) had scri...
... search packages text field, type "jslint" and press enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-jshint plugin. after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes. other popular editors have similar linting packages available. for example, see the "plugins for text editors and ides" section of the jshint install page. other uses there are other wa...

Theme concepts
rea of firefox: using a single image or using multiple images. you could combine the two, but it’s easier to treat them separately. single image themes this is the basic or minimal theming option, where you define: a single image, which is anchored to the top right of the header area. a color for the text in the header. the area your header image needs to fill is a maximum of 200 pixels high. the maximum image width is determined by the resolution of the monitor firefox is displaying on and how much of the monitor firefox is using. practically, this means you would need to allow for a width of up to 5120 pixels wide (for the next generation of 5k monitors). however, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so th...
...the left upload your packaged file for validation or modify it using the theme generator for self-hosted static themes, a new version can be updated through amo by following the above steps or be handled by you through an updateurl or external application updates. a new version will need to be signed through the developer hub. if you are uploading a packaged file, the version number must be higher than the current version number dynamic themes as an alternative to defining a static theme, you can use the theme api to control the theme used in firefox from within a browser extension. there are a couple of use cases for this option: to bundle a theme with a browser extension, as an added extra. create a dynamic theme that changes under programmatic control. and, obviously, you can...

A bird's-eye view of the Mozilla framework
it examines what happens when the user performs a simple user interface (ui) action such as clicking a link in the contents panel of the help viewer window shown below. the article focuses on the architecture of the overall framework supporting the mozilla application suite, not the architecture of the individual applications themselves. ...
...oriented programming (oop) terminology and design concepts, the microsoft® component object model (com), and the corba omg interface definition language (idl). organization this article first covers some conceptual groundwork, then walks through a user scenario to illustrate how key mozilla architectural components work together to support a simplehelp viewer ui action. framework layers at a high level, you can think of the mozilla framework as consisting of a suite of applications, each of which is organized into three basic layers depicted in figure 1. figure 1. user interface (ui) widgets and services the x window system toolkit defines the termwidget as a pre-defined object that encapsulates both the command actions and data associated with a graphical user interface (gui) con...

How Mozilla's build system works
ommon tasks such as compiling components and creating jar files. for many developers, typing mach build to build the tree is sufficient to work with the source tree. this document explains how the build system works. note: this document is not intended for developers who just want to build mozilla. for that, see the build documentation. phases when you type mach build to build the tree, three high-level phases occur within the build system: system detection and validation preparation of the build backend invocation of the build backend phase 1: configure phase 1 centers around the configure script. the configure script is a bash shell script. the file is generated from a file called configure.in, which is written in m4 and processed using autoconf 2.13 to create the final configure...
...ildreader is instantiated with a configuration, is told to read the source tree, and then emits a stream of mozbuildsandbox instances corresponding to the executed moz.build files. the mozbuildsandbox stream produced by the buildreader is typically fed into the treemetadataemitter class from emitter.py. the role of treemetadataemitter is to convert the low-level mozbuildsandbox dictionaries into higher-level function-specific data structures. these data structures are the classes defined in data.py. each class defines a specific aspect of the build system, such as directories to traverse, c++ files to compile, and so on. the treemetadataemitter output is a stream of instances of these classes. the build system stream describing class instances emitted from treemetadataemitter is then fed int...

Firefox UI considerations for web developers
p doesn't include the site, firefox looks in its places data store for icons specified in the page's <head> element; if an svg icon is available, that icon is selected. otherwise, bitmapped icons which are at least 96 pixels wide are considered. if one is found to have a width of exactly 96 pixels, it is used. otherwise, the smallest image larger than 96 pixels wide is selected. ...
...d. otherwise, the smallest image larger than 96 pixels wide is selected. if no high-resolution icon is found, a screenshot is taken of the site; this screenshot is then scaled and cropped to fit in the space allotted to the icon. if the site also has a favicon, it may be overlaid in the corner of the image. the selected image is then presented within the top sites list. rich icons the high resolution icons—also known as rich icons—are specified by setting the rel attribute to one of: apple-touch-icon apple-touch-icon-precomposed fluid-icon the size of each icon is taken from the size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iphone size of 57x5...

Using the Browser API
, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted. ...
...s what happens when the search toggle button is pressed. we switch the class values on the element to toggle the show/hide. if searchactive is true, meaning that a search has been done, we want to disable the search as we hide the search options — we disable the buttons, make searchactive false, clear the entered search value, and run htmliframeelement.clearmatch(), which gets rid of any stored/highlighted search results from the browser. searchtoggle.addeventlistener('touchend',function() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(searchactive) { browser.clearmatch(); searchactive = false; prev.dis...

mozbrowserfindchange
icating whether a search is currently active (true), or not (false.) searchstring a domstring representing the string that is currently being searched for. searchlimit a number indicating the maximum number of searches that can be returned. numberofmatches a number indicating the number of matches returned by the search. ...
...maximum number of searches that can be returned. numberofmatches a number indicating the number of matches returned by the search. activematchordinal a number indicating the position of the currently highlighted search result, e.g. 3 out of 5. ...

Browser API
age in the browser, and remove the parts of the browser api that are no longer needed (it is used only by the firefox devtools at this point). see bug 1503070 for more details. the methods removed in firefox 65 are: htmliframeelement.addnextpaintlistener() defines a handler to listen for the next mozafterpaint event in the browser <iframe>. htmliframeelement.clearmatch() clears any content highlighted by findall() or findnext(). htmliframeelement.download() downloads a specified url, storing it at the specified filename/path. htmliframeelement.executescript() allows a specified script to be executed against a page loaded in the browser <iframe>. htmliframeelement.findall() searches for a string in a browser <iframe>'s content; if found, the first instance of the string relative to...
...next(). htmliframeelement.download() downloads a specified url, storing it at the specified filename/path. htmliframeelement.executescript() allows a specified script to be executed against a page loaded in the browser <iframe>. htmliframeelement.findall() searches for a string in a browser <iframe>'s content; if found, the first instance of the string relative to the caret position will be highlighted. htmliframeelement.findnext() highlights the next or previous instance of a search result after a findall() search has been carried out. htmliframeelement.getcontentdimensions() retrieves the x and y dimensions of the content window. htmliframeelement.getmanifest() retrieves the manifest of an app loaded in the browser <iframe> and returns it as json. htmliframeelement.getscreenshot...

Mozilla Content Localized in Your Language
there is more than one. additional discussions can be found here. voice what is the appropriate form of expressing voice in your language? how should emphasis be made in your language? character styles how are bold, italics, underlines, etc. used to express certain concepts in your language? if these are not applicable styles, what are some of the corresponding ways to express, emphasis or highlight some of the texts. address format what is the format in your language? ex: most asian countries start from big to small: [country] [postal code][state/province][city][district][street number and name][building and suite numbers][addressee] countries of european languages start from small to big: [addressee][street number and name][building and suite numbers][district][city][state/prov...
...ble. user interface elements have limited space available for text. avoiding articles will help ensure that your translations will be accommodated within the user interface. note: if this doesn't apply to your language, indicate so as n/a. ellipsis ellipsis are often inserted automatically in the ui where strings are truncated. ellipsis should only be used at high level of ui pages, but not be on the final page (after a series of click-through) where detailed instruction is given. ellipsis should not be used as a way to solve truncation issue. focus on making the ui short and precise. the sequence of the sentence structure in another language may not translate well, when a sentence is half finished as such. add fluency :: spelling, punctuation, ...

Localizing with Koala
german) or "es-es" (for spanish in spain). translating to x-testing will basically consist of converting any strings to uppercase, for example "file" in original version (en-us) will become "file" in x-testing. we will translate a small piece of the ui found in the search bar. the search bar is next to the right of the location bar, and by default points to the google search. if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines... there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar. requirements mercurial, linux, windows or mac os x. instructions preparation install komodo edit. install koala extension.
...f you want to create it. click "ok". when the file is created and opens in a new tab, right-click searchendcap.label in the sidebar (it's listed under the searchbar.dtd file) and choose "add entity". we're starting by the second entity in this file on purpose, you'll see in a moment how koala nicely handles entity order. the entity was added to the file and the english string is automatically highlighted, so that you can translate it right away. this entity is used in the tooltip that appears when you hover over the magnifying glass icon in the search bar. once you translated the searchendcap.label entity, add the other one from this file, i.e. cmd_enginemanager.label. you can right-click it and choose "add entity" as you did previously, or just double-click the entity name to add it to t...

Initial setup
your work without needing to run firefox or another application. install intructions are located here. l10n checks l10n checks is another python script that helps you check your work without running an application. install instructions are located here. autoconf 2.13 autoconf is a utility that is vital to manually creating mozilla application builds and language packs. we use version 2.13 and higher for these builds. you can find the source files and install instructions here. wget wget is a command-line utility that allows you to retrieve files using internet protocols. we use it for retrieving files from repositories. you can find the source files and install instructions here. perl perl is a programming language that will help you create mozilla application builds and language packs...
... work within a mozilla application. you can install either by searching for them in firefox's add-ons manager or following these links. a solid, unicode-based, text editor here are some suggestions: windows: notepad++ or notepad2 gnu/linux: vim, gedit or kate mac os x: textwrangler gnu make make is a tool which controls the generation of executables. you can find version 3.79.1 or higher here. unfortunately, other varieties of make won't do. end of initial setup now that you've finished your initial setup, it's time for the best part: translating! « previousnext » ...

Fonts for Mozilla 2.0's MathML engine
rd 30.0 / seamonkey 2.27). for the latest version see, this page. quick instructions try this test page to quickly determine whether you need to install additional fonts and to follow the instructions below. you may also want to check out the mozilla mathml torture test to test your installation against concrete examples. on windows: use this mathml fonts installer. on mac os x lion (10.7) and higher versions, stix fonts are already installed and can be used for mathml. on most linux distributions and similar open source platforms, you can install math fonts (stix, asana or mathjax fonts) from your package manager or get them from this zip archive. on android, firefox os and other platforms where the instructions above do not work: install the mathml-fonts add-on. this requires gecko 15.0...
...e used for mathml. on most linux distributions and similar open source platforms, you can install math fonts (stix, asana or mathjax fonts) from your package manager or get them from this zip archive. on android, firefox os and other platforms where the instructions above do not work: install the mathml-fonts add-on. this requires gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) or higher. overview mathematical formulas make use of various symbols represented by specific unicode characters. mozilla can display any of these symbols provided suitable unicode fonts are installed. furthermore, in accordance with the w3c css2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of css), with the assurance ...

Using the viewport meta tag to control layout on mobile browsers
generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each css "pixel". initially this caused usability and readability problems on many touch-optimized web sites. peter-paul koch wrote about this problem in a pixel is not a pixel. ...
...this is consistent with the css 2.1 specification, which says: if the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. ...

Mozilla Style System Documentation
ss stylesheets, this process corresponds to css selector matching. the output of css selector matching as defined by the css specification is an ordered list of rules, where the order determines which declarations override other declarations. (in css,declarations are the property-value pairs within style rules. in mozilla, nscssdeclaration objects correspond to css declaration-blocks.) due to the high similarity of these lists between elements in the content tree, mozilla stores the output of the selector matching process in a lexicographic tree, the rule tree. this double tree (style context tree and rule tree) allows for sharing of style data, which allows the data to take up less memory and allows the data computation to take less time. for example, suppose we had the css stylesheet: /* ...
...ughly to the content tree, the rule tree is generally quite broad (but are there cases where it is quite deep??), since the depth of a node in the tree corresponds to the number of rules matched. therefore, inherited structs are cached on the style context (but only the top style contexts pointing to them actually "owns" them), but structs that are shared between rule nodes are stored only on the highest rule node to which they apply and then retrieved from that most upper rule node every time they are needed. the code that does this sharing work is mostly in nsstylecontext::getstyledata, nsrulenode::getstyledata, and nsrulenode::walkruletree. when nsrulenode::walkruletree computes a struct, it walks the rules, starting with the style context's rule node, towards the root of the rule tree. it...

Gecko Profiler FAQ
it depends on what you are trying to profile to some extent. usually you should be really careful when changing the characteristics of the environment that you are trying to measure to avoid measuring the wrong thing. if the issue you are trying to avoid is not profiling on fast machines that mozilla developers typically use to build firefox on, a better solution may be using a less high-end machine that actually has lower spec’d hardware instead of artificially slowing down just the cpu. another approach to get more precision is also raising the sampling frequency to sub-millisecond ranges (it won’t work on windows.) high frequency sampling may also be an area where native profilers are a useful alternative tool to try. how do we profile "leaks" tha...
...rrupts all threads based on wall-clock time. [jesup] ok, that's the equivalent to itimer_real, kinda, except that per the previous question it doesn't interrupt every thread at once and snapshot the thread you started the itimer on, it interrupts each thread one at a time, which likely means distortion of the measurement if the number of threads monitored is significant (especially at high sample rates). a cleaner snapshot would stop all threads, walk all their stacks, and then resume all threads, especially on high-core systems. (itimer_real (due to posix) requires the signal occur on the calling thread, not a random thread. itimer_prof interrupts the then-running thread, whichever one it is. is there a way to isolate or filter a profile (at least of mainthread and...

perf
n access the intel rapl energy estimates. the following example shows how to invoke it for this purpose. sudo perf stat -a -r 1 \ -e "power/energy-pkg/" \ -e "power/energy-cores/" \ -e "power/energy-gpu/" \ -e "power/energy-ram/" \ <command> the -a is necessary; it means "all cores", and without it all the measurements will be zero. the -r 1 means <command> is executed once; higher values can be used to get variations. the output will look like the following. performance counter stats for 'system wide': 51.58 joules power/energy-pkg/ [100.00%] 14.80 joules power/energy-cores/ [100.00%] 9.93 joules power/energy-gpu/ [100.00%] 27.38 joules power/energy-ram/ [100.00%] 5.003049064 seconds time elapsed it's not clear from the output, but the fol...
... ...

powermetrics
it is most useful for getting cpu, gpu and wakeup measurements in a precise and easily scriptable fashion (unlike activity monitor and top) especially in combination with rapl via the mach power command. this document describes the version of powermetrics that comes with mac os 10.10. the one that comes with 10.9 is less powerful. note: the power profiling overview is worth reading at this point if you haven't already. it may make parts of this document easier to understand. quick start powermetrics provides a vast number of measurements. ...
... used by the coalition/process, per second, during the sample period. the sum of the process values typically exceeds the coalition value slightly, for unknown reasons. user%: percentage of that cpu time spent in user space (as opposed to kernel mode.) deadlines (<2 ms, 2-5 ms): these two columns count how many "short" timers woke up threads in the process, per second, during the sample period. high frequency timers, which typically have short time-to-deadlines, can cause high power consumption and should be avoided if possible. wakeups (intr, pkg idle): these two columns count how many wakeups occurred, per second, during the sample period. the first column counts interrupt-level wakeups that resulted in a thread being dispatched in the process. the second column counts "package idle exit"...

Performance
der the exact same workload. memory profiler the memory profiler samples allocation events and provides different views to analyze the allocation characteristic. see also the documentation on leak-hunting strategies and tips. profiling and performance tools profiling with the developer tools profiler the profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and gc profiling, and flame graphs. it is available on all platforms and release channels, and also supports remote profiling b2g and fennec. profiling with the firefox profiler the firefox profiler is a good tool to start with, particularly for understanding where time is spent within c++ code in firefox. profiling with ...
...consulted by users, and so are worth understanding. intel power gadget (windows, mac, linux) intel power gadget provides real-time graphs for package and processor rapl estimates. it also provides an api through which those estimates can be obtained. perf (linux-only) perf is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups. turbostat (linux-only) turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-cpu measurements such as frequencies and c-states. powertop (linux-only) powertop is an interactive command-line utility that gathers and displays various power-related measurements. ...

Emscripten
c/c++ runtimes of other languages into javascript, and then run code in those other languages in an indirect way (this has been done for python and lua)! emscripten makes native code immediately available on the web: a platform that is standards-based, has numerous independent compatible implementations, and runs everywhere from pcs to ipads. ...
...ere from pcs to ipads. with emscripten, c/c++ developers don’t have the high cost of porting code manually to javascript — or having to learn javascript at all. web developers also benefit, as they can use the many thousands of pre-existing native utilities and libraries in their sites. practically any portable c or c++ codebase can be compiled into javascript using emscripten, ranging from high performance games that need to render graphics, play sounds, and load and process files, through to application frameworks like qt. emscripten generates fast code — its default output format is asm.js , a highly optimizable subset of javascript that can execute at close to native speed in many cases. note: sound interesting? read more about emscripten and try some demos, then get started wit...

PRThreadPriority
a thread's priority setting. syntax #include <prthread.h> typedef enum prthreadpriority { pr_priority_first = 0, pr_priority_low = 0, pr_priority_normal = 1, pr_priority_high = 2, pr_priority_urgent = 3, pr_priority_last = 3 } prthreadpriority; enumerators pr_priority_first placeholder. pr_priority_low the lowest possible priority. this priority is appropriate for threads that are expected to perform intensive computation. pr_priority_normal the most commonly expected priority. pr_priority_high slightly higher priority than pr_priority_normal. this priority is for threads performing work of high urgency but short duration. pr_priority_urgent highest priority. only one thread at a time typically has this priority. pr_priority_last placeholder ...
...ntensive computation. pr_priority_normal the most commonly expected priority. pr_priority_high slightly higher priority than pr_priority_normal. this priority is for threads performing work of high urgency but short duration. pr_priority_urgent highest priority. only one thread at a time typically has this priority. pr_priority_last placeholder description in general, an nspr thread of higher priority has a statistically better chance of running relative to threads of lower priority. however, because of the multiple strategies nspr uses to implement threading on various host platforms, nspr priorities are not precisely defined. at best they are intended to specify a preference in the amount of cpu time that a higher-priority thread might expect relative to a lower-priority thread. t...

An overview of NSS Internals
nss is a library written in the c programming language. it's free and open source software, and many other software projects have decided to use it. ...
...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 different alternative routes while searching for (z), in a recursive manner. only the newer verification engine (internally named libpkix) is capable of doing that properly. it's worth mentioning the extended validation (ev) principle, which is an effort by software vendors and cas to define a stricter set of rules for iss...

4.3.1 Release Notes
or release with the following new features: support for ssl3 & tls renegotiation vulnerablity support to explicitly set the key usage for the generated private key jss 4.3.1 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1. new in jss 4.3.1 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3.1 requires nss 3.12.5 or higher. ssl3 & tls renegotiation vulnerability see cve-2009-3555 and us-cert vu#120541 for more information about this security vulnerability. all ssl/tls renegotiation is disabled by default in nss 3.12.5 and therefore will be disabled by default with jss 4.3.1. this will cause programs that attempt to perform renegotiation to experience failures where they formerly experienced successes, and is ne...
...r jss 4.3.1 javadoc [online] [zipped] read the instructions on using jss. source may be viewed with a browser (via the mxr tool) at http://mxr.mozilla.org/mozilla/source/security/jss/ the run time behavior of jss can be affected by the nss environment variables. platform information you can check out the source from cvs by cvs co -r jss_4_3_1_rtm jss jss 4.3.1 works with jdk versions 4 or higher we suggest the latest. jss 4.3.1 requires nss 3.12.5 or higher. jss 4.3.1 requires nspr 4.7.1 or higher. jss only supports the native threading model (no green threads). known bugs and issues for a list of reported bugs that have not yet been fixed, click here. note that some bugs may have been fixed since jss 4.3.1 was released. compatibility jss 4.3.1 is backwards compatible with jss 4.2...

4.3 Release Notes
compliant certificate path validation library pkcs11 needslogin method support hmacsha256, hmacsha384, and hmacsha512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1. new in jss 4.3 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3 requires nss 3.12 or higher. new sqlite-based shareable certificate and key databases by prepending the string "sql:" to the directory path passed to configdir parameter for crypomanager.initialize method or using the nss environment variable nss_default_db_type. libpkix: an rfc 3280 compliant certificate path validation library (see pkixverify) pk11token.needslogin method (see needslogin) support hmacsha256, hmacs...
...entation for jss 4.3 is available as follows: build instructions for jss 4.3 javadoc [online] [zipped] read the instructions on using jss. source may be viewed with a browser (via the mxr tool) at http://mxr.mozilla.org/mozilla/source/security/jss/ the run time behavior of jss can be affected by the nss environment variables. platform information jss 4.3 works with jdk versions 4 or higher we suggest the latest. jss 4.3 requires nss 3.12 or higher. jss 4.3 requires nspr 4.7.1 or higher. jss only supports the native threading model (no green threads). known bugs and issues for a list of reported bugs that have not yet been fixed, click here. note that some bugs may have been fixed since jss 4.3 was released. compatibility jss 4.3 is backwards compatible with jss 4.

JSS FAQ
how do i convert org.mozilla.jss.pkix.cert to org.mozilla.jss.crypto.x509certificate? is it possible to use jss to access cipher functionality from pkcs11 modules? can you explain token names and keys with regards to jss? jss 3.2 has jca support. ...
... what versions of jdk and jre do you suggest? jss 3.x works with jdk versions 1.2 or higher, except version 1.3.0. most attention for future development and bug fixing will go to jdk 1.4 and later, so use that if you can. if you are using jdk 1.3.x, you will need to use at least version 1.3.1--see bug 113808. jss only supports the native threading model (no green threads). for jss 3.2 and higher, if you use jdk 1.4 or higher you will not need to install the jce, but if you using an earlier version of the jdk then you will also have to install jce 1.2.1. see also the document using jss. does jss have 64 bit support? yes, jss 3.2 and higher supports 64 bit. you will need jdk 1.4 or higher and all the 64 bit versions of nspr, and nss. as well you must use the java flag -d64 to s...

JSS 4.4.0 Release Notes
jss only supports the native threading model (no green threads). compatibility jss 3.30 shared libraries are not backward compatible with all older jss 4.3.2 shared libraries. a program linked with older jss...
...g_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest the latest - openjdk 1.8. jss 4.4.0 requires nss 3.12.5 or higher though nss 3.28.3 is recommended. jss 4.3.1 requires nspr 4.7.1 or higher though nspr 3.13 is recommended. jss only supports the native threading model (no green threads). compatibility jss 3.30 shared libraries are not backward compatible with all older jss 4.3.2 shared libraries. a program linked with older jss 4.3.2 shared libraries will not work with jss 4.4.0 shared libraries without ...

NSS_3.12_release_notes.html
ameconstraintsexten (see cert.h) cert_getclassicocspdisabledpolicy (see cert.h) cert_getclassicocspenabledhardfailurepolicy (see cert.h) cert_getclassicocspenabledsoftfailurepolicy (see cert.h) cert_getpkixverifynistrevocationpolicy (see cert.h) cert_getusepkixforvalidation (see cert.h) cert_getvaliddnspatternsfromcert (see cert.h) cert_newtempcertificate (see cert.h) cert_setocsptimeout (see certhigh/ocsp.h) cert_setusepkixforvalidation (see cert.h) cert_pkixverifycert (see cert.h) hash_gettype (see sechash.h) nss_initwithmerge (see nss.h) pk11_createmergelog (see pk11pub.h) pk11_creategenericobject (see pk11pub.h) pk11_createpbev2algorithmid (see pk11pub.h) pk11_destroymergelog (see pk11pub.h) pk11_generatekeypairwithopflags (see pk11pub.h) pk11_getpbecryptomechanism (see pk11pub.h) pk11_isr...
...bug 330721: remove os/2 vacpp compiler support from nss bug 408260: certutil usage doesn't give enough information about trust arguments bug 410226: leak in create_objects_from_handles bug 415007: pk11_findcertfromdersubjectandnickname is dead code bug 416267: compiler warnings on solaris due to extra semicolon in sec_asn1_mks...

NSS 3.48 release notes
m/src/ other releases are available in nss releases. notable changes in nss 3.48 tls 1.3 is the default maximum tls version. see bug 1573118 for details. tls extended master secret is enabled by default, where possible. see bug 1575411 for details. the master password pbe now uses 10,000 iterations by default when using the default sql (key4.db) storage. ...
...see bug 1562671 for details. ...

nss tech note7
o a symmetric key (pk11symkey *). use pk11_freesymkey() to release a reference to a symmetric key (pk11symkey *); the symmetric key is destroyed when its reference count becomes zero. functions rsa signing and encryption functions are provided by two layers of nss function: the sgn_ and vfy_ functions in cryptohi.h, and the pk11_ functions in pk11pub.h. as a general principle, you should use the highest layer of nss you can possibly use for what you are trying to accomplish. for example, if you just need to generate or verify a signature, you can use the sgn_ and vfy_ functions in cryptohi.h. if you need to interoperate with a protocol that isn't implemented by nss, then you may need to use the pk11_ functions. (this api pretty much consists of what was needed to implement ssl and s/mim...
...ify a signature, you can use the sgn_ and vfy_ functions in cryptohi.h. if you need to interoperate with a protocol that isn't implemented by nss, then you may need to use the pk11_ functions. (this api pretty much consists of what was needed to implement ssl and s/mime, plus a few enhancements over the years to support jss.) when using the pk11_ interfaces, the same principal applies: use the highest available function. if you are really trying to send a key, you should use pk11_pubwrapsymkey(). for a low level signature, use pk11_sign(). both of these functions do the pkcs #1 wrapping of the data. pk11_sign does not do the ber encoding of the hash (as is done in sgn_ functions). if you are trying to just send data, use pk11_pubencryptpkcs1. pk11_pubencryptraw is the lowest level ...

sslerr.html
eved using the nspr function pr_geterror. in addition to the error codes defined by nspr, pr_geterror retrieves the error codes described in this chapter. ssl error codes sec error codes ssl error codes table 8.1 error codes defined in sslerr.h constant value description ssl_error_export_only_server -12288 "unable to communicate securely. ...
...the local system was configured to support only the cipher suites permitted for export use. ...

sslfnc.html
socket. calling ssl_enabledefault to change the application default setting for ssl_v2_compatible_hello to pr_false implicitly also sets the default value for ssl_enable_ssl2 option to pr_false for that application. the options ssl_enable_ssl2, ssl_enable_ssl3, and ssl_enable_tls can each be set to pr_true or pr_false independently of each other. nss 2.8 and later versions will negotiate the highest protocol version with the peer application from among the set of protocols that are commonly enabled in both applications. note that ssl3 and tls share the same set of cipher suites. when both ssl3 and tls are enabled, all ssl3/tls cipher suites that are enabled are enabled for both ssl3 and tls. as mentioned in communication, when an application imports a socket into ssl after the tcp c...
... *keysize, int *secretkeysize, char **issuer, char **subject); parameters this function has the following parameters: fd the file descriptor for the ssl socket. on a pointer to an integer. on output, the integer will be one of these values: ssl_security_status_ off (= 0) ssl_security_status_ on_high (= 1) ssl_security_status_on_low (= 2) cipher a pointer to a string pointer. on output, the string pointer references a newly allocated string specifying the name of the cipher. for ssl v2, the string is one of the following: rc4 rc4-export rc2-cbc rc2-cbc-export des-cbc des-ede3-cbc for ssl v3, th...

Bytecode Descriptions
mat: jof_jump default operands: (int32_t forwardoffset) stack: lval ⇒ like jsop::goto, but pop and discard an additional stack value. this appears after all cases for a non-optimized switch statement. if there's a default: label, it jumps to that point in the body; otherwise it jumps to the next statement. format: jof_jump tableswitch operands: (int32_t defaultoffset, int32_t low, int32_t high, uint24_t firstresumeindex) stack: i ⇒ optimized switch-statement dispatch, used when all case labels are small integer constants. if low <= i <= high, jump to the instruction at the offset given by script->resumeoffsets()[firstresumeindex + i - low], in bytes from the start of the current script's bytecode. otherwise, jump to the instruction at defaultoffset from the current instruction. all o...
...igh, jump to the instruction at the offset given by script->resumeoffsets()[firstresumeindex + i - low], in bytes from the start of the current script's bytecode. otherwise, jump to the instruction at defaultoffset from the current instruction. all of these offsets must be in range for the current script and must point to jsop::jumptarget instructions. the following inequalities must hold: low <= high and firstresumeindex + high - low < resumeoffsets().size(). return return stack: rval ⇒ return rval. this must not be used in derived class constructors. instead use jsop::setrval, jsop::checkreturn, and jsop::retrval. getrval stack: ⇒ rval push the current stack frame's returnvalue. if no jsop::setrval instruction has been executed in this stack frame, this is undefined. every stack ...

JSGetObjectOps
is the type for jsclass.getobjectops callback syntax typedef jsobjectops * (* jsgetobjectops)(jscontext *cx, jsclass *clasp); name type description cx jscontext * the js context in which the new object is being created. cls jsclass * the class of the new object. description jsobjectops is used by js_newobject's internals to discover the set of high-level object operations to use for new objects of the given class. all native objects have a jsclass, which is stored as a private (int-tagged) pointer in object slots. in contrast, all native and host objects have a jsobjectmap at obj->map, which may be shared among a number of objects, and which contains the jsobjectops *ops pointer used to dispatch object operations from api calls. thus jsclas...
...agged) pointer in object slots. in contrast, all native and host objects have a jsobjectmap at obj->map, which may be shared among a number of objects, and which contains the jsobjectops *ops pointer used to dispatch object operations from api calls. thus jsclass (which pre-dates jsobjectops in the api) provides a low-level interface to class-specific code and data, while jsobjectops allows for a higher level of operation, which does not use the object's class except to find the class's jsobjectops struct, by calling clasp->getobjectops, and to finalize the object. if this seems backwards, that's because it is! api compatibility requires a jsclass *clasp parameter to js_newobject, etc. most host objects do not need to implement the larger jsobjectops, and can share the common jsscope code and ...

Property attributes
he property is visible to javascript for...in and for each ... in loops, as well as to js_enumerate. this is the inverse of the ecma standard dontenum attribute. mxr id search for jsprop_enumerate jsprop_readonly the property's value cannot be set. in javascript 1.2 and lower, it is an error to attempt to assign a value to a read-only property. ...
... this is the ecma standard dontdelete attribute. the javascript language does not provide any way for a script to delete a permanent property. ...

WebReplayRoadmap
aphics with the effects of those changes. object watching (not yet implemented) it would be nice to log the changes to a specific object or one of its properties, so that the points of those changes can be seeked to later. bookmarks (not yet implemented) it would be nice to be able to bookmark points in the recording so that they show up on the timeline and can be seeked to later. code path highlighting (not yet implemented) when paused in a frame, the code path taken through the frame (the lines/expressions executed) could be highlighted somehow, which would make it easier to see what happened in the frame. points on the path could be clicked to seek there, which should offer faster and less clunky navigation than stepping buttons. hide unsupported developer tool features (not yet im...
...uilds or operating systems will be smoothed out. recordings can be uploaded, and cloud services can locate the correct build and os needed to replay them. management of a corpus of recordings (some which may have been made with different builds or operating systems) will be easier to manage, with shared storage in the cloud. expensive dynamic analyses are easier to run in the cloud, allowing a high level of parallelism without impacting users. the cloud should not be the only option by which people can use web replay, however. all features should be accessible to users operating locally. while cloud integration is not in placer, web replay's architecture has recently been redesigned in preparation for cloud support, and communicating with replaying processes over a network connection in...

The Places database
places is designed to be a complete replacement for the firefox bookmarks and history systems using storage. the places schema looks like so: core url table moz_places: this is the main table of uris and is managed by the history service (see also history service design). any time a places component wants to reference a url, whether visited or not, it refers to this table. each entry has an optional reference to the moz_favicon table to identify the favicon of the page. no two entries may have the same value in the url column. moz_hosts: one entry in this table is created each time you visit a new host. ...
... statistics. see history service design for more information. bookmarks tables moz_bookmarks: this table contains bookmarks, folders, separators and tags, and defines the hierarchy. the hierarchy is defined via the parent column, which points to the moz_bookmarks record which is the parent. the position column numbers each of the peers beneath a given parent starting with 0 and incrementing higher with each addition. the fk column provides the id number of the corresponding record in moz_places. moz_bookmarks_roots: lists special folders that are the root folders of certain content types in the bookmarks system. the records in this table are mapped to records in the moz_bookmarks table. bookmarks, folders and separators are descendants of the bookmarks root, while tags and tagged uri...

How to build an XPCOM component in JavaScript
world!"; }, }; xpcomutils does the work of creating the module and factory for you after this. ...
...see xpcom changes in gecko 2.0 for more details. installation for extensions: copy helloworld.js, and helloworld.xpt (only if ...

Component Internals
ervation is unstoppable. in other words, the event you observe cannot be used to implement something like a "are you sure you want to quit?" dialog. rather, the shutdown event gives the component or embedding application a last chance to clean up any leftovers before they are released. in order to support something like an "are you sure you want to quit" dialog, the application needs to provide a higher-level event (e.g., startshutdown()) which allows for cancellation. note also that xpcom services may deny you access once you have received the shutdown notification. it is possible that xpcom will return an error if you access the nsiservicemanager at that point, for example, so you may have to keep a reference-counted pointer to the service you are interested in using during this notificatio...
...xpcom uses are nsastring and nsacstring. these classes are described in the mozilla string guide (see gecko resources). the string classes that implement these abstract classes are another set of helpful, unfrozen classes in xpcom. most components and embedding applications need to link to some string class or other in order to utilize certain gecko apis, but the string code that mozilla uses is highly complex and even more expensive than the glue code in terms of footprint (~100k). nsembedstring and nsembedcstring are available as very lightweight string implementations for component development, especially in small embedded applications. this string implementation does the bare minimum to support the nsastring/nsacstring functionality. in your own component, you can go "slim" and restrict ...

Detailed XPCOM hashtable guide
pi; entry class pointers are constant; more efficient for large entry structures; often wastes memory making many small heap allocations. nsthashtable - low-level c++ wrapper around pldhash; generates callback functions and handles most casting automagically. client writes their own entry class which can include complex key and data types. nsdatahashtable/nsinterfacehashtable/nsclasshashtable - high-level c++ wrappers around pldhash; simplifies the common usage pattern mapping a simple keytype to a simple datatype; client does not need to declare or manage an entry class; nsdatahashtable datatype is a scalar such as pruint32; nsinterfacehashtable datatype is an interface; nsclasshashtable datatype is a class pointer owned by the hashtable. which hashtable should i use? key t...
...g as appropriate. before using nsthashtable, see if nsbasehashtable and relatives will work for you. they are much easier to use, because you do not have to declare an entry class. if you are hashing a simple key type to a simple data type, they are generally a better choice. nsbasehashtable and friends: nsdatahashtable, nsinterfacehashtable, and nsclasshashtable these c++ templates provide a high-level interface for using hashtables that hides most of the complexities of pldhash. they provide the following features: hashtable operations can be completed without using an entry class, making code easier to read; optional thread-safety: the hashtable can manage a read-write lock around the table; predefined key classes provide automatic cleanup of strings/interfaces nsinterfacehashtabl...

Mozilla internal string guide
rous because they lose information during the conversion process. you should avoid utf-16 to latin1 conversions unless your strings are guaranteed to be latin1 or ascii. (in the future, these conversions may start asserting in debug builds that their input is in the permissible range.) if the input is actually in the latin1 range, each 16-bit code unit in narrowed to an 8-bit byte by removing the high half. unicode code points above u+00ff result in garbage whose nature must not be relied upon. (in the future the nature of the garbage will be cpu architecture-dependent.) if you want to printf() something and don't care what happens to non-ascii, please convert to utf-8 instead. ns_lossyconvertutf16toascii(nsastring) - a nsautocstring which holds a temporary buffer containing the latin1 valu...
... to the corresponding methods. idl string types the c++ signatures follow the abstract-type convention described above, such that all method parameters are based on the abstract classes. the following table describes the purpose of each string type in idl. idl type c++ type purpose string char* raw character pointer to ascii (7-bit) string, no string classes used. high bit is not guaranteed across xpconnect boundaries. wstring char16_t* raw character pointer to utf-16 string, no string classes used. astring nsastring utf-16 string. acstring nsacstring 8-bit string. all bits are preserved across xpconnect boundaries. autf8string nsacstring utf-8 string. converted to utf-16 as necessary when value is use...

mozIRegistry
place to come to in order to find out how they are supposed to link together the various xpcom components that together form the mozilla browser. the information below is intended to tell you everything you need to know about how to do that. summary clients will rely on nsrepository to create instances of a given class. clients requiring dynamic "binding" of clsids will be required to use some higher-level services (tbd) to figure out the clsids they should use. the intent is that such services themselves be built on top of the new moziregistry interface. we are proposing a new "moziregistry" xpcom interface that provides the same level of function as is currently provided by the "netscape registry" implemented in libreg. nsrepository will be modified to use this interface, thereby enabling...
...her component that turns out to also be real important when you go to hook up your code with other mozilla components. that's the service manager. i'm just starting to understand the role it plays in this and it isn't really under my jurisdiction, so there's nothing about it here right now. in the future, i'll either add the information about it or at least put in a link to it's documentation. higher-level application components this box represents all the potential user's of the core registry/repository interfaces. your code (most likely) falls in this box. these components will, to various degrees, need to use other components to do their thing. those other components presumably implement particular xpcom interfaces. so how do you go about creating an object that can provide the interfac...

nsIEffectiveTLDService
psl. see publicsuffix.org for more information. the methods below implement the public suffix algorithm in full, including the implicit "*" rule. therefore, if you call getpublicsuffix("a.b.c.nonexistent"), you will get back "nonexistent" - this "tld" is not in the public suffix list, but the implicit "*" rule means that it is returned. this is the right answer for e.g. cookie setting and domain highlighting, but you should check whether it's the right answer for your application. it is not recommended to use this interface for determining whether a given string "is a domain name". that question is unanswerable with 100% accuracy using the psl, because what is a domain name is a property of the dns, which is different for different people. is "mail.intranet" actually a domain name? depends w...
... address. remarks note: prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), this method worked if you passed host strings starting with a period ("."). that is no longer the case, since these are not valid host names. you should strip leading periods off host names before passing them to this method. getpublicsuffix() returns the public suffix of a uri. a public suffix is the highest-level domain under which individual domains may be registered; it may therefore contain one or more dots. for example, the public suffix for www.bbc.co.uk is co.uk. likewise, the public suffix for developer.mozilla.org is org. acstring getpublicsuffix( in nsiuri auri ); parameters auri the uri to be analyzed. return value an acstring containing the public suffix. exceptions thrown...

nsIHTMLEditor
nt); void getalignment(out boolean amixed, out short aalign); astring getbackgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astring getheadcontentsashtml(); astring gethighlightcolorstate(out boolean amixed); void getindentstate(out boolean acanindent, out boolean acanoutdent); void getinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst,...
...ont face is in the selection. astring getfontfacestate( out boolean amixed ); parameters amixed true if there is more than one font face. return value name of face. note: "tt" is returned for tt tag. "" is returned for none. getheadcontentsashtml() output the contents of the <head> section as text/html format. astring getheadcontentsashtml(); parameters none. return value gethighlightcolorstate() returns what the highlight color of the selection. astring gethighlightcolorstate( out boolean amixed ); parameters amixed true if there is more than one font color. return value color string. "" is returned for none. getindentstate() document me! void getindentstate( out boolean acanindent, out boolean acanoutdent ); parameters acanindent acanoutdent...

nsISupportsPriority
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) this interface does not strictly define what happens when the priority of an object is changed. ...
...ject. in some cases, changing the priority of an object may be disallowed (resulting in an exception being thrown) or may simply be ignored. method overview void adjustpriority(in long delta); attributes attribute type description priority long the object's priority. it can be modified to change the priority of the object. typical priority values are defined in the idl file as priority_highest ... priority_lowest. the implementation is free to truncate a given priority value to whatever limits are appropriate. typically this attribute is initialized to priority_normal, but implementations may choose to assign a different initial value. constants constant value description priority_highest -20 the highest priority. priority_high -10 higher than normal priority. priority_n...

nsIXULWindow
bject that supports being a docshelltreeitem query accordingly to determine the capabilities. read only. xulbrowserwindow nsixulbrowserwindow provides access to the xulbrowserwindow object offering a way for the browser to update the user interface of the enclosing xul window. zlevel unsigned long one of the z level constants below. on some platforms, windows with a higher zlevel will be kept above windows with a lower zlevel. constants constant value description lowestz 0 loweredz 4 the z level of an independent window opened with the "alwayslowered" chrome flag. normalz 5 the default z level of an independent window. raisedz 6 the z level of an independent window opened with th...
...th a lower zlevel. constants constant value description lowestz 0 loweredz 4 the z level of an independent window opened with the "alwayslowered" chrome flag. normalz 5 the default z level of an independent window. raisedz 6 the z level of an independent window opened with the "alwaysraised" chrome flag. highestz 9 methods addchildwindow() tell this window that it has picked up a child xul window.note that xul windows do not currently track child xul windows. void addchildwindow( in nsixulwindow achild ); parameters achild the child window being added. native code only!applychromeflags back-door method to force application of chrome flags at a particular time. do not cal...

Weak reference
s not hold its referent in existence, but also will not dangle. when the referent is destroyed, the weak reference automatically becomes nsnull. this technique can significantly simplify certain relationships, and you should consider it when an owning reference is inappropriate, but where a raw pointer might end up dangling. how do i use it? here's an example. the new and interesting things are highlighted. #include "nsweakptr.h" #include "nsiweakreferenceutils.h" // ... // it's easy to get a weak reference... nsweakptr weakptr = do_getweakreference(afooptr); // ... { // ...but to use my weak reference, i'll need a (short-lived) owning reference nscomptr<nsifoo> tempfooptr = do_queryreferent(weakptr); if ( tempfooptr ) tempfooptr->somefoomethod(...); // else, the `real' objec...
...gly, e.g., //... #include "nsweakreference.h" class nsfoo : public nsifoo, ..., public nssupportsweakreference { ... }; // ...if you used the table macros to implement |queryinterface|, add an entry ns_interface_map_begin(nsfoo) // ... ns_interface_map_entry(nsisupportsweakreference) // ... ns_interface_map_end // ...if you used a |ns_imple_queryinterfacen| macro, move up to the next higher one and add a term ns_impl_queryinterfacen+1( ...,nsisupportsweakreference) // ...if you implemented |queryinterface| by hand, add a clause ns_imethodimp nsfoo::queryinterface( refnsiid aiid, void** ainstanceptr ) { // ... else if ( aiid.equals(nscomtypeinfo<nsisupportsweakreference>::getiid()) ) *ainstancepr = ns_static_cast(nsisupportsweakreference*, this); // ... } ...

Index
f these are standard events, such as those created by the dom. others are internal to gecko or other parts of mozilla application code. this reference will help you track those events down and learn how to use them. 25 filelink providers thunderbird filelink is a thunderbird feature that makes it easy for users to upload large attachments to web-based storage services such as hightail. 26 nsimsgcloudfileprovider nsimsgcloudfileprovider is the interface that must be implemented by new filelink providers. 27 folder pane interfaces this page contains a list of the interfaces that you'll will most likely use when writing extensions that affect the folder pane. see working with the folder pane for examples and code snippets. 28...
...org site is a distribution site where you can host your extension for free. your extension will be hosted on mozilla's mirror network. mozilla's site also provides users with easier installation and will automatically make new versions available to users of your existing versions when you upload them. in addition mozilla update allows users to comment and provide feedback on your extension. it is highly recommended that you use amo to distribute your extensions. 83 creating a custom column add-ons, extensions, thunderbird in this example we will be developing a small extension that will be adding a column that will display the "reply-to:" field of an email (if it exists, it if often not set). if you are unfamiliar with the setup and creation of an extension please read bui...

Mozilla
the articles below include content about downloading and building mozilla code. in addition, you'll find helpful articles about how the code works, how to build add-ons for mozilla applications and the like. a bird's-eye view of the mozilla framework the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework. accessibility and mozilla accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. mozilla strives to make its software accessible; the documents below cover the ways in ...
...e and techniques for inspecting those contents. performance the articles linked to from here will help you improve performance, whether you're developing core mozilla code or an add-on. phishing: a short definition in 2014, the msci estimated an annual global impact of phishing, and various forms of identity theft, to be as high as $5 billion usd. the impact has not improved much since. preferences the preference system makes it possible to store data for mozilla applications using a key/value pairing system. these articles provide information about how to use the preference system. productization guide productization is the choice of ''default'' search engin...

Drawing and Event Handling - Plugins
n update event in two ways: the browser calls setorigin(npport->portx, npport->porty). this method makes the instance's upper-left coordinate equal to (0,0). the browser sets the port's clip region to the region of the plug-in currently visible (not scrolled off the page, obscured by floating palettes, or otherwise hidden). however, for the plug-in to draw at any other time, for example, to highlight on a mouse-down event or draw animation at idle time, it must save the current setting of the port, set up its drawing environment as appropriate, draw, and then restore the port to the previous settings. in this case, the plug-in makes it unnecessary for the browser to save and restore its port settings before and after every call into the plug-in. the browser and the plug-in can both inst...
... and then restore the port to the previous settings. in this case, the plug-in makes it unnecessary for the browser to save and restore its port settings before and after every call into the plug-in. the browser and the plug-in can both install drag manager handlers for the shared port. because the drag manager calls both handlers no matter where the cursor is, the browser does not show the drag highlight when the cursor is over an instance rectangle. also, the browser does nothing when a drop occurs within an instance rectangle. the plug-in can then show the drag highlight and handle drops when they occur within the instance rectangle. the browser is also responsible for sending the plug-in all events targeted to an instance, such as mouse clicks when the cursor is within the instance recta...

Introduction to DOM Inspector - Firefox Developer Tools
nd the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined. one common use of the dom inspector is to find the name and location of particular icon being used in the user interface, which is not an easy task otherwise. if you're inspecting a chrome document, as you select nodes in the dom nodes viewer, the rendered versions of those nodes are highlighted in the user interface itself. (note that there are bugs which prevent the flasher from dom inspector apis from working correctly on certain platforms.) if you inspect the main browser window, for example, and select nodes in the dom nodes viewer (other than the elements which have no visible ui as is the case with the endless list of script elements that are loaded into browser.xul), you ...
...you can traverse the structure and go from the topmost parts parts of the dom tree to lower level nodes, such as the "search-go-button" icon that lets users perform a query using the selected search engine. now, once you have selected a node like the "search-go-button" node, you can select any one of several viewers to display information about that node in t...

DevTools API - Firefox Developer Tools
olpanel object of the selected panel once the tool has loaded and activated. selectnexttool() selects the next tool in the toolbox. return value: a promise that is fulfilled with the toolpanel object of the selected panel. selectprevioustool() selects the previous tool in the toolbox. return value: a promise that is fulfilled with the toolpanel object of the selected panel. highlighttool(toolid) highlights the tab for the given tool. parameters: toolid {string} - the tool to highlight. unhighlighttool(toolid) unhighlights the tab for the given tool. parameters: toolid {string} - the tool to unhighlight. opensplitconsole() opens the split console to the bottom of the toolbox. return value: a promise that is fulfilled once the console has loaded.
...g, optional. an accessibility label for the panel. ordinal integer, optional. the position of the tool's tab within the toolbox. default: 99 visibilityswitch string, optional. a preference name that controls the visiblity of the tool. default: devtools.{id}.enabled icon string, optional. an url for the icon to show in the toolbox tab. if undefined the label should be defined. highlightedicon string, optional. an url for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). default: {icon} icononly boolean, optional. if true, the label won't be shown in the tool's tab. default: false inverticonforlighttheme boolean, optional. if true the colors of the icon will be inverted for the light theme. default: false key s...

Select an element - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on. the selected element is shown in the html pane and its css is displayed in the css pane. the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard. w...
...click the element to select it: starting in firefox 52, if you shift + click the element, then it is selected but the picker stays active. this lets you see the rules for the element in the css pane, but conveniently select another element in the page. ...

Waterfall - Firefox Developer Tools
ions can cause unresponsiveness (jank): animations may not be smooth, or the site might even freeze. using the frame rate tool and the waterfall together, it's easy to see when long-running javascript is causing responsiveness problems. in the screenshot below, we've zoomed in on a js function that's caused a drop in the frame rate: the intensive javascript article shows how the waterfall can highlight responsiveness problems caused by long javascript functions, and how you can use asynchronous methods to keep the main thread responsive. expensive paints some paint effects, such as box-shadow, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. if you're seeing drops in the frame rate, especially during graphically...
...y non-incremental gc events, it's wise not to try to optimize for the specific implementation of the javascript engine. spidermonkey uses a complex set of heuristics to determine when gc is needed, and when non-incremental gc in particular is needed. in general, though: gc is needed when a lot of memory is being allocated non-incremental gc is usually needed when the memory allocation rate is high enough that spidermonkey may run out of memory during incremental gc when the waterfall records a gc marker it indicates: whether the gc was incremental or not the reason the gc was performed if the gc was non-incremental, the reason it was non-incremental starting in firefox 46, if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers". click t...

Shader Editor - Firefox Developer Tools
see a window divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context. if you hover over an entry in the list, the geometry drawn by that program is highlighted in red: if you click the eyeball icon just left of the program's entry, that program is disabled. this is useful for focusing on certain shaders or hiding overlapping geometry: if you click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them. editing shaders the middle and right hand panes show the vertex and fragment shaders for the curre...
... its vertex and fragment shaders are shown in the other two panes, and you can edit them. ...

Web Audio Editor - Firefox Developer Tools
properties that configure its operation. for example, the gainnode has a single gain property, while the oscillatornode has frequency and detune properties. the developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream. the web audio editor examines an audio context constructed in the page and provides a visualization of its graph. this gives you a high-level view of its operation, and enables you to ensure that all the nodes are connected in the way you expect. you can then examine and edit the audioparam properties for each node in the graph. some non-audioparam properties, like an oscillatornode's type property, are displayed, and you can edit these as well. this tool is still experimental. if you find bugs, we'd love it if you filed them in...
... connections to audioparams displaying connections to audioparams is new in firefox 34. connections between nodes are displayed as solid lines. if, instead, you've connected a node to an audioparam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the audioparam: inspecting and modifying audionodes if you click on a node, it's highlighted and you get a node inspector on the right hand side. this list the values of that node's audioparam properties. for example, here's what the oscillatornode looks like: with the violent theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. however, the value isn't updated in real time: you have t...

Rich output - Firefox Developer Tools
...
... ...

BaseAudioContext.createBuffer() - Web APIs
umseconds * samplerate. samplerate the sample rate of the linear audio data in sample-frames per second. all browsers must support sample rates in at least the range 8,000 hz to 96,000 hz. returns an audiobuffer configured based on the specified options. exceptions notsupportederror one or more of the options are negative or otherwise has an invalid value (such as numberofchannels being higher than supported, or a samplerate outside the nominal range). rangeerror there isn't enough memory available to allocate the buffer. examples first, a couple of simple trivial examples, to help explain how the parameters are used: var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(2, 22050, 44100); if you use this call, you will get a stereo buffer (two channels), that, ...
...pling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space. resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound). now let's look at a more complex createbuffer() example, in which we create a three second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comment should clearly explain what is going on. you can also run the code live, or view the source. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create a...

BiquadFilterNode.type - Web APIs
their meaning type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff. frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. not used highpass standard second-order resonant highpass filter with 12db/octave rolloff. frequencies below the cutoff are attenuated; frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given range o...
...he greater the q value, the larger the frequency band. not used lowshelf standard second-order lowshelf filer. frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged. the upper limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, it will be an attenuation. highshelf standard second-order highshelf filer. frequencies higher than the frequency get a boost or an attenuation; frequencies lower than it are unchanged. the lower limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, it will be an attenuation. peaking frequencies inside the range get a boost or an attenuation; f...

BiquadFilterNode - Web APIs
type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff. frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. not used highpass standard second-order resonant highpass filter with 12db/octave rolloff. frequencies below the cutoff are attenuated; frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given...
...e q value, the smaller the frequency band. not used lowshelf standard second-order lowshelf filter. frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged. the upper limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, it will be an attenuation. highshelf standard second-order highshelf filter. frequencies higher than the frequency get a boost or an attenuation; frequencies lower than it are unchanged. the lower limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, it will be an attenuation. peaking frequencies inside the range get a boost or an atten...

BlobEvent.timecode - Web APIs
specifications specification status comment mediastream recordingthe definition of 'timecode' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... specifications specification status comment mediastream recordingthe definition of 'timecode' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...

Document.querySelectorAll() - Web APIs
a list of matches to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test. var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attri...
...ontainer.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array. if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array notation to access the contents of the list. you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results. html consider this html, with its three nested <div> blocks. <div class="outer"> <div class="select"> <div class="inner"> ...

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
spaces at the beginning and end of a line are removed, so we finally get this: <h1>hello◦<span>world!</span></h1> this is why people visiting the web page will simply see the phrase "hello world!" nicely written at the top of the page, rather than a weirdly indented "hello" followed but an even more weirdly indented "world!" on the line below that. note: firefox devtools have supported highlighting text nodes since version 52, making it easier to see exactly what nodes whitespace characters are contained within. pure whitespace nodes are marked with a "whitespace" label. whitespace in block formatting contexts above we just looked at elements that contain inline elements, and inline formatting contexts. if an element contains at least one block element, then it instead establishe...
...id; } <ul class="people-list"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> you probably don't want the gaps in between the blocks — depending on the use case (is this a list of avatars, or horizontal nav buttons?), you probably want the element sides flush with each other, and to be able to control any spacing yourself. the firefox devtools html inspector will highlight text nodes, and also show you exactly what area the elements are taking up — useful if you are wondering what is causing the problem, and are maybe thinking you've got some extra margin in there or something! there are a few ways of getting around this problem: use flexbox to create the horizontal list of items instead of trying an inline-block solution. this handles everything for you...

Element: mouseout event - Web APIs
es to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>. ...
... working draft document object model (dom) level 3 events specifi...

Element: mouseover event - Web APIs
examples the following example illustrates the difference between mouseover and mouseenter events. ...
...tlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseover' in that specification. working draft document object model (dom) level 3 events speci...

Element.querySelectorAll() - Web APIs
a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <div> elements within "mybox" with a class of either "note" or "alert": var matches = mybox.queryselectorall("div.note, div.alert"); here, we get a list of the document's <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test". var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the iframe elements in the document that contain an attribute named "data-src": var matches = document.queryselectorall("iframe[data-src]"); here, an at...
...ontainer.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array. if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array notation to access the contents of the list. you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); note: nodelist is not a genuine array, that is to say it doesn't have the array methods like slice, some, map etc. to convert it into an array, try array.from(nodelist). user notes queryselectorall() behaves differently than most common javascript dom libraries,...

Geolocation.getCurrentPosition() - Web APIs
error optional an optional callback function that takes a geolocationpositionerror object as its sole input parameter. options optional an optional positionoptions object. options includes: maximumage: integer (milliseconds) | infinity - maximum cached position age. timeout: integer (milliseconds) - amount of time before the error callback is invoked, if 0 it will never invoke. ...
...tionpositionerror object as its sole input parameter. options optional an optional positionoptions object. options includes: maximumage: integer (milliseconds) | infinity - maximum cached position age. timeout: integer (milliseconds) - amount of time before the error callback is invoked, if 0 it will never invoke. ...

HTMLObjectElement.setCustomValidity - Web APIs
of the htmlobjectelement interface sets a custom validity message for the element. syntax htmlobjectelement.setcustomvalidity(message); parameters error the message to use for validity errors. return value undefined exceptions none. examples in this example, we pass the id of an input element, and set different error messages depending on whether the value is missing, too low or too high. additionally you must call the reportvalidity method on the same element or nothing will happen. function validate(inputid) { var input = document.getelementbyid(inputid); var validitystate_object = input.validity; if (validitystate_object.valuemissing) { input.setcustomvalidity('you gotta fill this out, yo!'); input.reportvalidity(); } else if (input.rangeunderflow) { input.setcu...
...call the reportvalidity method on the same element or nothing will happen. function validate(inputid) { var input = document.getelementbyid(inputid); var validitystate_object = input.validity; if (validitystate_object.valuemissing) { input.setcustomvalidity('you gotta fill this out, yo!'); input.reportvalidity(); } else if (input.rangeunderflow) { input.setcustomvalidity('we need a higher number!'); input.reportvalidity(); } else if (input.rangeoverflow) { input.setcustomvalidity('thats too high!'); input.reportvalidity(); } else { input.setcustomvalidity(''); input.reportvalidity(); } } it's vital to set the message to an empty string if there are no errors. as long as the error message is not null, the form will not pass validation and will not be submitted. ...

IDBOpenDBRequest: blocked event - Web APIs
tore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.targe...
...tore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.onblocked = () => { console.log('request was blocked'); }; }; ...

IntersectionObserverEntry.time - Web APIs
the time is specified in milliseconds since the creation of the containing document. example see timing element visibility with the intersection observer api for a complete example which uses the time property to track how long elements are visible to the user. ...
...the time is specified in milliseconds since the creation of the containing document. example see timing element visibility with the intersection observer api for a complete example which uses the time property to track how long elements are visible to the user. ...

Long Tasks API - Web APIs
janky animations and scrolling. ...
... janky animations and scrolling. ...

Using the Media Capabilities API - Web APIs
ntly and smoothly. in short, this api replaces—and improves upon—the mediasource method istypesupported() or the htmlmediaelement method canplaytype(). more and more finely-detailed information about the display's properties, so that informed decisions can be made when choosing the best format to play on the user's device. for example, you can use the api to ensure that you don't try to play high dynamic range (hdr) content on a standard dynamic range (sdr) screen. support for getting real-time feedback about the playback of media, so your code can make informed decisions about adapting the stream's quality or other settings to manage the user's perceived media performance and quality. one feature of this is the ability to detect when the device switches gpus, so you can make appropriate...
...e the user's perceived media performance and quality. one feature of this is the ability to detect when the device switches gpus, so you can make appropriate adjustments based on the new gpu's capabilities. note: the display capabilities functionality mentioned in the third point above have not yet appeared in any browser. they will be a useful feature of the api once available, but there is a high probability of the display capabilities functionality changing a great deal before browser implementations arrive. the mediacapabilities interface the mediacapabilities is available using the mediacapabilities property which is provided by both the navigator object and the workernavigator object; in other words, the media capabilities api is available both on the main thread and from workers. ...

Capabilities, constraints, and settings - Web APIs
se shortly. requesting a specific value for a setting most simply, each constraint may be a specific value indicating a desired value for the setting. for example: let constraints = { width: 1920, height: 1080, aspectratio: 1.777777778 }; mytrack.applyconstraints(constraints); in this case, the constraints indicate that any values are fine for nearly all properties, but that a standard high definition (hd) video size is desired, with the standard 16:9 aspect ratio. there's no guarantee that the resulting track will match any of these, but the user agent should do its best to match as many as possible. the prioritization of the properties is simple: if two properties' requested values are mutually exclusive, then the one listed first in the constraint set will be used. as an example...
... retrieving current constraints and settings it's important to remember the difference between constraints and settings. constraints are a way to specify what values you need, want, and are willing to accept for the various constrainable properties (as described in the documentation for mediatrackconstraints), while settings are the actual values of each constrainable property at th...

ParentNode.querySelectorAll() - Web APIs
valid. ...
...<div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test. ...

PerformanceMark - Web APIs
performancemark is an abstract interface for performanceentry objects with an entrytype of "mark". entries of this type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance timeline. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="...
...l: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark". performanceentry.name returns the name given to the mark when it was created via a call to performance.mark(). performanceentry.starttime returns the domhighrestimestamp when performance.mark() was called. performanceentry.duration returns "0". (a mark has no duration.) methods this interface has no methods. example see the example in using the user timing api. specifications specification status comment user timing level 2the definition of 'performancemark' in that specification. working draft user tim...

PerformanceMeasure - Web APIs
performancemeasure is an abstract interface for performanceentry objects with an entrytype of "measure". entries of this type are created by calling performance.measure() to add a named domhighrestimestamp (the measure) between two marks to the browser's performance timeline. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco...
...rformanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure". performanceentry.name returns the name given to the measure when it was created via a call to performance.measure(). performanceentry.starttime returns a timestamp given to the measure when performance.measure() was called. performanceentry.duration returns a domhighrestimestamp that is the duration of the measure (typically, the measure's end mark timestamp minus its start mark timestamp). methods this interface has no methods. example see the example in using the user timing api. specifications specification status comment user timing level 2the definition of 'performancemeasure' in that specification. working draft ...

PerformanceResourceTiming.workerStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...

RTCInboundRtpStreamStats.sliCount - Web APIs
inboundrtpstreamstats dictionary indicates how many slice loss indication (sli) packets the rtcrtpreceiver for which this object provdes statistics sent to the remote rtcrtpsender. an sli packet is used by a decoder to let the encoder know that it's detected corruption of one or more consecutive macroblocks (in scan order) in the received media. ...
... this is a very technical part of how video codecs work. for details, see rfc 4585: 6.3.2. note: this value is only present for video media. ...

RTCOutboundRtpStreamStats.sliCount - Web APIs
dictionary indicates how many slice loss indication (sli) packets the rtcrtpsender received from the remote rtcrtpreceiver for the rtp stream described by this object. ...
... this is a very technical part of how video codecs work. for details, see rfc 4585: 6.3.2. note: this value is only present for video media. ...

Range.setStart() - Web APIs
r 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.setstart() and range.setend() methods to add part of an address to a range. the selected range is then highlighted using range.surroundcontents(). the address contains nine nodes: five text nodes, and four <br> elements. html <p id="address">wyatt earp<br> 101 e. main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the origin...
...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 t...

Streams API concepts - Web APIs
s, these are the chunks that have been enqueued but not yet read in the case of writable streams, these are chunks that have been written but not yet processed by the underlying sink. internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state. in general, the strategy compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage. the calculation performed is high water mark - total size of chunks in queue = desired size the desired size is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. after the calculation is performed, chunk generation will be slowed down/sped up...
...ing the desired size above zero. if the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems. note: what happens in the case of zero or negative desired size hasn’t really been defined in the spec so far. patience is a virtue. as an example, let's take a chunk size of 1, and a high water mark of 3. this means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied. ...

Using readable streams - Web APIs
as a javascript developer, programmatically reading and manipulating streams of data received over the network, chunk by chunk, is very useful! but how do you use the streams api’s readable stream functionality? this article explains the basics. note: this article assumes that you understand the use cases of readable streams, and are aware of the high-level concepts. if not, we suggest that you first read the streams concepts and usage overview and dedicated streams api concepts article, then come back. note: if you are looking for information on writable streams try using writable streams instead. browser support you can consume fetch body objects as streams and create your own custom readable streams in firefox 65+ and chrome 42+ (and equivalent chromium-based browsers). pipe chai...
...mes 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 stream. you’ll rarely have to do this, so we’ll just concentrate on the first one for now. the first obj...

Using Touch Events - Web APIs
processing emulated mouse events. // touchmove handler function process_touchmove(ev) { // set call preventdefault() ev.preventdefault(); } best practices here are some best practices to consider when using touch events: minimize the amount of work that is done in the touch handlers. add the touch point handlers to the specific target element (rather than the entire document or nodes higher up in the document tree). add touchmove, touchend and touchcancel event handlers within the touchstart. the target touch element or node should be large enough to accommodate a finger touch. if the target area is too small, touching it could result in firing other events for adjacent elements. implementation and deployment status the touch events browser compatibility data indicates touch ...
...ts mdn article. the pointer event model can simplify an application's input processing since a pointer represents input from any input device. additionally, the pointer event types are very similar to mouse event types (for example, pointerdown pointerup) thus code to handle pointer events closely matches mouse handling code. the implementation status of pointer events in browsers is relatively high with chrome, firefox, ie11 and edge having complete implementations. examples and demos the following documents describe how to use touch events and include example code: touch events overview implement custom gestures introduction to touch events in javascript add touch screen support to your website (the easy way) touch event demonstrations: paint program (by rick byers) touch/poi...

WebGL: 2D and 3D graphics for the web - Web APIs
webgl does so by introducing an api that closely conforms to opengl es 2.0 that can be used in html5 <canvas> elements. this conformance makes it possible for the api to take advantage of hardware graphics acceleration provided by the user's device. support for webgl is present in firefox 4+, google chrome 9+, opera 12+, safari 5.1+, internet explorer 11+, and microsoft edge build 10240+; however, the user's device must also have hardware that supports these features. ...
...amentals of webgl. webgl playground an online tool for creating and sharing webgl projects. good for quick prototyping and experimenting. webgl academy an html/javascript editor with tutorials to learn basics of webgl programming. webgl stats a site with statistics about webgl capabilities in browsers on different platforms. libraries glmatrix is a javascript matrix and vector library for high-performance webgl apps. philogl is a webgl framework for data visualization, creative coding, and game development. pixi.js is a fast, open-source 2d webgl renderer. playcanvas is an open-source game engine. sylvester is an open-source library for manipulating vectors and matrices. not optimized for webgl but extremely robust. three.js is an open-source, fully featured 3d webgl library. pha...

Fundamentals of WebXR - Web APIs
riters determine the best approaches to creating an api for virtual reality on the web. as browser developers built support for webvr and allowed developers to experiment, it became clear that in order to finish an api for virtual environments on the web, it would make more sense to start a new specification than to try to "fix" webvr. thus, webxr was created. the most obvious difference, at the highest level, is that webxr supports not just virtual reality applications, but also augmented reality, which blends virtual objects with the user's true physical environment. another key difference is that webxr has integrated support for the advanced input controllers that are used with most mixed reality headsets, while webvr relied on the gamepad api to support the controllers. in webxr, the pri...
...a web document, or in full screen mode. this is most common when the user either doesn't have a dedicated xr device, or when the user is viewing the ar or vr app on a phone or other handheld device. simpler and lower-priced xr devices typically use an integrated computer or connect to a smartphone, essentially using the mobile cpu and gpu to run apps, render images, and display them to the user. higher-powered solutions typically offload application execution and graphics processing to an external device such as a desktop computer, and are either tethered to the computer using a cable or use a wireless network to receive the imagery to display to the user. headsets most immersive vr experiences take place using goggles or a headset of some kind. a vr headset is worn on the head, with a stra...

Lighting a WebXR setting - Web APIs
vector perpendicular to the surface), the intensity or brightness of the light reflected by an object varies depending on the surface's orientation relative to the light source. a photo taken by nasa's cassini spacecraft showing specular reflection of light from a lake of liquid methane on the surface of saturn's moon titan. specular light specular light is the light that makes up the highlights on reflective objects, such as gems, eyes, shiny cups and plates, and the like. specular lights tend to appear as bright spots or squares on a surface at the point where a light source strikes the surface most directly. every light source is represented by some combination of ambient, diffuse, and/or specular light. the webgl shader program takes the color, directionality, brightness, and ...
...dged somewhat from the true value. there are many ways this could be done. spherical harmonics precision browsers can mitigate the risk of fingerprinting by reducing the precision of spherical harmonics. when performing real-time rendering—as is the case with any virtual or augmented reality application—spherical harmonic lighting is used to simplify and accelerate the process of generating highly realistic shadows and shading. by altering the accuracy of these functions, the browser makes the data less consistent, and, importantly, makes the data generated by two computers differ, even in the same setting. decoupling orientation from lighting in an ar application that uses geolocation to determine orientation and potentially position information, avoiding having that information direc...

Advanced techniques: Creating and sequencing audio - Web APIs
of all frequencies, which in turn is actually quite dramatic and piercing. we could modify the function to run values from 0.5 to -0.5 or similar to take the peaks off and reduce the discomfort, however, where's the fun in that? let's route the noise we've created through a filter. adding a biquad filter to the mix we want something in the range of pink or brown noise. we want to cut off those high frequencies and possibly some of the lower ones. let's pick a bandpass biquad filter for the job. note: the web audio api comes with two types of filter nodes: biquadfilternode and iirfilternode. for the most part a biquad filter will be good enough — it comes with different types such as lowpass, highpass, and bandpass. if you're looking to do something more bespoke, however, the iir filter ...
...heduling system, whereby we look ahead at when the notes are going to play and push them into a queue. we can start them at a precise time with the currenttime property and also take into account any changes. note: this is a much stripped down version of chris wilson's a tale of two clocks article, which goes into this method in much more detail. there's no point repeating it all here, but it's highly recommended to read this article and use this method. much of the code here is taken from his metronome example, which he references in said article. let's start by setting up our default bpm (beats per minute), which will also be user-controllable via — you guessed it — another range input. let tempo = 60.0; const bpmcontrol = document.queryselector('#bpm'); bpmcontrol.addeventlistener(...

Basic concepts behind Web Audio API - Web APIs
e case of stereo). a frame, or sample frame, is the set of all values for all channels that will play at a specific point in time: all the samples of all the channels that play at the same time (two for a stereo sound, six for 5.1, etc.) the sample rate is the number of those samples (or frames, since all samples of a frame play at the same time) that will play in one second, measured in hz. the higher the sample rate, the better the sound quality. let's look at a mono and a stereo audio buffer, each is one second long, and playing at 44100hz: the mono buffer will have 44100 samples, and 44100 frames. the length property will be 44100. the stereo buffer will have 88200 samples, but still 44100 frames. the length property will still be 44100 since it's equal to the number of frames. w...
...ing is very similar to image resizing. say you've got a 16 x 16 image, but you want it to fill a 32x32 area. you resize (or resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space. resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound. planar versus interleaved buffers the web audio api uses a planar buffer format. the left and right channels are stored like this: llllllllllllllllrrrrrrrrrrrrrrrr (for a buffer of 16 frames) this is very common in audio processing: it makes it easy to process each channel independently. the alternative is to use an interleaved buffer format: lrlrlrlrlrl...

Using IIR filters - Web APIs
e response filter. there's a really good overview to iif filters and fir filters here. a biquad filter is actually a specific type of infinite impulse response filter. it's a commonly-used type and we already have it as a node in the web audio api. if you choose this node the hard work is done for you. for instance, if you want to filter lower frequencies from your sound, you can set the type to highpass and then set which frequency to filter from (or cut off). there's more information on how biquad filters work here. when you are using an iirfilternode instead of a biquadfilternode you are creating the filter yourself, rather than just choosing a pre-programmed type. so you can create a highpass filter, or a lowpass filter, or a more bespoke one. and this is where the iir filter node is use...
...lternode instead of a biquadfilternode you are creating the filter yourself, rather than just choosing a pre-programmed type. so you can create a highpass filter, or a lowpass filter, or a more bespoke one. and this is where the iir filter node is useful — you can create your own if none of the alaready available settings is right for what you want. as well as this, if your audio graph needed a highpass and a bandpass filter within it, you could just use one iir filter node in place of the two biquad filter nodes you would otherwise need for this. with the iirfilter node it's up to you to set what feedforward and feedback values the filter needs — this determines the characteristics of the filter. the downside is that this involves some complex maths. if you are looking to learn more the...

Worklet - Web APIs
worklet types worklets are restricted to specific use cases; they cannot be used for arbitrary computations like web workers. the worklet interface abstracts properties and methods common to all kind of worklets, and cannot be created directly. ...
... paintworklet for programmatically generating an image where a css property expects a file. access this interface through css.paintworklet. chrome: main thread gecko: paint thread css painting api audioworklet for audio processing with custom audionodes. web audio render thread web audio api animationworklet for creating scroll-linked and other high performance procedural animations. compositor thread css animation worklet api layoutworklet for defining the positioning and dimensions of custom elements. css layout api for 3d rendering with webgl, you don't use worklets. instead, you write vertex shaders and fragment shaders using glsl code, and those shaders will then run on the graphics card. properties th...

WritableStream - Web APIs
/ call ready again to ensure that all chunks are written // before closing the writer. ...
...appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example. backpressure because of how backpressure is supported in the api, its implementation in code may be less than obvious. to see how backpressure is implemented look for three things. the highwatermark property, which is set when creating the counting strategy (line 35), sets the maximum amount of data that the writablestream instance will handle in a single write() operation. in this example, it's the maximum amount of data that can be sent to defaultwriter.write() (line 11). the defaultwriter.ready property returns a promise that resolves when the sink (the first property of the wri...

Web APIs
ist of all the apis that are available. ...
...lipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto cryptokey cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent ...

ARIA Test Cases - Accessibility
eader should indicate that it's checkable. if it has a submenu (aria-haspopup), the screen reader should indicate that as well. (mz) if a menu is dropped down, the activation of the new menu should be indicated and the focus tracked as it moves through the items. (mz) when the menu is closed, screen reader should indicate this along with the newly focused item. (mz) this may be the menu bar or higher level menu item, or a control that gains focus after the menu was closed after executing a command. (mz) if the menu caused a dialog to open, the dialog context should be given, just as with regular desktop applications. markup used: role="menubar", role="menu", role="menuitem", role="menuitemcheckbox", role="menuitemradio" aria-haspopup="true" aria-disabled="true" notes: results: ...
...could make a sound when there is only 1 autocomplete option remaining. markup used: aria-autocomplete notes: results: at firefox ie opera safari jaws 9 fail fail n/a n/a jaws 10 fail - does not announce the presence of autocomplete possibilities, does not do this anywhere in windows. reads autocomplete suggestions through its ordinary highlight color mechanism. fail - - voiceover (leopard) n/a n/a - fail window-eyes fail fail - - nvda pass n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - describedby aria-describedby aria-describedby with display: none aria-descri...

Accessibility: What users can do to browse more safely - Accessibility
ettings. those in the public sector who must accomodate those with special sensitivities, should consider setting aside at least one work station and becoming familiar with its personalization and accessibility settings. understanding personalization and accessibility settings can actually be a money-saving endeavor. one work station can be set up to acommodate both a low-vision individual (needs high-contrast) and to accomodate an individual with photosensitive susceptibilities, by simply, adjusting personalization and accessiblity settings. use modern browers. learn personalization and accessibility settings firefox 73 and above (dekstop) firefox added support for css prefers-reduced-motion in october 2018. chrome 74 and above (desktop) chrome 74 added support for reduced-motion-query, ...
...ccessibility" in the search finder of the operating system. turn off animations in the operating system in the windows10 operating system, the user has an ability to turn off animations. this will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings.. grayscale those who have sufferred traumatic brain injury (tbi) may be highly sensitive to color; it can require such a great "investment of cognitive energy" on their part, there's no energy for other daily tasks. enabling grayscale presentation of the content reduces the cognitive workload. it may assist users with other disabilities, as well. an interesting discussion by users on the benefits of using grayscale may be found in the discussion thread, "what is the “g...

Accessibility Information for Web Authors - Accessibility
t group discussion list. how-to's key-navigable custom dhtml widgets in mozilla & ie this document discusses how to use tabindex, element.focus() and onkeypress to make custom dhtml widgets such as menus or tree views keyboard accessible. accessible web page authoring ibm has put together a simple, practical resource for web authors to learn accessibility the fast and painless way. highly recommended, an excellent resource. dive into accessibility by mark pilgrim an excellent, easy-to-understand resource (available in english and in 9 other languages) on accessible website authoring, which goes into greater depth. in 30 days, you will know why your website should be accessible and how to make it more accessible. automated checking & repair cynthia says™ from hisoft...
...idator (based on w3c tidy and on opensp for sgml validation) is a powerful, versatile, extended html validator. it's free. it works off-line and that is a major advantage over other accessibility checkers. no document upload needed and no additional application to launch; everything is accessible within the firefox browser. this html advanced validator firefox extension is very resourceful and highly customizable. it's an extension add-on to firefox 2.x and firefox 3.x. it not only checks and reports possible markup errors and warnings (based on w3c tidy and/or based on true sgml validation) but it can also report accessibility errors and warnings according to selectable accessibility guidelines (section 508, wcag priorities 1, 2 or 3). its accessibility report is viewable in the view sourc...

Web accessibility for seizures and physical reactions - Accessibility
orders can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes” and goes on to note, very specifically that: “people are even more sensitive to red flashing than to other colors, so a special test is provided for saturated red flashing”. you don't even need an image or video to cause harm. a <div> element set to change color and luminosity at high frequency, easily done via javascript, can cause real harm. and, flickering can occur everywhere. for example, "spinners" commonly used to display while pages load, can easily "flicker" while spinning. additional concerns exist for individuals with motor-skills problems. for example, the page for trace research & development center’s photosensitive epilepsy analysis tool notes that “photosen...
...he style of the document. an author might choose to adjust the visuals and/or layout of the page depending on the display technology to increase the appeal or improve legibility." user preference media features (planned in media queries level 5) user preference media features in w3c editor's draft media queries level 5 are especially promising in providing user control over media. here are some highlights: inverted-colors according to the section, user preference media features , "the inverted-colors media feature indicates whether the content is displayed normally, or whether colors have been inverted." forced-colors in forced-colors-mode, the user agent enforces the user's preferred color palette on the page, overriding the author's chosen colors. from w3c's draft document, media quer...

::placeholder - CSS: Cascading Style Sheets
ray color by default. syntax ::placeholder accessibility concerns color contrast contrast ratio placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind. it is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data. color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. in order to meet current web ...
...unced, and the person using the screen reader can mute it if they find the extra information unnecessary. <label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in windows high contrast mode. this will make it difficult for some people to determine which content has been entered, and which content is placeholder text. greg whitworth — how to use -ms-high-contrast labels placeholders are not a replacement for the <label> element. without a ...

::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text). ::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored. syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it. <p>also try selecting text in this paragraph.</p> css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color...
...selected text styles for purely aesthetic reasons — users can customize them to suit their needs. for people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality. if overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it. color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. to meet current web content accessibility guidelines (wcag), text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings. (wcag defines large text as between 18.66px and 24px and bo...

CSS Fonts - CSS: Cascading Style Sheets
different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. this article will give you all you need to know to get you started using variable fonts. ...
...rticle will give you all you need to know to get you started using variable fonts. specifications specification status comment css fonts module level 4 working draft adds font-variation-settings (and related higher-level properties) and font-optical-sizing. ...

Basic Concepts of grid layout - CSS: Cascading Style Sheets
l 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 adding the grid-template-columns property, then defining the size of the column tracks. i have now created a grid with three 200-pixel-wide column tracks. the child items will be laid out on this grid one in each grid cell. <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div...
...that you can use the grid inspector in firefox developer tools to see how the items are positioned against the lines of the grid. grid cells a grid cell is the smallest unit on a grid. conceptually it is like a table cell. as we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. in the below image, i have highlighted the first cell of the grid. grid areas items can span one or more cells both by row or by column, and this creates a grid area. grid areas must be rectangular – it isn’t possible to create an l-shaped area for example. the highlighted grid area spans two row and two column tracks. gutters gutters or alleys between grid cells can be created using the column-gap and row-gap prope...

Layout using named grid lines - CSS: Cascading Style Sheets
e the span keyword here. my next item will be placed from the 7th line named col-start and span 3 lines. .item2 { grid-column: col-start 7 / span 3; } <div class="wrapper"> <div class="item1">i am placed from col-start line 1 to col-start 5</div> <div class="item2">i am placed from col-start line 7 spanning 3 lines</div> </div> if you take a look at this layout in the firefox grid highlighter you can see how the column lines are shown, and how our items are placed against these lines. the repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. the code below would create an eight track grid, with a narrower 1fr width column named col1-start followed by a wider 3fr column named col2-start. .wrapper { grid-template-...
...s="main-footer">i am the footer</footer> </div> i could then place this on my grid layout framework like this. .main-header, .main-footer { grid-column: col-start / span 12; } .side1 { grid-column: col-start / span 3; grid-row: 2; } .content { grid-column: col-start 4 / span 6; grid-row: 2; } .side2 { grid-column: col-start 10 / span 3; grid-row: 2; } once again, the grid highlighter is helpful to show us how the grid we have placed our items on works. that’s all i need. i don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the 1fr column tracks. as you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the ty...

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
grids in a later guide. a basic example as a very simple example we can take a grid with 3 column tracks and 3 row tracks. this gives us 4 lines in each dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: rep...
... ...

Basic Shapes - CSS: Cascading Style Sheets
reference box in the guide on creating shapes from box values, which directly uses the reference box to create the shape. the firefox shapes inspector helpfully shows the reference box in use when you inspect a shape. in the screenshot below i have created a circle, using shape-outside: circle(50%). the floated element has 20 pixels of padding, border and margin applied, and the shapes inspector highlights these reference boxes. when using a basic shape the reference box used by default is the margin-box. you can see in the screenshot that the shape is being defined with reference to that part of the box model. you can add the various box values after your basic shape definition. therefore the default behaviour is as if you have defined. .shape { shape-outside: circle(50%) margin-box; }...
...(a polygon must at least draw a triangle). these values are co-ordinates drawn with reference to the reference box. in the example below i have created a shape for text to follow using the polygon(), you can change any of the values to see how the shape is changed. you may well find the firefox shape inspector very useful here to create your polygon shape. the screenshot below shows the shape highlighted in the tool. another useful resource is clippy - a tool for creating shapes for clip-path, as the values for basic shapes are the same as those used for clip-path. ...

Using CSS transitions - CSS: Cascading Style Sheets
it's easy to use transitions to make the effect even more attractive. before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions). first, we set up the menu using html: <nav> <a href="#">home</a> <a href="#">about...
...it's easy to use transitions to make the effect even more attractive. before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions). first, we set up the menu using html: <nav> <a href="#">home</a> <a href="#">about</a> <a href="#">contact us</a> <a href="#...

WebKit CSS extensions - CSS: Cascading Style Sheets
up** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -webkit-font-size-delta -webkit-font-smoothing -webkit-highlight -webkit-hyphenate-character -webkit-hyphenate-limit-after -webkit-hyphenate-limit-before -webkit-hyphenate-limit-lines -webkit-initial-letter l -webkit-line-align -webkit-line-box-contain -webkit-line-clamp -webkit-line-grid -webkit-line-snap -webkit-locale -webkit-logical-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin...
...pe -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standa...

image-rendering - CSS: Cascading Style Sheets
by image-rendering. this property has no effect on non-scaled images. syntax /* keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset; values auto the scaling algorithm is ua dependent. ...
...ndering: unset; values auto the scaling algorithm is ua dependent. since version 1.9 (firefox 3.0), gecko uses bilinear resampling (high quality). smooth the image should be scaled with an algorithm that maximizes the appearance of the image. in particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. this is intended for images such as photos. high-quality identical to smooth, but with a preference for higher-quality scaling. if system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree. crisp-edges the image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not ...

image-set() - CSS: Cascading Style Sheets
the image-set() css function notation is a method of letting the browser pick the most appropriate css image from a given set, primarily for high pixel density screens. resolution and bandwidth differ by device and network access. the image-set() function delivers the most appropriate image resolution for a user’s device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load. image-set() allows the author to provide options rather than determining what eac...
...ts per centimeter. every image within an image-set() must have a unique resolution. examples background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); this example shows how to use image-set() to provide two alternative background-image options, chosen depending on the resolution needed: a normal version and a high-resolution version. accessibility concerns browsers do not provide any special information on background images to assistive technology. this is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. if the image contains information critical to understanding the page's overall purpose, it is better to describe it sem...

Event reference
e. touchstart touchevent touch events a touch point is placed on the touch surface. transitionend transitionevent css transitions a css transition has completed. unload uievent dom l3 the document or a dependent resource is being unloaded. upgradeneeded indexeddb an attempt was made to open a database with a version number higher than its current version. a versionchange transaction has been created. userproximity userproximityevent proximity sensor fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not). voiceschanged event web speech api the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.
...heckbox has been changed either by a user action or by a script (useful for accessibility). close xul the close button of the window has been clicked. command xul an element has been activated. commandupdate xul a command update occurred on a commandset element. dommenuitemactive xul a menu or menuitem has been hovered or highlighted. dommenuiteminactive xul a menu or menuitem is no longer hovered or highlighted. popuphidden popupevent xul a menupopup, panel, or tooltip has been hidden. popuphiding popupevent xul a menupopup, panel, or tooltip is about to be hidden. popupshowing popupevent xul a menupopup, panel, or tooltip is about to become visi...

<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
the applet's class file to be loaded and executed. applet filenames are identified by a .class filename extension. the url specified by code might be relative to the codebase attribute. codebase this attribute gives the absolute or relative url of the directory where applets' .class files referenced by the code attribute are stored. datafld this attribute, supported by internet explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. this attribute might be used to specify the various <param> elements passed to the java applet. datasrc like datafld, this attribute is used for data binding under internet explorer 4. it indicates the id of the data source object that supplies the data that is bound to the <param> elements associated with th...
...ayscript in the netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document. name this attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts. object this attribute specifies the url of a serialized representation of an applet. src as defined for internet explorer 4 and higher, this attribute specifies a url for an associated file for the applet. the meaning and use is unclear and not part of the html standard. vspace this attribute specifies additional vertical space, in pixels, to be reserved above and below the applet. width this attribute specifies in pixels the width that the applet needs. example html <applet code="game.class" align="left" archive="game...

<input type="date"> - HTML: Hypertext Markup Language
doesn't use it, the text input fallback will. for example, try viewing the following in a unsupporting browser: <form> <label for="bday">enter your birthday: <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern ####-##-## (where # is a digit from 0 to 9). of course, this doesn't stop people from entering invalid dates, or incorrect formats. so we still have a problem. span { position: relative; } span::after { right: -18px; position: absolute; } input:invalid + span::after { content: '✖'; } input:valid + span::after { co...
...ct> for(i = 1; i <= daynum; i++) { var option = document.createelement('option'); option.textcontent = i; dayselect.appendchild(option); } // if previous day has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.

<input type="datetime-local"> - HTML: Hypertext Markup Language
of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. div { margin-bottom: 10px; } input:invalid + span {...
...ct> for(i = 1; i <= daynum; i++) { var option = document.createelement('option'); option.textcontent = i; dayselect.appendchild(option); } // if previous day has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.

<input type="tel"> - HTML: Hypertext Markup Language
this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. maxlength the maximum number of characters (as utf-16 code units) the user can enter into the telephone number field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the telephone number field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-16 code units long. minlength the minimum number of characters (as utf-16 code units)...
...pty input is invalid and won't be submitted to the server using the required attribute. ...

<input type="time"> - HTML: Hypertext Markup Language
for example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 pm, run through midnight to the next day, ending at 2:00 am. see more in the making min and max cross midnight section of this article. list the values of the list attribute is the id of a <datalist> element located in the s...
...of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern. then there's the problem of the user having no idea exactly what format the time is expected to be in. div { margin-bottom: 10px; position: relative; } input[type=...

<picture>: The Picture element - HTML: Hypertext Markup Language
ure>: art direction. cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays). offering alternative image formats, for cases where certain formats are not supported. saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display. if providing higher-density versions of an image for high-dpi (retina) display, use srcset on the <img> element instead. this lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions. content categories flow content, phrasing content, embedded content permitted content zero or more <source> elements, followed by one <img> elem...
...narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size. it is composed of a comma-separated list of image descriptors. each image descriptor is composed of a url of the image, and either... a width descriptor, followed by a w (such as 300w); or a pixel density descriptor, followed by an x (such as 2x) to serve a high-res image for high-dpi screens. <picture> <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> <source srcset="logo-480.png, logo-480-2x.png 2x"> <img src="logo-320.png" alt="logo"> </picture> the type attribute the type attribute specifies a mime type for the resource url(s) in the <source> element's srcset attribute. if the user agent does not support the given type, the <sourc...

<td>: The Table Data Cell element - HTML: Hypertext Markup Language
rents a <tr> element. implicit aria role cell if a descendant of a <table> element permitted aria roles any dom interface htmltabledatacellelement attributes this element includes the global attributes. colspan this attribute contains a non-negative integer value that indicates for how many columns the cell extends. its default value is 1. values higher than 1000 will be considered as incorrect and will be set to the default value (1). headers this attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element. rowspan this attribute contains a non-negative integer value that indicates for how many rows the cell extends. its default value is 1; if its value is se...
...ed strings, each corresponding to the id attribute of the <th> elements that apply to this element. rowspan this attribute contains a non-negative integer value that indicates for how many rows the cell extends. its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. values higher than 65534 are clipped down to 65534. deprecated attributes abbr this attribute contains a short abbreviated description of the cell's content. some user-agents, such as speech readers, may present this description before the content itself. note: do not use this attribute as it is obsolete in the latest standard. alternatively, you can put the abbreviated description inside the cell a...

<th> - HTML: Hypertext Markup Language
t attributes this element includes the global attributes. abbr this attribute contains a short abbreviated description of the cell's content. some user-agents, such as speech readers, may present this description before the content itself. colspan this attribute contains a non-negative integer value that indicates for how many columns the cell extends. its default value is 1. values higher than 1000 will be considered as incorrect and will be set to the default value (1). headers this attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element. rowspan this attribute contains a non-negative integer value that indicates for how many rows the cell extends. its default value is 1; if its value is se...
...ed strings, each corresponding to the id attribute of the <th> elements that apply to this element. rowspan this attribute contains a non-negative integer value that indicates for how many rows the cell extends. its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. values higher than 65534 are clipped down to 65534. scope this enumerated attribute defines the cells that the header (defined in the <th>) element relates to. it may have the following values: row: the header relates to all cells of the row it belongs to. col: the header relates to all cells of the column it belongs to. rowgroup: the header belongs to a rowgroup and relates to all of its cells. th...

HTML elements reference - HTML: Hypertext Markup Language
s to related documents. <header> the html <header> element represents introductory content, typically a group of introductory or navigational aids. it may contain some heading elements but also a logo, a search form, an author name, and other elements. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> the html <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. <hgroup> the html <hgroup> element represents a multi-level heading for a section of a document. it groups a set of <h1>–<h6> elements. <main> the html <main> element represents the dominant content of the <body> of a document. the main content area consists of content that is directly related to or expands upon the central to...
...t off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. <kbd> the html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. <mark> the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context. <q> the html <q> element indicates that the enclosed text is a short inline quotation. most modern browsers implement this by surrounding the text in quotation marks. <rb> the html ruby base (<rb>) element is used to delimit the base text component...

Link types - HTML: Hypertext Markup Language
g to a specific part of the document or to the document as a whole. only the data on the page can indicate this. note: although recognized, the synonym copyright is incorrect and must be avoided. <a>, <area>, <form>, <link> none. manifest indicates that the linked file is a web app manifest. <link> <a>, <area>, <form> modulepreload initiates early (and high-priority) loading of module scripts. <link> <a>, <area>, <form> next indicates that the hyperlink leads to the next resource of the sequence the current page is in. note: other link types related to linking resources in the same sequence are first, prev, last. <a>, <area>, <form>, <link> none. nofollow indicates that the linked document is not endorsed...
...ag indicates that the hyperlink refers to a document describing a tag that applies to this document. note: this link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages. <a>, <area> <link>, <form> up indicates that the page is part of a hierarchical structure and that the hyperlink leads to the higher level resource of that structure. the number of up link types indicates the depth difference between the current page and the linked resource. <a>, <area>, <link> <form> specifications specification status comment preloadthe definition of 'preload' in that specification. candidate recommendation added preload. resource hintsthe d...

Evolution of HTTP - HTTP
ertext transfer protocol) is the underlying protocol of the world wide web. developed by tim berners-lee and his team between 1989-1991, http has seen many changes, keeping most of the simplicity and further shaping its flexibility. http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d. invention of the world wide web in 1989, while he was working at cern, tim berners-lee wrote a proposal to build a hypertext system over the internet. initially calling it the mesh, it was later renamed to world wide web during its implementation in 1990. built over the existing tcp and ip protocols, it consisted of 4 building blocks: a textual format to represent hypertex...
...ilar among a set of requests, this removes duplication and overhead of data transmitted. it allows a server to populate data in a client cache, in advance of it being required, through a mechanism called the server push. officially standardized, in may 2015, http/2 has had much success. by july 2016, 8.7% of all web sites[1] were already using it, representing more than 68% of all requests[2]. high-traffic web sites showed the most rapid adoption, saving considerably on data transfer overheads and subsequent budgets. this rapid adoption rate was likely as http/2 does not require adaptation of web sites and applications: using http/1.1 or http/2 is transparent for them. having an up-to-date server communicating with a recent browser is enough to enable its use: only a limited set of groups ...

Browser detection using the user agent - HTTP
ond method uses a column layout and resents all the dogs to the left and all the cats to the right. only in this particular scenario, it is appropriate to provide no fallback for the flexboxes/multicolumns, resulting in a single column of very wide boxes on old browsers. also consider the following. if more people visit the webpage to see the cats, then it might be a good idea to put all the cats higher in the source code than the dogs so that more people can find what they are looking for faster on smaller screens where the content collapses down to one column. next, always make your code dynamic. the user can flip their mobile device on its side, changing the width and height of the page. or, there might be some weird flip-phone-like device thing in the future where flipping it out extends ...
... there is a huge difference between the media queries (max-width: 25em), not all and (min-width: 25em), and (max-width: 24.99em): (max-width: 25em) excludes (max-width: 25em), whereas not all and (min-width: 25em) includes (max-width: 25em). (max-width: 24.99em) is simply a poor man's version of not all and (min-width: 25em): do not use (max-width: 24.99em) because the layout might break on very high font sizes on very high definition devices in the future. always be very deliberate about choosing the right media query and choosing the right >=, <=, >, or < in any corresponding javascript because it is very easy to get these mixed up, resulting in the website looking wonking right at the screen size where the layout changes. thus, thoroughly test the website at the exact widths/heights where...

Compression in HTTP - HTTP
ized methods, then general encryption can happen at the http level (the resource is transmitted compressed from end to end), and finally compression can be defined at the connection level, between two nodes of an http connection. file format compression each data type has some redundancy, that is wasted space, in it. if text can typically have as much as 60% redundancy, this rate can be much higher for some other media like audio and video. unlike text, these other media types use lot of space to store their data and the need to optimize storage and regain space was apparent very early. engineers designed the optimized compression algorithm used by file formats designed for this specific purpose. compression algorithms used for files can be grouped into two broad categories: loss-less ...
.... there are numerous tools that are specialized for this. lossy compression algorithms are usually more efficient than loss-less ones. as compression works better on a specific kind of files, it usually provides nothing to compress them a second time. in fact, this is often counter productive as the cost of the overhead (algorithms usually need a dictionary that add to the initial size) can be higher than the extra gain in compression resulting in a larger file. do not use the two following techniques for files in a compressed format. end-to-end compression for compression, end-to-end compression is where the largest performance improvements of web sites reside. end-to-end compression refers to a compression of the body of a message that is done by the server and will last unchanged unti...

X-DNS-Prefetch-Control - HTTP
efetch-control: off directives on enables dns prefetching. this is what browsers do, if they support the feature, when this header is not present off disables dns prefetching. this is useful if you don't control the link on the pages, or know that you don't want to leak information to these domains. description dns requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. by speculatively prefetching dns results, latency can be reduced significantly at certain times, such as when the user clicks the link. in some cases, latency can be reduced by a second. the implementation of this prefetching in some browsers allows domain name resolution to occur in parallel with (instead of in serial with) the fetching of actual page content. by...
...obile networks. by speculatively prefetching dns results, latency can be reduced significantly at certain times, such as when the user clicks the link. in some cases, latency can be reduced by a second. the implementation of this prefetching in some browsers allows domain name resolution to occur in parallel with (instead of in serial with) the fetching of actual page content. by doing this, the high-latency domain name resolution process doesn't cause any delay while fetching content. page load times – especially on mobile networks – can be measurably improved in this way. if the domain names for images can be resolved in advance of the images being requested, pages that load many images can see an improvement of 5% or more in the time of loading images. configuring prefetching in the ...

HTTP Index - HTTP
w content creators to embed small files inline in documents. 7 evolution of http guide, http, needsupdate, needsupdate(http/3) http (hypertext transfer protocol) is the underlying protocol of the world wide web. http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d. 8 identifying resources on the web domain, http, path, scheme, syntax, uri, url, url syntax, web, fragment, port, query, resources the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else. each resource is identified by a uniform resource identifier (uri) used throughout http f...
...esponse http header indicates how long the user agent should wait before making a follow-up request. there are three main cases this header is used: 177 save-data http, http header, reference, request header, save-data, header the save-data header field is a boolean which, in requests, indicates the client's preference for reduced data usage. this could be for reasons such as high transfer costs, slow connection speeds, etc. 178 sec-websocket-accept draft, http, needscompattable, needscontent, reference, sec-websocket-accept, websockets, header the sec-websocket-accept header is used in the websocket opening handshake. it would appear in the response headers. that is, this is header is sent from server to client to inform that server is willing to init...

Expressions and operators - JavaScript
a date object, the statements in the if statement execute. var theday = new date(1995, 12, 17); if (theday instanceof date) { // statements to execute } operator precedence the precedence of operators determines the order they are applied when evaluating an expression. you can override operator precedence by using parentheses. the following table describes the precedence of operators, from highest to lowest. operator precedence operator type individual operators member . [] call / create instance () new negation/increment ! ~ - + ++ -- typeof void delete multiply/divide * / % addition/subtraction + - bitwise shift << >> >>> relational < <= > >= in instanceof equality == != =...
...signment. primary expressions basic keywords and general expressions in javascript. this use the this keyword to refer to the current object. in general, this refers to the calling object in a method. ...

Inheritance and the prototype chain - JavaScript
ypes in javascript let's look at what happens behind the scenes in a bit more detail. in javascript, as mentioned above, functions are able to have properties. all functions have a special property named prototype. please note that the code below is free-standing (it is safe to assume there is no other javascript on the webpage other than the below code). for the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below javascript code, and run it by pressing the enter/return key. (the console is included in most web browser's developer tools. more information is available for firefox developer tools, chrome devtools, and edge devtools.) function dosomething(){} console.log( dosomething.prototype ); // it does not...
...additionally, trying to access nonexistent properties will always traverse the full prototype chain. also, when iterating over the properties of an object, every enumerable property that is on the prototype chain will be enumerated. to check whether an o...

Memory Management - JavaScript
emory management. memory life cycle regardless of the programming language, the memory life cycle is pretty much always the same: allocate the memory you need use the allocated memory (read, write) release the allocated memory when it is not needed anymore the second part is explicit in all languages. the first and last parts are explicit in low-level languages but are mostly implicit in high-level languages like javascript. allocation in javascript value initialization in order to not bother the programmer with allocations, javascript will automatically allocate memory when values are initially declared. var n = 123; // allocates memory for a number var s = 'azerty'; // allocates memory for a string var o = { a: 1, b: null }; // allocates memory for an object and contained v...
...n argument to a function. release when the memory is not needed anymore the majority of memory management issues occur at this phase. the most difficult aspect of this stage is determining when the allocated memory is no longer needed. low-level languages require the developer to manually determine at which point in the program the allocated memory is no longer needed and to release it. some high-level languages, such as javascript, utilize a form of automatic memory management known as garbage collection (gc). the purpose of a garbage collector is to monitor memory allocation and determine when a block of allocated memory is no longer needed and reclaim it. this automatic process is an approximation since the general problem of determining whether or not a specific piece of memory is sti...

SyntaxError: illegal character - JavaScript
there is an invalid or unexpected token that doesn't belong at this position in the code. message syntaxerror: invalid character (edge) syntaxerror: illegal character (firefox) syntaxerror: invalid or unexpected token (chrome) error type syntaxerror what went wrong? there is an invalid or unexpected token that doesn't belong at this position in the code. use an editor that supports syntax highlighting and carefully check your code against mismatches like a minus sign ( - ) versus a dash ( – ) or simple quotes ( " ) vs non-standard quotation marks ( “ ). examples mismatched characters some characters look similar, but will cause the parser to fail interpreting your code. famous examples of this are quotes, the minus or semicolon (greek questionmark (u+37e) looks same). “this l...
...when something like this happens to your code and you're not able to find the source of the problem, it's often best to just delete the problematic line and retype it. forgotten characters it's easy to forget a character here or there. var colors = ['#000', #333', '#666']; // syntaxerror: illegal character add the missing quote for '#333'. var colors = ['#000', ...

Introduction to progressive web apps - Progressive web apps (PWAs)
be considered a pwa when it meets certain requirements, or implements a set of given features: works offline, is installable, is easy to synchronize, can send push notifications, etc. in addition, there are tools to measure how complete (as a percentage) a web app is, such as lighthouse. by implementing various technological advantages, we can make an app more progressive, thus ending up with a higher lighthouse score. but this is only a rough indicator. there are some key principles a web app should try to observe to be identified as a pwa. it should be: discoverable, so the contents can be found through search engines. installable, so it can be available on the device's home screen or app launcher. linkable, so you can share it by simply sending a url. network independent, so it wor...
...lable. responsive, so it's usable on any device with a screen and a browser—mobile phones, tablets, laptops, tvs, refrigerators, etc. safe, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data. offering these features and making use of all the advantages offered by web applications can create a compelling, highly flexible offering for your users and customers. is it worth doing all that? absolutely! with a relatively small amount of effort required to implement the core pwa features, the benefits are huge. for example: a decrease in loading times after the app has been installed, thanks to caching with service workers, along with saving precious bandwidth and time. pwas have near-instantaneous load...

Index - XSLT: Extensible Stylesheet Language Transformations
is a key design feature of xml. the structure of an xml document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented. this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network. 14 an overview needshelp, needsmarkupwork, transforming_xml_with_xslt, xml, xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netsc...
...it consists of any non-instruction element that should be copied as-is to the result document, for example, an <hr> element in an html conversion stylesheet. 20 <xsl:apply-imports> element, reference, xslt, apply-imports the <xsl:apply-imports> element is fairly arcane, used mostly in complex stylesheets. import precedence requires that template rules in main stylesheets have higher precedence than template rules in imported stylesheets. sometimes, however, it is useful to be able to force the processor to use a template rule from the (lower precedence) imported stylesheet rather than an equivalent rule in the main stylesheet. 21 <xsl:apply-templates> element, reference, xslt, apply-templates the <xsl:apply-templates> element selects a set of nodes in ...

2015 MDN Fellowship Program - Archive of obsolete content
ellowship, and was localized. more information: mdn/developerfellowship wiki page. announcing the mdn fellows! blog post, may 14 2015. mdn fellows successfully oriented blog post, july 6 2015. mdn fellows: what they did & what’s next blog post, september 23, 2015. 2015 mdn fellowship program launching in q1 2015, the mozilla developer fellowship intends to accelerate the involvement of highly-skilled and experienced web developers with the open web. who web and mobile developers with an established track record of contributions and expertise in a specific web technology, function or domain who wish to increase the effectiveness of their teaching and communications. what seven weeks of partnering closely with mozilla to (1) build curriculum, code, or likely both; and (2) receive ...

Classes and Inheritance - Archive of obsolete content
.draw(); // error: not yet implemented let circle = circle(2, 3, 5); circle.draw(); // typeerror: ctx is not defined which is the behavior we were aiming for. classes in the add-on sdk we have shown how to emulate classical inheritance in javascript using constructors and prototypes. however, as we have seen, this takes a significant amount of boilerplate code. the add-on sdk team consists of highly trained professionals, but they are also lazy: that is why the sdk contains a helper function that handles this boilerplate code for us. it is defined in the module “core/heritage”: const { class } = require('sdk/core/heritage'); the function class is a meta-constructor: it creates constructors that behave properly with respect to inheritance. it takes a single argument, which is an obje...

Guides - Archive of obsolete content
ate properties learn how private properties can be implemented in javascript using prefixes, closures, and weakmaps, and how the sdk supports private properties by using namespaces (which are a generalization of weakmaps). content processes the sdk was designed to work in an environment where the code to manipulate web content runs in a different process from the main add-on code. this article highlights the main features of that design. testing the add-on sdk learn how to run the add-on sdk test suites. sdk infrastructure module structure of the sdk the sdk, and add-ons built using it, are of composed from reusable javascript modules. this explains what these modules are, how to load modules, and how the sdk's module tree is structured. sdk api lifecycle definition of the li...

context-menu - Archive of obsolete content
t.substr(0, 20) + "...";' + ' return "search google for " + text;' + '});' }); the "context" listener gets the window's current selection, truncating it if it's too long, and includes it in the returned string. when the item is shown, its label will be "search google for text", where text is the truncated selection. you can also get the selected text using the high level selection api. var selection = require("sdk/selection"); and within the contentscript, reference the selected text as selection.text private windows if your add-on has not opted into private browsing, then any menus or menu items that you add will not appear in context menus belonging to private browser windows. to learn more about private windows, how to opt into private browsing, and...

private-browsing - Archive of obsolete content
r window. when they do this, any existing non-private windows are kept open, so the user will typically have both private and non-private windows open at the same time. ...

simple-prefs - Archive of obsolete content
type": "integer", "name": "eyecount", "value": 8, "title": "eye count" } string displayed as a textbox and stores a string. { "type": "string", "name": "monstername", "value": "kraken", "title": "monster name" } color displayed as a colorpicker and stores a string in the #123456 format. { "type": "color", "name": "highlightcolor", "value": "#6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected. { "type": "file", "name": "myfile", "title": "select a file" } directory displayed as a "browse" button that opens a directory picker and stores the full path an...

url - Archive of obsolete content
: the converted url as a string. isvaliduri(uri) checks the validity of a uri. isvaliduri("http://mozilla.org") would return true, whereas isvaliduri("mozilla.org") would return false. parameters uri : string the uri, as a string, to be tested. returns boolean : a boolean indicating whether or not the uri is valid. gettld(url) returns the top-level domain for the given url: that is, the highest-level domain under which individual domains may be registered. uses getpublicsuffix() internally. var urls = require("sdk/url"); console.log(urls.gettld("http://www.bbc.co.uk/")); // "co.uk" console.log(urls.gettld("https://developer.mozilla.org/")); // "org" parameters url : string the url, as a string. returns string : the top-level domain for the url. url methods tostring(...

/loader - Archive of obsolete content
ses this feature during test execution to create an identical environment with a different state to test how specific modules handle unloads. @loader/unload this pseudo module exposes an object that is unique per loader instance. it is used as a subject for observer notification to allow use of the observer service for defining hooks reacting on the unload of a specific loader. the sdk builds a higher level api on top of this for handling unloads and performing cleanup: let unloadsubject = require('@loader/unload'); let observerservice = cc['@mozilla.org/observer-service;1']. getservice(ci.nsiobserverservice); let observer = { observe: function onunload(subject, topic, reason) { // if this module is unloaded then `subject.wrappedjsobject` will be // `unloadsubject...

remote/parent - Archive of obsolete content
-ons run in the chrome process and can't directly access web content. in the sdk, content scripts run in the child process, and, of course, can access web content. but content scripts don't have many more capabilities than untrusted web content. the sdk/remote/parent module enables you to load sdk modules into the child process to give them direct access to content frames. these sdk modules have higher privileges than content scripts, and have their own module loader so they can load other sdk modules. its primary purpose is to help build apis. if you just need to access a web page, use sdk/page-mod to load a content script instead. terms process every application has at least one process running, the main process that displays the ui. multiprocess applications can have other remote pro...

system/xul-app - Archive of obsolete content
name : string a host application name. returns boolean : true if the host application is name and false otherwise. isoneof(names) checks whether the host application is one of the given applications. parameters names : array an array of host application names. returns boolean : true if the host application is one of the names and false otherwise. versioninrange(version, lowinclusive, highexclusive) compares a given version to a version range. see the mdn documentation for details on version comparisons. parameters version : string the version to compare. lowinclusive : string the lower bound of the version range to compare. the range includes this bound. highexclusive : string the upper bound of the version range to compare. the range does not include this bound. returns ...

test/runner - Archive of obsolete content
experimental sets up unit tests. this module contains the package's main program, which does a bit of high-level setup and then delegates test finding and running to the harness module. for more information on testing in the add-on sdk, see the unit testing tutorial. ...

ui/button/action - Archive of obsolete content
", "32" : "./firefox-32.png", "64" : "./firefox-64.png" } }); if you use the final form, firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the ui. on a device with a "normal" screen resolution, the toolbar has space for 18 x 18 pixels and the menu panel has space for 32 x 32 pixels. on a high resolution screen (such as a hidpi display), these are doubled to 36 x 36 and 64 x 64 pixels, respectively. so you can supply three icon files: icon: { "16": "./addon16.png", "32": "./addon32.png", "64": "./addon64.png" } this will look fine in both toolbar and menu panel, and for both screen resolutions. however, the icons in the toolbar will not quite fill th...

ui/button/toggle - Archive of obsolete content
", "32" : "./firefox-32.png", "64" : "./firefox-64.png" } }); if you use the final form, firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the ui. on a device with a "normal" screen resolution, the toolbar has space for 18 x 18 pixels and the menu panel has space for 32 x 32 pixels. on a high resolution screen (such as a hidpi display), these are doubled to 36 x 36 and 64 x 64 pixels, respectively. so you can supply three icon files: icon: { "16": "./addon16.png", "32": "./addon32.png", "64": "./addon64.png" } this will look fine in both toolbar and menu panel, and for both screen resolutions. however, the icons in the toolbar will not quite fill th...

ui/frame - Archive of obsolete content
me to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); the toolbar is positioned between the address bar and the content window. it occupies the whole width of the browser window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display. this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script type="text/javascript" src="frame.js"></script> as usual, the path to the script is relative to the html file's location. messages lo...

cfx to jpm - Archive of obsolete content
a guide to working with jpm if you're already familiar with cfx. installation cfx is python-based and is distributed as a zip file. jpm is node-js-based and is distributed through npm. so for jpm you don't need python, but you do need npm. ...

console - Archive of obsolete content
blem that logging levels are designed to fix. the console defines a number of logging levels, from "more verbose" to "less verbose", and a number of different logging functions that correspond to these levels, which are arranged in order of "severity" from informational messages, through warnings, to errors. at a given logging level, only calls to the corresponding functions and functions with a higher severity will have any effect. for example, if the logging level is set to "info", then calls to info(), log(), warn(), and error() will all result in output being written. but if the logging level is "warn" then only calls to warn() and error() have any effect, and calls to info() and log() are simply discarded. this means that the same code can be more verbose in a development environment t...

Overview - Archive of obsolete content
the annotation panel displays a single annotation. additionally, we use the notifications module to notify the user when the add-on's storage quota is full. working with the dom we'll use two page-mods to interact with the doms of pages that the user has opened. the selector enables the user to choose an element to annotate. it identifies page elements which are eligible for annotation, highlights them on mouseover, and tells the main add-on code when the user clicks a highlighted element. the matcher is responsible for finding annotated elements: it is initialized with the list of annotations and searches web pages for the elements they are associated with. it highlights any annotated elements that are found. when the user moves the mouse over an annotated element the matcher ...

Annotator - Archive of obsolete content
: this tutorial relies on the since-removed widget api and no longer works with firefox. the widget api is deprecated from firefox 29 onwards. please see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. in this tutorial we'll build an add-on that uses many of the sdk's high-level apis. the add-on is an annotator: it enables the user to select elements of web pages and enter notes (annotations) associated with them. the annotator stores the notes. whenever the user loads a page containing annotated elements these elements are highlighted, and if the user moves the mouse over an annotated element its annotation is displayed. next we'll give a quick overview of the a...

Getting Started (jpm) - Archive of obsolete content
stalled, so we can try it out jpm xpi to package the add-on into an xpi file for distribution these are the three main commands you'll use when developing sdk add-ons. there's comprehensive reference documentation covering all the commands you can use and all the options they take. the add-on code itself uses two sdk modules, action button and tabs. there's reference documentation for all the high-level and low-level apis in the sdk. what's next? to get a feel for some of the things you can do with the sdk apis, try working through some of the tutorials. ...

Getting started (cfx) - Archive of obsolete content
stalled, so we can try it out cfx xpi to package the add-on into an xpi file for distribution these are the three main commands you'll use when developing sdk add-ons. there's comprehensive reference documentation covering all the commands you can use and all the options they take. the add-on code itself uses two sdk modules, action button and tabs. there's reference documentation for all the high-level and low-level apis in the sdk. what's next? to get a feel for some of the things you can do with the sdk apis, try working through some of the tutorials. advanced techniques overriding the built-in modules the sdk modules you use to implement your add-on are built into firefox. when you run or package an add-on using cfx run or cfx xpi, the add-on will use the versions of the modules i...

Add-on SDK - Archive of obsolete content
nd the rules defining firefox compatibility. content scripts a detailed guide to working with content scripts. sdk idioms the sdk's event framework and the distinction between add-on scripts and content scripts. xul migration a guide to porting xul add-ons to the sdk. this guide includes a comparison of the two toolsets and a working example of porting a xul add-on. reference high-level apis reference documentation for the high-level sdk apis. tools reference reference documentation for the jpm tool used to develop, test and package add-ons, the console global used for logging, and the package.json file. low-level apis reference documentation for the low-level sdk apis. ...

Customizing the download progress bar - Archive of obsolete content
roduct of some tweaking and experimentation, so perhaps there is a different and/or better way to achieve the same thing. we are specifying the height of the progress meter on windows and a background image on mac. the background image (the first one in the file) should be a segment of whatever you want the unfilled portion of the progress bar to look like. an image of 7 pixels wide and 12 pixels high seems to work well. the other two images are for the filled in progress bar on windows and mac respectively. once again, a height of 12 pixels or so and a few pixels wide seems about right, though you might have to experiment with this a bit. changing the progress bar for specific downloads this is all you need to change the progress bar appearance for all downloads. if you want to change it fo...

Dialogs and Prompts - Archive of obsolete content
les. describing dialog windows dialogs in mozilla whenever you want to create a dialog in your application, use <dialog> (instead of usual <window>) as root element in the xul file. this will: handle a few keyboard events (enter/esc and more), which is good for keyboard accessibility. add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below). simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog). <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ...

xml:base support in old browsers - Archive of obsolete content
' + loc.host + dirpath + link; } } return link; } function getxmlbase (thisitem) { // fix: need to keep going up the chain if still a relative url!!!!! ...

getAttributeNS - Archive of obsolete content
scaping) for (var j = 0; j < attrs.length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].nodename)) !== null) && thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { var xmlnsprefix = new regexp('^xmlns:'+result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink // check higher up for xmlns:prefix // check the current node and if necessary, check for the next matching local name up in the hierarchy (until reaching the document root) while (thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.length; i++) { // search for any prefix...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
ere is a wealth of material on creating extensions for firefox. all of these documents currently assume, however, that you are developing your extension using xul and javascript only. for complex extensions, it may be necessary to create components in c++ that provide additional functionality. reasons why you might want to include c++ components in your extension include: need for high-performance beyond what can be delivered by javascript code. use of third-party libraries written in c or c++. use of mozilla interfaces that are not exposed via xpcom (e.g. nspr). note: with the modern jit javascript engine in gecko and js-ctypes more extension code can be written only in javascript than ever before. please consider all of your options carefully b...

Extension Versioning, Update and Compatibility - Archive of obsolete content
ermissible to use a * in place of the minor version of the application you support, for example 2.0.0.* would mean that you support any minor update to version 2 of the application. the application will usually suggest to extension authors which version part it is sensible to do this with. do not mistakenly think that * in a version represents any version. the * actually represents an infinitely high number and so is really only sensibly used in the maxversion. using it in a minversion usually doesn't produce the effect you want. valid application versions automatic add-on update checking applications will periodically check for updates to installed add-ons by retrieving the updateurl. the information returned can be used to notify the user of an updated version to the add-on as well as ...

Interaction between privileged and non-privileged pages - Archive of obsolete content
resources mozillazine forum discussion communication between html and your extension ...

Multiple item extension packaging - Archive of obsolete content
n use the above syntax or <em:type>32</em:type> as shown below. ... <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type>32</em:type> ... when specifying em:targetapplication the minversion specified should be the highest minversion and the maxversion specified should be the lowest maxversion from all of the installable bundles contained by the multiple item package for the em:targetapplication. if this is not done, any items that are not compatible will not be installed unless a compatibility check discovers updated compatibility information. installation installation can be performed using any of the existi...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
an element should be expanded to take up all of a window's height or width. flex takes a positive integer as a value, which is a growth multiple on the axis of the parent element's orient attribute. for example, flex="1" indicates that the element should extend to fill that axis; if there are two elements with flex="1" in a row, they are adjusted to be of equal size. you can assign flex="2" (or higher values) as a size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3). <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, elements will ordinarily be laid ou...

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 10: creating a backup of a specific file in a separate folder file.initwithpath('c:\\temp\\temp.txt'); backupfolder = file.parent.parent; // c:\ backupfolder.append('backup'); // c:\backup backupfolder.create(components.interfaces.nsifile.directory_type, 0666); file.c...

Adding Events and Commands - Archive of obsolete content
h as buttons. use oncommand instead. onfocus and onblur. used when an element receives or loses focus when the user is navigating with the keyboard. you can combine these with -moz-user-focus to add custom focus behavior to elements that normally wouldn't have it. drag and drop. drag and drop operations involve several events. since drag and drop is a complicated thing to manage, there are some high level wrappers that facilitate working with it. also keep in mind that there are 2 drag and drop apis, the newest (and preferred) one introduced in firefox 3.5. event handlers can take an event argument, which is an event object that holds information on the event. you can get information on key modifiers (in case the user was holding a modifier key like alt while performing the event), screen ...

JavaScript Object Management - Archive of obsolete content
re working with code outside of the chrome (or porting your code to seamonkey, which doesn't have those constants declared in the main window). include the cc and ci constants in all xul windows that are not overlays, all jsm files, and all xpcom components (see further ahead). do this even if you don't need them now. it's better to just make a habit out of it. this is a point that is worth highlighting: modules work outside of the window scope. unlike scripts in the chrome, modules don't have access to objects such as window, document, or other global functions, such as openuilink. these are all ui components and ui operations anyway, so they are better done in the chrome. as a general guideline, we keep all of our business logic in jsm, available through service objects, and chrome ...

Mozilla Documentation Roadmap - Archive of obsolete content
lla community. feeds are added frequently, so the information available through it will only grow with time. it can be hard to follow due of the sheer mass of information coming out of it (dozens of posts per day), but you'll certainly be up to date with pretty much everything if you take the time to read at least part of it. the about:mozilla newsletter is a weekly publication that includes the highlights of what is posted at planet mozilla. it is a good alternative if you feel planet mozilla is too much. you can also subscribe to receive it by email if you prefer that. posts on about:mozilla also make it to planet mozilla. the mozilla add-ons blog. this blog is maintained by the add-ons team at mozilla, and it's a great way to stay up to date with amo development and add-on review policies...

The Box Model - Archive of obsolete content
ibility of 1, the available space is distributed evenly among the two. note that this is not always the case. if one of the buttons has a very long label that restricts its minimum size, then it could be the label determining its size, while the other button would flex taking the rest of the room. now, if you want a different size distribution in flexible elements, you can use flexibility values higher than 1. in this case, the "cat" button has a flex value of 3, while the "parrot" button still has a flex value of 1. the "cat" button is now larger in a 3 to 1 proportion. note that, again, this can depend on the contents of the elements, in this case, the labels and paddings in the buttons. if the label of the "parrot" button was something much longer, the size ratio would not be kept. you...

XPCOM Objects - Archive of obsolete content
n get the result by accessing the value attribute in this object after the method call. the method will set value for you. also, since js arrays have the length attribute to get their length, there's no need for the second parameter to be used, so we just pass it an empty object that we won't use. the second parameter is only necessary for callers from within c++ code that use pointers instead of high-level arrays. some commonly used xpcom methods require other xpcom types as parameters. the addobserver method in nsiprefbranch2 is an example of this. void addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); luckily, you don't have to do anything special if you want to register your js object as a preference observer. the nsiobserver has a single method observe...

Performance best practices in extensions - Archive of obsolete content
pers for asynchronous reading and copying of files. never access a sqlite database synchronously. use the asynchronous api instead. performing sequential, asynchronous operations can often be greatly simplified using promises. avoid mouse movement events avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove. these events happen with high frequency, so their listeners can trivially create very high cpu overhead. when these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled. the listeners should be added to the most specific element possible, and removed when not immediately necessary. avoid animated images animated images are much more expensive than generally expected...

Adding preferences to an extension - Archive of obsolete content
we do this because since refreshinf...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
ly more accessible, without much concentrated effort at making it so. sure, we now pay more attention to our image alt attributes, and try to use heading tags appropriately. but a huge decrease in the amount [sic] of presentation markup tags also plays a big role too. since all of our content is also completely accessible sans style sheets, i think we get the best of both worlds: a well-designed, highly stylized, true-to-our-brand website which adapts in different browsing environments. what would you say to a site developer considering a similar conversion to standards-based layout, either with simple tables or no tables at all? i think the conversion is a matter of taking into account several considerations. are you tired of the maintenance headaches caused by the glut of extra tables and ...

Creating a dynamic status bar extension - Archive of obsolete content
we need this so that we can make changes to the status bar panel itself. we then fetch the result returned by the web server into the variable output from the xmlhttprequest.responsetext pr...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
ion on your server. today, this publishing system allows your users to modify content for the portal, but in order to have their text spell checked they must click somewhere and wait for the response page. the inner-browsing model is able to provide users with automatic spell check without leaving the page being edited, a similar experience to a word processor application. the incorrect words are highlighted while the user is typing. forms with nested selects in today's web pages it is common to see selects where content is dependent on the selection made on another select. for example, imagine a web form where users have to choose their city, by first selecting country then state. for example, imagine a web form where users have to choose their city, by first selecting country then state. upd...

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

Source Navigator - Archive of obsolete content
later) opening a project open a terminal. type <tt>snavigator</tt> followed by striking enter. this shows the "source-navigator projects" dialog. choose the project file that you've just created and then click "open...". source navigator then loads the database and then display the following symbols window: searching a method by typing in the method name viewing the definition/declaration by highlighting the method in the code ... displaying a inheritance hierarchy ... searching a string ... ...

Misc top level - Archive of obsolete content
whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. ...

Developing New Mozilla Features - Archive of obsolete content
if you absolutely don't have the resources to do this, then plan for extra integration time. work hard to have a developer involved in the core code who is connected to what you are doing if you can’t make this happen, let mozilla.org staff know and we will try to facilitate this. it’s possible developers may not pay much attention to you because they believe your proposed feature is not a high priority, or is not wanted at all, or that you haven’t demonstrated that you understand the codebase and mozilla coding practices well enough for them to spend a lot of time with you. in some cases the developers may be in error and staff will work to make this clear and get you connected. in other cases, mozilla.org staff may agree with the developers that it does not make sense for them to sp...

Drag and Drop - Archive of obsolete content
pointer first moves over the element while something is being dragged. this might be used to change the appearance of the element to indicate to the user that the object can be dropped on it. ondragexit called for an element when the mouse pointer moves out of an element while something is being dragged. the is also called after a drop is complete so that an element has a chance to remove any highlighting or other indication. ondragdrop this event handler is called for an element when something is dropped on the element. at this point, the user has already released the mouse button. the element can simply ignore the event or can handle it some way, such as pasting the dragged object into itself. ondragend called when the drag operation is finished. there are two ways that drag and...

Block and Line Layout Cheat Sheet - Archive of obsolete content
if you know the answer, please pass it along to me so i can update the document. objects this section presents some of the classes involved in block and line reflow, along with important members of each object that control reflow processing. nsframe the base class for all frames. mflags flags set on the frame to indicate its state. ...

Layout FAQ - Archive of obsolete content
adding clear:both to it. why does move movement disappear when i use mouse events to click and drag? since the dragging action is involved, you might need to disable it. try using event.preventdefault() what is the purpose of the ns_lossyconvertucs2toascii() function? this function converts an nsastring to an nsacstring by assuming that all the 16-bit units are ascii and just dropping the high byte on them all. ...

Style System Overview - Archive of obsolete content
none bits” that say that the rule node's set of rules (the rules on the path to the root) specify nothing non-inherited for the struct. style data cached in rule tree if the data struct doesn't depend on the parent style context in any ways (inheritance, perhaps by omission; percentages and ems when computed), we can cache it in the rule tree. when we compute a data struct, we cache it as high as possible in the rule tree -- on the lowest of the rule nodes on the path to the root that specified something for that struct. a rule node that uses the same struct as its parent is marked with a “dependent bit” for that struct, which tells nsrulenode::getstyledata to just get the struct from the parent. style data computation all the style struct computation described in the previou...

JavaScript crypto - Archive of obsolete content
ntication. pkcs11_mech_md2_flag: hashing must be able to function without authentication.* pkcs11_random_flag: use token's random number generator. warning: must be able to use without authentication. many hardware random number generators are not as secure as the netscape internal one. do not select this value unless you can show that your random number generator is secure. even so, it's highly discouraged. pkcs11_pub_readable_cert_flag: this is the only flag most smart tokens should turn on. you can turn this flag on if: the certs on your token can be read without authentication and, the public key on your token can be found by id, modulus, or value and all your private keys have the associated public key. turning this flag on will illuminate a large number o...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
ndalone browser product from mozilla) at tools -> javascript console. figure 1. javascript console the javascript console can show the full log list or just errors, warnings, and messages. the error message in figure 1 says that at aol.com, line 95 tries to access an undefined variable called is_ns70. clicking on the link will open mozilla's internal view source window with the offending line highlighted. the console also allows you to evaluate javascript. to evaluate the entered javascript syntax, type in 1+1 into the input field and press evaluate, as figure 2 shows. figure 2. javascript console evaluating mozilla's javascript engine has built-in support for debugging, and thus can provide powerful tools for javascript developers. venkman, shown in figure 3, is a powerful, cross-pla...

Mozilla Crypto FAQ - Archive of obsolete content
ocols and formats can potentially be added to mozilla in the same manner as ssl and s/mime; if anyone is interested in working on such support within the mozilla project then they are welcome to do so. we know of at least two efforts which may produce pgp support for mozilla. as noted above, the psm code implements ssl and (in the future) s/mime support for mozilla by taking advantage of generic high-level mozilla public apis used to add new protocols and message formats. these same apis can be used to add support to mozilla for other security schemes, including potentially pgp. if anyone is interested on working such support within the mozilla project then they are welcome to do so. however note that, as with ssl and s/mime, mozilla.org will not host code implementing patented algorithms tha...

Scripting - Archive of obsolete content
hether it is running in prism: if ("platform" in window) { // prism-specific code goes here } see the nsiplatformglue idl definition file for details of the methods available to prism apps. currently, the webapp script also has access to full xpcom functionality, just like a firefox extension. this level of functionality is commonly called chrome-level privileges. it means that the script has a higher level of privilege than scripts in the web content and has access to the file system, clipboard and other parts of the native os. note: in the future, the webapp script may have lower privileges. we are looking into the security aspects of the higher privilege level. ...

Prism - Archive of obsolete content
we intend to propose these extensions for inclusion in future versions of xulrunner. firefox extension: a firefox extension, code-named "refractor", can be used to spin out new prism apps from inside the web browser. refractor adds a new menu item to call up the shortcut creation dialog for inside firefox. web apps can also point to a complete web app bundle or some elements of a web app (like higher resolution icons). refractor automatically takes this information into account. documentation frequently asked questions bundles a web application bundle is a zip archive that holds a configuration file, icons and an optional webapp js script. bundles can be installed ...

Space Manager Detailed Design - Archive of obsolete content
nsspacemanager the space manager is the central class is a group of classes that manage the occupied and available space that exists in horizontal bands across a canvas. the primary goal of the space manager is to provide information about those bands of space to support the css notion of floated elements. ...

Static Analysis for Windows Code under Linux - Archive of obsolete content
build gcc corss-compiler with plugin support by default gcc does not support plugins. ...

Abc Assembler Tests - Archive of obsolete content
re_typeerror(name:string, expected:*, actual:*):void - special function for comparing typeerrors (runtimeerrors) - will only compare the first 22 chars of expected and actual so that test can be run in release and releasedebugger configurations. compare_numbereq(name:string, expected:*, actual:*, fractiondigits:int=-1):void - compare 2 numbers up to fractiondigits this is to be used for high precision numbers that may vary slightly due to platform differences. sample abcasm test /* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license. you may obtain a copy of the license at * http://www.mozilla.

Actionscript Performance Tests - Archive of obsolete content
directory. similar to the acceptance tests set the environment variables avm, asc, builtinabc. the runtests.py test harness works by parsing the abc stdout for lines like: 'metric time 566'. the testconfig.txt file defines groups of tests to run (e.g. sunspider, scimark, language). by default the time for each test is output. use the --memory flag to capture the maximum private bytes memory (high water mark) for a test. by default each test is run a single time. to run each test multiple times use the --iterations flag. when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated. the 95% confidence interval is the calculated percentage of the mean value to fall within 95% of...

Running Tamarin performance tests - Archive of obsolete content
e as column header --detail display results in 'old-style' format --raw output all raw test values -i --iterations number of times to repeat test -l --log logs results to a file -k --socketlog logs results to a socket server -r --runtime name of the runtime vm used, including switch info eg. ttvmi (tamarin-tracing interp) -m --memory logs the high water memory mark --aotsdk location of the aot sdk used to compile tests to standalone executables. --aotout where the resulting binaries should be put (defaults to the location of the as file). --aotargs any extra arguments to pass to compile.py. --vmversion specify vmversion e.g. 502, use this if cannot be calculated from executable --vm2version sp...

Tamarin Acceptance Testing - Archive of obsolete content
in order to ensure that changes to the tamarin code base are high quality before submitting, all developers are required to complete the following steps. successfully build release and debug versions of the shell with the debugger enabled [info] successfully run the following test suites: acceptance test suite [info] self tests [info] submit a sandbox build request to test against platforms that you may not have locally [info] available tamarin acceptance test suites actionscript acceptance tests: actionscript acceptance tests running tamarin acceptance tests abc assembler tests cmdline tests performance tests actionscript performance tests running tamarin performance tests built-in self tests...

Tamarin Build System Documentation - Archive of obsolete content
what you are trying to build and test after submitting a sandbox build view the build status page or the queue (if buildbot is busy) how do i view and change the queue? if buildbot is busy the queue is displayed http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm the submitter of a sandbox build may remove a build request by clicking on the cancel button tamarin-redux builds are higher priority than sandbox builds, they cannot be removed but the most checkin including all new checkins are built how can i run buildbot scripts locally? the buildbot scripts are located in the tamarin repository, get a current copy in your test repository cd into the build/buildbot/slaves directory: cd build/buildbot/slaves copy the your platform scripts directory into the scripts directory ...

Tamarin mercurial commit hook - Archive of obsolete content
the hook is located in the tamarin-redux repository in the file utils/hooks/tamarin-commit-hook.py this is a simple mercurial hook that checks the following filetypes ('.cpp', '.h', '.as', '.abs', '.py') for the following: tabs anywhere in the line trailing whitespace windows line endings (\r\n) "mark_security_change" - looks for this text and warns user as security changes should not be checked into the public tamarin-redux repository. ...

Venkman Introduction - Archive of obsolete content
ntext menu. source code view the source code view is a read-only file viewer. files and specific functions within them can be displayed by selecting the appropriate file or function name in the script view. when script execution is interrupted by the debugger, the line of the file where the interruption occurred is automatically displayed in the source code view. the line in question will be highlighted in yellow to make it easy to spot. clicking in the left margin of this view will set a breakpoint at that line. if the breakpoint is successfully set, the margin will show the letter "b" on a red background, and both the loaded scripts view and interactive session view will provide feedback. the breakpoint can be cleared by clicking in the margin again (on the letter "b"). breakpoints can...

Venkman - Archive of obsolete content
mozilla suite and seamonkey these releases come with venkman pre-installed. on windows, it is an install option; choose advanced install. also available from firefox add-ons as an extension. nvu and kompozer javascript debugger extension version 0.9.84 is available from nvu's downloads page. we encourage you to use the latest available version 0.9.87.1 (or higher) with firefox instead. source code the source code for venkman may be found in mercurial at the following url: http://hg.mozilla.org/venkman/summary community view mozilla forums... mailing list newsgroup rss feed irc: #venkman on irc.mozilla.org report a bug in venkman if you find a problem with venkman, pleas...

Example Sticky Notes - Archive of obsolete content
er name="arg"/> <body><![cdata[ this.style.border = arg; ]]></body> </method> </implementation> <handlers> <!-- event handlers. mouse events sent to bindings are refactored, so event.target / event.relatedtarget always points to the bound element, even if it was originated to/from a child. ...

registerChrome - Archive of obsolete content
some situations the method may return other errors. in a few cases you may get a registry error. description when the third parameter is omitted (pointing to a specific location within the xpi file), this function is being used in a somewhat deprecated way. in this case, registerchrome is supporting the old format of installation archives, in which the manifest.rdf file was always located at the highest level of the installation archive. in this case, registerchrome does not require a path inside the archive, as it does now in order to locate the more flexible contents.rdf format of installation archives. note that you can also look in the installed-chrome.txt file in the chrome directory to see how and where the registerchrome function has registered your package with the chrome registry. ex...

Flexgroup - Archive of obsolete content
"flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. ...

menuactive - Archive of obsolete content
« xul reference home menuactive type: boolean this attribute is set on an item in a menu when it is being hovered over. typcially, the theme will use this to highlight the item. a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away. ...

seltype - Archive of obsolete content
one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbox, this is new in firefox 3.5. ...

tabindex - Archive of obsolete content
...

textbox.value - Archive of obsolete content
see also value ...

Attribute (XUL) - Archive of obsolete content
y dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member ...

DOMMenuItemActive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. ...

DOMMenuItemInactive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. ...

Working With Directories - Archive of obsolete content
that was written to). as the directoryentries (nsifile.attributes) property is an enumeration, you can iterate over the items by using nsisimpleenumerator.hasmoreelements() and nsisimpleenumerator.getnext(). for each item, nsifile.isfile() is called to check if an item is a file and lastmodifiedtime (nsifile.attributes) attribute is compared with the time of the lastmod reference. if the time is higher, the lastmod variable is updated as needed. the result is that lastmod will be set to the file with the latest modification time. nsifile.isfile() is used to ensure that the modification times are only examined for files, and not subdirectories. but you could iterate over subdirectories as well. the following example returns an array of all of a directory's subdirectories: function getsubdirs()...

Reading from Files - Archive of obsolete content
t bytes and interpret them as a double floating point value. in this next example, the read32 method is used to read a 32-bit length from the file. then, this length is used to determine how many additional bytes of data to read. var length = stream.read32(); var data = stream.readstring(length); all values are read in big endian form, which means that integers are stored in the file with their higher bits first. for both the read16 and read32 methods, the values are always interpreted as unsigned values. if you want the sign bit to be interpreted such that negative values can be read, you can use a simple calculation to convert the value: var val = stream.read16(); if (val > 0x7fff) val = ~(0x10000 - val - 1); sometimes, a file will contain bytes that have the value zero. you can use the...

Writing to Files - Archive of obsolete content
ng point value in eight bytes. in this example, the write16 method is used to write the value 1000 in two bytes. the write32 method performs a similar operation except that the value 1000 is written using four bytes, padding the unused bits with zeroes. stream.write16(1000); stream.write32(1000); all values are read in big endian form, which means that integers are stored in the file with their higher bits first. for the write16 and write32 methods, the values are always interpreted as unsigned values. if you want to write a negative value, use the following calculation first to convert the value: function writenegative(val) { if (val > 0x7fff) val = ~(0x10000 - val - 1); stream.write16(val); } one last method that is useful for writing to binary streams is the writebytearray method...

openPopup - Archive of obsolete content
on by some number, measured in css pixels. an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. in this case, the position and attributesoverride arguments are ignored. iscontextmenu the iscontextmenu argument should be true for context menus and false for all other types of popups. it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items. attributesoverride if the attributesoverride argument is true, the position attribute on the popup node overrides the position value argument. if attributesoverride is false, the attribute is only used if the position argument is empty. triggerevent the event t...

MenuItems - Archive of obsolete content
); } this technique can also be used to apply an image for the menu element, except you would want to use the "menu-iconic:" class instead. <menuitem id="bookmark" class="menu-iconic" label="bookmarks" image="bookmarks.png"/> menu icon animation in order to animate the menu item icon on hover a -moz-image-region rule can be applied. in this example we use an image that is 16px wide and 32px high. the top 16px square is the icon in normal state the bottom part in hovered state. note that the image element is on a child level underneath the menu or menuitem, and it will have the class menu-iconic-icon. hence, -moz-image-region is not applied to the menu itself, but one level lower: <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> #add-...

MoveResize - Archive of obsolete content
and clicking a menu or button that has a menu. ...

PopupEvents - Archive of obsolete content
document is being unloaded. the popuphidden event the popuphidden event is fired after a popup has been closed. when a chain of menus is opened, that is, when a menu and at least one level of submenus is opened, first the popuphiding event will be fired on the lowest level of submenu. then that menu will be closed and the popuphidden event will be fired. this process will then repeat for the next highest level of menu until all the menus are closed. this means that when a long chain of submenus is opened, a number of popuphiding and popuphidden events will be fired in sequence. you can tell that the entire chain is closed when the topmost menu receives a popuphidden event. ...

selstyle - Archive of obsolete content
« xul reference selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected. otherwise, the entire row will be highlighted. to see the difference, compare the selection style in the folder list and the message list in mozilla mail. ...

Property - Archive of obsolete content
disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupo...

Multiple Rule Example - Archive of obsolete content
esults generated by earlier rules override those of later results, you will want to ensure that the rules are placed in the right order. the rules should be ordered from most specific to least specific. if you reversed the order of the two rules in the example above, three photos would still be displayed, but the larger rule that displays the image details would be dropped as the other rule has a higher priority. the result would be that the palace photo would not show this information. « previousnext » ...

Multiple Rules - Archive of obsolete content
le, positive values with another greatermatch if a number is greater than anotherdisplay values greater than 1000 differently beforematch if a value comes before another alphabetically aftermatch if a value comes after another alphabetically startswithmatch if a value starts with a specific string endswithmatch if a value ends with a specific string containsmatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?letters" expr="string-length(@name) - 1"/> </query> <rule> <where subject="?name" rel="contains" value=" "/> <action> <label uri="?" value="?name has two names for ...

RDF Modifications - Archive of obsolete content
ontent for a result, the builder just looks for attribute values that involve the ?name variable. those attributes are just recomputed, substituting the new value for ?name instead. this process is repeated for each result that would be affected. when a template involves multiple queries, the same process is used for each query as with one query. as when generating the results initially, only the highest matching query needs to be applied. the only extra complication to deal with in the multiple query case is when a particular result's member resource already matches a query, yet the new rdf triple would cause an earlier query to match. since the earlier query takes precedence, the builder handles this by removing the old content first and then adding the new content. « previousnext » ...

Custom toolbar button - Archive of obsolete content
lines to specify button-2. edit button.js and add javascript code for the new button. be sure to add the extra code before the curly brace on the last line of the file. for example, you could add this code for testing: 2: function () { alert("just testing again") }, create an image for the new button, naming the file button-2.png. the images supplied here are 40 pixels wide and 48 pixels high, with a 256-colour palette and a transparent background, in png format. some other formats will also work. here are some more images that you can download and use: restart the application and customize the toolbar to find the new button. you can repeat these steps to add as many buttons as you need. distributing your button to other users if you want to distribute your button or butt...

Adding Event Handlers - Archive of obsolete content
nt to be sent to the box, document and window. the bubbling phase is essentially the reverse of the capturing phase. note that some events don't do the bubbling phase. you can attach listeners to each element to listen to the events during each step of event propagation. due to the way a single event is passed to all the ancestors, you may attach a listener to a specific element or to an element higher in the hierarchy. naturally, an event attached to an element higher up will receive notification of all elements inside it, whereas an event attached to a button will only receive events pertaining to that button. this is useful if there are several elements you would like to handle using the same or similar code. the most common event used is the 'command' event. the command event is fired wh...

Box Objects - Archive of obsolete content
nding css property -moz-box-orient which may be used instead, depending on the situation. this attribute was explained earlier in the section on boxes. ordinal attribute the ordinal attribute on an element may be used to specify the ordinal group of the element, or you can use the css property -moz-box-ordinal-group. elements with a lower ordinal value are placed in the box before elements with a higher ordinal value. for example, if one element has an ordinal of 2, it would be placed before an element with ordinal 3 or higher but after one with ordinal 1. the default value if the ordinal is not specified is 1. this means that if you want to change the displayed order of elements, you will often need to adjust the ordinals of several elements. adjusting the ordinal of an element is not commonl...

Custom Tree Views - Archive of obsolete content
for instance, 5000 rows of treeitems would load too slowly. you might also implement a custom view when you want to perform computations on the data to be displayed. ...

Numeric Controls - Archive of obsolete content
box would normally be used when the value was important to the user, for instance, a field to enter a number of days, or the maximum size of a file. a scale would be used when the actual value isn't important, just that sliding the scale decreases or increases a state. for instance, a volume slider or a zoom level. the default arrangement of a scale is horizontal with lower values to the left and higher values to the right. however, you can change this orientation with the orient and dir attributes. <scale orient="vertical" dir="reverse"/> this scale will be shown vertical with lower values at the bottom and higher values at the top. date and time entry fields the datepicker and timepicker elements may be used to allow the user to enter dates and times. when used, they display a set of numeri...

The Box Model - Archive of obsolete content
the labels are placed inside another box, this time a vertical one, as are the textboxes. this inner box is what makes the elements orient vertically. the horizontal box is needed as we want the labels vbox and the inputs vbox to be placed horizontally with each other. if this box was removed, both textboxes would appear below both of the labels. the issue now is that the 'password' label is too high. we should really use the grid element here to fix this which we'll learn about in a later section. our find files dialog example let's add some boxes to the find files dialog. a vertical box will be added around all of the elements, and a horizontal box with be added around the textbox and the buttons. the result will be that the buttons will appear below the textbox. <vbox flex="1"> <...

Tree Selection - Archive of obsolete content
the onselect() event handler may be added to the tree element. when the user selects an item from the tree, the event handler is called. the user may also change the selection by using the cursor keys. if the user holds down the cursor key to rapidly scroll through the items, the event handler is not called until the user stops. this results in a performance improvement. this also means that the highlight will appear on several items even though the select event is never fired for those items. the syntax of the onselect() event handler is shown below. <tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item, where the first row is 0. child items are included in the count just after...

Trees - Archive of obsolete content
u will put individual tree cells. these are created using the treecell element. you can set the text for the cell using the label attribute. the first treecell in a row determines the content that will appear in the first column, the second treecell determines the content that will appear in the second column, and so on. the user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard. the user can select multiple items by holding down the shift or control keys and clicking additional rows. to disable multiple selection, place a seltype attribute on the tree, set to the value single. with this, the user may only select a single row at a time. add a tree to our find files example let's add a tree to the find files window where the results of th...

XUL Questions and Answers - Archive of obsolete content
s contains more help information about creating mozsearch plugin on firefox 2. more documentation on search plugins is available in the search plugins category. is localizing remote xul possible? loading remote dtds for xml documents is currenty not supported in xul. the following bugs were reported on this issue: bug 22942, bug 133698. is there an editor widget in xul that supports syntax highlighting? daniel glazman has been working on this for his projects. he said the code will be open-source, but it is not released yet (as of oct 2006). some teasers are on his blog. overlaying elements without ids the original developers only tend to put ids where they need them. as an extension author, you have at least two options: use dom methods to dynamically create or rearrange elemen...

XUL accessibility guidelines - Archive of obsolete content
, visual design is often contained to a specific size. with xul you can allow elements to flex with the resizing of the application window. use the flex attribute to provide this functionality. testing display verify that your application is functional and pleasant looking using user-defined font and color settings. do this by changing system display settings to an accessible theme (such as the high-contrast theme on windows, available via left-alt + left-shift + printscreen). confirm that text is emphasized correctly and that color is not used as a sole means to convey meaning. ensure that when windows are resized, the application adjusts gracefully. human computer interaction as you use an application you expect a certain amount of control and feedback. provide users with clear instructi...

XUL accessibility tool - Archive of obsolete content
owercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives). new features: (aaronlev) automatically test any new windows as they are opened. (aaronandy) highlight or blink source element in original xul app upon click of referencing line in report. (aaronlev) compatibility with more xul applications. (aaronandy) maybe an online tool to automatically generate a xul a11y tool compatible with a user-specified xul app. (aaronandy) link report sections to relevant part of xul a11y guidelines. (aaronandy) enable tabs, context menu, and other browser extr...

arrowscrollbox - Archive of obsolete content
tate. smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statu...

button - Archive of obsolete content
ent are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below the type of button. if this attribute is not present, a normal button is created. leave the attribute out for a normal button. checkbox this type of button can be in two states. the user can click the button to switch between the states. this is not the same as a checkbox because it looks like a button. ...

caption - Archive of obsolete content
string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute. crop type: string gets and sets the value of the crop attribute. image type: image url gets and sets the value of the image attribute. label type: string gets and sets th...

checkbox - Archive of obsolete content
f the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype type: integer a value indicating the type of accessibility object for the element. checked type: boolean gets and sets the value of the checked attribute. command type: ...

colorpicker - Archive of obsolete content
ent);"/> </window> preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: string if this attribute is not present, the colorpicker is displayed inside the window. if this is set to the text button, the colorpicker is displayed as a button. when the user clicks the button, a popup appears for the user to select a color. properties accessibletype type: integer a value indicating the...

datepicker - Archive of obsolete content
ned by the locale, so only use this attribute if you want to override it. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below you can set the type attribute to one of the values below to specify the type of datepicker to use normal a datepicker with three fields for entering the year, month and date. this is the default value so do not specify the type attribute if this kind is des...

description - Archive of obsolete content
nable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use ...

listitem - Archive of obsolete content
system article. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: string you can make an item in a listbox a checkbox by setting this attribute to the value checkbox. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, s...

menu - Archive of obsolete content
te. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. menuactive type: boolean this attribute is set on an item in a menu when it is being hovered over. typcially, the theme will use this to highlight the item. a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. sizetopopup type: one of the values bel...

menuitem - Archive of obsolete content
ked at a time. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below can be used to create checkable menuitems or for radio button menuitems. checkbox the menuitem is checked. the checked attribute determines whether the menuitem is checked or not. radio the menuitem becomes part of a radio group. other menuitems that have the same value for their name attributes are p...

menulist - Archive of obsolete content
button will be the size needed for the popup contents. this is the default value for menulists. always both the preferred and minimum width of the menu label or button will be the same as that necessary for the menupopup. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use a...

menupopup - Archive of obsolete content
on by some number, measured in css pixels. an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. in this case, the position and attributesoverride arguments are ignored. iscontextmenu the iscontextmenu argument should be true for context menus and false for all other types of popups. it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items. attributesoverride if the attributesoverride argument is true, the position attribute on the popup node overrides the position value argument. if attributesoverride is false, the attribute is only used if the position argument is empty. triggerevent the event t...

menuseparator - Archive of obsolete content
he menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use ...

panel - Archive of obsolete content
on by some number, measured in css pixels. an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. in this case, the position and attributesoverride arguments are ignored. iscontextmenu the iscontextmenu argument should be true for context menus and false for all other types of popups. it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items. attributesoverride if the attributesoverride argument is true, the position attribute on the popup node overrides the position value argument. if attributesoverride is false, the attribute is only used if the position argument is empty. triggerevent the event t...

preference - Archive of obsolete content
<textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below the preference type which should be one of the following values. bool a boolean set to either true or false. usually a checkbox would be connected to these preferences. int an integer string a string unichar a unicode string wstring a localized string. in this situation the preference wil...

radio - Archive of obsolete content
he menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use ...

radiogroup - Archive of obsolete content
ement is focused. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use ...

richlistitem - Archive of obsolete content
abel property. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use ...

tab - Archive of obsolete content
been pinned (that is, if it's an app tab). the tabbrowser element's pintab and unpintab methods handle pinning and unpinning tabs. selected type: boolean this attribute is set to true if the tab is selected by default. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. unread type: boolean this attribute is set to true if the tab is unread; that is, either it has not yet been selected during the current session, or has changed since the last time it was selected. this attribute is not present if the tab is not unread. validate type: one of the values below this attribute indicates whether to load th...

tabs - Archive of obsolete content
ype: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. if this attribute is false, the focus does not change during navigation. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. tooltiptextnew not in firefox type: string used to set the text which appears in the tooltip when the user moves the mouse over the new button in the tab row. properties accessibletype type: integer a value indicating the type of accessibility object for the element. disabled type: boolean get...

timepicker - Archive of obsolete content
e may still be modified by a script. increment type: integer indicates the number of minutes to skip each time the arrows are pressed. this should be used in combination with setting hideseconds to true. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the initial value of the timepicker in either the form hh:mm:ss or hh:mm. properties amindicator type: string the string value displayed for hours between midnight and noon, defaulting to am. this value is determined from the user's locale. datevalue type: date ...

toolbarbutton - Archive of obsolete content
ment are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. title type: string this functionality only applies when toolbarbutton is used in the customize toolbar dialog. the text that is displayed as a button's label when it's in the customize toolbar palette. it overrides the value of label, which is used if title is not set. this does not affect the button's label when it is in a toolbar, which remains ...

tooltip - Archive of obsolete content
on by some number, measured in css pixels. an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. in this case, the position and attributesoverride arguments are ignored. iscontextmenu the iscontextmenu argument should be true for context menus and false for all other types of popups. it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items. attributesoverride if the attributesoverride argument is true, the position attribute on the popup node overrides the position value argument. if attributesoverride is false, the attribute is only used if the position argument is empty. triggerevent the event t...

Building XULRunner - Archive of obsolete content
instructions on how to get sources and set up build prerequisites. by default, xulrunner is built with javaxpcom support; the build system must be able to find an appropriate jdk on the system; see the instructions on building javaxpcom for more details. if you do not want to build javaxpcom support, specify --disable-javaxpcom in your configuration. on mac, xulrunner requires mac os x 10.3 or higher and xcode 1.5 or higher to build properly. the runtime requirement is mac os x 10.2. a basic minimal mozconfig which will build a release configuration of xulrunner is: mk_add_options moz_co_project=xulrunner mk_add_options moz_objdir=@topsrcdir@/obj-xulrunner ac_add_options --enable-application=xulrunner #uncomment the following line if you don't want to build javaxpcom: #ac_add_options --d...

How to enable locale switching in a XULRunner application - Archive of obsolete content
code to update the locale user preference and restart the application mozilla xulrunner doesn't allow runtime switching of the locale, therefore the application must be restarted to activate the new choice. here is an example event handler which is fired when the user clicks on the button t...

Gecko Compatibility Handbook - Archive of obsolete content
tls in their netscape 6/7 or mozilla browser until the site has upgraded to software that correctly implements ssl. dhtml menus implemented using hiermenu have problems the hiermenu version is obsolete. the earliest version of hiermenu only supported netscape navigator 4.x and internet explorer 4.x and above. later versions did support netscape 6; however, in netscape 6.1 and higher, support for internet explorer's proprietary offsetxxx properties results in hiermenu placing popups in the wrong position. the most recent versions of hiermenu fully support all gecko-based browsers. upgrade to the most recent version of hiermenu common coding and server problems this section details solutions to the most common problems affecting standards-based...

Mozilla release FAQ - Archive of obsolete content
d ports exist for some other platforms. what does mozilla lack that netscape 7 has? netscape 7 has versions with a number of plugins (which mozilla.org does not have the source for). netscape 7 also has icq/aim integration, as well as integration with an internet radio tool. ...

Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
la.dev.apps.firefox - september 30 - october 6, 2006 announcements vista compatibility lab mike schroepfer announced the current work being done testing mozilla products with vista. a wiki and irc channel have been created to track their progress. discussions firefox trunk and rc1 slowdown using tabs discussion regarding certain theme components (specifically alpha-transparency) creating a high cpu load on os/2. title case capitalization rules in firefox discussion regarding rules for capitalizing the first letter of firefox menu items in the ff ui. engineering student project - industry coach paul betts from ohio state university is looking for someone from mozilla to be his "industry coach" for engineering 494 - how great ideas turn into great products. mozilla is a great product af...

2006-10-06 - Archive of obsolete content
la.dev.apps.firefox - september 30 - october 6, 2006 announcements vista compatibility lab mike schroepfer announced the current work being done testing mozilla products with vista. a wiki and irc channel have been created to track their progress. discussions firefox trunk and rc1 slowdown using tabs discussion regarding certain theme components (specifically alpha-transparency) creating a high cpu load on os/2. title case capitalization rules in firefox discussion regarding rules for capitalizing the first letter of firefox menu items in the ff ui. engineering student project - industry coach paul betts from ohio state university is looking for someone from mozilla to be his "industry coach" for engineering 494 - how great ideas turn into great products. mozilla is a great product af...

2006-10-06 - Archive of obsolete content
ert helmer pointed out the mozilla.org's config file could be found here and to look for -->mozconfig<---------------------------------------- -->end mozconfig<---------------------------------------- updated: developer documentation issues for thunderbird 2 eric shepherd has requested feedback for any developer documentation issues that might need dealing with for thunderbird 2. discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project. david bienvenu suggests a top do...

2006-11-03 - Archive of obsolete content
summary: mozilla.dev.security - october 28, 2006 to november 3, 2006 return to mozilla-dev-security announcements none during this week. discussions extended validation certificates major discussion this week started by gervase markham about security certificates, more specifically extended validation certificates. the aim of the group is to develop a new, higher standard for the validation which is done before certificate issuance, called extended validation. the idea was that such certs would be presented differently in the ui, to give the cas a reason to go to the extra effort, and to give customers a reason to buy them. in ie 7 at least, the use of an ev certificate is tied to the green background in the url bar. a decision has to be made as to the usefulness of ext...

JS-Engine FAQ - Archive of obsolete content
terface with any c library on the system there are mechanisms such as xpcshell, wxjs, jsdb, jsni coding spidermonkey in c check out this tutorial how to compile tamarin on linux/x86 there is a patch that allows you to compile it. rhino what is the performance between rhino js and native java rhino js is significantly slower in run-time than native java. even when rhino is pre-compiled with high optimization, it still is no match for a compiled java program. how to determine rhino version programatically? you can call getimplementationversion() on a context instance and it gives you a string, e.g. <tt>rhino 1.6 release 2 2005 09 19</tt>. how to compile javascript into java invoking compiler: java org.mozilla.javascript.tools.jsc.main [options] file1.js [file2.js...] this results in a...

NPEvent - Archive of obsolete content
s event parameter; parameter value depends upon event type. eventrecord npevent on mac os npevent is defined as an eventrecord data structure, which has the following fields: what integer representing an event type. both windowed and windowless plug-ins receive the same events. values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation. message longint. additional information about the event. type of information depends on the event type. undefined for null, mouseup, and mousedown events. when longint. ticks since start-up. where point. cursor location. ...

NPP_DestroyStream - Archive of obsolete content
following parameters: instance pointer to current plug-in instance. stream pointer to current stream. reason reason the stream was destroyed. values: npres_done (most common): completed normally; all data was sent to the instance. npres_user_break: user canceled stream directly by clicking the stop button or indirectly by some action such as deleting the instance or initiating higher-priority network operations. npres_network_err: stream failed due to problems with network, disk i/o, lack of memory, or other problems. returns if successful, the plug-in should return nperr_no_error. if unsuccessful, the plug-in should return an error code. for possible values, see error codes. description the browser calls the npp_destroystream function when a data stream sent...

NPP_URLNotify - Archive of obsolete content
nstance pointer to the current plug-in instance. url url of the npn_geturlnotify() or npn_posturlnotify() request that has completed. reason reason code for completion of request. values: npres_done (most common): completed normally. npres_user_break: user canceled stream directly by clicking the stop button or indirectly by some action such as deleting the instance or initiating higher-priority network operations. npres_network_err: stream failed due to problems with network, disk i/o, lack of memory, or other problems. notifydata plug-in-private value for associating a previous npn_geturlnotify() or npn_posturlnotify() request with a subsequent npp_urlnotify() call. description the browser calls npp_urlnotify() after the completion of a npn_geturlnotify() or np...

Syndicating content with RSS - Archive of obsolete content
icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs. the http protocol, one of the core technologies behind the web, provides a way of prioritizing the content type that an http client prefers to receive. this technique takes advantage by having the client prefer rss (over html or other formats). here's a simple example of it being done: accept: application/rss+xml, text/html with real production software, though, it would lo...

.htaccess ( hypertext access ) - Archive of obsolete content
rm .htaccess stands for "hypertext access". a file with the htaccess file extension is an access configuration file for apache server. the .htaccess file configures the current directory with things like password protection, url rewrites & redirects, and more. file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other. syntax highliting support for .htaccess files less. common application url redirects & rewrite: htaccess files are often used to redirect traffic to a web page to another or from traffic to a directory to another even between domains is possible. it's a fast and efficient way of redirecting traffic, because the redirect happens before the pages are served. redirects can be made on a temporary basis or perm...

Digital Signatures - Archive of obsolete content
tity. for a discussion of the way this works, see "introduction to public-key cryptography." the significance of a digital signature is comparable to the significance of a handwritten signature. once you have signed some data, it is difficult to deny doing so later, assuming that the private key has not been compromised or out of the owner's control. this quality of digital signatures provides a high degree of nonrepudiation; that is, digital signatures make it difficult for the signer to deny having signed the data. in some situations, a digital signature may be as legally binding as a handwritten signature. original document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc. link: red hat certificate system common criteria ce...

Encryption and Decryption - Archive of obsolete content
decryption. symmetric-key encryption public-key encryption key length and encryption strength symmetric-key encryption with symmetric-key encryption, the encryption key can be calculated from the decryption key and vice versa. with most symmetric algorithms, the same key is used for both encryption and decryption, as shown in figure 1. implementations of symmetric-key encryption can be highly efficient, so that users do not experience any significant time delay as a result of the encryption and decryption. symmetric-key encryption also provides a degree of authentication, since information encrypted with one symmetric key cannot be decrypted with any other symmetric key. thus, as long as the symmetric key is kept secret by the two parties using it to encrypt communications, each par...

Security - Archive of obsolete content
doing so may put your systems at risk. digital signaturesencryption and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this document. but encryption and decryption, by themselves, do not address another problem: tampering.encryption and decryptionencryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. ...

Table Reflow Internals - Archive of obsolete content
h=300> <tr> <td> this cell's width is constrained by the table and image widths. its exact height is hard to determine. </td> <td> <img src=raptor.jpg width=200 height=100%> </td> </tr> </table> this cell's width is constrained by the table and image widths. its height is hard to determine. the image needs to be as high as the cell. special height reflow the reflow state holds an observer and initiator observer is the table cell used as the height basis set by frame without computed height in didreflow gives its block a computed height during 3rd pass doesn't change height during 3rd pass initiator is the table containing the observer starts the 3rd pass reflow and sets a bit in the reflow state gives...

Theme changes in Firefox 2 - Archive of obsolete content
ab-button:hover #new-tab-button:hover:active #new-window-button:hover #new-window-button:hover:active #paste-button:hover #paste-button:hover:active #print-button:hover #print-button:hover:active #reload-button:hover #reload-button:hover:active #searchbar[empty="true"] .searchbar-textbox #stop-button:hover #stop-button:hover:active #urlbar-icons-spacer #urlbar-spacer #urlbar[level="high"] #lock-icon:active #urlbar[level="high"] #lock-icon:hover #urlbar[level="low"] #lock-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggesthint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocompletecomment) .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolautocompletecomment) .bookmark-item[livemark] .openin...

Scratchpad - Archive of obsolete content
pletion scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. to list autocomplete suggestions, press ctrl + space. for example, try typing d, then pressing ctrl + space. you'll see the autocomplete box, as shown below: the icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. ↑ and ↓ cycle through the suggestions and enter or tab select the highlighted choice. inline documentation to show the inline documentation popup, press ctrl + shift + space when the cursor is on an identifier. for example, if you type document.addeventlistener, then press ctrl + shift + space, you'll see a popup that shows a summary of ...

Using SSH to connect to CVS - Archive of obsolete content
ee our source code page for directions accessing read-only cvs, and our getting write access page for directions on obtaining write access. generating an ssh key first, install ssh. most linux, bsd, and osx distributions come with it installed already. cygwin makes ssh available on windows if you install the openssh package from the net category. if all else fails, openssh is a widely used and highly portable implementation. the following command should generate a suitable key pair: ssh-keygen -t dsa this will take a moment, followed by a prompt for a passphrase. once you have entered a passphrase, ssh-keygen will create two files, ~/.ssh/id_dsa and ~/.ssh/id_dsa.pub do not sendid_dsa. do file a server operations bug in bugzilla and attach yourid_dsa.pub to the bug. setting up cv...

References - Archive of obsolete content
t coding practices which create problems for javascript and dhtml-driven webpages. the webpage explains and proposes with small examples the best coding practices and most recommendable ways of developing problem-free javascript code. from matt kruse debugging html and css is a well designed website explaining well the how, why and where of html validation, css validation and debugging tools. we highly recommend this site. it is also available in french. from dan. <- previous section: summary of changes ...

-ms-scrollbar-base-color - Archive of obsolete content
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="bisquescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </body> the following image shows the result. note that scrollbar-base-color sets the scroll bar face color and highlight color to different shades of the same base color. specifications not part of any specification. ...

::-ms-browse - Archive of obsolete content
the ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">. permitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...

::-ms-check - Archive of obsolete content
n that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">. this pseudo-element is supported only in internet explorer and microsoft edge. allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...

::-ms-clear - Archive of obsolete content
<input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="search"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector. other properties are ignored. ...

::-ms-expand - Archive of obsolete content
the ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu. typically it is a triangle that points downward. allowable properties only the following css properties can be used in a rule with ::-ms-expand in its selector. other properties are ignored. ...

::-ms-fill-lower - Archive of obsolete content
browser compatibility historically supported in internet explorer and edge before version 79. ...

::-ms-fill-upper - Archive of obsolete content
browser compatibility historically supported in internet explorer and edge before version 79. see also ::-ms-fill-lower ::-ms-track ::...

::-ms-fill - Archive of obsolete content
n be used in a rule with ::-ms-fill in its selector. other properties are ignored. ...

::-ms-reveal - Archive of obsolete content
...

::-ms-thumb - Archive of obsolete content
see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible...

::-ms-ticks-after - Archive of obsolete content
or border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...

::-ms-ticks-before - Archive of obsolete content
or border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...

::-ms-track - Archive of obsolete content
or border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: sty...

::-ms-value - Archive of obsolete content
or border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-value example input::-ms-value { color: lime; font-style: italic; } to disable the default styling: select::-ms-value { background-color: transparent; color: inherit; } specifications not pa...

VBArray - Archive of obsolete content
ody> properties the vbarray object has no properties. methods vbarray.dimensions returns the number of dimensions in a vbarray. vbarray.getitem returns the item at the specified location. vbarray.lbound returns the lowest index value used in the specified dimension of a vbarray. vbarray.toarray returns a standard javascript array converted from a vbarray. vbarray.ubound returns the highest index value used in the specified dimension of the vbarray. requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards. not supported in windows 8.x store apps. ...

New in JavaScript 1.3 - Archive of obsolete content
additional features of version 1.2, at the time not specified by ecma-262 were kept in the javascript language (see below for a list of differences). javascript versions netscape communicator and navigator 4.06 and 4.5 executes javascript language versions up to 1.3. note that communicator and navigator 4.0-4.05 and earlier ignored scripts with the language attribute set to "javascript1.3" and higher. <script language="javascript1.2"> <!-- javascript for navigator 4.0. --> <script language="javascript1.3"> <!-- javascript for navigator 4.5. --> new features in javascript 1.3 new globals nan infinity undefined new methods isfinite() function.prototype.call() function.prototype.apply() date.utc() date.prototype.getfullyear() date.prototype.setfullyear() date.prototype.getmi...

New in JavaScript 1.8 - Archive of obsolete content
mmended) to do this is to use the deprecated <script> language attribute and define it as "javascript1.8". when using the javascript shell, javascript xpcom components, or xul <script> elements, the latest js version (js1.8 in mozilla 1.9) is used automatically (bug 381031, bug 385159). the features that require the use of the new keywords "yield" and "let" require you to specify version 1.7 or higher because existing code might use those keywords as variable or function names. the features that do not introduce new keywords (such as generator expressions) can be used without specifying the javascript version. new features in javascript 1.8 expression closures. generator expressions. allowing you to simply create generators (which were introduced in javascript 1.7). typically you would ...

LiveConnect - Archive of obsolete content
aded java methods from javascript. liveconnect exceptions how do java and javascript catch exceptions generated by the other party? liveconnect testcases determine that applets within different html tags work properly. note: liveconnect blocked under some conditions liveconnect calls from javascript to java api are blocked when the java control panel security slider is set to very high level, or when the slider is at the default high level and the jre has either expired or is below the security baseline. ...

ParallelArray - Archive of obsolete content
to ensure that your code executes in parallel, it is suggested that the functions should be limited to the parallelizable subset of js that firefox supports. syntax new parallelarray() new parallelarray([element0, element1, ...]) new parallelarray(arraylength, elementalfunction) parallelarray instances properties length reflects the number of elements in the parallelarray. ...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
there are currently two main javascript engines used server-side and both are from the minds at mozilla: mozilla rhino and mozilla spidermonkey. rhino is a javascript interpreter written in java that can also bridge javascript to java server-side. steve yegge of google has been doing interesting work with this engine. spidermonkey on the other hand is the javascript engine (written in c) in the highly popular mozilla firefox browser. spidermonkey is what will evolve to become tracemonkey. in addition, the jaxer “ajax server” (a project i work on at aptana) is an example of ssjs that uses not only spidermonkey, but also embeds the entire firefox browser engine in the application server such that you can do server-side dom manipulation and other ajaxy things server-side that rhino was not ...

Archived open Web documentation - Archive of obsolete content
e default object semantics are implemented in the javascript engine, often written in lower-level languages like c++. proxies let the programmer define most of the behavior of an object in javascript. they are said to provide a meta-programming api. parallelarray the goal of parallelarray was to enable data-parallelism in web applications. the higher-order functions available on parallelarray attempted to execute in parallel, though they may fall back to sequential execution if necessary. to ensure that your code executes in parallel, it is suggested that the functions should be limited to the parallelizable subset of js that firefox supports. properl...

RDF in Mozilla FAQ - Archive of obsolete content
general where do i start? rdf serves two primary purposes in mozilla. first, it is a simple, cross-platform database for small data stores. second, and more importantly, the rdf model is used along with xul templates as an abstract "api" for displaying information. rdf in fifty words or less is a quick, high-level description of what rdf does in mozilla. the rdf back-end architecture document describes in more detail how mozilla's rdf implementation works, and gives a quick overview of the interfaces that are involved. where do i find information on open directory ("dmoz")? unfortunately, not here! well, here's a little... start at http://www.dmoz.org/ for more information on the open directory. the open directory dataset is available as a (huge) rdf/xml dump. it describes thousand...

Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
it does not cover netscape 6 and 6.01 introduction plugins that used to take advantage of being scriptable via liveconnect in 4.x netscape browsers lost this possibility in the new world. the main reason for this is that there is no guarantee of java compatibility on a binary level due to the jri/jni switch. ...

Game distribution - Game development
n action involves little to no modification of the game itself — usually adding a manifest file containing necessary information in a zipped package containing all the resources is enough. the chrome web store is also an attractive option — again, having a manifest file ready, zipping your game and filling in the online submission form is about all that's required. tizen is also putting a high value on supporting apps written in javascript. their store is another available option. native mobile stores when it comes to the mobile market, there's the apple app store for ios, google play for android and all the rest of the competition. native stores are already filled with established devs selling great games, so you have to be talented and lucky to get noticed. the ios app store is...

Game monetization - Game development
bonus levels, better weapons or spells, or refilling the energy needed to play. designing a good iap system is an art of it's own. remember that you need thousands of downloads of your game to make iaps effective — only a small fraction of players will actually pay for iaps. how small? it varies, but around one person in every thousand is about average. the more people that play your game, the higher the chance someone will pay, so your earnings heavily depend on your promotion activities. freemium games that feature iaps are often referred to a freemium — a freemium game can be acquired and played for free, but you can pay for extra (premium) features, virtual goods or other benefits. the word itself acquired negative connotations after big companies focused on creating games, the main...

Game promotion - Game development
tribution.com, lagged.com, pacogames.com ,games4html5.com or html5games.com, and there are about 20-30 other notable game portals with and without api. those portals that have their own api will allow you to authorize users, save their progress and process in-app purchases. you can also sell a full version of the game from inside your browser demo version, which will be a great move considering high competition, some developers even manage to make full browser versions. most portals offer revenue share deals or will buy non exclusive license. free portals offer traffic, but only the best ones are popular enough to generate revenues from advertisements on in-app purchases. on the other hand they are a perfect tool to make games visible to a broader audience if you have no budget and limited ...

Building up a basic demo with PlayCanvas editor - Game development
ction: this.timer = 0; to move the cone up and down we will use the setposition() method — add the code below to the update() function: this.timer += dt; this.entity.setposition(2, math.sin(this.timer*2), 0); the position of the cone will be animated on each frame by being passed the math.sin() value of the timer at each point in time — we have doubled the this.timer value to make it move higher. add the coneanimation.js script to the cone object, as before. test the demo out launch the demo to see the effects — all the shapes should animate. congratulations, you've completed the tutorial! summary now you can check the playcanvas engine article if you haven't seen it yet, go back to the building up a basic demo with playcanvas page, or go back a level higher to the main 3d gam...

WebVR — Virtual Reality for the Web - Game development
lding blocks for webvr, so you can rapidly build and experiment with vr websites and games: read the building up a basic demo with a-frame tutorial for more details. immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience. it's not easy to achieve, but it doesn't require realistic images. quite the contrary as having a basic shapes flying around in high framerate can make a lot. remember: experimenting is key - see what works for your game in particular. the future of webvr it's happening — consumer devices are reaching the market right now, and we already have javascript apis to support them on the web. all we need now is a stable specification, good ux and ui, better hardware and more tools and libraries — and all of that is on the horiz...

3D games on the Web - Game development
th babylon.js subpage for the basics of using babylon.js, including setting up a development environment, structuring the necessary html, and writing the javascript code. building up a basic demo with playcanvas playcanvas is a popular 3d webgl game engine open-sourced on github, with an editor available online and good documentation. see the building up a basic demo with playcanvas subpage for higher-level details, and further articles showing how to create demos using the playcanvas library, and the online editor. building up a basic demo with three.js three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of webgl code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. see the building up a ba...

Tools for game development - Game development
asm.js asm.js is a very limited subset of the javascript language, which can be greatly optimized and run in an ahead-of-time (aot) compiling engine for much faster performance than your typical javascript performance. this is, of course, great for games. emscripten an llvm to javascript compiler; with emscripten, you can compile c++ and other languages that can compile to llvm bytecode into high-performance javascript. this is a great tool for porting applications to the web! there is a useful emscripten tutorial available on the wiki. note that we are aiming to cover emscripten in its own section of mdn. gecko profiler the gecko profiler extension lets you profile your code to help figure out where your performance issues are so that you can make your game run at top speed. shumway...

Collision detection - Game development
he bricks are staying where they are. we have to figure out a way to get rid of the ones we've already hit with the ball. we can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. in the part of the code where we initialize the bricks, let's add a status property to each brick object. ...

Bounce off the walls - Game development
« previousnext » ...

Buttons - Game development
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 of the preload() function: 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. 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.

Randomizing gameplay - Game development
y depending on the exact spot it hits the paddle, by modifying the x velocity each time the ballhitpaddle() function is run using a line along the lines of the below. add this new line to your code now, and try it out. function ballhitpaddle(ball, paddle) { ball.animations.play('wobble'); ball.body.velocity.x = -1*5*(paddle.x-ball.x); } it's a little bit of magic — the new velocity is higher, the larger the distance between the center of the paddle and the place where the ball hits it. also, the direction (left or right) is determined by that value — if the ball hits the left side of the paddle it will bounce left, whereas hitting the right side will bounce it to the right. it ended up that way because of a little bit of experimentation with the given values, you can do your own ...

The score - Game development
in this article we'll add a scoring system to our game. ...

2D maze game with device orientation - Game development
note: to find more out about implementing device orientation and what raw code would look like, read keep it level: responding to device orientation changes. adding the hole the main objective in the game is to move the ball from the starting position to the ending position: a hole in the ground. implementation looks very similar to the part where we created the ball, and it's also add...

Tutorials - Game development
2d breakout game using pure javascript in this step-by-step tutorial you'll implement a simple breakout clone using pure javascript. along the way you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states. 2d breakout game using phaser in this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using thephaser html5 game framework. ...

Visual typescript game engine - Game development
se; /** * possible variant by default : * "register", "login" */ private startuphtmlform: string = "register"; private gamelist: any[]; /** * implement default gameplay variable's */ private defaultgameplaylevelname: string = "level1"; private autostartgameplay: boolean = true; start the dependency system from app.ts the first game template is platformer. this is high-level programming in this software. class gameplay extends platformer, it good for start. class starter is base class for my canvas part and matter.ts (matter.js) implementation. it is injected to the platformer to make full operated work. gameslist args for ioc constructor is for now just symbolic for now. (wip) in ioc, you can make strong class dependency relations. use it for your own struct...

Game development
mes in c++), and you are interested in how you can port your games over to the web, you should learn more about our emscripten tool — this is an llvm to javascript compiler, which takes llvm bytecode (e.g. generated from c/c++ using clang, or from another language) and compiles that into asm.js, which can be run on the web. to get started, see: about emscripten for an introduction including high-level details. download and install for installing the toolchain. emscripten tutorial for a tutorial to teach you how to get started. examples for a list of web game examples, see our examples page. also, check out games.mozilla.org for more useful resources! ...

Breadcrumb - MDN Web Docs Glossary: Definitions of Web-related terms
...

CDN - MDN Web Docs Glossary: Definitions of Web-related terms
cdns are used widely for delivering stylesheets and javascript files (static assets) of libraries like bootstrap, jquery etc. ...

CRUD - MDN Web Docs Glossary: Definitions of Web-related terms
crud (create, read, update, delete) is an acronym for ways one can operate on stored data. it is a mnemonic for the four basic functions of persistent storage. crud typically refers to operations performed in a database or datastore, but it can also apply to higher level functions of an application such as soft deletes where data is not actually deleted but marked as deleted via a status. learn more general knowledge crud on wikipedia ...

Compile - MDN Web Docs Glossary: Definitions of Web-related terms
compiling is the process of transforming a computer program written in a given language into an equivalent program of another language. a compiler is a software to execute this task. sometimes, this task is also referred to as "assembling" or "build", which typically indiciates more than just compilation is done, e.g. packaging it in a binary format. usually, a compiler transforms a higher-level language such as c or java, which humans understand, into a machine language, such as assembly, that the cpu can understand. some compilers which translate between similar level languages are called transpilers or cross-compilers, for instance to compile from typescript to javascript. those are considered productivity tools. most compilers work either ahead-of-time (aot) or just-in-time (jit)...

Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
ddos concerns computer networks and cpu resource management. in a typical ddos attack, the assailant begins by exploiting a vulnerability in one computer system and making it the ddos master. ...

Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
table of effective connection types ect minimum rtt maximum downlink explanation slow-2g 2000ms 50 kbps the network is suited for small transfers only such as text-only pages. 2g 1400ms 70 kbps the network is suited for transfers of small images. 3g 270ms 700 kbps the network is suited for transfers of large assets such as high resolution images, audio, and sd video. 4g 0ms ∞ the network is suited for hd video, real-time video, etc. effectivetype is a property of the network information api, exposed to javascript via the navigator.connection object. to see your effective connection type, open the console of the developer tools of a supporting browser and enter the following: navigator.connect...

First-class Function - MDN Web Docs Glossary: Definitions of Web-related terms
r function, is called a callback function. sayhello is a callback function. example | return a function javascript function sayhello() { return function() { console.log("hello!"); } } in this example; we need to return a function from another function - we can return a function because we treated function in javascript as a value. a function that returns a function is called a higher-order function. back to our example; now, we need to invoke sayhello function and its returned anonymous function. to do so, we have two ways: 1- using a variable const sayhello = function() { return function() { console.log("hello!"); } } const myfunc = sayhello(); myfunc(); this way, it returns the hello! message. you have to use another variable. if you invoked sayhello d...

Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
single dimension — as a row or as a column. in the specification, flexbox is described as a layout model for user interface design. the key feature of flexbox is the fact that items in a flex layout can grow and shrink. space can be assigned to the items themselves, or distributed between or around the items. flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items. learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship ...

IndexedDB - MDN Web Docs Glossary: Definitions of Web-related terms
like an sql-based rdbms, indexeddb is a transactional database system. however, it uses javascript objects rather than fixed columns tables to store data. ...

Java - MDN Web Docs Glossary: Definitions of Web-related terms
java is statically typed and features a similar syntax to c. it comes with a large library of readily usable functions, the java software development kit (sdk). programs are compiled only once ahead of time into a proprietary byte code and package format that runs inside the java virtual machine (jvm). the jvm is available across many platforms, which allows java programs to run almost everywhere without the need to be compiled or packaged again. this makes it a preferred language in many large enterprises with heterogenous landscapes, but may be perceived "heavy". ...

Latency - MDN Web Docs Glossary: Definitions of Web-related terms
latency is the network time it takes for a requested resource to reach its destination. low latency is good, meaning there is little or no delay. high latency is bad, meaning it takes a long time for the requested resource to reach its destination. latency can be a factor in any kind of data flow, but is most commonly discussed in terms of network latency (the time it takes for a packet of data to travel from source to destination) and media codec latency (the time it takes for the source data to be encoded or decoded and reach the consumer of the resulting data). learn more understanding latency ...

MVC - MDN Web Docs Glossary: Definitions of Web-related terms
have input forms and buttons that allow us to add or delete items. these actions require the model to be updated, so the input is sent to the controller, which then manipulates the model as appropriate, which then sends updated data to the view. you might however also want to just update the view to display the data in a different format, e.g., change the item order to alphabetical, or lowest to highest price. in this case the controller could handle this directly without needing to update the model. mvc on the web as a web developer, this pattern will probably be quite familiar even if you've never consciously used it before. your data model is probably contained in some kind of database (be it a traditional server-side database like mysql, or a client-side solution such as indexeddb [en-u...

Packet - MDN Web Docs Glossary: Definitions of Web-related terms
transmit the entire data unit. forward error correction is when the receiver uses the error-correcting code which automatically corrects the errors at the transmitter, the calculation is performed before the packet is sent. when received at the destination, the checksum is recalculated, and compared with the one in the packet. priority this field indicates which packet should have higher priority over the others. the high priority queue is emptied more quickly than lower priority queues when the network is congested. addresses when routing network packets it requires two network addresses the source address of the sending host, and the destination address of the receiving host. user data - payload payload is the data that is carried on behalf of an applicati...

Privileged - MDN Web Docs Glossary: Definitions of Web-related terms
users are said to be privileged when they are granted additional rights to a system, or given ultimate access to content in a higher priority level when compared to normal users. learn more general knowledge privilege (computing) on wikipedia learn about it information security tutorial ...

Python - MDN Web Docs Glossary: Definitions of Web-related terms
it uses a multi-paradigm approach, meaning it supports procedural, object-oriented, and some functional programming constructs. it was created by guido van rossum as a successor to another language (called abc) between 1985 and 1990, and is currently used on a large array of domains like web development, desktop applications, data science, devops, and automation/productivity. python is developed under an osi-approved open source license, making it freely usable and distributable, even for commercial use. python's license is administered by the python software foundation. ...

Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
used for cryptographic algorithms that use the same key for encryption and for decryption. the key is usually called a "symmetric key" or a "secret key". this is usually contrasted with public-key cryptography, in which keys are generated in pairs and the transformation made by one key can only be reversed using the other key. symmetric-key algorithms should be secure when used properly and are highly efficient, so they can be used to encrypt large amounts of data without having a negative effect on performance. most symmetric-key algorithms currently in use are block ciphers: this means that they encrypt data one block at a time. the size of each block is fixed and determined by the algorithm: for example aes uses 16-byte blocks. block ciphers are always used with a mode, which specifies h...

Transmission Control Protocol (TCP) - MDN Web Docs Glossary: Definitions of Web-related terms
tcp (transmission control protocol) is a transport layer host-to-host protocol for connection-oriented communication between two computers on an ip network. tcp uses virtual ports to create a virtual end-to-end connection that can reuse the physical connections between two computers. tcp encapsulates higher level protocol data such as http and, smtp (email) . tcp handshake the tcp three-way handshake, also called the tcp-handshake, three message handshake, and/or syn-syn-ack, is the method used by tcp to set up a tcp/ip connection over an ip-based network. the three messages transmitted by tcp to negotiate and start a tcp session are nicknamed syn, syn-ack, ack for synchronize, synchronize-acknowledgement, and acknowledge. the three message mechanism is designed for the two computers...

VoIP - MDN Web Docs Glossary: Definitions of Web-related terms
t protocol) networks. common voip packages include skype, msn messenger, yahoo and many more. everything transferrred through voip is digital. it is also known as ip telephony, or broadband telephony. the main reason for using voip technology is because of cost. voip allows you to make a call directly from a computer, a special voip phone, or a traditional phone connected to a special adapter. a high speed internet connection is required for voip. usually, telephone calls over the internet do not incur further charges beyond what the user is paying for internet access, much in the same way that the user doesn't pay for sending individual emails over the internet. learn more general knowledge voip on wikipedia ...

WebKit - MDN Web Docs Glossary: Definitions of Web-related terms
webkit began life as a fork of kde's khtml and kjs libraries, but many individuals and companies have since contributed (including kde, apple, google, and nokia). webkit is an apple trademark, and the framework is distributed under a bsd-form license. ...

MDN Web Docs Glossary: Definitions of Web-related terms
le glyph gonk google chrome gpl gpu graceful degradation grid grid areas grid axis grid cell grid column grid container grid lines grid row grid tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink houdini hpkp hsts html html5 http http header http/2 http/3 https hyperlink hypertext i i18n iana icann ice ide idempotent ...

Accessible multimedia - Learn web development
erate automated captions/transcripts. depending on how clear the spoken audio is, the resulting transcript quality will vary greatly. as with most things in life, you tend to get what you pay for; different services will vary in accuracy and time taken to produce the transcript. if you pay a reputable company or ai service to do the transcription, you will probably get it done rapidly and to a high quality. if you don't want to pay for it, you are likely to get it done at a lower quality, and/or slowly. it is not ok to publish an audio resource but promise to publish the transcript later on — such promises often aren't kept, which will erode trust between you and your users. if the audio you are presenting is something like a face to face meeting or live spoken performance, it would be a...

WAI-ARIA basics - Learn web development
the page design. <input type="search" name="q" placeholder="search query" aria-label="search through site content"> now if we use voiceover to look at this example, we get some improvements: the search form is called out as a separate item, both when browsing through the page, and in the landmarks menu. the label text contained in the aria-label attribute is read out when the form input is highlighted. beyond this, the site is more likely to be accessible to users of older browsers such as ie8; it is worth including aria roles for that purpose. and if for some reason your site is built using just <div>s, you should definitely include the aria roles to provide these much needed semantics! the improved semantics of the search form have shown what is made possible when aria goes beyond ...

Advanced styling effects - Learn web development
t; -webkit-text-fill-color: transparent; } so why have other browsers implemented a -webkit- prefix? mainly for browser compatibility — so many web developers have started implementing websites with -webkit- prefixes that it started to look like the other browsers were broken, whereas in actual fact they were following the standards. so they were forced to implement a few such features. this highlights the danger of using non-standard and/or prefixed css features in your work — not only do they cause browser compatibility issues, but they are also subject to change, so your code could break at any time. it is much better to stick to the standards. if you do want to use such features in your production work, make sure to test across browsers thoroughly and check that, where these featur...

Debugging CSS - Learn web development
un your html and css through a validator, to pick up and fix any errors. css validator html validator is the property and value supported by the browser you are testing in? browsers simply ignore css they don't understand. if the property or value you are using is not supported by the browser you are testing in then nothing will break, but that css won't be applied. devtools will generally highlight unsupported properties and values in some way. in the screenshot below the browser does not support the subgrid value of grid-template-columns. you can also take a look at the browser compatibility tables at the bottom of each property page on mdn. these show you browser support for that property, often broken down if there is support for some usage of the property and not others. the bel...

Sizing items in CSS - Learn web development
you can resize (as the embedded <iframe> that contains the example shown above is its viewport). open the example, resize the browser window, and observe what happens to the size of the box and text. sizing things according to the viewport can be useful in your designs. for example, if you want a full-page hero section to show before the rest of your content, making that part of your page 100vh high will push the rest of the content below the viewport, meaning that it will only appear once the document is scrolled. test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: sizing. summary this lesson has given you ...

Styling tables - Learn web development
prerequisites: html basics (study introduction to html), knowledge of html tables, and an idea of how css works (study css first steps.) objective: to learn how to effectively style html tables. ...

CSS building blocks - Learn web development
terms around sizing that will help you in the future. images, media, and form elements in this lesson we will take a look at how certain special elements are treated in css. images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes. understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know. styling tables styling an html table isn't the most glamorous job in the world, but sometimes we all have to do it. this article provides a guide to making html tables look good, with some specific table styling techniques highlighted. debugging css sometimes when writing css you will encounter an issue where your css doesn't seem to be doin...

Flexbox - Learn web development
is impossible to do with traditional layout methods. the code for this is simple: try adding the following css to your button bar example code: button:first-child { order: 1; } refresh, and you'll now see that the "smile" button has moved to the end of the main axis. let's talk about how this works in a bit more detail: by default, all flex items have an order value of 0. flex items with higher order values set on them will appear later in the display order than items with lower order values. flex items with the same order value will appear in their source order. so if you have four items with order values of 2, 1, 1, and 0 set on them respectively, their display order would be 4th, 2nd, 3rd, then 1st. the 3rd item appears after the 2nd because it has the same order value and is aft...

Getting started with CSS - Learn web development
remembering however that in a real site, you want to ensure that visitors know that a link is a link. leaving the underline in place, can be an important clue for people to realize that some text inside a paragraph can be clicked on — this is the behavior they are used to. as with everything in css, there is the potential to make the document less accessible with your changes — we will aim to highlight potential pitfalls in appropriate places. note: you will often see mention of accessibility in these lessons and across mdn. when we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone. your visitor may well be on a computer with a mouse or trackpad, or a phone with a touchscreen. or they might be using a screenreader, ...

Styling links - Learn web development
e mid-1990s. this is because users know and have come to expect this behaviour — if links were styled differently, it would confuse a lot of people. this doesn't mean that you shouldn't style links at all, just that you should not stray too far from the expected behaviour. you should at least: use underlining for links, but not for other things. if you don't want to underline links, at least highlight them in some other way. make them react in some way when hovered/focused, and in a slightly different way when activated. the default styles can be turned off/changed using the following css properties: color for the text color. cursor for the mouse pointer style — you shouldn't turn this off unless you've got a very good reason. outline for the text outline (an outline is similar ...

Styling lists - Learn web development
ence, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <dl> <dt>hummus</dt> <dd>a thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> <dt>pita</dt> <dd>a soft, slightly leavened flatbread.</dd> <dt>halloumi</dt> <dd>a semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and ...

How do you make sure your website works properly? - Learn web development
riteria: how's the performance? does the page load fast enough? resources like webpagetest.org or browser add-ons like yslow can tell you a few interesting things: grades go from a to f. our page is just small and meets most criteria. but we can already note it would have been better to use a cdn. that doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images. is the server responsive enough? ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not: $ ping mozilla.org ping mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms 64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms 64...

Common questions - Learn web development
rticle we explain which software components you need to edit, upload, or view a website. how much does it cost to do something on the web? when you're launching a website, you may spend nothing or your costs may go through the roof. in this article we discuss how much everything costs and what you get for what you pay (or don't pay). what text editors are available? in this article we highlight some things to think about when choosing and installing a text editor for web development. what are browser developer tools? every browser features a set of devtools for debugging html, css, and other web code. this article explains how to use the basic functions of your browser's devtools. how do you make sure your website works properly? so you've published your website online ...

Client-side form validation - Learn web development
to validate a form, ask yourself a few questions: what kind of validation should i perform? you need to determine how to validate your data: string operations, type conversion, regular expressions, and so on. it's up to you. what should i do if the form doesn't validate? this is clearly a ui matter. you have to decide how the form will behave. does the form send the data anyway? should you highlight the fields that are in error? should you display error messages? how can i help the user to correct invalid data? in order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. you should offer up-front suggestions so they know what's expected, as well as clear error messages. if you want ...

The HTML5 input types - Learn web development
te this: usage-wise, sliders are less accurate than text fields. therefore, they are used to pick a number whose precise value is not necessarily important. a slider is created using the <input> with its type attribute set to the value range. the slider-thumb can be moved via mouse or touch, or with the arrows of the keypad. it's important to properly configure your slider. to that end, it's highly recommended that you set the min, max, and step attributes which set the minimum, maximum and increment values, respectively. let's look at the code behind the above example, so you can see how its done. first of all, the basic html: <label for="price">choose a maximum house price: </label> <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"> <output...

HTML forms in legacy browsers - Learn web development
uff by supporting a wide range of browsers at the same time. when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation. let's see some examples related to html forms. html input types the input types added in html5 are all useable, even in ancient browsers, because the way they degrade is highly predictable. if a browser does not know the value of the type attribute of an <input> element, it will fall back as if the value were text. <label for="mycolor"> pick a color <input type="color" id="mycolor" name="color"> </label> supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with i...

Example 2 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</o...

Sending form data - Learn web development
ample.py, then navigating to localhost:5000 in your browser. other languages and frameworks there are many other server-side technologies you can use for form handling, including perl, java, .net, ruby, etc. just pick the one you like best. that said, it's worth noting that it's very uncommon to use these technologies directly because this can be tricky. it's more common to use one of the many high quality frameworks that make handling forms easier, such as: django for python (a bit more heavyweight than flask, but with more tools and options). express for node.js. laravel for php. ruby on rails for ruby. it's worth noting that even using these frameworks, working with forms isn't necessarily easy. but it's much easier than trying to write all the functionality yourself from scratch...

Styling web forms - Learn web development
label { font : .8em "typewriter", sans-serif; } the text fields require some common rules. ...

UI pseudo-classes - Learn web development
ther pseudo-classes of interest, and we don't have space to write about them all in detail here. let's talk about a few more that you should take the time to investigate. the following are fairly well-supported in modern browsers: the :focus-within pseudo-class matches an element that has received focus or contains an element that has received focus. this is useful if you want a whole form to highlight in some way when an input inside it is focused. the :focus-visible pseudo-class matches focused elements that received focus via keyboard interaction (rather than touch or mouse) — useful if you want to show a different style for keyboard focus compared to mouse (or other) focus. the :placeholder-shown pseudo-class matches <input> and <textarea> elements that have their placeholder showi...

Example - Learn web development
that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same positio...

Your first form - Learn web development
: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent roughly the same space as the space ...

CSS basics - Learn web development
election from what will your website look like?. the property font-family refers to the font(s) you want to use for text. this rule defines a global base font and font size for the whole page. since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family. html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment. the browser ignores comments as it renders the code. css comments are a way for you to write helpful notes about your code or logic. now let's set font sizes for elements that will have text inside the html body ...

The web and web standards - Learn web development
the developer tools inside modern browsers that can be used to debug your code. testing tools that can be used to run tests to show whether your code is behaving as you intended it to. libraries and frameworks built on top of javascript that allow you to build certain types of web site much more quickly and effectively. so-called "linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly. minifiers, which remove all the whitespace from your code files to make it so that they are smaller and therefore download from the server more quickly. server-side languages and frameworks html, css, and javascript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that y...

What will your website look like? - Learn web development
. we'll start by creating a simple webpage with a heading, an image, and a few paragraphs. to begin, you'll need to answer these questions: what is your website about? do you like dogs, new york, or pac-man? what information are you presenting on the subject? write a title and a few paragraphs and think of an image you'd like to show on your page. what does your website look like, in simple high-level terms? what's the background color? what kind of font is appropriate: formal, cartoony, bold and loud, subtle? note: complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. this is sometimes called a design guide, design system, or brand book, and you can see an example at the firefox ...

Adding vector graphics to the Web - Learn web development
in this article we'll show you how to include one in your webpage. prerequisites: you should know the basics of html and how to insert an image into your document. objective: learn how to embed an svg (vector) image into a webpage. note: this article doesn't intend to teach you svg; just what it is, and how to add it to web pages. ...

Images in HTML - Learn web development
ed at the following url: https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time. we would also like you to: add some alt text, and check that it works by misspelling the image url. set the image's correct width and height (hint: it is 200px wide and 171px high), then experiment with other values to see what the effect is. set a title on the image. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus...

HTML table basics - Learn web development
ike colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to. active learning: colgroup and col now it's time to have a go yourself. below you can see the timetable of a languages teacher. on friday she has a new class teaching dutch all day, but she also teaches german for a few periods on tuesday and thursdays. she wants to highlight the columns containing the days she is teaching. recreate the table by following the steps below. first, make a local copy of our timetable.html file in a new directory on your local machine. the html contains the same table you saw above, minus the column styling information. add a <colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your ...

Choosing the right approach - Learn web development
this means ten microsecond precision and zero time as performance.now(). no support 11 — 42prefixed notes prefixed implemented with the vendor prefix: moznotes callback parameter is a domtimestamp. this means millisecond precision and zero time as date.now(). no support 4 — 11prefixed notes prefixed implemented with the vendor p...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
t. if, however, you are doing something more complex and involving objects that are not directly accessible inside the dom (such as 2d canvas api or webgl objects), requestanimationframe() is the better option in most cases. how fast does your animation run? the smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). the higher this number is, the smoother your animation will look, to a point. since most screens have a refresh rate of 60hz, the fastest frame rate you can aim for is 60 frames per second (fps) when working with web browsers. however, more frames means more processing, which can often cause stuttering and skipping — also known as dropping frames, or jank. if you have a monitor with a 60hz refresh rat...

Looping code - Learn web development
so the amount of food needed is set at 10, and the amount the farmer currently has is set at 0. in each iteration of the loop, we check whether the amount of food the farmer has is larger or equal to the amount he needs. if so, we can exit the loop. if not, the farmer spends an hour collecting two portions of food, and the loop runs again. why bother? at this point, you probably understand the high-level concepts behind loops, but you are probably thinking "ok, great, but how does this help me write better javascript code?" as we said earlier, loops are all to do with doing the same thing over and over again, which is great for rapidly completing repetitive tasks. often, the code will be slightly different on each successive iteration of the loop, which means that you can complete a whole ...

Video and Audio APIs - Learn web development
s — a <span> containing the elapsed time in minutes and seconds, and an extra <div> that we will use to create a horizontal indicator bar that gets longer as the time elapses. to get an idea of what the finished product will look like, check out our finished version. exploring the css now open the css file and have a look inside. the css for the example is not too complicated, but we'll highlight the most interesting 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 { ...

Client-side web APIs - Learn web development
ge, and we will explore common web apis in a bit more detail. basic knowledge of html and css would also be useful. note: if you are working on a device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides introduction to web apis first up, we'll start by looking at apis from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? we'll also take a look at what the different main classes of apis are, and what kind of uses they have. manipulating documents when writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. this is usually done by using the document...

Storing the information you need — Variables - Learn web development
in this article, we will get down to the real basics, looking at how to work with the most basic building blocks of javascript — variables. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. ...

Object-oriented JavaScript for beginners - Learn web development
avascript 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 functionality that would otherwise be hard or ...

Perceived performance - Learn web development
al. largest contentful paint (lcp) metric, definited in the largest contentful paint api, reports the render time of the largest content element visible in the viewport. speed index is also used to approximate perceived performance: it measures the average time for pixels on the visible screen to be painted. it doesn't account for jitter, nor does it weight which content important to a user more highly, so it's not a perfect metric. these metrics have to do with initial load and render. it is also important to ensure the site feels fast once the user begins interacting with it. for this, time to interactive, is a good metric; it is the moment when the last long task of the load process finishes and the ui is available for user interaction with delay. ui lack or responsiveness and jank both ...

The business case for web performance - Learn web development
a business priority we've discussed how prioritizing performance can improve user experience and therefore revenue. we know that not prioritizing web performance can result in a loss of business revenue. this article discusses how certain business metrics directly relate to a user's web performance experience and how to apply service design to boost the user's experiences of web performance. it highlights the importance of understanding how cumulative experiences impact conversion and retention rates. performance budgets setting a web performance budget can help you make sure the team stays on track in keeping the site and help prevent regressions. a performance budget is a set of limits that are set to specify limits, such as maximum number of http requests allowed, the maximum total s...

Client-Server Overview - Learn web development
content (ajax) has been around for quite a while. more recently "single-page apps" have become popular, where the whole website is written with a single html file that is dynamically updated when needed. websites created using this style of application push a lot of computational cost from the server to the web browser, and can result in websites that appear to behave a lot more like native apps (highly responsive, etc.). web frameworks simplify server-side web programming server-side web frameworks make writing code to handle the operations described above much easier. one of the most important operations they perform is providing simple mechanisms to map urls for different resources/pages to specific handler functions. this makes it easier to keep the code associated with each type of res...

Website security - Learn web development
bjective: to understand the most common threats to web application security and what you can do to reduce the risk of your site being hacked. what is website security? the internet is a dangerous place! with great regularity, we hear about websites becoming unavailable due to denial of service attacks, or displaying modified (and often damaging) information on their homepages. in other high-profile cases, millions of passwords, email addresses, and credit card details have been leaked into the public domain, exposing website users to both personal embarrassment and financial risk. the purpose of website security is to prevent these (or any) sorts of attacks. the more formal definition of website security is the act/practice of protecting websites from unauthorized access, use, modi...

Server-side website programming - Learn web development
displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using html, css, and javascript), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on amazon. in the modern world of web development, learning about server-side development is highly recommended. learning pathway getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed usi...

Getting started with Ember - Learn web development
ember with add-ons emberjs has a plugin architecture, which means that add-ons can be installed and provide additional functionality without much, if any, configuration. examples include: prember: static website rendering for blogs or marketing content. fastboot: server-side rendering, including improving search-engine optimization (seo), or improving initial render performance of complex, highly interactive web pages. empress-blog: authoring blog posts in markdown while optimizing for seo with prember. ember-service-worker: configuring a pwa so that the app can be installed on mobile devices, just like apps from the device's respective app-store. native mobile apps ember can also be used with native mobile apps with a native-mobile bridge to javascript, such as that provided by co...

Routing in Ember - Learn web development
generated new files, but also updated an existing file, app/router.js. it contains the following contents: import emberrouter from '@ember/routing/router'; import config from './config/environment'; export default class router extends emberrouter { location = config.locationtype; rooturl = config.rooturl; } router.map(function() { this.route('completed'); this.route('active'); }); the highlighted lines were added when the 2nd and 3rd commands above were run. router.js behaves as a "sitemap" for developers to be able to quickly see how the entire app is structured. it also tells ember how to interact with your route, such as when loading arbitrary data, handling errors while loading that data, or interpreting dynamic segments of the url. since our data is static, we won't get to a...

Ember app structure and componentization - Learn web development
this is because the default css absolutely positions the checkbox + label with negative top an...

Framework main features - Learn web development
previous overview: client-side javascript frameworks next each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience. this article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand the main code features of frameworks. domain-specific languages all of the frameworks discussed in this module are powered by javascript, and all allow you to use domain-specific languages (dsls) in order to build your applications. in particular, react has popularized the use of ...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
note: you might be wondering why we need to declare a new variable for component binding — why can't we just call todosstatus.focus()? you might have multiple todosstatus instances active, so you need a way to reference each particular instance. that's why you have to specify a variable to bind each specific...

Getting started with Vue - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...

Implementing feature detection - Learn web development
sn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. this article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross-browser testing. objective: to understand what the concept of feature detection is, and be able to implement suitable solutions in css and javascript. the concept of feature detection the idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provi...

Setting up your own test automation environment - Learn web development
how to install your own automation environment and run your own tests using selenium/webdriver and a testing library such as selenium-webdriver for node. we will also look at how to integrate your local testing environment with commercial tools like the ones discussed in the previous article. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing, and automated testing. objective: to show how to set up a selenium testing environment locally and run tests with it, and how to integrate it with tools like lambdatest, sauce labs, and browserstack. selenium selenium is the most popular browser automation tool. there are other ways, but the best way to use selenium is via webdriver, ...

Cross browser testing - Learn web development
are the main approaches for testing, identifying, and fixing problems?" strategies for carrying out testing next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups. handling common html and css problems with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur. this includes linting code, handing css prefixes...

Introducing a complete toolchain - Learn web development
we have our project files in place. that’s all we need to do for now! note: if you want to just take our existing project and set it up, ready to use, you could go into the root directory of the unzipped downloaded, and run one single installation command to install all of the project’s dependencies: npm install. this is possible because we installed all the tools locally, not globally, and highlights why it is such a powerful option. installing our tools now it's time to install the initial set of tools we'll be using in our dev environment. run the following from inside your project's root directory: npm install --save-dev eslint prettier babel-eslint there's two important things to note about the command you just ran. the first is that we're installing the dependencies locally to...