From eb0c3d04f183f4be64b2a25d20ab4a7f83c19075 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Fri, 18 Jul 2025 17:21:11 +0100 Subject: [PATCH 1/3] added Firefox release for `:active-view-transition` pseudo-class page (#40403) * added :active-view-transition to Firefox 141 and experimental pages * Update files/en-us/mozilla/firefox/experimental_features/index.md Co-authored-by: Dipika Bhattacharya * added flag and versions for viewTransitions * updated 141 release to include flag --------- Co-authored-by: Dipika Bhattacharya --- .../firefox/experimental_features/index.md | 20 ++++++++++++++++--- .../mozilla/firefox/releases/141/index.md | 4 ++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index f556fceb9e4e875..42eab61fb8ea9cf 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -324,6 +324,20 @@ Currently only support for `::details-content::first-letter` can be parsed, usin - `layout.css.details-content.enabled` - : Set to `true` to enable. +### `:active-view-transition` pseudo-class + +The CSS {{CSSXRef(":active-view-transition")}} pseudo-class enables you to style content while a [view transition](/en-US/docs/Web/API/View_Transition_API) is taking place in a single-page app (SPA). ([Firefox bug 1956140](https://bugzil.la/1956140)). + +| Release channel | Version added | Enabled by default? | +| ----------------- | ------------- | ------------------- | +| Nightly | 141 | Yes | +| Developer Edition | 141 | No | +| Beta | 141 | No | +| Release | - | No | + +- `dom.viewTransitions.enabled` + - : Set to `true` to enable. + ## SVG **No experimental features in this release cycle.** @@ -716,9 +730,9 @@ The [View Transition API](/en-US/docs/Web/API/View_Transition_API) provides a me | Release channel | Version changed | Enabled by default? | | ----------------- | --------------- | ------------------- | | Nightly | 139 | Yes | -| Developer Edition | — | No | -| Beta | — | No | -| Release | — | No | +| Developer Edition | 139 | No | +| Beta | 139 | No | +| Release | 139 | No | - `dom.viewTransitions.enabled` - : Set to `true` to enable. diff --git a/files/en-us/mozilla/firefox/releases/141/index.md b/files/en-us/mozilla/firefox/releases/141/index.md index d26be2416e5bc27..ac79e1e2300024f 100644 --- a/files/en-us/mozilla/firefox/releases/141/index.md +++ b/files/en-us/mozilla/firefox/releases/141/index.md @@ -109,3 +109,7 @@ Firefox 141 is the current [Beta version of Firefox](https://www.firefox.com/en- These features are shipping in Firefox 141 but are disabled by default. To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page. + +- **`:active-view-transition`** (Nightly): `dom.viewTransitions.enabled` + + The CSS {{CSSXRef(":active-view-transition")}} pseudo-class enables you to style content while a [view transition](/en-US/docs/Web/API/View_Transition_API) is taking place in a single-page app (SPA). ([Firefox bug 1956140](https://bugzil.la/1956140)). From 7348ad4bf0fa7351041e9a3661c8a2bd2659d6e5 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sat, 19 Jul 2025 00:49:11 +0800 Subject: [PATCH 2/3] Modernize remaining JS (#40398) --- .../content_scripts/cloneinto/index.md | 26 ++++++++--------- .../content_scripts/exportfunction/index.md | 28 +++++++++---------- .../work_with_the_cookies_api/index.md | 11 ++++---- .../using_custom_elements/index.md | 8 ++++-- 4 files changed, 38 insertions(+), 35 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md b/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md index 9372938a17884f2..01642eea3abe5db 100644 --- a/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md @@ -9,7 +9,7 @@ sidebar: addonsidebar This function provides a safe way to take an object defined in a privileged scope and create a [structured clone](/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) of it in a less-privileged scope. It returns a reference to the clone: ```js -var clonedObject = cloneInto(myObject, targetWindow); +const clonedObject = cloneInto(myObject, targetWindow); ``` You can then assign the clone to an object in the target scope as an expando property, and scripts running in that scope can access it: @@ -53,7 +53,7 @@ This content script creates an object, clones it into the content window and mak ```js // content script -var addonScriptObject = { greeting: "hello from your extension" }; +const addonScriptObject = { greeting: "hello from your extension" }; window.addonScriptObject = cloneInto(addonScriptObject, window); ``` @@ -63,7 +63,7 @@ Scripts running in the page can access the object: // page script button.addEventListener( "click", - function () { + () => { console.log(window.addonScriptObject.greeting); // "hello from your extension" }, false, @@ -90,18 +90,18 @@ The content script can define an object, clone it, and pass it into this functio ```js // content script -var addonScriptObject = { message: "hello from your extension" }; +const addonScriptObject = { message: "hello from your extension" }; window.foo(cloneInto(addonScriptObject, window)); // "they said: hello from your extension" ``` ### Cloning objects that have functions -If the object to clone contains functions, you must pass the `{cloneFunctions:true}` flag, or you get an error. If you do pass this flag, then functions in the object are cloned using the same mechanism used in [`exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts/exportFunction): +If the object to clone contains functions, you must pass the `{ cloneFunctions: true }` flag, or you get an error. If you do pass this flag, then functions in the object are cloned using the same mechanism used in [`exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts/exportFunction): ```js // content script -var addonScriptObject = { - greetMe: function () { +const addonScriptObject = { + greetMe() { alert("hello from your extension"); }, }; @@ -112,10 +112,10 @@ window.addonScriptObject = cloneInto(addonScriptObject, window, { ```js // page script -var test = document.getElementById("test"); +const test = document.getElementById("test"); test.addEventListener( "click", - function () { + () => { window.addonScriptObject.greetMe(); }, false, @@ -124,11 +124,11 @@ test.addEventListener( ### Cloning objects that contain DOM elements -By default, if the object you clone contains objects reflected from C++, such as DOM elements, the cloning operation fails with an error. If you pass the `{wrapReflectors:true}` flag, then the object you clone contains these objects: +By default, if the object you clone contains objects reflected from C++, such as DOM elements, the cloning operation fails with an error. If you pass the `{ wrapReflectors: true }` flag, then the object you clone contains these objects: ```js // content script -var addonScriptObject = { +const addonScriptObject = { body: window.document.body, }; window.addonScriptObject = cloneInto(addonScriptObject, window, { @@ -138,10 +138,10 @@ window.addonScriptObject = cloneInto(addonScriptObject, window, { ```js // page script -var test = document.getElementById("test"); +const test = document.getElementById("test"); test.addEventListener( "click", - function () { + () => { console.log(window.addonScriptObject.body.innerHTML); }, false, diff --git a/files/en-us/mozilla/add-ons/webextensions/content_scripts/exportfunction/index.md b/files/en-us/mozilla/add-ons/webextensions/content_scripts/exportfunction/index.md index 283e8a38a7cabbd..e762dabdc1ccbd0 100644 --- a/files/en-us/mozilla/add-ons/webextensions/content_scripts/exportfunction/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/content_scripts/exportfunction/index.md @@ -61,11 +61,11 @@ exportFunction(changeMyName, window, { ```js // less-privileged scope: for example, a page script -var user = { name: "Jim" }; -var test = document.getElementById("test"); +const user = { name: "Jim" }; +const test = document.getElementById("test"); test.addEventListener( "click", - function () { + () => { console.log(user.name); // "Jim" window.changeMyName(user); console.log(user.name); // "Bill" @@ -93,15 +93,15 @@ exportFunction(logUser, window, { ```js // less-privileged scope: for example, a page script -var user = { - getUser: function () { +const user = { + getUser() { return "Bill"; }, }; -var test = document.getElementById("test"); +const test = document.getElementById("test"); test.addEventListener( "click", - function () { + () => { window.logUser(user); }, false, @@ -129,10 +129,10 @@ exportFunction(logUser, unsafeWindow, { function getUser() { return "Bill"; } -var test = document.getElementById("test"); +const test = document.getElementById("test"); test.addEventListener( "click", - function () { + () => { window.logUser(getUser); }, false, @@ -151,7 +151,7 @@ This script defines a function and then exports it to a content window: ```js // extension-script.js -var salutation = "hello "; +const salutation = "hello "; function greetMe(user) { return salutation + user; } @@ -162,7 +162,7 @@ Instead of using `defineAs`, the script can assign the result of `exportFunction ```js // extension-script.js -var salutation = "hello "; +const salutation = "hello "; function greetMe(user) { return salutation + user; } @@ -173,7 +173,7 @@ Either way, code running in the content window's scope can call the function: ```js // page-script.js -var greeting = foo("alice"); +const greeting = foo("alice"); console.log(greeting); // "hello alice" ``` @@ -184,7 +184,7 @@ Instead of attaching the function to the target's global `window` object, the ca ```js // page-script.js -var bar = {}; +const bar = {}; ``` Now the extension script can attach the function to `bar`: @@ -198,7 +198,7 @@ exportFunction(greetMe, window.bar, { ```js // page-script.js -var value = bar.greetMe("bob"); +const value = bar.greetMe("bob"); console.log(value); // "hello bob" ``` diff --git a/files/en-us/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md b/files/en-us/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md index d9b6a97364bca34..a88ca17ac9f5331 100644 --- a/files/en-us/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md @@ -128,14 +128,13 @@ The extension's UI uses a toolbar button ({{WebExtAPIRef("browserAction")}}) imp To handle the icon buttons the script first gathers all the class names used for the buttons in the HTML file. It then loops through all the buttons assigning them their image and creating an `onclick` listener for each button: ```js -let bgBtns = document.querySelectorAll(".bg-container button"); +const bgBtns = document.querySelectorAll(".bg-container button"); -for (let i = 0; i < bgBtns.length; i++) { - let imgName = bgBtns[i].getAttribute("class"); - let bgImg = `url('images/${imgName}.png')`; - bgBtns[i].style.backgroundImage = bgImg; +for (const btn of bgBtns) { + const imgName = btn.getAttribute("class"); + btn.style.backgroundImage = `url('images/${imgName}.png')`; - bgBtns[i].onclick = (e) => { + btn.onclick = (e) => { // ... }; } diff --git a/files/en-us/web/api/web_components/using_custom_elements/index.md b/files/en-us/web/api/web_components/using_custom_elements/index.md index 12779e20cb98b52..8e602b51586e54b 100644 --- a/files/en-us/web/api/web_components/using_custom_elements/index.md +++ b/files/en-us/web/api/web_components/using_custom_elements/index.md @@ -110,8 +110,12 @@ If you want to preserve the element's state, you can do so by defining a `connec You could add an empty `connectedMoveCallback()` to stop the other two callbacks running, or include some custom logic to handle the move: ```js -connectedMoveCallback() { - console.log("Custom move-handling logic here."); +class MyComponent { + // ... + connectedMoveCallback() { + console.log("Custom move-handling logic here."); + } + // ... } ``` From 71e475f328375b2ba4b3b20941fa5374d3e31848 Mon Sep 17 00:00:00 2001 From: Simeon Vincent Date: Fri, 18 Jul 2025 11:34:33 -0700 Subject: [PATCH 3/3] Remove unsupported contact method (#40432) --- files/en-us/mozilla/add-ons/contact_us/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/add-ons/contact_us/index.md b/files/en-us/mozilla/add-ons/contact_us/index.md index 9794d0670f6c01d..5dc471cadb76744 100644 --- a/files/en-us/mozilla/add-ons/contact_us/index.md +++ b/files/en-us/mozilla/add-ons/contact_us/index.md @@ -22,7 +22,7 @@ Use the [Add-ons Discourse forum](https://discourse.mozilla.org/c/add-ons/35) to #### Security vulnerabilities -If you discover an add-on security vulnerability, even if the add-on is not hosted on a Mozilla site, please notify us. We will work with the developer to correct the issue. Please report security vulnerabilities [confidentially](https://www.mozilla.org/en-US/about/governance/policies/security-group/bugs/) in [Bugzilla](https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&component=Add-on%20Security&maketemplate=Add-on%20Security%20Bug&bit-23=1&rep_platform=All&op_sys=All) or by emailing . +If you discover an add-on security vulnerability, even if the add-on is not hosted on a Mozilla site, please notify us. We will work with the developer to correct the issue. Please report security vulnerabilities [confidentially](https://www.mozilla.org/en-US/about/governance/policies/security-group/bugs/) in [Bugzilla](https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&component=Add-on%20Security&maketemplate=Add-on%20Security%20Bug&bit-23=1&rep_platform=All&op_sys=All). #### Bugs on addons.mozilla.org (AMO)