Skip to content

Commit

Permalink
Merge branch 'main' into document-ntp_card_background
Browse files Browse the repository at this point in the history
  • Loading branch information
rebloor authored Oct 14, 2023
2 parents 648908d + f085e23 commit a26cdaa
Show file tree
Hide file tree
Showing 85 changed files with 612 additions and 442 deletions.
2 changes: 1 addition & 1 deletion files/en-us/learn/css/howto/create_fancy_boxes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ CSS boxes are the building blocks of any web page styled with CSS. Making them n

Before we start getting into the practical side of it, make sure you are familiar with [the CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model). It's also a good idea, but not a prerequisite, to be familiar with some [CSS layout basics](/en-US/docs/Learn/CSS/CSS_layout/Introduction).

On the technical side, Creating fancy boxes are all about mastering CSS border and background properties and how to apply them to a given box. But beyond the technics it's also all about unleashing your creativity. It will not be done in one day, and some web developers spend their whole life having fun with it.
On the technical side, Creating fancy boxes are all about mastering CSS border and background properties and how to apply them to a given box. But beyond the techniques it's also all about unleashing your creativity. It will not be done in one day, and some web developers spend their whole life having fun with it.

We are about to see many examples, but we will always work on the most simple piece of HTML possible, a simple element:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ Compare the rendering of the uppercase gamma letters in the following formula:

{{ EmbedLiveSample('Reverting automatic italicization of <mi>', 700, 50) }}

> **Note:** Although you can apply this tranformation, normally you'd just use the desired [Mathematical Alphanumeric Symbols](https://en.wikipedia.org/wiki/Mathematical_Alphanumeric_Symbols).
> **Note:** Although you can apply this transformation, normally you'd just use the desired [Mathematical Alphanumeric Symbols](https://en.wikipedia.org/wiki/Mathematical_Alphanumeric_Symbols).
## Operator properties of \<mo>

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/learn/performance/css/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ article {

The {{cssxref("content-visibility")}} property is a useful shortcut, which allows authors to apply a strong set of containments on a set of containers and specify that the browser should not lay out and render those containers until needed.

A second property, {{cssxref("contain-intrinsic-size")}}, is also available, which allows you to provide a placeholder size for containers while they are under the effects of containment. This means that the containers will take up space even if their contents have not yet been renderered, allowing containment to do its performance magic without the risk of scroll bar shift and jank as elements render and come into view. This improves the quality of the user experience as the content is loaded.
A second property, {{cssxref("contain-intrinsic-size")}}, is also available, which allows you to provide a placeholder size for containers while they are under the effects of containment. This means that the containers will take up space even if their contents have not yet been rendered, allowing containment to do its performance magic without the risk of scroll bar shift and jank as elements render and come into view. This improves the quality of the user experience as the content is loaded.

```css
article {
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/learn/performance/html/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ There are, however, some key differences between providing sources for images an

### Lazy loading images

A very useful technique for improving performance is **lazy loading**. This refers to the practice of not loading all images immediately when the HTML is rendered, but instead only loading them when they are actually visible to the user in the viewport (or imminently visible). This means that the immediately visible/usable content is ready to use more quickly, whereas subsequent content only has its images rendered when scrolled to, and the browser won't waste bandwith loading images that the user will never see.
A very useful technique for improving performance is **lazy loading**. This refers to the practice of not loading all images immediately when the HTML is rendered, but instead only loading them when they are actually visible to the user in the viewport (or imminently visible). This means that the immediately visible/usable content is ready to use more quickly, whereas subsequent content only has its images rendered when scrolled to, and the browser won't waste bandwidth loading images that the user will never see.

Lazy loading has historically been handled using JavaScript, but browsers now have a `loading` attribute available that can instruct the browser to lazy load images automatically:

Expand Down Expand Up @@ -223,7 +223,7 @@ pElem.addEventListener("click", () => {
});
```

We can apply this script to the page by refering to it in a `<script>` element like this:
We can apply this script to the page by referring to it in a `<script>` element like this:

```html
<script src="index.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Note that most of the values included inside the listed sub-members equate to bo
So for example, "Response" will result in a link being created like so:

```html
<li><a href="/en-US/docs/Web/API">Response</a></li>
<li><a href="/en-US/docs/Web/API/Response">Response</a></li>
```

There are a few exceptions.
Expand All @@ -91,7 +91,7 @@ These are all technically optional, but it is strongly encouraged that instead o
If there are a huge number of events, you might want to consider only listing the most popular ones, or putting them first in the list.
"animationstart" results in a link being made to [https://developer.mozilla.org/en-US/docs/Web/Events/animationstart](/en-US/docs/Web/API/Element/animationstart_event).
6. `"guides"` — the value is an array containing one or more objects that define links to guides explain how to use the API.
Each object contains two sub-members — "url", which contains the partial URL pointing to the guide article, and "title", which defines the link test for the link.
Each object contains two sub-members — "url", which contains the partial URL pointing to the guide article, and "title", which defines the link text.
As an example, the following object:

```json
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ slice(start, end)
````

> **Note:** The markup-language used in this case is `js-nolint`, where `js` indicates that JavaScript syntax highlighting should be used.
> For JavaScript syntax sections `-nolint` is also required because the sytnax section is deliberatively not "quite" JavaScript and we don't want the linter to "fix" it (return values and end-of-line semicolons are omitted).
> For JavaScript syntax sections `-nolint` is also required because the syntax section is deliberatively not "quite" JavaScript and we don't want the linter to "fix" it (return values and end-of-line semicolons are omitted).
### General style rules

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ browser-compat: webextensions.api.theme.getCurrent

{{AddonSidebar()}}

Gets the currently used theme as a {{WebExtAPIRef("theme.Theme", "Theme")}} object. The arguments available in the color object are listed in the [properties of the color](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors).
Gets the current theme as a {{WebExtAPIRef("theme.Theme", "Theme")}} object.

This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).

Expand All @@ -22,19 +22,15 @@ let getting = browser.theme.getCurrent(
### Parameters

- `windowId` {{optional_inline}}
- : `integer`. The ID of a window. If this is provided, the theme applied on that window will be provided. If it is omitted the theme applied on the last focused window will be provided.
- : `integer`. The ID of a window. If this is provided, the theme resolved is the one applied to that window. If it is omitted, the theme resolved is the one applied to the most recently focused window.

### Return value

A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). The promise will be fulfilled with a {{WebExtAPIRef("theme.Theme")}} object representing the theme applied to the given window. If no extension-supplied theme has been applied to the given window, it will be fulfilled with an empty object.

## Browser compatibility

{{Compat}}
A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). The promise is fulfilled with a {{WebExtAPIRef("theme.Theme")}} object representing the theme applied to the given window. If no extension-supplied theme has been applied to the given window, it is fulfilled with an empty object.

## Examples

Gets the properties `frame` and `toolbar` colors of the current theme
Gets the properties `frame` and `toolbar` colors of the current theme:

```js
function getStyle(themeInfo) {
Expand All @@ -53,3 +49,7 @@ getCurrentThemeInfo();
```

{{WebExtExamples}}

## Browser compatibility

{{Compat}}
12 changes: 5 additions & 7 deletions files/en-us/mozilla/add-ons/webextensions/api/theme/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ browser-compat: webextensions.api.theme

{{AddonSidebar}}

Enables browser extensions to update the browser theme.
Enables browser extensions to get details of the browser's theme and update the theme.

To use this API, an extension must request the "theme" [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) in its [manifest.json](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json) file.

> **Note:** When we set up a theme in a background file, we must declare the 'theme' [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) and therefore we cannot use the [theme](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme) function of the manifest, since it's not compatible.
You can use this API to include a theme in your extension, which you define as a {{WebExtAPIRef("theme.Theme")}} and apply using {{WebExtAPIRef("theme.update()")}}. You cannot include a static theme in your extension, defined with the ["theme"](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme) manifest key. The "theme" manifest key is used to define static themes only. See [Themes](https://extensionworkshop.com/documentation/themes/) on Extension Workshop for more information.

## Types

Expand All @@ -30,10 +28,10 @@ To use this API, an extension must request the "theme" [permission](/en-US/docs/
## Events

- {{WebExtAPIRef("theme.onUpdated")}}
- : Fired when the browser theme has been changed.
- : Fired when the browser theme changes.

{{WebExtExamples("h2")}}

## Browser compatibility

{{Compat}}

{{WebExtExamples("h2")}}
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Fires when a theme supplied as a browser extension is applied or removed. Specif
- when a [dynamic theme](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme) calls [`theme.update()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme/update) or [`theme.reset()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme/reset)
- when a theme gets uninstalled.

Note that this event is not fired for changes to the built-in themes.
This event is not fired for changes to the built-in themes.

## Syntax

Expand Down Expand Up @@ -45,13 +45,9 @@ Events have three functions:
- : `object`. An object containing two properties:

- `theme`
- : `object`. If the event fired because an extension-supplied theme was removed, this will be an empty object. If it fired because an extension-supplied theme was applied, then it will be a {{WebExtAPIRef("theme.Theme")}} object representing the theme that was applied.
- : `object`. If the event fired because an extension-supplied theme was removed, this is an empty object. If it fired because an extension-supplied theme was applied, then it is a {{WebExtAPIRef("theme.Theme")}} object representing the theme that was applied.
- `windowId` {{optional_inline}}
- : `integer`. The ID of the window for which theme has been updated. If this property is not present, it means that the theme was updated globally.

## Browser compatibility

{{Compat}}
- : `integer`. The ID of the window in which the theme was updated. If this property is not present, the theme was updated in all windows.

## Examples

Expand All @@ -68,3 +64,7 @@ browser.theme.onUpdated.addListener(handleUpdated);
```

{{WebExtExamples}}

## Browser compatibility

{{Compat}}
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ browser-compat: webextensions.api.theme.reset

{{AddonSidebar()}}

Resets any theme that was applied using the {{WebExtAPIRef("theme.update()")}} method.
Resets any theme applied using the {{WebExtAPIRef("theme.update()")}} method.

Note that this will always reset the theme back to the original default theme, even if the user had selected a different theme before this extension's theme was applied (see [bug 1415267](https://bugzil.la/1415267)).
To use this method, an extension must request the "theme" [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) in its [manifest.json](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json) file.

Note that this always reset the theme back to the original default theme, even if the user selected a different theme before this extension's theme was applied (see [bug 1415267](https://bugzil.la/1415267)).

## Syntax

Expand All @@ -22,11 +24,7 @@ browser.theme.reset(
### Parameters

- `windowId` {{optional_inline}}
- : `integer`. The ID of a window. If this is provided, the theme applied to that window will be reset. If it is omitted the theme will be reset on all windows.

## Browser compatibility

{{Compat}}
- : `integer`. The ID of a window. If this is provided, the theme applied to that window is reset. If it is omitted, the theme is reset on all windows.

## Examples

Expand All @@ -42,6 +40,10 @@ browser.browserAction.onClicked.addListener(() => {

{{WebExtExamples}}

## Browser compatibility

{{Compat}}

<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
//
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ A Theme object represents the specification of a theme.

A JSON [object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) that takes the same properties as the ["theme"](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme) manifest key.

{{WebExtExamples}}

## Browser compatibility

{{Compat}}

{{WebExtExamples}}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ browser-compat: webextensions.api.theme.update

{{AddonSidebar()}}

Updates the browser theme according to the content of given {{WebExtAPIRef("theme.Theme", "Theme")}} object.
Updates the browser theme according to the content of the {{WebExtAPIRef("theme.Theme", "Theme")}} object.

To use this method, an extension must request the "theme" [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) in its [manifest.json](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json) file.

## Syntax

Expand All @@ -21,17 +23,13 @@ browser.theme.update(
### Parameters

- `windowId` {{optional_inline}}
- : `integer`. The ID of a window. If this is provided, the theme is applied only to that window. If it is omitted the theme is applied to all windows.
- : `integer`. The ID of a window. If this is provided, the theme is applied only to that window. If it is omitted, the theme is applied to all windows.
- `theme`
- : `object`. A {{WebExtAPIRef("theme.Theme", "Theme")}} object specifying values for the UI elements you want to modify.

## Browser compatibility

{{Compat}}

## Examples

Sets the browser theme to use a sun graphic with complementary background color:
Sets the browser theme to use a sun graphic with a complementary background color:

```js
const suntheme = {
Expand All @@ -47,7 +45,7 @@ const suntheme = {
browser.theme.update(suntheme);
```

Set the theme for just the currently focused window:
Set the theme for the focused window only:

```js
const day = {
Expand Down Expand Up @@ -75,3 +73,7 @@ browser.menus.onClicked.addListener(updateThemeForCurrentWindow);
```

{{WebExtExamples}}

## Browser compatibility

{{Compat}}
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ This page contains a list of changes in [Firefox 1.5](/en-US/docs/Mozilla/Firefo
- [XUL Changes for Firefox 1.5](/en-US/docs/XUL_Changes_for_Firefox_1.5)
- [XPCNativeWrappers](/en-US/docs/XPCNativeWrapper) are on by default, and the behavior changed somewhat compared to 1.0.x
- A simpler method of [Chrome Registration](/en-US/docs/Chrome_Registration) deprecates contents.rdf.
- For overlayed context menus: the function `gContextMenu.linkURL()` has been renamed to `gContextMenu.getLinkURL()`, and `linkURL` is now a property. To use it in a backwards-compatible way:
- For overlaid context menus: the function `gContextMenu.linkURL()` has been renamed to `gContextMenu.getLinkURL()`, and `linkURL` is now a property. To use it in a backwards-compatible way:
`url = 'getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL();`

### Other Information
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/1.5/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Some of the new features in Firefox 1.5:

#### Networking-related changes

- Certificate prompts can now be overridden on a per-channel basis. This works by setting an interface requestor as an `nsIChannel`'s notificationCallbacks and giving out an interface for `nsIBadCertListener`.
- Certificate prompts can now be overridden on a per-channel basis. This works by setting an interface requester as an `nsIChannel`'s notificationCallbacks and giving out an interface for `nsIBadCertListener`.
- nsIWebBrowserPersist's listeners can now implement `nsIInterfaceRequestor::GetInterface` and will get an opportunity to provide all interfaces that channels might ask for, including `nsIProgressEventSink` (not too useful, redundant with `nsIWebProgressListener`). Useful interfaces here include `nsIChannelEventSink` and `nsIBadCertListener`.
- Extensions or other necko consumers, including XMLHttpRequest, can set a Cookie header explicitly, and necko will not replace it. Stored cookies will be merged with the explicitly set header, in a way that the explicit header will override the stored cookies.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/118/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ No notable changes.

- The <kbd>⊞ Windows Logo</kbd> key on Windows and the <kbd>Command</kbd> key on macOS now return a value of `"Meta"` for [`KeyboardEvent.key`](/en-US/docs/Web/API/KeyboardEvent/key), instead of `"OS"`, and [`KeyboardEvent.code`](/en-US/docs/Web/API/KeyboardEvent/code) returns `MetaLeft`/`MetaRight` instead of `OSLeft`/`OSRight` (Firefox bug [1232918](https://bugzil.la/1232918)).
- The {{domxref("RTCRtpTransceiver.currentDirection")}} and {{domxref("RTCRtpTransceiver.direction")}} properties now support the `"stopped"` value for indicating whether a transceiver has stopped. This value should now be used instead of the deprecated {{domxref("RTCRtpTransceiver.stopped")}} property ([Firefox bug 1568296](https://bugzil.la/1568296)).
- The array returned by {{domxref("RTCPeerConnection.getTransceivers()")}} now omits stopped transcievers. Similarly, {{domxref("RTCPeerConnection.getReceivers()")}} and {{domxref("RTCPeerConnection.getSenders()")}} omit the receivers and senders associated with a stopped transceiver ([Firefox bug 1568296](https://bugzil.la/1568296)).
- The array returned by {{domxref("RTCPeerConnection.getTransceivers()")}} now omits stopped transceivers. Similarly, {{domxref("RTCPeerConnection.getReceivers()")}} and {{domxref("RTCPeerConnection.getSenders()")}} omit the receivers and senders associated with a stopped transceiver ([Firefox bug 1568296](https://bugzil.la/1568296)).
- The [`TextMetrics.emHeightDescent`](/en-US/docs/Web/API/TextMetrics/emHeightDescent) and [`TextMetrics.emHeightAscent`](/en-US/docs/Web/API/TextMetrics/emHeightAscent) properties are now supported (Firefox bug [1841692](https://bugzil.la/1841692)).
- [`CSSStyleRule`](/en-US/docs/Web/API/CSSStyleRule) now inherits from [`CSSGroupingRule`](/en-US/docs/Web/API/CSSGroupingRule) instead of directly from [`CSSRule`](/en-US/docs/Web/API/CSSRule). As a result, it additionally implements the property [`cssRules`](/en-US/docs/Web/API/CSSGroupingRule/cssRules) and the methods [`deleteRule()`](/en-US/docs/Web/API/CSSGroupingRule/cssRules) and [`insertRule()`](/en-US/docs/Web/API/CSSGroupingRule/insertRule) (Firefox bug [1846251](https://bugzil.la/1846251)).

Expand Down
Loading

0 comments on commit a26cdaa

Please sign in to comment.