/browser-compat-data/docs/matching-browser-releases/index.md: 102 The specific appearance of the display will vary depending on what tool you're using to view the blame information; for example, Mozilla DXR's [output for the `RTCPeerConnection.webidl` file](https://hg.mozilla.org/mozilla-central/annotate/c2593a3058afdfeaac5c990e18794ee8257afe99/dom/webidl/RTCPeerConnection.webidl#l) looked like this when this article was written: 103 104: ![](hg-tooltip-revision.png) 105 106 Here, the mouse is pointing at a row with the revision number `199991` beside it. This has opened up a tooltip with details about that revision: It was created for bug 1032835, entitled "addTrack/removeTrack on-top of existing implementation". The tooltip includes several links which can be helpful: ... 175 Once in the blame view, hover the mouse cursor over the revision number at the left side of the WebIDL on the same line as (or the first revision number found immediately above) the line of WebIDL corresponding to the feature you're interested in. For example, if you're looking for when the `RTCPeerConnection` method `addTrack()` was added to Firefox: 176 177: ![](hg-tooltip-revision.png) 178 179 This shows you information about the changeset; if the information shown is what you're looking for, click the `changeset` link in the tooltip popup, then see [From a Mercurial changeset number](#from_a_mercurial_changeset_number) for details on how to get the version information you need from there. ... 181 If you can't find the changeset you need just by browsing the blame page, the next thing to try is to look through the revision history. Click on the `revisions` link at the top of the Mercurial blame page, or the "Log" link in the Navigation box on the DXR page. This will present a list of every changeset that altered the file you're looking at. Look for a revision that matches the feature change you're interested in; if you find a promising revision, click the `diff` link next to that revision. 182 183: ![](hg-revisions-ontrack.png) 184 185 This takes you to the changeset details page. From here, you can collect the information you need as covered in [From a Mercurial changeset number](#from_a_mercurial_changeset_number). ... 255 For example, if I have the changeset number `79525105ef9a`, I want to visit . This brings up a page that looks like this: 256 257: ![](hg-changeset.png) 258 259 Below this is a list of the files that changed followed by the actual diffs showing the specific changes made. /content/files/en-us/webassembly/concepts/index.md: 98 The Emscripten tool is able to take just about any C/C++ source code and compile it into a .wasm module, plus the necessary JavaScript "glue" code for loading and running the module, and an HTML document to display the results of the code. 99 100: ![](emscripten-diagram.png) 101 102 In a nutshell, the process works as follows: /content/files/en-us/web/media/formats/video_codecs/index.md: 398 **Posterization** occurs when the compression results in the loss of color detail in gradients. Instead of smooth transitions through the various colors in a region, the image becomes blocky, with blobs of color that approximate the original appearance of the image. 399 400: [![](posterize-effect.jpg)](posterize-effect.jpg) 401 402 Note the blockiness of the colors in the plumage of the bald eagle in the photo above (and the snowy owl in the background). The details of the feathers is largely lost due to these posterization artifacts. ... 414 **Mosquito noise** is a temporal artifact which presents as noise or **edge busyness** that appears as a flickering haziness or shimmering that roughly follows outside the edges of objects with hard edges or sharp transitions between foreground objects and the background. The effect can be similar in appearance to [ringing](#ringing) . 415 416: ![](mosquito-effect-sm.png) 417 418 The photo above shows mosquito noise in a number of places, including in the sky surrounding the bridge. In the upper-right corner, an inset shows a close-up of a portion of the image that exhibits mosquito noise. /content/files/en-us/web/performance/animation_performance_and_frame_rate/index.md: 23 The process a browser uses to paint changes to a page when an element is animating CSS properties can be described as a waterfall consisting of the following steps: 24 25: ![](css-rendering-waterfall.png) 26 27 1. **Recalculate Style**: when a property for an element changes, the browser must recalculate computed styles. /content/files/en-us/web/api/console/index.md: 167 The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter. 168 169: ![](css-styling.png) 170 171 You may use `%c` multiple times: ... 242 Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console: 243 244: ![](console-timelog.png) 245 246 Notice that the timer's name is displayed both when the timer is started and when it's stopped. ... 266 The output in the console looks something like this: 267 268: ![](api-trace2.png) 269 270 ## Specifications /content/files/en-us/web/api/console/timeend/index.md: 53 alert box, followed by the time it took for the user to dismiss the second alert: 54 55: ![](timer_output.png) 56 57 Notice that the timer's name is displayed when the timer value is logged using /content/files/en-us/web/api/console/timelog/index.md: 75 alert box, followed by the time it took for the user to dismiss the second alert: 76 77: ![](timer_output.png) 78 79 Notice that the timer's name is displayed when the timer value is logged using /content/files/en-us/web/api/console/table/index.md: 41 ``` 42 43: ![](console-table-array.png) 44 45 ```js .. 56 ``` 57 58: ![](console-table-simple-object.png) 59 60 ### Collections of compound types /content/files/en-us/web/api/web_storage_api/using_the_web_storage_api/index.md: 102 To illustrate some typical web storage usage, we have created an example, imaginatively called **Web Storage Demo**. The [landing page](https://mdn.github.io/dom-examples/web-storage/) provides controls that can be used to customize the color, font, and decorative image: 103 104: ![](landing.png)When you choose different options, the page is instantly updated; in addition, your choices are stored in `localStorage`, so that when you leave the page and load it again, later on, your choices are remembered. 105 106 We have also provided an [event output page](https://mdn.github.io/dom-examples/web-storage/event.html) — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired. 107 108: ![](event-output.png) 109 110 > **Note:** As well as viewing the example pages live using the above links, you can also [check out the source code](https://github.com/mdn/dom-examples/tree/main/web-storage). /content/files/en-us/web/api/htmlelement/offsetleft/index.md: 38 This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span. 39 40: ![](offsetleft.jpg) 41 42 ```html /content/files/en-us/web/api/htmlelement/offsetwidth/index.md: 36 ## Examples 37 38: ![](dimensions-offset.png) 39 40 ## Specifications /content/files/en-us/web/api/htmlelement/offsetheight/index.md: 38 ## Examples 39 40: ![](dimensions-offset.png) 41 42 The example image above shows a scrollbar and an `offsetHeight` which fits /content/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md: 388 In audio terms, **fan-in** describes the process by which a {{domxref("ChannelMergerNode")}} takes a series of _mono_ input sources and outputs a single multi-channel signal: 389 390: ![](fanin.svg) 391 392 **Fan-out** describes the opposite process, whereby a {{domxref("ChannelSplitterNode")}} takes a multi-channel input source and outputs multiple _mono_ output signals: 393 394: ![](fanout.svg) 395 /content/files/en-us/web/api/channelmergernode/index.md: 16 The `ChannelMergerNode` interface, often used in conjunction with its opposite, {{domxref("ChannelSplitterNode")}}, reunites different mono inputs into a single output. Each input is used to fill a channel of the output. This is useful for accessing each channels separately, e.g. for performing channel mixing where gain must be separately controlled on each channel. 17 18: ![](webaudiomerger.png) 19 20 If `ChannelMergerNode` has one single output, but as many inputs as there are channels to merge; the number of inputs is defined as a parameter of its constructor and the call to {{domxref("BaseAudioContext/createChannelMerger", "AudioContext.createChannelMerger()")}}. In the case that no value is given, it will default to `6`. /content/files/en-us/web/api/canvasrenderingcontext2d/clip/index.md: 24 drawn. 25 26: ![](canvas_clipping_path.png) 27 28 > **Note:** Be aware that the clipping region is only constructed from /content/files/en-us/web/api/canvasrenderingcontext2d/translate/index.md: 28 `y` units vertically on the grid. 29 30: ![](canvas_grid_translate.png) 31 32 ### Parameters /content/files/en-us/web/api/canvasrenderingcontext2d/rotate/index.md: 24 ``` 25 26: ![](canvas_grid_rotate.png) 27 28 ### Parameters /content/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md: 20 coordinates. 21 22: ![](mdn-canvas-lineargradient.png) 23 24 This method returns a linear {{domxref("CanvasGradient")}}. To be applied to a shape, /content/files/en-us/web/api/stereopannernode/index.md: 19 The {{domxref("StereoPannerNode.pan", "pan")}} property takes a unitless value between `-1` (full left pan) and `1` (full right pan). This interface was introduced as a much simpler way to apply a simple panning effect than having to use a full {{domxref("PannerNode")}}. 20 21: ![](stereopannernode.png) 22 23 {{InheritanceDiagram}} /content/files/en-us/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md: 39 When a browser executes this code, it should display a prompt to the user, asking permission to allow the web application to register as a handler for the protocol. Firefox displays a prompt in the notification bar area: 40 41: ![](protocolregister.png) 42 43 > **Note:** The URL template supplied when registering **must** be of the same domain as the webpage attempting to perform the registration or the registration will fail. For example, `http://example.com/homepage.html` can register a protocol handler for `http://example.com/handle_mailto/%s`, but not for `http://example.org/handle_mailto/%s`. /content/files/en-us/web/api/window/personalbar/index.md: 25 ## Notes 26 27: When you load the example page above, the browser displays the following dialog: ![](modify_any_open_window_dialog.png) 28 29 To toggle the visibility of these bars, you must either sign your scripts or enable the /content/files/en-us/web/api/window/statusbar/index.md: 52 ## Notes 53 54: When you load the example page above, the browser displays the following dialog: ![](modify_any_open_window_dialog.png) 55 56 To toggle the visibility of these bars, you must either sign your scripts or enable the /content/files/en-us/web/api/textdecoder/index.md: 23 ### Representing text with typed arrays 24 25: This example shows how to decode a Chinese/Japanese character ![](2019-05-21_191907.png), as represented by five different typed arrays: {{jsxref("Uint8Array")}}, {{jsxref("Int8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int16Array")}}, and {{jsxref("Int32Array")}}. 26 27 ```js /content/files/en-us/web/api/notifications_api/index.md: 31 This will spawn a request dialog, along the following lines: 32 33: ![](screen_shot_2019-12-11_at_9.59.14_am.png) 34 35 From here the user can choose to allow notifications from this origin, or block them. Once a choice has been made, the setting will generally persist for the current session. /content/files/en-us/web/api/presentation_api/index.md: 16 The Presentation API lets a {{Glossary("user agent")}} (such as a Web browser) effectively display web content through large presentation devices such as projectors and network-connected televisions. Supported types of multimedia devices include both displays which are wired using HDMI, DVI, or the like, or wireless, using [DLNA](https://www.dlna.org/), [Chromecast](https://developers.google.com/cast/), [AirPlay](https://developer.apple.com/airplay/), or [Miracast](https://www.wi-fi.org/discover-wi-fi/miracast). 17 18: ![](presentation_mode_illustration.png) 19 20 In general, a web page uses the Presentation Controller API to specify the web content to be rendered on presentation device and initiate the presentation session. With Presentation Receiver API, the presenting web content obtains the session status. With providing both the controller page and the receiver one with a messaged-based channel, a Web developer can implement the interaction between these two pages. /content/files/en-us/web/api/element/getboundingclientrect/index.md: 52 `width` and `height` are relative to the top-left of the viewport. 53 54: ![](element-box-diagram.png) 55 56 The `width` and `height` properties of the {{domxref("DOMRect")}} /content/files/en-us/web/api/element/mouseleave_event/index.md: 95 ### Behavior of `mouseleave` events 96 97: ![](mouseleave.png) 98 99 One `mouseleave` event is sent to each element of the hierarchy when leaving them. Here four events are sent to the four elements of the hierarchy when the pointer moves from the text to an area outside of the most outer div represented here. ... 101 ### Behavior of `mouseout` events 102 103: ![](mouseout.png) 104 105 One single `mouseout` event is sent to the deepest element of the DOM tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root. /content/files/en-us/web/api/element/clientwidth/index.md: 32 ## Examples 33 34: ![](dimensions-client.png) 35 36 ## Specifications /content/files/en-us/web/api/element/mouseenter_event/index.md: 99 ### Behavior of `mouseenter` events 100 101: ![](mouseenter.png) 102 One `mouseenter` event is sent to each element of the hierarchy when entering them. Here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text. 103 104 ### Behavior of `mouseover` events 105 106: ![](mouseover.png) 107 A single `mouseover` event is sent to the deepest element of the DOM tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root. 108 /content/files/en-us/web/api/element/scrollheight/index.md: 18 screen due to overflow. 19 20: ![](scrollheight.png) 21 22 The `scrollHeight` value is equal to the minimum height the element would /content/files/en-us/web/api/webgl_api/matrix_math_for_the_web/index.md: 274 [View on JSFiddle](https://jsfiddle.net/tatumcreative/9vr2dorz/) 275 276: ![](matrix-rotation.jpg) 277 278 Here are a set of functions that return rotation matrices for rotating around each of the three axes. One big note is that there is no perspective applied, so it might not feel very 3D yet. The flatness is equivalent to when a camera zooms in really close onto an object in the distance — the sense of perspective disappears. /content/files/en-us/web/api/webxr_device_api/fundamentals/index.md: 50 The term **field of view** (**FOV**) is one which applies to any visual technology, from old film cameras to modern digital video cameras, including the cameras in computers and mobile devices. 51 52: ![](binocular-vision.svg) 53 54 #### What is field of view? /content/files/en-us/web/api/streams_api/index.md: 29 With Streams being available to JavaScript, this all changes — you can now start processing raw data with JavaScript bit by bit as soon as it is available on the client-side, without needing to generate a buffer, string, or blob. 30 31: ![](concept.png) 32 33 There are more advantages too — you can detect when streams start or end, chain streams together, handle errors and cancel streams as required, and react to the speed the stream is being read at. /content/files/en-us/web/api/streams_api/concepts/index.md: 24 The data is read sequentially in small pieces called **chunks**. A chunk can be a single byte, or it can be something larger such as a [typed array](/en-US/docs/Web/JavaScript/Typed_arrays) of a certain size. A single stream can contain chunks of different sizes and types. 25 26: ![](readable_streams.png) 27 28 The chunks placed in a stream are said to be **enqueued** — this means they are waiting in a queue ready to be read. An **internal queue** keeps track of the chunks that have not yet been read (see the Internal queues and queuing strategies section below). .. 46 You might do this for example in a [ServiceWorker](/en-US/docs/Web/API/Service_Worker_API) if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you'd need two copies to do this. 47 48: ![](tee.png) 49 50 ## Writable streams /content/files/en-us/web/api/channelsplitternode/index.md: 19 The `ChannelSplitterNode` interface, often used in conjunction with its opposite, {{domxref("ChannelMergerNode")}}, separates the different channels of an audio source into a set of mono outputs. This is useful for accessing each channel separately, e.g. for performing channel mixing where gain must be separately controlled on each channel. 20 21: ![](webaudiosplitter.png) 22 23 If your `ChannelSplitterNode` always has one single input, the amount of outputs is defined by a parameter on its constructor and the call to {{domxref("BaseAudioContext/createChannelSplitter", "AudioContext.createChannelSplitter()")}}. In the case that no value is given, it will default to `6`. If there are fewer channels in the input than there are outputs, supernumerary outputs are silent. /content/files/en-us/web/api/document_object_model/whitespace/index.md: 268 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! 269 270: ![](whitespace-devtools.png) 271 272 ### Solutions /content/files/en-us/web/api/xrwebgllayer/getnativeframebufferscalefactor/index.md: 100 representing these two views: 101 102: ![](twoviewsviewportcoords-scaledby2.svg) 103 104 Since each eye gets half of the frame buffer, the result is that the left eye gets a ... 146 property. The result is a rendering context that looks like the diagram below: 147 148: ![](twoviewsviewportcoords.svg) 149 150 Each time the {{domxref("XRViewerPose")}}'s {{domxref("XRViewerPose.views", "views")}} /content/files/en-us/web/api/channel_messaging_api/using_channel_messaging/index.md: 39 We'll be focusing on the latter example in this article, which looks like: 40 41: ![](channel-messaging-demo.png) 42 43 ## Creating the channel /content/files/en-us/web/api/service_worker_api/using_service_workers/index.md: 41 7. The Service worker will now control pages, but only those opened after the `register()` is successful. In other words, documents will have to be reloaded to actually be controlled, because a document starts life with or without a Service worker and maintains that for its lifetime. 42 43: ![](sw-lifecycle.png) 44 45 The below graphic shows a summary of the available service worker events: .. 104 3. It is also not allowed to point to a service worker of a different origin than that of your app. 105 106: ![](important-notes.png) 107 108 Also note: ... 157 Now you've got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the `fetch` event. 158 159: ![](sw-fetch.png) 160 161 A `fetch` event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if `index.html` makes a cross origin request to embed an image, that still goes through its service worker.) /content/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md: 40 To illustrate how the WebVR API works, we'll study our raw-webgl-example, which looks a bit like this: 41 42: ![](capture1.png) 43 44 > **Note:** You can find the [source code of our demo](https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example) on GitHub, and [view it live](https://mdn.github.io/webvr-tests/raw-webgl-example/) also. .. 236 Once the presentation starts, you'll be able to see the stereoscopic view displayed in the browser: 237 238: ![](capture2.png) 239 240 You'll learn below how the stereoscopic view is actually produced. /content/files/en-us/web/http/cors/index.md: 25 For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, `XMLHttpRequest` and the [Fetch API](/en-US/docs/Web/API/Fetch_API) follow the [same-origin policy](/en-US/docs/Web/Security/Same-origin_policy). This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers. 26 27: ![](cors_principle.png) 28 29 The CORS mechanism supports secure cross-origin requests and data transfers between browsers and servers. Modern browsers use CORS in APIs such as `XMLHttpRequest` or [Fetch](/en-US/docs/Web/API/Fetch_API) to mitigate the risks of cross-origin HTTP requests. .. 107 This operation performs a simple exchange between the client and the server, using CORS headers to handle the privileges: 108 109: ![](simple-req.png) 110 111 Let's look at what the browser will send to the server in this case: ... 170 The example above creates an XML body to send with the `POST` request. Also, a non-standard HTTP `X-PINGOTHER` request header is set. Such headers are not part of HTTP/1.1, but are generally useful to web applications. Since the request uses a `Content-Type` of `text/xml`, and since a custom header is set, this request is preflighted. 171 172: ![](preflight_correct.png) 173 174 > **Note:** As described below, the actual `POST` request does not include the `Access-Control-Request-*` headers; they are needed only for the `OPTIONS` request. ... 303 Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the `withCredentials` boolean value. By default, the invocation is made without Cookies. Since this is a simple `GET` request, it is not preflighted but the browser will **reject** any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}`: true` header, and **not** make the response available to the invoking web content. 304 305: ![](cred-req-updated.png) 306 307 Here is a sample exchange between client and server: /content/files/en-us/web/http/compression/index.md: 37 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 until it reaches the client. Whatever the intermediate nodes are, they leave the body untouched. 38 39: ![](httpenco1.png) 40 41 All modern browsers and servers do support it and the only thing to negotiate is the compression algorithm to use. These algorithms are optimized for text. In the 1990s, compression technology was advancing at a rapid pace and numerous successive algorithms have been added to the set of possible choices. Nowadays, only two are relevant: `gzip`, the most common one, and `br` the new challenger. .. 43 To select the algorithm to use, browsers and servers use [proactive content negotiation](/en-US/docs/Web/HTTP/Content_negotiation). The browser sends an {{HTTPHeader("Accept-Encoding")}} header with the algorithm it supports and its order of precedence, the server picks one, uses it to compress the body of the response and uses the {{HTTPHeader("Content-Encoding")}} header to tell the browser the algorithm it has chosen. As content negotiation has been used to choose a representation based on its encoding, the server must send a {{HTTPHeader("Vary")}} header containing at least {{HTTPHeader("Accept-Encoding")}} alongside this header in the response; that way, caches will be able to cache the different representations of the resource. 44 45: ![](httpcompression1.png) 46 47 As compression brings significant performance improvements, it is recommended to activate it for all files, but already compressed ones like images, audio files and videos. .. 53 Hop-by-hop compression, though similar to end-to-end compression, differs by one fundamental element: the compression doesn't happen on the resource in the server, creating a specific representation that is then transmitted, but on the body of the message between any two nodes on the path between the client and the server. Connections between successive intermediate nodes may apply a _different_ compression. 54 55: ![](httpte1.png) 56 57 To do this, HTTP uses a mechanism similar to the content negotiation for end-to-end compression: the node transmitting the request advertizes its will using the {{HTTPHeader("TE")}} header and the other node chooses the adequate method, applies it, and indicates its choice with the {{HTTPHeader("Transfer-Encoding")}} header. 58 59: ![](httpcomp2.png) 60 61 In practice, hop-by-hop compression is transparent for the server and the client, and is rarely used. {{HTTPHeader("TE")}} and {{HTTPHeader("Transfer-Encoding")}} are mostly used to send a response by chunks, allowing to start transmitting a resource without knowing its length. /content/files/en-us/web/http/connection_management_in_http_1.x/index.md: 77 If the server wishes a faster Web site or application response, it is possible for the server to force the opening of more connections. For example, instead of having all resources on the same domain, say `www.example.com`, it could split over several domains, `www1.example.com`, `www2.example.com`, `www3.example.com`. Each of these domains resolves to the _same_ server, and the Web browser will open 6 connections to each (in our example, boosting the connections to 18). This technique is called _domain sharding_. 78 79: ![](httpsharding.png) 80 81 ## Conclusion /content/files/en-us/web/http/redirections/index.md: 23 When browsers receive a redirect, they immediately load the new URL provided in the `Location` header. Besides the small performance hit of an additional round-trip, users rarely notice the redirection. 24 25: ![](httpredirect.png) 26 27 There are several types of redirects, sorted into three categories: /content/files/en-us/web/http/content_negotiation/index.md: 19 A specific document is called a _resource_. When a client wants to obtain a resource, the client requests it via a URL. The server uses this URL to choose one of the variants available–each variant is called a _representation_–and returns a specific representation to the client. The overall resource, as well as each of the representations, has a specific URL. _Content negotiation_ determines how a specific representation is chosen when the resource is called. There are several ways of negotiating between the client and the server. 20 21: ![](httpnego.png) 22 23 The best-suited representation is identified through one of two mechanisms: .. 32 In _server-driven content negotiation_, or proactive content negotiation, the browser (or any other kind of user agent) sends several HTTP headers along with the URL. These headers describe the user's preferred choice. The server uses them as hints and an internal algorithm chooses the best content to serve to the client. If it can't provide a suitable resource, it might respond with {{HTTPStatus("406")}} (Not Acceptable) or {{HTTPStatus("415")}} (Unsupported Media Type) and set headers for the types of media that it does support (e.g., using the {{HTTPHeader("Accept-Post")}} or {{HTTPHeader("Accept-Patch")}} for POST and PATCH requests, respectively). The algorithm is server-specific and not defined in the standard. See the [Apache negotiation algorithm](https://httpd.apache.org/docs/current/en/content-negotiation.html#algorithm). 33 34: ![](httpnegoserver.png) 35 36 The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation (such as {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Encoding")}}, and {{HTTPHeader("Accept-Language")}}). Though {{HTTPHeader("User-Agent")}} isn't in this list, it's sometimes also used to send a specific representation of the requested resource. However, this isn't always considered a good practice. The server uses the {{HTTPHeader("Vary")}} header to indicate which headers it actually used for content negotiation (or more precisely, the associated request headers), so that [caches](/en-US/docs/Web/HTTP/Caching) can work optimally. .. 105 HTTP allows another negotiation type: _agent-driven negotiation_ or _reactive negotiation_. In this case, the server sends back a page that contains links to the available alternative resources when faced with an ambiguous request. The user is presented the resources and chooses the one to use. 106 107: ![](httpnego3.png) 108 109 Unfortunately, the HTTP standard doesn't specify the format of the page for choosing between the available resources, which prevents the process from being automated. Besides falling back to the _server-driven negotiation_, this method is almost always used with scripting, especially with JavaScript redirection: after having checked for the negotiation criteria, the script performs the redirection. A second problem is that one more request is needed to fetch the real resource, slowing the availability of the resource to the user. /content/files/en-us/web/progressive_web_apps/add_to_home_screen/index.md: 56 Regardless of which browser you are using, when you choose to add the app to your Home screen, you'll see it appear along with a short title, in the same way that native apps do. 57 58: ![](a2hs-on-home-screen.png) 59 60 Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it. .. 206 So when the button is clicked, the install prompt appears. 207 208: ![](chrome-desktop-a2hs-banner.png) 209 210 If the user selects _Install_, the app is installed (available as standalone desktop app), and the Install button no longer shows (the `onbeforeinstallprompt` event no longer fires if the app is already installed). When you open the app, it will appear in its own window: 211 212: ![](a2hs-installed-desktop.png) 213 214 If the user selects _Cancel_, the state of the app goes back to how it was before the button was clicked. /content/files/en-us/web/privacy/firefox_tracking_protection/index.md: 29 If tracking cookies were present, you would be able to view the list by clicking on "Blocking Tracking Cookies" in the above image to view the following popup: 30 31: ![](tracking_cookies.png) 32 33 You can click "Manage Content Blocking" to change the blocking settings: 34 35: ![](content_blocking.png) 36 37 ## How does Firefox choose what to block? /content/files/en-us/web/mathml/element/menclose/index.md: 39 | `horizontalstrike` | ![horizontalstrike](horizontalstrike.png) | a2 + b2 | horizontal strikeout line through contents | 40 | `madruwb` | ![madruwb](madruwb.png) | a2 + b2 | [Arabic factorial symbol](https://en.wikipedia.org/wiki/Modern_Arabic_mathematical_notation#Arithmetic_and_algebra) | 41: | `updiagonalarrow` | ![](updiagonalarrow.png) | a2 + b2 | diagonal arrow | 42 | `phasorangle` | ![Screenshot of the phasorangle notation](phasorangle.png) | a2 + b2 | phasor angle | 43 /content/files/en-us/web/mathml/element/mtable/index.md: 56 ### Alignment with row number 57 58: Rendering: ![](mtable-1.png) 59 60 ```html /content/files/en-us/web/guide/mobile/separate_sites/index.md: 23 ## When it is right to choose this option 24 25: ![](sumo_screenshot.png)Firstly, if your target audience includes users on older or low-end [feature phones](https://www.cnet.com/tech/mobile/the-411-feature-phones-vs-smartphones/), it is worth noting that you may need to employ this strategy [to some degree](https://www.passani.it/gap/#adaptation) no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like [XHTML-MP](https://en.wikipedia.org/wiki/XHTML_Mobile_Profile) or the older [WML](https://en.wikipedia.org/wiki/Wireless_Markup_Language). 26 27 This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is likely to be the [most practical choice](https://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/). This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs. /content/files/en-us/web/guide/user_input_methods/index.md: 20 The following diagram illustrates the typical workflow for implementing user input mechanisms: 21 22: ![](user-input-and-controls.png) 23 24 First of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. Once you decided the input mechanisms, you can control them using tools offered by the web platform or JavaScript libraries. /content/files/en-us/web/guide/css/getting_started/challenge_solutions/index.md: 241 - Solution 242 - : The image appears to the right of the second list. 243: ![](pin_placement.png) 244 - Challenge 245 - : Add a rule to your stylesheet that places the image in the top right of your document. /content/files/en-us/web/svg/tutorial/positions/index.md: 21 For all elements, SVG uses a coordinate system or **grid** system similar to the one used by [canvas](/en-US/docs/Web/API/Canvas_API) (and by a whole lot of other computer drawing routines). That is, the top left corner of the document is considered to be the point (0,0), or point of origin. Positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom. 22 23: ![](canvas_default_grid.png) 24 25 Note that this is slightly different than the way you're taught to graph as a kid (y axis is flipped). However, this is the same way elements in HTML are positioned (By default, LTR documents are considered not the RTL documents which position X from right-to-left). /content/files/en-us/web/svg/tutorial/fills_and_strokes/index.md: 32 In addition to its color properties, there are a few other attributes available to control the way a stroke is drawn on a line. 33 34: ![](svg_stroke_linecap_example.png) 35 36 ```xml .. 55 Use `stroke-linejoin` to control how the joint between two line segments is drawn. 56 57: ![](svg_stroke_linejoin_example.png) 58 59 ```xml .. 75 Finally, you can also use dashed line types on a stroke by specifying the `stroke-dasharray` attribute. 76 77: ![](svg_stroke_dasharray_example.png) 78 79 ```xml /content/files/en-us/web/svg/tutorial/paths/index.md: 36 In the following example there's only a point at (`10`,`10`). Note, though, that it wouldn't show up if a path was just drawn normally. For example: 37 38: ![](blank_path_area.png) 39 40 ```xml .. 71 An easy place to start is by drawing a shape. We will start with a rectangle (the same type that could be more easily made with a {{SVGElement("rect")}} element). It's composed of horizontal and vertical lines only. 72 73: ![](path_line_commands.png) 74 75 ```xml .. 159 An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue. 160 161: ![](shortcut_cubic_bézier_with_grid.png) 162 163 ```xml ... 197 This only works if the previous command was a `Q` or a `T` command. If not, then the control point is assumed to be the same as the previous point, and only lines will be drawn. 198 199: ![](shortcut_quadratic_bézier_with_grid.png) 200 201 ```xml ... 264 The four different paths mentioned above are determined by the next two parameter flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first parameter is the `large-arc-flag`. It determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second parameter is the `sweep-flag`. It determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles will be traveled around. The example below shows all four possible combinations, along with the two circles for each case. 265 266: ![](svgarcs_flags.png) 267 268 ```xml /content/files/en-us/web/svg/tutorial/patterns/index.md: 80 Of course, this means the pattern won't scale if you change your object size later. All three of the preceding examples are shown below on a rectangle that has been slightly elongated to a `height` of `300px`, but I should note that it's not an exhaustive picture, and there are other options available depending on your application. 81 82: ![](svg_pattern_comparison_of_units.png) 83 84 {{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }} /content/files/en-us/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md: 601 602 5. Now if you go back to the [BrowserStack automation dashboard](https://www.browserstack.com/automate) page, you'll see your test listed: 603: ![](bstack_automated_results.png) 604 605 If you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it. ... 665 If you now go back to your [BrowserStack automation dashboard](https://www.browserstack.com/automate) page, you should see your test session available, as before, but with the updated data attached to it: 666 667: ![](bstack_custom_results.png) 668 669 ### Sauce Labs ... 727 728 5. Now if you go to your [Sauce Labs Automated Test dashboard](https://app.saucelabs.com/dashboard/tests) page, you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data. 729: ![](sauce_labs_automated_test.png) 730 731 > **Note:** Sauce Labs' [Platform Configurator](https://saucelabs.com/platform/platform-configurator#/) is a useful tool for generating capability objects to feed to your driver instances, based on what browser/OS you want to test on. ... 795 If you now go back to your [Sauce Labs Automated Test dashboard](https://app.saucelabs.com/dashboard/tests) page, you should see your new job now has the updated data attached to it: 796 797: ![](sauce_labs_updated_job_info.png) 798 799 ### Your own remote server /content/files/en-us/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md: 404 405 1. Click _Start a new manual session_. 406: 2. In the next screen, type in the URL of a page you want to test (use , for example), then choose a browser/OS combination you want to test by using the different buttons and lists. There is a lot of choice, as you'll see!![](sauce-manual-session.png) 407 3. When you click Start session, a loading screen will then appear, which spins up a virtual machine running the combination you chose. 408: 4. When loading has finished, you can then start to remotely test the web site running in the chosen browser.![](sauce-test-running.png) 409 5. From here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. The top menu allows you to: 410 ... 491 The BrowserStack Live dashboard allows you to choose what device and browser you want to test on — Platforms in the left column, devices on the right. When you mouse over or click on each device, you get a choice of browsers available on that device. 492 493: ![](browserstack-test-choices-sized.png) 494 495 Clicking on one of those browser icons will load up your choice of platform/device/browser — choose one now, and give it a try. 496 497: ![](browserstack-test-device-sized.png) 498 499 > **Note:** The blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator. ... 503 You'll also see a menu that allows you to control the session. 504 505: ![](browserstack-test-menu-sized.png) 506 507 The features here are as follows: ... 709 1. Enter the URL of the page you want to test. 710 2. Choose the browser/OS combination you want to test by selecting the combination in the grid. 711: ![](screen_shot_2019-04-19_at_14.55.33.png) 712 3. When you click _Start Browser_, a loading screen will then appear, which spins up a virtual machine running the combination you chose. 713 4. When loading has finished, you can then start to remotely test the web site running in the chosen browser. /content/files/en-us/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md: 234 1. Get hold of an installer disk or image (e.g. ISO file) for the operating system you want to emulate. Virtual Box is unable to provide these; most, like Windows OSes, are commercial products that can't be freely distributed. 235 2. [Download the appropriate installer](https://www.virtualbox.org/wiki/Downloads) for your operating system and install it. 236: 3. Open the app; you'll be presented with a view like the following: ![](virtualbox.png) 237 4. To create a new virtual machine, press the _New_ button in the top left-hand corner. 238 5. Follow the instructions and fill in the following dialog boxes as appropriate. You'll: /content/files/en-us/learn/performance/measuring_performance/index.md: 93 You can also use the [Performance Monitor](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html) to measure the performance of a web app or site's user interface as you perform different actions. This indicates the features that might be slowing down your web app or site. 94 95: ![](perf-monitor.png) 96 97 ## Conclusion /content/files/en-us/learn/html/tables/structuring_planet_data/index.md: 65 The finished table should look like this: 66 67: ![](assessment-table.png) 68 69 You can also [see the example live here](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) (no looking at the source code — don't cheat!) /content/files/en-us/learn/getting_started_with_the_web/publishing_your_website/index.md: 72 2. Next, you need to [create a repository](https://github.com/new) to store files. 73 3. On this page, in the _Repository name_ box, enter _username_.github.io, where _username_ is your username. For example, our friend Bob Smith would enter _bobsmith.github.io_. 74: Check the "_Initialize this repository with a README"_ box. Then click _Create repository_.![](github-create-repo.png) 75 4. Drag and drop the content of your website folder into your repository. Then click _Commit changes_. 76 /content/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md: 143 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. 144 145: ![](source_code.png) 146 147 #### Watch expressions and breakpoints /content/files/en-us/learn/forms/advanced_form_styling/index.md: 152 | Browser | Rendering | 153 | ----------------------------------- | --------------------------------- | 154: | Firefox 71 (macOS) | ![](firefox-mac-checkbox.png) | 155: | Firefox 57 (Windows 10) | ![](firefox-windows-checkbox.png) | 156: | Chrome 77 (macOS), Safari 13, Opera | ![](chrome-mac-checkbox.png) | 157: | Chrome 63 (Windows 10) | ![](chrome-windows-checkbox.png) | 158: | Internet Explorer 11 (Windows 10) | ![](ie11-checkbox.png) | 159: | Edge 16 (Windows 10) | ![](edge-checkbox.png) | 160 161 #### Using appearance: none on radios/checkboxes /content/files/en-us/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md: 122 If you need to exchange messages between the content scripts running in the target window and a devtools document, it's a good idea to use the {{WebExtAPIRef("runtime.connect()")}} and {{WebExtAPIRef("runtime.onConnect")}} to set up a connection between the background page and the devtools document. The background page can then maintain a mapping between tab IDs and {{WebExtAPIRef("runtime.Port")}} objects, and use this to route messages between the two scopes. 123 124: ![](devtools-content-scripts.png) 125 126 ## Limitations of the devtools APIs /content/files/en-us/mozilla/add-ons/webextensions/browser_actions/index.md: 10 A browser action is a button you can add to the browser toolbar. Users can click the button to interact with your extension. 11 12: ![](browser-action.png) 13 14 There are two ways to specify a browser action: with a [popup](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups), or without a popup. /content/files/en-us/mozilla/add-ons/webextensions/native_messaging/index.md: 20 After installing, the extension can exchange JSON messages with the native application. Use a set of functions in the {{WebExtAPIRef("runtime")}} API. On the native app side, messages are received using standard input (`stdin`) and sent using standard output (`stdout`). 21 22: ![](native-messaging.png) 23 24 Support for native messaging in extensions is mostly compatible with Chrome, with two main differences: /content/files/en-us/mozilla/add-ons/webextensions/api/webnavigation/index.md: 22 Each event corresponds to a particular stage in the navigation. The sequence of events is like this: 23 24: ![](we-flow.png) 25 26 - The primary flow is: /content/files/en-us/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.md: 44 In the following image, the extension will "eat" the content of pages whose domain name ends in .org. This is the default behavior for this extension. 45 46: ![](userscriptexample.png) 47 48 Nothing will happen until you click the **Register script** button. The button implements the user script according to the settings on this dialog. That means that you can experiment with the behavior of the script without having to implement an extensions yourself. .. 105 Once the script has been registered, navigate to a page whose domain name ends in .org, and you will see something like this: 106 107: ![](user_script_in_action.png) 108 109 ## See also /content/files/en-us/mozilla/add-ons/webextensions/api/notifications/index.md: 19 The notification looks the same on all desktop operating systems. Something like: 20 21: ![](notification.png) 22 23 ## Types /content/files/en-us/mozilla/add-ons/webextensions/api/webrequest/index.md: 20 Each event is fired at a particular stage of the request. The typical sequence of events is like this: 21 22: ![](webrequest-flow.png) 23 24 {{WebExtAPIRef("webRequest.onErrorOccurred", "onErrorOccurred")}} can fire at any time during the request. Also, note that sometimes the sequence of events may differ from this. For example, in Firefox, on an [HSTS](/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security) upgrade, the `onBeforeRedirect` event is triggered immediately after `onBeforeRequest`. `onErrorOccurred` is also fired if [Firefox Tracking Protection](https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop) blocks a request. /content/files/en-us/mozilla/add-ons/webextensions/api/contextualidentities/index.md: 15 With the contextual identities feature, each contextual identity has a name, a color, and an icon. New tabs can be assigned to an identity, and the name, icon, and color will appear in the address bar. Internally, each identity gets its own cookie store which is not shared with other tabs. 16 17: ![](containers.png)Contextual identities are an experimental feature in Firefox and are only enabled by default in Firefox Nightly. To enable them in other versions of Firefox, set the `privacy.userContext.enabled` preference to `true`. Note that although contextual identities are available in Firefox for Android, there's no UI to work with them in this version of the browser. 18 19 Before Firefox 57, the `contextualIdentities` API is only available if the contextual identities feature is itself enabled. If an extension tried to use the `contextualIdentities` API without the feature being enabled, then method calls would resolve their promises with `false`. /content/files/en-us/mozilla/add-ons/webextensions/api/find/find/index.md: 95 For example, consider part of a web page that looks like this: 96 97: ![](rects-1.png)If you search for "You may", the match needs to be described by two rectangles: 98 99: ![](rects-2.png)In this case, in the `RectData` that describes this match, `rectsAndTexts.rectList` and `rectsAndTexts.textList` will each have 2 items. 100 101 - `textList[0]` will contain "You ", and `rectList[0]` will contain its bounding rectangle. ... 226 In this example the extension uses `rectData` to "redact" the matches, by adding black DIVs over the top of their bounding rectangles: 227 228: ![](redacted.png)Note that in many ways this is a poor way to redact pages. 229 230 The background script: /content/files/en-us/mozilla/add-ons/webextensions/api/pkcs11/index.md: 29 3. Once the Options page opens, select **Privacy & Security** 30 4. Scroll down to the bottom of the page and under **Certificates** click or tap on **Security Devices…** 31: ![](device_manager.png) 32 5. Click or tap the **Load** button 33: ![](load_device_driver.png) 34 6. Enter a name for the security module, such as "_My Client Database_" 35 /content/files/en-us/mozilla/add-ons/webextensions/api/menus/index.md: 42 If you have created more than one context menu item or more than one tools menu item, then the items will be placed in a submenu. The submenu's parent will be labeled with the name of the extension. For example, here's an extension called "Menu demo" that's added two context menu items: 43 44: ![](menus-1.png) 45 46 ## Icons .. 48 If you've specified icons for your extension using the ["icons" manifest key](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons), your menu item will display the specified icon next to its label. The browser will try to choose a 16x16 pixel icon for a normal display or a 32x32 pixel icon for a high-density display: 49 50: ![](menus-2.png) 51 52 Only for items in a submenu, you can specify custom icons by passing the `icons` option to {{WebExtAPIRef("menus.create()")}}: 53 54: ![](menus-3.png) 55 56 ## Example .. 58 Here's a context menu containing 4 items: a normal item, two radio items with separators on each side, and a checkbox. The radio items are given custom icons. 59 60: ![](menus-4.png)You could create a submenu like this using code like: 61 62 ```js /content/files/en-us/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.md: 24 The `createSidebarPane()` function adds a new pane to the sidebar. For example, the screenshot below shows a new pane titled "My pane", that displays a JSON object: 25 26: ![](inspector-sidebar.png) 27 28 This function takes one argument, which is a string representing the pane's title. It returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves to an [`ExtensionSidebarPane`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ExtensionSidebarPane) object representing the new pane. You can use that object to define the pane's content and behavior. /content/files/en-us/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.md: 19 The `ExtensionSidebarPane` object represents a pane that an extension has added to the sidebar in the browser's HTML/CSS inspector. 20 21: ![](inspector-sidebar.png) 22 23 To create an `ExtensionSidebarPane`, call the [`browser.devtools.panels.elements.createSidebarPane()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ElementsPanel/createSidebarPane) function. /content/files/en-us/mozilla/add-ons/webextensions/api/proxy/register/index.md: 19 > **Warning:** This method was deprecated in Firefox 68 and removed in Firefox 71. In Firefox 68–70, calling this method logs an error message to the console: 20 > 21: > ![](proxy_register_warning.png) 22 23 Registers a [Proxy Auto-Configuration (PAC) file](/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file). The file is executed immediately, and its `FindProxyForURL()` function will be called for any HTTP or HTTPS requests. /content/files/en-us/mozilla/add-ons/webextensions/api/proxy/unregister/index.md: 18 > **Warning:** This method was deprecated in Firefox 68 and removed in Firefox 71. In Firefox 68–70, calling this method logs an error message to the console: 19 > 20: > ![](proxy_unregister_warning.png) 21 22 Unregisters a [Proxy Auto-Configuration (PAC) file](/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file). that was registered by an earlier call to {{WebExtAPIRef("proxy.register()")}}. /content/files/en-us/mozilla/add-ons/webextensions/api/pageaction/index.md: 18 A [page action](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions) is a clickable icon inside the browser's address bar. 19 20: ![](page-action.png) 21 22 You can listen for clicks on the icon, or specify a [popup](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups) that will open when the icon is clicked. /content/files/en-us/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md: 16 The full list of supported contexts is available at {{WebExtAPIRef("menus.ContextType")}} and includes contexts outside of a web page, such as bookmark items in the browser UI. For example, the "[Open bookmark in Container Tab](https://github.com/Rob--W/bookmark-container-tab)" extension adds a menu item that allows the user to open a bookmark URL in a new container tab: 17 18: ![](extension_context_menu.png) 19 20 ## Specifying context menu items /content/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md: 13 A popup is a dialog that's associated with a [toolbar button](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action) or [address bar button](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions). This page describes popups in general, specifying them, debugging, resizing, and designing them, as well as examples of use. 14 15: ![](page_action_popup.png) 16 17 When the user clicks the button, the popup is shown. When the user clicks anywhere outside the popup, the popup is closed. The popup can be closed programmatically by calling [`window.close()`](/en-US/docs/Web/API/Window/close) from a script running in the popup. However, you can't open the popup programmatically from an extension's JavaScript; it can be opened only in response to a user action. /content/files/en-us/mozilla/add-ons/webextensions/user_interface/sidebars/index.md: 14 The browser may include a number of built-in sidebars. For example, Firefox includes a sidebar for interacting with bookmarks: 15 16: ![](bookmarks-sidebar.png) 17 18 Using the [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) manifest.json key, an extension can add its own sidebar to the browser. It will be listed alongside the built-in sidebars, and the user will be able to open it using the same mechanism as for the built-in sidebars. /content/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md: 13 Commonly referred to as a [page action](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction) button, this user interface option is a button added to the browser address bar. Users click the button to interact with extensions. 14 15: ![](address_bar_button.png) 16 17 ## Page actions and browser actions /content/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_action/index.md: 9 10 Commonly referred to as a [browser action](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction), this user interface option is a button added to the browser toolbar. Users click the button to interact with your extension. 11: ![](browser-action.png) 12 13 The toolbar button (browser action) is very like the address bar button (page action). For the differences, and guidance on when to use what, see [Page actions and browser actions](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions#page_actions_and_browser_actions). /content/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md: 28 You could visualize the overall structure of the extension like this: 29 30: ![](untitled-1.png) 31 32 It's a simple extension, but shows many of the basic concepts of the WebExtensions API: .. 400 Create a new directory called "beasts", and add the three images in that directory, with the appropriate names. You can get the images from [the GitHub repository](https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts), or from here: 401 402: ![](frog.jpg) 403 404: ![](snake.jpg) 405 406: ![](turtle.jpg) 407 408 ## Testing it out /content/files/en-us/mozilla/add-ons/webextensions/what_are_webextensions/index.md: 15 **Enhance or complement a website**: Use an add-on to deliver additional in-browser features or information from your website. Allow users to collect details from pages they visit to enhance the service you offer. 16 17: ![](amazon_add_on.png) 18 19 Examples: [Amazon Assistant for Firefox](https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/), [OneNote Web Clipper](https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/), and [Grammarly for Firefox](https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/). .. 21 **Let users show their personality**: Browser extensions can manipulate the content of web pages; for example, letting users add their favorite logo or picture as a background to every page they visit. Extensions may also enable users to update the look of the Firefox UI, the same way standalone [theme add-ons](https://extensionworkshop.com/documentation/themes/) do. 22 23: ![](myweb_new_tab_add_on.png) 24 25 Examples: [MyWeb New Tab](https://chrome.google.com/webstore/detail/myweb-new-tab/cnbiadnhebmicjcbpgajglfemclnlagh), [Tabliss](https://addons.mozilla.org/en-US/firefox/addon/tabliss/), and [VivaldiFox](https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/). .. 27 **Add or remove content from web pages**: You might want to help users block intrusive ads from web pages, provide access to a travel guide whenever a country or city is mentioned in a web page, or reformat page content to offer a consistent reading experience. With the ability to access and update both a page's HTML and CSS, extensions can help users see the web the way they want to. 28 29: ![](ublock_origin_add_on.png) 30 31 Examples: [uBlock Origin](https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/), [Reader](https://addons.mozilla.org/en-US/firefox/addon/reader/), and [Toolbox for Google Play Store™](https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/). .. 33 **Add tools and new browsing features**: Add new features to a taskboard, or generate QR code images from URLs, hyperlinks, or page text. With flexible UI options and the power of the [WebExtensions APIs](/en-US/docs/Mozilla/Add-ons/WebExtensions) you can easily add new features to a browser. And, you can enhance almost any website's features or functionality, it doesn't have to be your website. 34 35: ![](qr_code_image_generator_add_on.png) 36 37 Examples: [Swimlanes for Trello](https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/) and [Tomato Clock](https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/). .. 43 **Add development tools**: You may provide web development tools as your business or have developed a useful technique or approach to web development that you want to share. Either way, you can enhance the built-in Firefox developer tools by adding a new tab to the developer toolbar. 44 45: ![](axe_developer_tools_add_on.png) 46 47 Examples: [Web Developer](https://addons.mozilla.org/en-US/firefox/addon/web-developer/), [Web React Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [aXe Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/). /content/files/en-us/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md: 27 - : Make packaged content accessible to web pages and content scripts. 28 29: ![](webextension-anatomy.png) 30 31 See the [`manifest.json`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json) reference page for all the details. /content/files/en-us/mozilla/firefox/releases/3.5/icc_color_correction_in_firefox/index.md: 14 The image below is split into three sections. The top left corner shows the image as rendered by Firefox 2. The top right corner shows how the image renders in Firefox 3. The bottom shows the image rendered in Photoshop. 15 16: ![](iccsample.jpg) 17 18 As you can see, Firefox 3 and Photoshop render the image identically, because both support the embedded color correction profile. Firefox 2 ignores the profile, resulting in mismatched color. /css-examples/time/video.mp4: /interactive-examples/live-examples/media/cc0-videos/friday.mp4: /learning-area/javascript/apis/video-audio/start/video/sintel-short.mp4: /learning-area/javascript/apis/video-audio/finished/video/sintel-short.mp4: 155 matches across 93 files