Bug 2001318 theme responsive svg images#43348
Conversation
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
This pull request has merge conflicts that must be resolved before it can be merged. |
rpl
left a comment
There was a problem hiding this comment.
@rebloor thanks for jumping quickly on preparing these changes to the WebExtensions icons-related MDN docs (and apologies for the time I needed to get to focus on taking a deep enough look to this pull request and give it a complete review pass).
I've a few request for changes below, plus some thoughts and questions.
One of the thought is related to considering to only have the more detailed descriptions for the expected behaviors with SVG icons and prefers-color-scheme approach to let the icon better adapt themselves to dark mode themes in one or two places at most, and then linking the section from the multiple places in the API reference pages where we'd want to highlight those (to reduce the number of copies of the same code snippets and details related to it).
Let me know what do you think about those thoughts.
|
|
||
| The ability of extensions to dynamically execute code in their `moz-extension:` documents with {{WebExtAPIRef("tabs.executeScript")}}, {{WebExtAPIRef("tabs.insertCSS")}}, {{WebExtAPIRef("tabs.removeCSS")}}, {{WebExtAPIRef("scripting.executeScript")}}, {{WebExtAPIRef("scripting.insertCSS")}}, and {{WebExtAPIRef("scripting.removeCSS")}} is deprecated. The feature is no longer available in Firefox Nightly, and the beta and release versions of Firefox provide a warning in the tab's console. This restriction will apply to all versions of Firefox 152 and later. As an alternative, an extension can run code in its documents dynamically by registering a {{WebExtAPIRef("runtime.onMessage")}} listener in the document's script, then sending a message to trigger execution of the required code.([Firefox bug 2011234](https://bugzil.la/2011234)) | ||
| - The ability of extensions to dynamically execute code in their `moz-extension:` documents with {{WebExtAPIRef("tabs.executeScript")}}, {{WebExtAPIRef("tabs.insertCSS")}}, {{WebExtAPIRef("tabs.removeCSS")}}, {{WebExtAPIRef("scripting.executeScript")}}, {{WebExtAPIRef("scripting.insertCSS")}}, and {{WebExtAPIRef("scripting.removeCSS")}} is deprecated. The feature is no longer available in Firefox Nightly, and the beta and release versions of Firefox provide a warning in the tab's console. This restriction will apply to all versions of Firefox 152 and later. As an alternative, an extension can run code in its documents dynamically by registering a {{WebExtAPIRef("runtime.onMessage")}} listener in the document's script, then sending a message to trigger execution of the required code.([Firefox bug 2011234](https://bugzil.la/2011234)) | ||
| - The implicit CSS filter applied to [`pageAction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction) SVG icons on dark themes (`about:config` preference `extensions.webextensions.pageActionIconDarkModeFilter.enabled` is set to `true` or not defined) that reduces the contrast in icons using multiple colors is deactivated in Firefox Desktop Nightly. ([Firefox bug 2001318](https://bugzil.la/2001318)) It will be deactivated on the release channel as part of [Firefox bug 2016509](https://bugzil.la/2016509), which is planned for Firefox 152. |
There was a problem hiding this comment.
Given that at the moment we have disabled the current behavior (the SVG filter implicitly applied in dark mode on pageAction SVG icons) only on Nightly builds, I feels that mentioning in the 149 release notes the behavior that is Nightly-only may be potentially confusing.
From my personal perspective, the executeScript one doesn't feel too out of place instead, because we are emitting a warning log message and so there was still something worth mentioning explicitly in the 149 release notes.
We are going to work with our DevRel on announcing the pageAction SVG icon and other notable changes and deprecation through different comms channels (e.g. through a blog post), once these changes to the MDN docs have been merged.
And so I'm leaving towards omitting the mention to the changes related to the pageAction SVG icon in the 149 release notes here.
There was a problem hiding this comment.
@rpl your call, but I'm inclined to leave it for any developers who use the release notes as their primary source of information.
There was a problem hiding this comment.
@rebloor that sounds like also a reasonable perspective. Tbh I'm a bit on the fence but leaning towards not including it in 149 release notes. Let's see if Rob would be also leaning towards keeping it, if that is the case then it may be consider tweaking the wording some more and consider including a note about it.
@Rob--W wdyt? should we reword the point related to the pageAction icon a bit and include it in 149 release notes or should we omit it completely?
There was a problem hiding this comment.
@rebloor as I mentioned in my previous comment, I felt you had a point and so I thought some more into which form I'd feel ok to mention it into the 149 release notes, and I got to the conclusion that wording it as "guidance for the extensions developers to be able to test out in the release channel ahead of its upcoming deprecation in 152" may make it fit nicely as an additional 149 release notes.
I touched base about it with Rob too and confirmed that we both felt it would be reasonable addition to 149 release notes in that form.
Follows my attempt to reword it a bit into a "how to test on release ahead of upcoming deprecation" kind of form (feel free to pick up from it the parts that feels reasonable and to rework the rest how would read better from your perspective):
- The implicit CSS filter applied to
pageActionSVG icons on dark themes is planned to be deprecated and deactivated soon (as part of Bug 2016509, in Firefox Desktop version 152). In Firefox 149 extensions developers can test out their pageAction SVG icons with the CSS filter disabled by creating a boolean about:config preference namedextensions.webextensions.pageActionIconDarkModeFilter.enabledand setting it tofalse.
And something along those lines in WebExtensions/user_interface/Page_actions Icons section (or to have more detailed note on the WebExtensions/user_interface/Page_actions Icons section side and link that in a shorter one added here in the release notes).
files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md
Outdated
Show resolved
Hide resolved
| - `default_popup` {{optional_inline}} | ||
| - : `String`. The path to an HTML file containing the specification of the popup. The HTML file may include CSS and JavaScript files using `<link>` and `<script>` elements, just like a normal web page. However, `<script>` must have a `src` attribute to load a file. Don't use `<script>` with embedded code, because you'll get a confusing Content Violation Policy error. Unlike a normal web page, JavaScript running in the popup can access all the [WebExtension APIs](/en-US/docs/Mozilla/Add-ons/WebExtensions/API) (subject, of course, to the extension having the appropriate [permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)). This is a localizable property. | ||
| - `default_title` {{optional_inline}} | ||
| - : `String`. Tooltip for the button, displayed when the user moves their mouse over it. If the button is added to the browser's menu panel, this is also shown under the app icon. This is a localizable property. |
There was a problem hiding this comment.
issue: in the default_popup and default_title descriptions, let's make “localizable property” to still be linked to https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization#internationalizing_manifest.json as in the current version of that page (this also applied to the same properties descriptions from the browser_action and page_action API references pages).
| You can specify a single icon file by supplying a string here: | ||
|
|
||
| ```json | ||
| "default_icon": "path/to/geo.svg"` |
There was a problem hiding this comment.
nit/issue: there is an unnecessary "`" at the end of this line, let's remove that.
files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
Outdated
Show resolved
Hide resolved
rebloor
left a comment
There was a problem hiding this comment.
Initial response to feedback, more to come
files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
Outdated
Show resolved
Hide resolved
files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
Outdated
Show resolved
Hide resolved
|
|
||
| The ability of extensions to dynamically execute code in their `moz-extension:` documents with {{WebExtAPIRef("tabs.executeScript")}}, {{WebExtAPIRef("tabs.insertCSS")}}, {{WebExtAPIRef("tabs.removeCSS")}}, {{WebExtAPIRef("scripting.executeScript")}}, {{WebExtAPIRef("scripting.insertCSS")}}, and {{WebExtAPIRef("scripting.removeCSS")}} is deprecated. The feature is no longer available in Firefox Nightly, and the beta and release versions of Firefox provide a warning in the tab's console. This restriction will apply to all versions of Firefox 152 and later. As an alternative, an extension can run code in its documents dynamically by registering a {{WebExtAPIRef("runtime.onMessage")}} listener in the document's script, then sending a message to trigger execution of the required code.([Firefox bug 2011234](https://bugzil.la/2011234)) | ||
| - The ability of extensions to dynamically execute code in their `moz-extension:` documents with {{WebExtAPIRef("tabs.executeScript")}}, {{WebExtAPIRef("tabs.insertCSS")}}, {{WebExtAPIRef("tabs.removeCSS")}}, {{WebExtAPIRef("scripting.executeScript")}}, {{WebExtAPIRef("scripting.insertCSS")}}, and {{WebExtAPIRef("scripting.removeCSS")}} is deprecated. The feature is no longer available in Firefox Nightly, and the beta and release versions of Firefox provide a warning in the tab's console. This restriction will apply to all versions of Firefox 152 and later. As an alternative, an extension can run code in its documents dynamically by registering a {{WebExtAPIRef("runtime.onMessage")}} listener in the document's script, then sending a message to trigger execution of the required code.([Firefox bug 2011234](https://bugzil.la/2011234)) | ||
| - The implicit CSS filter applied to [`pageAction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction) SVG icons on dark themes (`about:config` preference `extensions.webextensions.pageActionIconDarkModeFilter.enabled` is set to `true` or not defined) that reduces the contrast in icons using multiple colors is deactivated in Firefox Desktop Nightly. ([Firefox bug 2001318](https://bugzil.la/2001318)) It will be deactivated on the release channel as part of [Firefox bug 2016509](https://bugzil.la/2016509), which is planned for Firefox 152. |
There was a problem hiding this comment.
@rpl your call, but I'm inclined to leave it for any developers who use the release notes as their primary source of information.
| - `browser_style` {{optional_inline}} {{deprecated_inline}} | ||
| - : `Boolean`. Optional. Defaults to `false`. | ||
|
|
||
| > [!WARNING] | ||
| > Do not set `browser_style` to true: its not support in Manifest V3 from Firefox 118. See [Manifest V3 migration for `browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration). | ||
|
|
||
| In Firefox, the stylesheet can be seen at `chrome://browser/content/extension.css` or `chrome://browser/content/extension-mac.css` on macOS. The [latest-download](https://github.com/mdn/webextensions-examples/tree/main/latest-download) example extension uses `browser_style` in its popup. | ||
|
|
||
| - `default_icon` | ||
| - : `Object` or `String`. Use this to specify an icon for the action. |
Co-authored-by: rebloor <git@sherpa.co.nz>
| > [!NOTE] | ||
| > When using SVG icons, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example: | ||
| > | ||
| > |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| > |
| > #inside { fill: black; } | ||
| > } | ||
| > </style> | ||
| > ``` |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| > ``` | |
| > | |
| > ``` |
| > ``` | ||
| > | ||
| > For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example. | ||
|
|
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| > ``` | |
| > [!NOTE] | ||
| > When using SVG icons, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example: | ||
| > | ||
| > |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| > |
| > #inside { fill: black; } | ||
| > } | ||
| > </style> | ||
| > ``` |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| > ``` | |
| > | |
| > ``` |
|
|
||
| You can use an SVG icon. You can also have the icon adapt to light and dark themes using a media query on `prefers-color-scheme`. For example: | ||
|
|
||
|
|
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| #inside { fill: black; } | ||
| } | ||
| </style> | ||
| ``` |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| ``` | |
| ``` |
| ``` | ||
|
|
||
| For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example. | ||
|
|
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| ``` | |
| #inside { fill: black; } | ||
| } | ||
| </style> | ||
| ``` |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| ``` | |
| ``` |
| #inside { fill: black; } | ||
| } | ||
| </style> | ||
| ``` |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| ``` | |
| ``` |
| > When using SVG icons, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example: | ||
| > | ||
| > | ||
| > <style> |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD033/no-inline-html Inline HTML [Element: style]
| > #inside { fill: black; } | ||
| > } | ||
| > </style> | ||
| > ``` |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD040/fenced-code-language Fenced code blocks should have a language specified [Context: "```"]
| > When using SVG icons, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example: | ||
| > | ||
| > | ||
| > <style> |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD033/no-inline-html Inline HTML [Element: style]
| > #inside { fill: black; } | ||
| > } | ||
| > </style> | ||
| > ``` |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD040/fenced-code-language Fenced code blocks should have a language specified [Context: "```"]
|
|
||
| You can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example: | ||
|
|
||
| <style> |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD033/no-inline-html Inline HTML [Element: style]
| #outside { fill: white; } | ||
| #inside { fill: black; } | ||
| } | ||
| </style> |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD040/fenced-code-language Fenced code blocks should have a language specified [Context: "```"]
|
|
||
| You can use bitmap image formats, such as PNG, or provide SVG icons. If you use an SVG icon, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example: | ||
|
|
||
| <style> |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD033/no-inline-html Inline HTML [Element: style]
| #inside { fill: black; } | ||
| } | ||
| </style> | ||
| ``` |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD040/fenced-code-language Fenced code blocks should have a language specified [Context: "```"]
|
|
||
| You can provide icons for light and dark UI themes using the `"theme_icons"` property or use a media query on `prefers-color-scheme` in an SVG icon. For example: | ||
|
|
||
| <style> |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD033/no-inline-html Inline HTML [Element: style]
| #inside { fill: black; } | ||
| } | ||
| </style> | ||
| ``` |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD040/fenced-code-language Fenced code blocks should have a language specified [Context: "```"]
@rpl I've replaced the code examples in the two UI pages with links to the relevant content in the manifest pages. The challenge is that we don't have a unified approach to icons for UI themes, and no central resource on icons. I've made a note should we ever get the opportunity to update Extension Workshop. |
rpl
left a comment
There was a problem hiding this comment.
@rebloor thanks for taking care of the changes requested in the previous review pass, follows a few more review comments.
Beside a couple of small nits (just small typos), I'd like to consider adding a bit more detail about the page_action SVG icon (mention of the implicit CSS filter still applied in dark mode, the pref to test out how it is going to behave once its deprecation is riding the release train and the bugzilla issue tracking the deprecation to be finalized) in the user_interface/page_actions/index.md page (in particular because I feel that, as an extension developer, I'd be looking there even before looking if there is anything in the 149 release notes).
The only other detail I'd like to settle on before merging this PR is if we should include or omitting it from the 149 release notes (in the meantime I asked Rob for his opinion).
| ## Icons | ||
|
|
||
| You can use bitmap image formats, such as PNG, or provide SVG icons. If you use an SVG icon, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For more information, see [`"page_action"` `"default_icon"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action#default_icon) and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example . |
There was a problem hiding this comment.
thought: I feel like I'd like if we could add in the Icons section from this doc page the details related to deprecation of the implicit CSS filter, the pref that can be used to test out how the page action icon will behave once the deprecation will be riding the release train and a link to the relevant bugzilla issue? at the moment that is only mentioned in the release notes from 149 and even if we keep that I'd not assume that is where the developers are more likely to find those details related to how this is expected to behave in the short vs. long run
There was a problem hiding this comment.
thought: let's also mention the new example here in the page_actions user_interface doc page, in the end that example was created specifically for the page action (even if technically it also demonstrates how the svg icon for the pageAction could be used also to make all other icons provided by the extension responsive to the theme changing between light and dark).
|
|
||
| ## Icons | ||
|
|
||
| You can use bitmap image formats, such as PNG, or provide SVG icons. If you use an SVG icon, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For more information, see [`"page_action"` `"default_icon"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action#default_icon) and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example . |
There was a problem hiding this comment.
nit: unnecessary whitespace between example and the closing . period at the end of this paragraph.
|
|
||
| If you don't specify `"default_icon"`, the extension icon is used. If the extension doesn't specify an icon, the default web extension puzzle piece icon is used. If `"default_title"` isn't specified, the extension name is used. | ||
|
|
||
| You can provide icons for light and dark UI themes using the `"theme_icons"` property or use a media query on `prefers-color-scheme` in an SVG icon. For more information, see [`"browser_action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#theme_icons) or [`"action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action#theme_icons), and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example . |
There was a problem hiding this comment.
nit: (same as similar comment for another doc page) unnecessary whitespace between example and the closing . period at the end of this paragraph.
| > [!NOTE] | ||
| > When using SVG icons, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example: | ||
| > | ||
| > ```json | ||
| > <style> | ||
| > #outside { fill: black; } | ||
| > #inside { fill: red; } | ||
| > @media (prefers-color-scheme: dark) { | ||
| > #outside { fill: white; } | ||
| > #inside { fill: black; } | ||
| > } | ||
| > </style> | ||
| > ``` | ||
| > | ||
| > For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example. |
There was a problem hiding this comment.
I've now minimized the information in the UI pages and linked across to the relevant manifest keys for more details. (My assumption is that the manifest key documentation is more likely to be referred to.) Also, as the information about use of the media query is mentioned in all the relevant icon sections, there shouldn't be an issue with the reader assuming that it applies only to the theme_icon property specified icons
|
|
||
| If you don't specify `"default_icon"`, the extension icon is used. If the extension doesn't specify an icon, the default web extension puzzle piece icon is used. If `"default_title"` isn't specified, the extension name is used. | ||
|
|
||
| You can provide icons for light and dark UI themes using the `"theme_icons"` property or use a media query on `prefers-color-scheme` in an SVG icon. For more information, see [`"browser_action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#theme_icons) or [`"action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action#theme_icons), and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example . |
|
|
||
| ## Icons | ||
|
|
||
| You can use bitmap image formats, such as PNG, or provide SVG icons. If you use an SVG icon, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For more information, see [`"page_action"` `"default_icon"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action#default_icon) and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example . |
| ## Icons | ||
|
|
||
| You can use bitmap image formats, such as PNG, or provide SVG icons. If you use an SVG icon, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For more information, see [`"page_action"` `"default_icon"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action#default_icon) and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example . |
rpl
left a comment
There was a problem hiding this comment.
@rebloor this version looks pretty great to me, I fully agree that the tweak you made in the note added below the theme_icons properties is now making it clear that it does apply to default_icon as well, thanks for taking care of that small detail as well.
The only remaining detail to tweak is the release note (and the similar note on the WebExtensions/user_interface/Page_actions doc page side), I've touched base with Rob too and we are both on the same page about including it in the 149 release notes as you were suggesting.
On that side we'd just like to tweak it a bit to make it read as guidence for how to test it out the behavior once deprecated on the release channel by setting that hidden pref to false.
After that change this PR should be ready for sign off and merge.
|
|
||
| The ability of extensions to dynamically execute code in their `moz-extension:` documents with {{WebExtAPIRef("tabs.executeScript")}}, {{WebExtAPIRef("tabs.insertCSS")}}, {{WebExtAPIRef("tabs.removeCSS")}}, {{WebExtAPIRef("scripting.executeScript")}}, {{WebExtAPIRef("scripting.insertCSS")}}, and {{WebExtAPIRef("scripting.removeCSS")}} is deprecated. The feature is no longer available in Firefox Nightly, and the beta and release versions of Firefox provide a warning in the tab's console. This restriction will apply to all versions of Firefox 152 and later. As an alternative, an extension can run code in its documents dynamically by registering a {{WebExtAPIRef("runtime.onMessage")}} listener in the document's script, then sending a message to trigger execution of the required code.([Firefox bug 2011234](https://bugzil.la/2011234)) | ||
| - The ability of extensions to dynamically execute code in their `moz-extension:` documents with {{WebExtAPIRef("tabs.executeScript")}}, {{WebExtAPIRef("tabs.insertCSS")}}, {{WebExtAPIRef("tabs.removeCSS")}}, {{WebExtAPIRef("scripting.executeScript")}}, {{WebExtAPIRef("scripting.insertCSS")}}, and {{WebExtAPIRef("scripting.removeCSS")}} is deprecated. The feature is no longer available in Firefox Nightly, and the beta and release versions of Firefox provide a warning in the tab's console. This restriction will apply to all versions of Firefox 152 and later. As an alternative, an extension can run code in its documents dynamically by registering a {{WebExtAPIRef("runtime.onMessage")}} listener in the document's script, then sending a message to trigger execution of the required code.([Firefox bug 2011234](https://bugzil.la/2011234)) | ||
| - The implicit CSS filter applied to [`pageAction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction) SVG icons on dark themes (`about:config` preference `extensions.webextensions.pageActionIconDarkModeFilter.enabled` is set to `true` or not defined) that reduces the contrast in icons using multiple colors is deactivated in Firefox Desktop Nightly. ([Firefox bug 2001318](https://bugzil.la/2001318)) It will be deactivated on the release channel as part of [Firefox bug 2016509](https://bugzil.la/2016509), which is planned for Firefox 152. |
There was a problem hiding this comment.
@rebloor as I mentioned in my previous comment, I felt you had a point and so I thought some more into which form I'd feel ok to mention it into the 149 release notes, and I got to the conclusion that wording it as "guidance for the extensions developers to be able to test out in the release channel ahead of its upcoming deprecation in 152" may make it fit nicely as an additional 149 release notes.
I touched base about it with Rob too and confirmed that we both felt it would be reasonable addition to 149 release notes in that form.
Follows my attempt to reword it a bit into a "how to test on release ahead of upcoming deprecation" kind of form (feel free to pick up from it the parts that feels reasonable and to rework the rest how would read better from your perspective):
- The implicit CSS filter applied to
pageActionSVG icons on dark themes is planned to be deprecated and deactivated soon (as part of Bug 2016509, in Firefox Desktop version 152). In Firefox 149 extensions developers can test out their pageAction SVG icons with the CSS filter disabled by creating a boolean about:config preference namedextensions.webextensions.pageActionIconDarkModeFilter.enabledand setting it tofalse.
And something along those lines in WebExtensions/user_interface/Page_actions Icons section (or to have more detailed note on the WebExtensions/user_interface/Page_actions Icons section side and link that in a shorter one added here in the release notes).
| > [!NOTE] | ||
| > An implicit CSS filter applies to SVG icons in dark UI themes when `about:config` preference `extensions.webextensions.pageActionIconDarkModeFilter.enabled` is set to `true` or not defined. This filter is deactivated in Nightly starting with Firefox 149; see [Firefox bug 2001318](https://bugzil.la/2001318). It will be deactivated on the release channel as part of [Firefox bug 2016509](https://bugzil.la/2016509), which is planned for Firefox 152. | ||
|
|
There was a problem hiding this comment.
This is the other place where we could reword the note to make it describe how to test out on 149 release as described in more detail in the other comment.
There was a problem hiding this comment.
@rpl I've updated the release note. However, have I misunderstood the comments in https://bugzil.la/2001318. Isn't the point that, from 149, in Nightly, the implicit filter is disabled? So the testing process described applies to other editions from 149 (and all editions before 149). Therefore, it seems appropriate to explain why this is mentioned in the 149 release note, with a reference to disabling in Nightly.
There was a problem hiding this comment.
@rebloor what is described in the bugzilla comment was technically correct, the implicit CSS filter is disable by default in Nightly 149, but when we describe the change for the extension developers the behavior in release matter the most, and so we wanted the release notes and the notice boxes to be worded to highlight how to prepare for the deprecation ahead of it being riding the 152 train, and to point out to the about:config pref as a way for the extension developers to compare how their pageAction SVG icon would look like with and without the CSS filter on the Firefox 149 release version (without having to resort to install Nightly just to double-check that).
I'd actually tweak the wording by reversing the order of release and nightly, something like:
... You can test SVG icons with the CSS filter disabled in Firefox Desktop 149 by creating a boolean `about:config` preference called `extensions.webextensions.pageActionIconDarkModeFilter.enabled` and setting it to `false` (or on a recent Firefox Desktop Nightly where it is already disabled by default).
rpl
left a comment
There was a problem hiding this comment.
@rebloor lgtm, I'd like to reverse the order of the note to mention how to test on release version with the pref toggled first (and after that briefly mention that they can also test it on a recent Nightly without having to toggle the pref), besides that this PR version look good as is.
@rebloor given that the change requested below is pretty small (mainly reversing the order of the note in the release notes and in the page_actions notice boxes), I'm also signing off this version as is, so that you can proceed with merging it after applying that small tweak (but feel free to ping me if you prefer that I sign off that additional small change explicitly).
| > [!NOTE] | ||
| > An implicit CSS filter applies to SVG icons in dark UI themes when `about:config` preference `extensions.webextensions.pageActionIconDarkModeFilter.enabled` is set to `true` or not defined. This filter is deactivated in Nightly starting with Firefox 149; see [Firefox bug 2001318](https://bugzil.la/2001318). It will be deactivated on the release channel as part of [Firefox bug 2016509](https://bugzil.la/2016509), which is planned for Firefox 152. | ||
|
|
There was a problem hiding this comment.
@rebloor what is described in the bugzilla comment was technically correct, the implicit CSS filter is disable by default in Nightly 149, but when we describe the change for the extension developers the behavior in release matter the most, and so we wanted the release notes and the notice boxes to be worded to highlight how to prepare for the deprecation ahead of it being riding the 152 train, and to point out to the about:config pref as a way for the extension developers to compare how their pageAction SVG icon would look like with and without the CSS filter on the Firefox 149 release version (without having to resort to install Nightly just to double-check that).
I'd actually tweak the wording by reversing the order of release and nightly, something like:
... You can test SVG icons with the CSS filter disabled in Firefox Desktop 149 by creating a boolean `about:config` preference called `extensions.webextensions.pageActionIconDarkModeFilter.enabled` and setting it to `false` (or on a recent Firefox Desktop Nightly where it is already disabled by default).
|
@rpl thanks, note tweaked and PR merged. |
Description
Several changes related to documenting the use of a media query in SVG icons to adapt to light and dark UI themes. The changes include:
Motivation
To provide readers with information on the option for making SVG icons react to the browser UI theme.
Related issues and pull requests
Related web extension example submitted in mdn/webextensions-examples#620.