[pull] main from mdn:main

files/en-us/glossary/mvc/index.md

@@ -41,7 +41,7 @@ You might however also want to just update the view to display the data in a dif
 
 ## 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-US\]](/en-US/docs/Web/API/IndexedDB_API).) Your app's controlling code is probably written in HTML/JavaScript, and your user interface is probably written using HTML/CSS/whatever else you like. This sounds very much like MVC, but MVC makes these components follow a more rigid pattern.
+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-US/docs/Web/API/IndexedDB_API).) Your app's controlling code is probably written in HTML/JavaScript, and your user interface is probably written using HTML/CSS/whatever else you like. This sounds very much like MVC, but MVC makes these components follow a more rigid pattern.
 
 In the early days of the Web, MVC architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser. However, these days, more of the logic is pushed to the client with the advent of client-side data stores, and the [Fetch API](/en-US/docs/Web/API/Fetch_API) enabling partial page updates as required.
 

files/en-us/mozilla/firefox/releases/151/index.md

@@ -41,8 +41,6 @@ No notable changes.
 - The [`options.keyboardLock`](/en-US/docs/Web/API/Element/requestFullscreen#keyboardlock) property can now be passed as an option to {{domxref("Element.requestFullscreen()")}}, allowing websites to request keyboard lock when the element is displayed in fullscreen mode.
   This stops the <kbd>Esc</kbd> key from causing the element to leave fullscreen (a long-press is required instead), and some formerly-reserved browser hotkeys can now be intercepted and their default action prevented.
   ([Firefox bug 2032302](https://bugzil.la/2032302)).
-- The {{domxref("CanvasRenderingContext2D.lang")}} property is now supported, allowing the rendering language of an offscreen canvas to be explicitly specified and changed after the rendering context is created.
-  ([Firefox bug 1943070](https://bugzil.la/1943070)).
 - The `maxStorageBuffersInFragmentStage`, `maxStorageBuffersInVertexStage`, `maxStorageTexturesInFragmentStage`, and `maxStorageTexturesInVertexStage` properties on {{domxref("GPUSupportedLimits")}} are now partially supported.
   These properties report the value of the `maxStorageBuffersPerShaderStage` and `maxStorageTexturesPerShaderStage` limits.
   When creating a device, requested values for the *In*Stage limits are ignored.

files/en-us/mozilla/firefox/releases/152/index.md

@@ -57,6 +57,9 @@ Firefox 152 is the current [Beta version of Firefox](https://www.firefox.com/en-
 - The {{domxref("Notification/actions","actions")}} read-only property and the [`maxActions`](/en-US/docs/Web/API/Notification/maxActions_static) static read-only property of the {{domxref("Notification")}} interface are supported.
   These contain the notification actions set with {{domxref("ServiceWorkerRegistration.showNotification()")}}, and the platform-dependent maximum number of actions that can be set for a notification, respectively.
   ([Firefox bug 1959931](https://bugzil.la/1959931)).
+- The {{domxref("Element.getAnimations()")}} method can now accept the [`options.pseudoElement`](/en-US/docs/Web/API/Element/getAnimations#pseudoelement) parameter.
+  This allows you to directly target a specific pseudo-element, rather than filtering the results of `{ subtree: true }`.
+  ([Firefox bug 1935557](https://bugzil.la/1935557)).
 
 #### Media, WebRTC, and Web Audio
 

files/en-us/web/api/element/getanimations/index.md

@@ -8,11 +8,8 @@ browser-compat: api.Element.getAnimations
 
 {{APIRef("Web Animations")}}
 
-The `getAnimations()` method of the {{domxref("Element")}} interface
-(specified on the `Animatable` mixin) returns an array of all
-{{domxref("Animation")}} objects affecting this element or which are scheduled to do so
-in future. It can optionally return {{domxref("Animation")}} objects for descendant
-elements too.
+The `getAnimations()` method of the {{domxref("Element")}} interface returns an array of all {{domxref("Animation")}} objects affecting this element, or that are scheduled to do so in the future.
+It can optionally return {{domxref("Animation")}} objects either for descendant elements and their [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) or just for the specified pseudo-element.
 
 > [!NOTE]
 > This array includes [CSS Animations](/en-US/docs/Web/CSS/Guides/Animations), [CSS Transitions](/en-US/docs/Web/CSS/Guides/Transitions), and [Web Animations](/en-US/docs/Web/API/Web_Animations_API).
@@ -27,30 +24,145 @@ getAnimations(options)
 ### Parameters
 
 - `options` {{optional_inline}}
-  - : An options object containing the following property:
+  - : An options object containing the following properties:
     - `subtree`
-      - : A boolean value which, if `true`, causes animations that target
-        descendants of _Element_ to be returned as well. This includes animations
-        that target any CSS [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) attached to
-        _Element_ or one of its descendants. Defaults to `false`.
+      - : A boolean value, which if `true`, causes animations that target descendants of _Element_ to be returned as well.
+        This includes animations that target any CSS [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) attached to _Element_ or one of its descendants.
+        Defaults to `false`.
+    - `pseudoElement`
+      - : A string that specifies a [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) to be the target element, such as [`::after`](/en-US/docs/Web/CSS/Reference/Selectors/::after).
+
+    Note that specifying both `pseudoElement` and `subtree` is equivalent to specifying just `pseudoElement`.
 
 ### Return value
 
-An {{jsxref("Array")}} of {{domxref("Animation")}} objects, each representing an
-animation currently targeting the {{domxref("Element")}} on which this method is called,
-or one of its descendant elements if `{ subtree: true }` is specified.
+An {{jsxref("Array")}} of {{domxref("Animation")}} objects, each representing an animation currently targeting the {{domxref("Element")}}.
+
+If the `{ subtree: true }` parameter is specified, the returned value also includes animation objects targeting descendant elements, including pseudo-elements.
+If `options.pseudoElement` is specified, the return value includes just the animation objects that match the selected pseudo-element.
+
+### Exceptions
+
+- `SyntaxError` {{domxref("DOMException")}}
+  - : An invalid pseudo-element was passed in the [`options.pseudoElement`](#pseudoelement) parameter.
 
 ## Examples
 
-The following code snippet will wait for all animations on `elem` and its
-descendants to finish before removing the element from the document.
+### Wait for all animations on an element and its descendants
+
+The following code snippet will wait for all animations on `elem` and its descendants to finish before removing the element from the document.
 
 ```js
 Promise.all(
   elem.getAnimations({ subtree: true }).map((animation) => animation.finished),
 ).then(() => elem.remove());
 ```
 
+### Get animations for a pseudo-element target
+
+This example displays a progress bar using a pseudo-element.
+It uses `getAnimations()` to return the animations for the pseudo-element, starts them, and then removes the progress bar once the animation is complete.
+
+Note that the code uses a fallback approach to get the animations in case the `pseudoElement` option is not supported.
+There is also hidden code to display a "Restart" button.
+
+#### HTML
+
+```html
+<div class="progress-bar" id="bar"></div>
+```
+
+#### CSS
+
+The CSS styles the progress bar element to animate across the width of its container in 3 seconds.
+The animation is initially paused so that we can start it in JavaScript.
+
+```css
+.progress-bar {
+  width: 100%;
+  height: 20px;
+  background: #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar::after {
+  content: "";
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: #4f46e5;
+  border-radius: 4px;
+  animation: fill-progress 3s ease-in-out forwards paused;
+}
+
+@keyframes fill-progress {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+```
+
+#### JavaScript
+
+First we define a function to get the animations associated with a specified element and pseudo-element.
+It calls `getAnimations()` with the [`pseudoElement`](#pseudoelement) option, and if that doesn't return any animations, falls back to filtering the animations returned by [`subtree`](#subtree).
+
+```js
+function getAnimationsForPseudo(element, pseudo) {
+  // Try the spec-compliant way first (Firefox)
+  try {
+    const anims = element.getAnimations({ pseudoElement: pseudo });
+    // If it returned something, the option is supported, so return the result
+    if (anims.length > 0) return anims;
+  } catch (e) {
+    // invalid selector etc
+    return [];
+  }
+
+  // Fallback for browsers that only support subtree
+  return element
+    .getAnimations({ subtree: true })
+    .filter((anim) => anim.effect?.pseudoElement === pseudo);
+}
+```
+
+We use this function to get all the animations associated with the progress bar pseudo element.
+The code iterates through the animations to start them, and then removes the progress bar when all animations have finished.
+Note that we run the code in `requestAnimationFrame()` to ensure that the animation is ready to run before our JavaScript is executed.
+
+```js
+const bar = document.getElementById("bar");
+
+requestAnimationFrame(() => {
+  const anims = getAnimationsForPseudo(bar, "::after");
+  anims.forEach((a) => a.play());
+  Promise.all(anims.map((a) => a.finished)).then(() => bar.remove());
+});
+```
+
+```html hidden
+<button id="reset" type="button">Restart</button>
+```
+
+```js hidden
+const reload = document.querySelector("#reset");
+
+reload.addEventListener("click", () => {
+  window.location.reload(true);
+});
+```
+
+#### Result
+
+The bar should progress across the width of its container and then disappear.
+You can restart it by pressing the "Restart" button.
+
+{{EmbedLiveSample("Get animations for a pseudo-element target", "100%", "50px")}}
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/notification/actions/index.md

@@ -8,23 +8,56 @@ browser-compat: api.Notification.actions
 
 {{APIRef("Web Notifications")}}{{SecureContext_Header}} {{AvailableInWorkers}}
 
-The **`actions`** read-only property of the {{domxref("Notification")}} interface provides the actions available for users to choose from for interacting with the notification.
-
-The actions are set using the `actions` option of the second argument for the {{DOMxref("ServiceWorkerRegistration.showNotification", "showNotification()")}} method and {{DOMxref("Notification/Notification", "Notification()")}} constructor.
-
-> [!NOTE]
-> Browsers typically limit the maximum number of actions they will display for a particular notification. Check the static {{DOMxref("Notification.maxActions_static", "Notification.maxActions")}} property to determine the limit.
+The **`actions`** read-only property of the {{domxref("Notification")}} interface provides the actions available for users to select when interacting with the notification.
 
 ## Value
 
-A read-only array of actions. Each element in the array is an object with the following members:
+A read-only array of actions.
+Each element in the array is an object with the following members:
 
 - `action`
   - : A string identifying a user action to be displayed on the notification.
 - `title`
   - : A string containing action text to be shown to the user.
 - `icon`
   - : A string containing the URL of an icon to display with the action.
+- `navigate` {{optional_inline}} {{experimental_inline}}
+  - : A string containing a URL to navigate to when the user activates this action.
+    When set, the user agent navigates to this URL instead of firing the {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "notificationclick")}} event.
+    See {{domxref("Notification.navigate")}} for more information.
+
+## Description
+
+Notification actions are buttons or controls that appear within [persistent notifications](/en-US/docs/Web/API/Notifications_API#persistent_and_non-persistent_notifications).
+They are set using the [`actions`](/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#actions) option of the second argument of the {{domxref("ServiceWorkerRegistration.showNotification", "showNotification()")}} method.
+Note that actions are not available for non-persistent notifications.
+If you pass an `options` object with an `actions` property that is anything other than `null` to the {{domxref("Notification/Notification", "Notification()")}} constructor, a `TypeError` is thrown.
+
+Clicking the button associated with an action navigates to the URL set in the [`navigate`](#navigate) option if one is specified.
+Otherwise, it fires a [`notificationclick`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event) event on the service worker that includes the action that was selected (and the associated `Notification` instance), so the worker can handle it without the user ever switching to your page.
+
+> [!NOTE]
+> Browsers typically limit the maximum number of actions they will display for a particular notification.
+> Check the static {{domxref("Notification.maxActions_static", "Notification.maxActions")}} property to determine the limit.
+
+## Examples
+
+### Basic usage
+
+The following code shows how a service worker might listen for the `notificationclick` event and use it to retrieve both the clicked action and an array of all actions.
+
+```js
+// sw.js
+self.addEventListener("notificationclick", (event) => {
+  const clickedAction = event.action; // e.g. "reply" or "" if body was clicked
+
+  // Read all defined actions
+  const notification = event.notification; // the Notification object
+  console.log(notification.actions); // full array of action objects
+
+  notification.close();
+});
+```
 
 ## Specifications
 
@@ -37,4 +70,4 @@ A read-only array of actions. Each element in the array is an object with the fo
 ## See also
 
 - [Using the Notifications API](/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API)
-- {{DOMxref("Notification.maxActions_static", "Notification.maxActions")}}
+- {{domxref("Notification.maxActions_static", "Notification.maxActions")}}

files/en-us/web/api/notification/maxactions_static/index.md

@@ -6,20 +6,26 @@ page-type: web-api-static-property
 browser-compat: api.Notification.maxActions_static
 ---
 
-{{APIRef("Web Notifications")}}{{SecureContext_Header}} {{AvailableInWorkers}}
+{{APIRef("Web Notifications")}}{{SecureContext_Header}}{{SeeCompatTable}} {{AvailableInWorkers}}
 
-The **`maxActions`** read-only static property of the
-{{domxref("Notification")}} interface returns the maximum number of actions supported by
-the device and the User Agent. Effectively, this is the maximum number of elements in
-{{domxref("Notification.actions")}} array which will be respected by the User Agent.
+The **`maxActions`** read-only static property of the {{domxref("Notification")}} interface returns the maximum number of actions that can be displayed in a notification.
 
 ## Value
 
-An integer number which indicates the largest number of notification
-actions that can be presented to the user by the User Agent and the device.
+An integer.
+
+## Description
+
+Notification actions are buttons or controls that appear within [persistent notifications](/en-US/docs/Web/API/Notifications_API#persistent_and_non-persistent_notifications).
+Actions are set using the [`actions`](/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#actions) option of the second argument of the {{domxref("ServiceWorkerRegistration.showNotification", "showNotification()")}} method.
+
+Browsers typically limit the maximum number of actions they will display for a particular notification.
+The `maxActions` property returns that limit, which is the maximum number of elements in the {{domxref("Notification.actions")}} array that will be respected by the user agent.
 
 ## Examples
 
+### Log the maximum possible number of actions
+
 The following snippet logs the maximum number of supported actions.
 
 ```js