From 7c652c5b778f9ce1fab92c6c7add1c6d4f01de67 Mon Sep 17 00:00:00 2001 From: Richard Bloor Date: Mon, 8 May 2023 20:02:28 +1200 Subject: [PATCH 1/9] browser_style deprecated in MV3 --- .../manifest.json/action/index.md | 15 ++++++------- .../manifest.json/browser_action/index.md | 14 ++++++------- .../manifest.json/options_ui/index.md | 21 ++++++++++++------- .../manifest.json/page_action/index.md | 15 ++++++------- .../manifest.json/sidebar_action/index.md | 19 ++++++++++------- .../user_interface/browser_styles/index.md | 19 ++++++++++------- .../mozilla/firefox/releases/114/index.md | 2 ++ 7 files changed, 62 insertions(+), 43 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md index 871e35cb2471266..4bfa7290e535d8e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md @@ -72,12 +72,13 @@ The `action` key is an object that may have any of these properties, all optiona - browser_style + + + browser_style + + +
{{optional_inline}} +
{{deprecated_inline}} Boolean @@ -87,7 +88,7 @@ The `action` key is an object that may have any of these properties, all optiona consistent with the browser's UI and with other extensions that use the browser_style property. Although this key defaults to false, it's recommended that you include it and set it to - true in order to make your popups consistent with the + true to make your popups consistent with the look of the rest of the browser user interface.

diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md index 222f7295e454f12..ce11aebe1818123 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md @@ -72,12 +72,12 @@ The `browser_action` key is an object that may have any of the following propert - browser_style + + + browser_style + + +
{{optional_inline}} Boolean @@ -87,7 +87,7 @@ The `browser_action` key is an object that may have any of the following propert consistent with the browser's UI and with other extensions that use the browser_style property. Although this key defaults to false, it's recommended that you include it and set it to - true in order to make your popups consistent with the + true to make your popups consistent with the look of the rest of the browser user interface.

diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md index 6989cb8e643e221..02c7e7fdc2769fa 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md @@ -60,16 +60,21 @@ The `options_ui` key is an object with the following contents: - browser_style
{{optional_inline}} + + + browser_style + + +
{{optional_inline}} +
{{deprecated_inline}} in Manifest V3. Boolean -

Defaults to true.

+

Optional, defaulting to:

+

Use this to include a stylesheet in your page that will make it look consistent with the browser's UI and with other extensions that use @@ -91,7 +96,7 @@ The `options_ui` key is an object with the following contents: href="https://acorn.firefox.com/latest/acorn.html" >Firefox Style Guide - describes the classes you can apply to elements in the popup in order + describes the classes you can apply to elements in the popup to get particular styles.

diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md index 9fa8b3827f8b9e8..24c146536a2d153 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md @@ -67,12 +67,13 @@ The `page_action` key is an object that may have any of three properties, all op - browser_style + + + browser_style + + +
{{optional_inline}} +
{{deprecated_inline}} in Manifest V3. Boolean @@ -82,7 +83,7 @@ The `page_action` key is an object that may have any of three properties, all op consistent with the browser's UI and with other extensions that use the browser_style property. Although this key defaults to false, it's recommended that you include it and set it to - true in order to make your popups consistent with the + true to make your popups consistent with the look of the rest of the browser user interface.

diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md index a02f28b502c74a5..2287327a19c6062 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md @@ -63,16 +63,21 @@ The `sidebar_action` key is an object that may have any of the properties listed - browser_style + + + browser_style + + +
{{optional_inline}} +
{{deprecated_inline}} in Manifest V3. Boolean -

Optional, defaulting to true.

+

Optional, defaulting to:

+

Use this to include a stylesheet in your popup that will make it look consistent with the browser's UI and with other extensions that use diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md index ebeee9481fa7992..67e3dc35cf21026 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md @@ -12,18 +12,23 @@ browser-compat: {{AddonSidebar}} -Certain user interface components - browser and page action [popups](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups), [sidebars](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars), and [options pages](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) - are specified by your extension in essentially the same way: +Your extension can include user interface components - browser and page action [popups](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups), [sidebars](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars), and [options pages](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) - that are specified by: -1. create an HTML file defining the structure of the UI element -2. add a manifest.json key ([`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), or [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)) pointing to that HTML file. +1. creating an HTML file defining the structure of the UI element. +2. adding a manifest.json key ([`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), or [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)) pointing to that HTML file. -One of the challenges with this approach is styling the element in such a way that it fits in with the browser's own style. To help with this, the manifest.json keys include an extra optional property: `browser_style`. If this is included and set to `true`, then your document will get one or more extra stylesheets that will help make it look consistent with the browser's UI and with other extensions that use the `browser_style` property. +You can style these elements to match the browser's style. The manifest.json keys include an optional property to help with this: `browser_style`. If this is included and set to `true`, your document gets one or more extra stylesheets that help make it look consistent with the browser's UI and with other extensions that use the `browser_style` property. -When considering using `browser_style: true`, you need to test your extension with various themes (built-in or from AMO) to make sure that the extension UI behaves the way you expect it to. +> **Note:** +> Support for `browser_style` in Manifest V3 has been deprecated and, from Firefox 115, `options_ui.browser_style` and `sidebar_action.browser_style` default to `false`. `page_action.browser_style`, `browser_action.browser_style`, and `action.browser_style` already defaults to `false`. +> If your Manifest V3 extension depends on the `browser_style: true` styles, bundle this stylesheet in the extension: [extension.css](https://hg.mozilla.org/mozilla-central/raw-file/a445f1762c895000bcdabd9d95697522359d41ed/browser/components/extensions/extension.css). +> See ([Firefox bug 1827910](https://bugzil.la/1827910)) for more information. -> **Warning:** When `browser_style: true` is included in your web extension's manifest, text selection in your extension's UI is disabled except in input controls. If this will cause a problem, include browser_style:false instead. +When considering whether to use browser_style: true, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to. -> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style`, so if you wish to support them, you need to add both keys. +> **Warning:** When `browser_style: true` is included in your web extension's manifest, text selection in your extension's UI is disabled except in input controls. If this causes a problem, include `browser_style:false` instead. + +> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style`, so you need to add both keys to support them. In Firefox, the stylesheet can be seen at `chrome://browser/content/extension.css`. The extra stylesheet at `chrome://browser/content/extension-mac.css` is also included on macOS. diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md index 55db1d6f27fb144..5ee19be45b4ef2c 100644 --- a/files/en-us/mozilla/firefox/releases/114/index.md +++ b/files/en-us/mozilla/firefox/releases/114/index.md @@ -59,6 +59,8 @@ This article provides information about the changes in Firefox 114 that affect d ### Removals +- Support for [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) in the manifest.json keys [`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), and [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) is deprecated for Manifest V3 extensions ([Firefox bug 1827910](https://bugzil.la/1827910)). + ### Other ## Older versions From c654438b51d454a535cdd95a6a918fe0f8141bcb Mon Sep 17 00:00:00 2001 From: Richard Bloor Date: Tue, 16 May 2023 22:40:23 +1200 Subject: [PATCH 2/9] WIP feedback changes --- .../manifest.json/action/index.md | 21 +++++++--------- .../manifest.json/browser_action/index.md | 21 +++++++--------- .../manifest.json/options_ui/index.md | 11 ++++----- .../manifest.json/page_action/index.md | 13 ++++------ .../manifest.json/sidebar_action/index.md | 12 +++++----- .../user_interface/browser_styles/index.md | 24 +++++++++++++------ 6 files changed, 51 insertions(+), 51 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md index 4bfa7290e535d8e..7ee369eb92efb95 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md @@ -84,18 +84,15 @@ The `action` key is an object that may have any of these properties, all optiona

Optional, defaulting to false.

- Use this to include a stylesheet in your popup that will make its look - consistent with the browser's UI and with other extensions that use - the browser_style property. Although this key defaults to - false, it's recommended that you include it and set it to - true to make your popups consistent with the - look of the rest of the browser user interface. + Use this to include a stylesheet in your popup that makes it look + consistent with the browser's UI and other extensions that use + the browser_style property.

In Firefox, the stylesheet can be seen at - chrome://browser/content/extension.css, or + chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When setting - dimensions, be aware that this style sheet currently sets + dimensions, be aware that this style sheet sets box-sizing: border-box (see box-sizing).

@@ -103,8 +100,8 @@ The `action` key is an object that may have any of these properties, all optiona Browser styles describes the classes you can apply to elements in the popup in - order to get particular styles. + > describes the classes you can apply to elements in the popup + to get particular styles.

The @@ -119,12 +116,12 @@ The `action` key is an object that may have any of these properties, all optiona Note: Setting browser_style to true prevents users from selecting text in an extension's popup or sidebar content. This is normal behavior. You - can't select parts of the UI in the browser. However, You can work + can't select parts of the UI in the browser. However, you can work around this limitation to allow your users to select text in two ways:

    -
  1. Set browser_style to false
    2. +
  2. Set browser_style to false.
  3. Use CSS styling on the body of your sidebar or popup's HTML to allow text selection by adding the rule diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md index ce11aebe1818123..8e84c719556635f 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md @@ -83,18 +83,15 @@ The `browser_action` key is an object that may have any of the following propert

    Optional, defaulting to false.

    - Use this to include a stylesheet in your popup that will make its look - consistent with the browser's UI and with other extensions that use - the browser_style property. Although this key defaults to - false, it's recommended that you include it and set it to - true to make your popups consistent with the - look of the rest of the browser user interface. + Use this to include a stylesheet in your popup that makes it look + consistent with the browser's UI and other extensions that use + the browser_style property.

    In Firefox, the stylesheet can be seen at - chrome://browser/content/extension.css, or + chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When setting - dimensions, be aware that this style sheet currently sets + dimensions, be aware that this style sheet sets box-sizing: border-box (see box-sizing).

    @@ -102,8 +99,8 @@ The `browser_action` key is an object that may have any of the following propert Browser styles describes the classes you can apply to elements in the popup in - order to get particular styles. + > describes the classes you can apply to elements in the popup + to get particular styles.

    The @@ -118,12 +115,12 @@ The `browser_action` key is an object that may have any of the following propert Note: Setting browser_style to true prevents users from selecting text in an extension's popup or sidebar content. This is normal behavior. You - can't select parts of the UI in the browser. However, You can work + can't select parts of the UI in the browser. However, you can work around this limitation to allow your users to select text in two ways:

      -
    1. Set browser_style to false
      2. +
    2. Set browser_style to false.
    3. Use CSS styling on the body of your sidebar or popup's HTML to allow text selection by adding the rule diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md index 02c7e7fdc2769fa..635a74be22b7abe 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md @@ -76,16 +76,15 @@ The `options_ui` key is an object with the following contents:
    4. false in Manifest V3 from Firefox 115.

      5. - Use this to include a stylesheet in your page that will make it look - consistent with the browser's UI and with other extensions that use - the browser_style property. Although it defaults to - true, it's recommended that you include this property. + Use this to include a stylesheet in your page that makes it look + consistent with the browser's UI and other extensions that use + the browser_style property.

      In Firefox, the stylesheet can be seen at - chrome://browser/content/extension.css, or + chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When - setting dimensions, be aware that this style sheet currently sets + setting dimensions, be aware that this style sheet sets box-sizing: border-box (see box-sizing).

      diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md index 24c146536a2d153..324d509c7e73693 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md @@ -79,16 +79,13 @@ The `page_action` key is an object that may have any of three properties, all op

      Optional. Defaults to false.

      - Use this to include a stylesheet in your popup that will make it look - consistent with the browser's UI and with other extensions that use - the browser_style property. Although this key defaults to - false, it's recommended that you include it and set it to - true to make your popups consistent with the - look of the rest of the browser user interface. + Use this to include a stylesheet in your popup that makes it look + consistent with the browser's UI and other extensions that use + the browser_style property.

      In Firefox, the stylesheet can be seen at - chrome://browser/content/extension.css, or + chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS.

      @@ -96,7 +93,7 @@ The `page_action` key is an object that may have any of three properties, all op Firefox Style Guide - describes the classes you can apply to elements in the popup in order + describes the classes you can apply to elements in the popup to get particular styles.

      diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md index 2287327a19c6062..a0b409916e1adb8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md @@ -79,15 +79,15 @@ The `sidebar_action` key is an object that may have any of the properties listed

    5. false in Manifest V3 from Firefox 115.

      6. - Use this to include a stylesheet in your popup that will make it look - consistent with the browser's UI and with other extensions that use + Use this to include a stylesheet in your popup that makes it look + consistent with the browser's UI and other extensions that use the browser_style property.

      In Firefox, the stylesheet can be seen at - chrome://browser/content/extension.css, or + chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When setting - dimensions, be aware that this style sheet currently sets + dimensions, be aware that this style sheet sets box-sizing: border-box (see box-sizing).

      @@ -98,8 +98,8 @@ The `sidebar_action` key is an object that may have any of the properties listed href="https://firefoxux.github.io/StyleGuide/#/controls" >Firefox Style Guide - describes the classes you can apply to elements in the sidebar in - order to get particular styles. + describes the classes you can apply to elements in the sidebar + to get particular styles.

      diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md index 67e3dc35cf21026..a7151389221aed4 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md @@ -12,7 +12,7 @@ browser-compat: {{AddonSidebar}} -Your extension can include user interface components - browser and page action [popups](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups), [sidebars](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars), and [options pages](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) - that are specified by: +Your extension can include user interface elements - browser and page action [popups](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups), [sidebars](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars), and [options pages](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) - that are specified by: 1. creating an HTML file defining the structure of the UI element. 2. adding a manifest.json key ([`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), or [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)) pointing to that HTML file. @@ -24,11 +24,11 @@ You can style these elements to match the browser's style. The manifest.json key > If your Manifest V3 extension depends on the `browser_style: true` styles, bundle this stylesheet in the extension: [extension.css](https://hg.mozilla.org/mozilla-central/raw-file/a445f1762c895000bcdabd9d95697522359d41ed/browser/components/extensions/extension.css). > See ([Firefox bug 1827910](https://bugzil.la/1827910)) for more information. -When considering whether to use browser_style: true, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to. +When considering whether to use `browser_style: true`, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to. > **Warning:** When `browser_style: true` is included in your web extension's manifest, text selection in your extension's UI is disabled except in input controls. If this causes a problem, include `browser_style:false` instead. -> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style`, so you need to add both keys to support them. +> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style` in Manifest V2. So for cross-browser extensions you need to add both keys. `chrome_style` is not available in Manifest V3. In Firefox, the stylesheet can be seen at `chrome://browser/content/extension.css`. The extra stylesheet at `chrome://browser/content/extension-mac.css` is also included on macOS. @@ -114,15 +114,21 @@ Most styles are automatically applied, but some elements require you to add the > **Note:** See [Firefox bug 1465256](https://bugzil.la/1465256) for removal of this unnecessary requirement. -## Browser compatibility +## Manifest V3 migration -{{Compat}} +As `browser_style` is a deprecated in Manifest V3 you may want to remove support when you migrate your Manifest V2 extensions. Using `options_ui`, as an example, you would you take these steps to remove support for `browser_style`: -## Firefox Panel Components +- Set `options_ui/browser_style` to `false`. +- Does the appearance of your extensions UI change? + - If the appearance doesn't change, remove the key. + - If the appearance changes, experiment to determine what dependency exist and add the relevant properties in the extension's stylesheet. The styles are most likely to cause layout changes are `box-sizing:`, `border-box`, and `display: flex`. + If you cannot identify the dependencies, includ the content of [extension.css](https://hg.mozilla.org/mozilla-central/raw-file/a445f1762c895000bcdabd9d95697522359d41ed/browser/components/extensions/extension.css) with the extension and delete all parts that aren't relevant, usually the `body` and `body *` blocks as most extensions don't use `browser-style` class. + +## Firefox panel components (legacy) > **Note:** This feature is non-standard and only works in Firefox. -The `chrome://browser/content/extension.css` stylesheet also contains the styles for the Firefox Panel Components. +The `chrome://browser/content/extension.css` stylesheet also contains the styles for the legacy Firefox panel components (navigation components). The [legacy Firefox Style Guide](https://firefoxux.github.io/StyleGuide/#/navigation) documents proper usage. @@ -493,3 +499,7 @@ html > body { #### Result {{EmbedLiveSample("Example","640","360")}} + +## Browser compatibility + +{{Compat}} From 3c0f238847884a9c15f89f10babea4dff2049803 Mon Sep 17 00:00:00 2001 From: Richard Bloor Date: Thu, 18 May 2023 12:01:38 +1200 Subject: [PATCH 3/9] Remove other references to setting browser_style --- .../webextensions/add_a_button_to_the_toolbar/index.md | 8 +++----- .../webextensions/user_interface/extension_pages/index.md | 2 +- .../webextensions/user_interface/options_pages/index.md | 7 ++----- .../webextensions/user_interface/page_actions/index.md | 1 - .../add-ons/webextensions/user_interface/popups/index.md | 4 +--- .../work_with_contextual_identities/index.md | 1 - .../webextensions/working_with_the_tabs_api/index.md | 4 +--- 7 files changed, 8 insertions(+), 19 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md b/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md index 1c21426019759b1..85cc92400c403b0 100644 --- a/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md @@ -99,7 +99,6 @@ Let's try adding a popup to the button. Replace manifest.json with this: "version": "1.0", "browser_action": { - "browser_style": true, "default_popup": "popup/choose_page.html", "default_icon": { "16": "icons/page-16.png", @@ -109,11 +108,10 @@ Let's try adding a popup to the button. Replace manifest.json with this: } ``` -We've made three changes from the original: +We've made two changes from the original: -- We no longer reference "background.js", because now we're going to handle the extension's logic in the popup's script (you are allowed background.js as well as a popup, it's just that we don't need it in this case). -- We've added `"browser_style": true`, which will help the styling of our popup look more like part of the browser. -- Finally, we've added `"default_popup": "popup/choose_page.html"`, which is telling the browser that this browser action is now going to display a popup when clicked, the document for which can be found at "popup/choose_page.html". +- removed the reference to "background.js", because now we're going to handle the extension's logic in the popup's script (you are allowed background.js as well as a popup, it's just that we don't need it in this case). +- added `"default_popup": "popup/choose_page.html"`, which is telling the browser that this browser action is now going to display a popup when clicked, the document for which can be found at "popup/choose_page.html". So now we need to create that popup. Create a directory called "popup" then create a file called "choose_page.html" inside it. Give it the following contents: diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md index 27fe9c8c7d81911..a588be5eb9a47fa 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md @@ -70,7 +70,7 @@ To use the history API, you must request the "`history`" [permission](/en-US/doc ## Web page design -For details on how to design your web page's to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation. +For details on how to design your web page's to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html). ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md index 70080270916da3e..7b9a4cf85f669dd 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md @@ -47,18 +47,15 @@ You also need to include the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExten ```json "options_ui": { - "page": "options.html", - "browser_style": true + "page": "options.html" }, ``` -> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style`, so if you wish to support them, you need to add both keys. - See the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) page for **sharing options** between your options page and background or content scripts. ## Options content design -For details on how to design your options content to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation. +For details on how to design your options content to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html). ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md index ce3f12495e532e6..6603d0195b4a587 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md @@ -59,7 +59,6 @@ You define the page action's properties using the [`page_action`](/en-US/docs/Mo ```json "page_action": { - "browser_style": true, "default_icon": { "19": "button/geo-19.png", "38": "button/geo-38.png" diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md index e6f819cafccea41..ea0e7400c2b0207 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md @@ -30,8 +30,6 @@ The HTML file is included in the extension and specified as part of the [`browse } ``` -You can ask the browser to include a stylesheet in your popup that will make it look consistent with the browser's UI. To do this, include `"browser_style": true` in the [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) or [page_action](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) key. - Popups have a Content Security Policy that restricts the sources from which they can load resources, and disallows some unsafe practices such as the use of [`eval()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval). See [Content Security Policy](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) for more details on this. ## Debugging popups @@ -50,7 +48,7 @@ In Firefox Android 57, the popup is shown as a normal page in a new tab. ## Popup design -For details on how to design your popup's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to design your popup's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html). ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md b/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md index eade60193202e1a..0a945d7dbc9fc87 100644 --- a/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md @@ -52,7 +52,6 @@ The main features of the [manifest.json](https://github.com/mdn/webextensions-ex ```json "browser_action": { - "browser_style": true, "default_title": "Contextual Identities", "default_popup": "context.html", "default_icon": { diff --git a/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md b/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md index e74e4eb7fc9f99a..d3230a74ee780d8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md @@ -64,7 +64,6 @@ To see how {{WebExtAPIRef("tabs.query()")}} and {{WebExtAPIRef("tabs.Tab")}} are ```json { "browser_action": { - "browser_style": true, "default_title": "Tabs, tabs, tabs", "default_popup": "tabs.html" }, @@ -454,8 +453,7 @@ Let's walk through how it's set up. }, "page_action": { - "default_icon": "icons/off.svg", - "browser_style": true + "default_icon": "icons/off.svg" }, "permissions": ["activeTab", "tabs"] From 59269ffd13f954d360c722bf164d4f76c93ad409 Mon Sep 17 00:00:00 2001 From: rebloor Date: Fri, 19 May 2023 15:53:00 +1200 Subject: [PATCH 4/9] Apply suggestions from review Co-authored-by: Rob Wu --- .../add-ons/webextensions/manifest.json/action/index.md | 4 +--- .../webextensions/user_interface/browser_styles/index.md | 8 +++----- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md index 7ee369eb92efb95..f10f6a868b1bfa8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md @@ -84,9 +84,7 @@ The `action` key is an object that may have any of these properties, all optiona

      Optional, defaulting to false.

      - Use this to include a stylesheet in your popup that makes it look - consistent with the browser's UI and other extensions that use - the browser_style property. + Do not set `browser_style` to true. 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 diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md index a7151389221aed4..6a2610c14742612 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md @@ -20,8 +20,8 @@ Your extension can include user interface elements - browser and page action [po You can style these elements to match the browser's style. The manifest.json keys include an optional property to help with this: `browser_style`. If this is included and set to `true`, your document gets one or more extra stylesheets that help make it look consistent with the browser's UI and with other extensions that use the `browser_style` property. > **Note:** -> Support for `browser_style` in Manifest V3 has been deprecated and, from Firefox 115, `options_ui.browser_style` and `sidebar_action.browser_style` default to `false`. `page_action.browser_style`, `browser_action.browser_style`, and `action.browser_style` already defaults to `false`. -> If your Manifest V3 extension depends on the `browser_style: true` styles, bundle this stylesheet in the extension: [extension.css](https://hg.mozilla.org/mozilla-central/raw-file/a445f1762c895000bcdabd9d95697522359d41ed/browser/components/extensions/extension.css). +> Support for `browser_style` in Manifest V3 has been deprecated and will be removed in the near future. Starting from Firefox 115, the default value of `options_ui.browser_style` and `sidebar_action.browser_style` changes from `true` to `false`. By Firefox 118, `browser_style:true` will no longer be supported in Manifest Version 3 extensions. +> If your Manifest V3 extension depends on the `browser_style: true` styles, follow the [Manifest V3 migration guide for `browser_style`](#manifest_v3_migration). > See ([Firefox bug 1827910](https://bugzil.la/1827910)) for more information. When considering whether to use `browser_style: true`, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to. @@ -112,8 +112,6 @@ Most styles are automatically applied, but some elements require you to add the -> **Note:** See [Firefox bug 1465256](https://bugzil.la/1465256) for removal of this unnecessary requirement. - ## Manifest V3 migration As `browser_style` is a deprecated in Manifest V3 you may want to remove support when you migrate your Manifest V2 extensions. Using `options_ui`, as an example, you would you take these steps to remove support for `browser_style`: @@ -122,7 +120,7 @@ As `browser_style` is a deprecated in Manifest V3 you may want to remove support - Does the appearance of your extensions UI change? - If the appearance doesn't change, remove the key. - If the appearance changes, experiment to determine what dependency exist and add the relevant properties in the extension's stylesheet. The styles are most likely to cause layout changes are `box-sizing:`, `border-box`, and `display: flex`. - If you cannot identify the dependencies, includ the content of [extension.css](https://hg.mozilla.org/mozilla-central/raw-file/a445f1762c895000bcdabd9d95697522359d41ed/browser/components/extensions/extension.css) with the extension and delete all parts that aren't relevant, usually the `body` and `body *` blocks as most extensions don't use `browser-style` class. + If you cannot identify the dependencies, include the content of [extension.css](https://hg.mozilla.org/mozilla-central/raw-file/a445f1762c895000bcdabd9d95697522359d41ed/browser/components/extensions/extension.css) with the extension and delete all parts that aren't relevant, usually the `body` and `body *` blocks as most extensions don't use the `browser-style` class. ## Firefox panel components (legacy) From 1c5f3d7dda1c3ecdba5c24a3f47c63fd72712b5f Mon Sep 17 00:00:00 2001 From: Richard Bloor Date: Fri, 19 May 2023 16:16:51 +1200 Subject: [PATCH 5/9] Further updates on feedback --- .../webextensions/manifest.json/action/index.md | 10 ++++++---- .../manifest.json/browser_action/index.md | 12 ++++++------ .../manifest.json/options_ui/index.md | 12 ++++++------ .../manifest.json/page_action/index.md | 10 +++++----- .../manifest.json/sidebar_action/index.md | 15 +++++++-------- .../user_interface/browser_styles/index.md | 4 ++-- 6 files changed, 32 insertions(+), 31 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md index f10f6a868b1bfa8..0cf5ec5953c6d43 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md @@ -83,14 +83,16 @@ The `action` key is an object that may have any of these properties, all optiona Boolean

      Optional, defaulting to false.

      -

      - Do not set `browser_style` to true. See [Manifest v3 migration for `browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration). -

      +
      +

      + Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`. +

      +

      In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When setting - dimensions, be aware that this style sheet sets + dimensions, be aware that this stylesheet sets box-sizing: border-box (see box-sizing).

      diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md index 8e84c719556635f..49efc9bec6a735a 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md @@ -82,16 +82,16 @@ The `browser_action` key is an object that may have any of the following propert Boolean

      Optional, defaulting to false.

      -

      - Use this to include a stylesheet in your popup that makes it look - consistent with the browser's UI and other extensions that use - the browser_style property. -

      +
      +

      + Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`. +

      +

      In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When setting - dimensions, be aware that this style sheet sets + dimensions, be aware that this stylesheet sets box-sizing: border-box (see box-sizing).

      diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md index 635a74be22b7abe..2f7dba164da8a77 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md @@ -75,16 +75,16 @@ The `options_ui` key is an object with the following contents:
    6. true in Manifest V2 and prior to Firefox 115 in Manifest V3.
    7. false in Manifest V3 from Firefox 115.
      8. -

      - Use this to include a stylesheet in your page that makes it look - consistent with the browser's UI and other extensions that use - the browser_style property. -

      +
      +

      + Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`. +

      +

      In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When - setting dimensions, be aware that this style sheet sets + setting dimensions, be aware that this stylesheet sets box-sizing: border-box (see box-sizing).

      diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md index 324d509c7e73693..a3dff121be5fad8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md @@ -78,11 +78,11 @@ The `page_action` key is an object that may have any of three properties, all op Boolean

      Optional. Defaults to false.

      -

      - Use this to include a stylesheet in your popup that makes it look - consistent with the browser's UI and other extensions that use - the browser_style property. -

      +
      +

      + Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`. +

      +

      In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css or diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md index a0b409916e1adb8..b39b6cb784aee0b 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md @@ -78,16 +78,16 @@ The `sidebar_action` key is an object that may have any of the properties listed

    8. true in Manifest V2 and prior to Firefox 115 in Manifest V3.
    9. false in Manifest V3 from Firefox 115.
      10. -

      - Use this to include a stylesheet in your popup that makes it look - consistent with the browser's UI and other extensions that use - the browser_style property. -

      +
      +

      + Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`. +

      +

      In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When setting - dimensions, be aware that this style sheet sets + dimensions, be aware that this stylesheet sets box-sizing: border-box (see box-sizing).

      @@ -227,8 +227,7 @@ The `sidebar_action` key is an object that may have any of the properties listed "sidebar_action": { "default_icon": "sidebar.svg", "default_title": "My sidebar!", - "default_panel": "sidebar.html", - "browser_style": true + "default_panel": "sidebar.html" } ``` diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md index 6a2610c14742612..28a2784cfca7a6d 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md @@ -20,8 +20,8 @@ Your extension can include user interface elements - browser and page action [po You can style these elements to match the browser's style. The manifest.json keys include an optional property to help with this: `browser_style`. If this is included and set to `true`, your document gets one or more extra stylesheets that help make it look consistent with the browser's UI and with other extensions that use the `browser_style` property. > **Note:** -> Support for `browser_style` in Manifest V3 has been deprecated and will be removed in the near future. Starting from Firefox 115, the default value of `options_ui.browser_style` and `sidebar_action.browser_style` changes from `true` to `false`. By Firefox 118, `browser_style:true` will no longer be supported in Manifest Version 3 extensions. -> If your Manifest V3 extension depends on the `browser_style: true` styles, follow the [Manifest V3 migration guide for `browser_style`](#manifest_v3_migration). +> Support for `browser_style` in Manifest V3 is deprecated. Starting from Firefox 115, the default value of `options_ui.browser_style` and `sidebar_action.browser_style` changes from `true` to `false`. In Firefox 118, `"browser_style": notrue` will no longer be supported in Manifest V3 extensions. +> If your Manifest V3 extension depends on the `"browser_style": true` styles, follow the [Manifest V3 migration guide for `browser_style`](#manifest_v3_migration). > See ([Firefox bug 1827910](https://bugzil.la/1827910)) for more information. When considering whether to use `browser_style: true`, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to. From 9292afaa82f4e0745aad51b38741e5217960bfcb Mon Sep 17 00:00:00 2001 From: Richard Bloor Date: Sun, 21 May 2023 05:58:40 +1200 Subject: [PATCH 6/9] Feedback updates --- .../manifest.json/action/index.md | 60 ++++--------------- .../manifest.json/browser_action/index.md | 18 +++--- .../manifest.json/options_ui/index.md | 12 +--- .../manifest.json/page_action/index.md | 3 +- .../manifest.json/sidebar_action/index.md | 11 ++-- .../user_interface/browser_styles/index.md | 3 +- 6 files changed, 33 insertions(+), 74 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md index 0cf5ec5953c6d43..b72e8476a50dd72 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md @@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.action 
       "action": {
-  "browser_style": true,
   "default_icon": {
     "16": "button/geo-16.png",
     "32": "button/geo-32.png"
@@ -85,55 +84,14 @@ The `action` key is an object that may have any of these properties, all optiona
         
      Optional, defaulting to false.
      
         
      
           
      
-            Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`.
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
           
      
         
      
-        
      
-          In Firefox, the stylesheet can be seen at
-          chrome://browser/content/extension.css or
-          chrome://browser/content/extension-mac.css on macOS. When setting
-          dimensions, be aware that this stylesheet sets
-          box-sizing: border-box (see
-          box-sizing).
-        
      
-        
      
-          Browser styles describes the classes you can apply to elements in the popup
-          to get particular styles.
-        
      
-        
      
-          The
-          latest-download
-          example extension uses browser_style in its popup.
-        
      
-        
      
-          
      
-            Note: Setting browser_style to
-            true prevents users from selecting text in an
-            extension's popup or sidebar content. This is normal behavior. You
-            can't select parts of the UI in the browser. However, you can work
-            around this limitation to allow your users to select text in two
-            ways:
-          
      
-          
        
-            
      1. Set browser_style to false.
        2. 
-            
      2. 
-              Use CSS styling on the body of your sidebar or popup's HTML to
-              allow text selection by adding the rule
-              -moz-user-select with a value of all or
-              text.
-            
        3. 
-          
      
-        
      
       
     
     
-      default_area
+      default_area
+      
      {{optional_inline}}
       String
       
         
      
@@ -170,7 +128,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      default_icon
+      default_icon
+      
      {{optional_inline}}
       Object or String
       
         
      
@@ -204,7 +163,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      default_popup
+      default_popup
+      
      {{optional_inline}}
       String
       
         
      
@@ -259,7 +219,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      default_title
+      default_title
+      
      {{optional_inline}}
       String
       
         
      
@@ -277,7 +238,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      theme_icons
+      theme_icons
+      
      {{optional_inline}}
       Array
       
         
      
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
index 49efc9bec6a735a..37901dd16b0b688 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
@@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.browser_action
       
         
       "browser_action": {
-  "browser_style": true,
   "default_icon": {
     "16": "button/geo-16.png",
     "32": "button/geo-32.png"
@@ -84,7 +83,7 @@ The `browser_action` key is an object that may have any of the following propert
         
      Optional, defaulting to false.
      
         
      
           
      
-            Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`.
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
           
      
         
      
         
      
@@ -132,7 +131,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_area
+      default_area
+      
      {{optional_inline}}
       String
       
         
      
@@ -169,7 +169,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_icon
+      default_icon
+      
      {{optional_inline}}
       Object or String
       
         
      
@@ -203,7 +204,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_popup
+      default_popup
+      
      {{optional_inline}}
       String
       
         
      
@@ -258,7 +260,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_title
+      default_title
+      
      {{optional_inline}}
       String
       
         
      
@@ -276,7 +279,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      theme_icons
+      theme_icons
+      
      {{optional_inline}}
       Array
       
         
      
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
index 2f7dba164da8a77..ee5493bbd8aa361 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
@@ -77,7 +77,7 @@ The `options_ui` key is an object with the following contents:
           
         
      
           
      
-            Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`.
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
           
      
         
      
         
      
@@ -88,16 +88,6 @@ The `options_ui` key is an object with the following contents:
           box-sizing: border-box (see
           box-sizing).
         
      
-        
      
-          The
-          Firefox Style Guide
-          describes the classes you can apply to elements in the popup
-          to get particular styles.
-        
      
       
     
     
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
index a3dff121be5fad8..cd7964734232d51 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
@@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.page_action
       
         
       "page_action": {
-  "browser_style": true,
   "default_icon": {
     "19": "button/geo-19.png",
     "38": "button/geo-38.png"
@@ -80,7 +79,7 @@ The `page_action` key is an object that may have any of three properties, all op
         
      Optional. Defaults to false.
      
         
      
           
      
-            Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`.
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
           
      
         
      
         
      
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md
index b39b6cb784aee0b..a4fbd4136b39dfa 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md
@@ -80,7 +80,7 @@ The `sidebar_action` key is an object that may have any of the properties listed
           
         
      
           
      
-            Do not set `browser_style` to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for `browser_style`.
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
           
      
         
      
         
      
@@ -104,7 +104,8 @@ The `sidebar_action` key is an object that may have any of the properties listed
       
     
     
-      default_icon
+      default_icon
+      
      {{optional_inline}}
       Object or String
       
         
      
@@ -182,7 +183,8 @@ The `sidebar_action` key is an object that may have any of the properties listed
       
     
     
-      default_title
+      default_title
+      
      {{optional_inline}}
       String
       
         
      
@@ -210,7 +212,8 @@ The `sidebar_action` key is an object that may have any of the properties listed
       
     
     
-      open_at_install
+      open_at_install
+      
      {{optional_inline}}
       Boolean
       
         Optional, defaulting to true. Determines whether the
diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
index 28a2784cfca7a6d..db66dc8881b265a 100644
--- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
@@ -20,9 +20,10 @@ Your extension can include user interface elements - browser and page action [po
 You can style these elements to match the browser's style. The manifest.json keys include an optional property to help with this: `browser_style`. If this is included and set to `true`, your document gets one or more extra stylesheets that help make it look consistent with the browser's UI and with other extensions that use the `browser_style` property.
 
 > **Note:**
-> Support for `browser_style` in Manifest V3 is deprecated. Starting from Firefox 115, the default value of `options_ui.browser_style` and `sidebar_action.browser_style` changes from `true` to `false`. In Firefox 118, `"browser_style": notrue` will no longer be supported in Manifest V3 extensions.
+> Support for `browser_style` in Manifest V3 is deprecated. Starting from Firefox 115, the default value of `options_ui.browser_style` and `sidebar_action.browser_style` changes from `true` to `false`. In Firefox 118, `"browser_style": true` will no longer be supported in Manifest V3 extensions.
 > If your Manifest V3 extension depends on the `"browser_style": true` styles, follow the [Manifest V3 migration guide for `browser_style`](#manifest_v3_migration).
 > See ([Firefox bug 1827910](https://bugzil.la/1827910)) for more information.
+> If you want to apply the Firefox style to your extension, see the [Firefox Style Guide](https://acorn.firefox.com/latest/acorn.html).
 
 When considering whether to use `browser_style: true`, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to.
 

From 15f0bd4ee70ab086191b0c8bd377f81034fc2dba Mon Sep 17 00:00:00 2001
From: Richard Bloor 
Date: Mon, 22 May 2023 11:18:53 +1200
Subject: [PATCH 7/9] Remove style guide reference from sidebar_action and
 page_action

---
 .../webextensions/manifest.json/page_action/index.md   |  8 --------
 .../manifest.json/sidebar_action/index.md              | 10 ----------
 2 files changed, 18 deletions(-)

diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
index cd7964734232d51..f23b8c022daa579 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
@@ -87,14 +87,6 @@ The `page_action` key is an object that may have any of three properties, all op
           chrome://browser/content/extension.css or
           chrome://browser/content/extension-mac.css on macOS.
         
      
-        
      
-          The
-          Firefox Style Guide
-          describes the classes you can apply to elements in the popup
-          to get particular styles.
-        
      
         
      
           The
           box-sizing: border-box (see
           box-sizing).
         
      
-        
      
-          The
-          Firefox Style Guide
-          describes the classes you can apply to elements in the sidebar
-          to get particular styles.
-        
      
       
     
     

From 310a450c7ec8a6f841a01cdd812e92a9609dc9c3 Mon Sep 17 00:00:00 2001
From: Richard Bloor 
Date: Tue, 23 May 2023 04:30:18 +1200
Subject: [PATCH 8/9] Release note updates

---
 files/en-us/mozilla/firefox/releases/114/index.md | 2 +-
 files/en-us/mozilla/firefox/releases/115/index.md | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md
index 1306acd21a3e345..dc52a9c8f2c5aa4 100644
--- a/files/en-us/mozilla/firefox/releases/114/index.md
+++ b/files/en-us/mozilla/firefox/releases/114/index.md
@@ -64,7 +64,7 @@ This article provides information about the changes in Firefox 114 that affect d
 
 ### Removals
 
-- Support for [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) in the manifest.json keys [`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), and [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) is deprecated for Manifest V3 extensions ([Firefox bug 1827910](https://bugzil.la/1827910)).
+- Support for [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) in the manifest keys [`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action), [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), and [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) is deprecated for Manifest V3 extensions ([Firefox bug 1827910](https://bugzil.la/1827910)). See [Manifest v3 migration](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) for information about transitioning from `browser_style` in Manifest V3 extensions.
 
 ### Other
 
diff --git a/files/en-us/mozilla/firefox/releases/115/index.md b/files/en-us/mozilla/firefox/releases/115/index.md
index 4489a58ada9b0ad..2cdb1f13719af96 100644
--- a/files/en-us/mozilla/firefox/releases/115/index.md
+++ b/files/en-us/mozilla/firefox/releases/115/index.md
@@ -55,6 +55,8 @@ This article provides information about the changes in Firefox 115 that affect d
 
 ## Changes for add-on developers
 
+- To support its deprecation from Manifest V3 extensions, manifest key property [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) defaults to `false` in [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) and [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) for Manifest V3 extensions ([Firefox bug 1830710](https://bugzil.la/1830710)). See [Manifest v3 migration](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) for information about transitioning from `browser_style` in Manifest V3 extensions.
+
 ### Removals
 
 ### Other

From b73f35eb240f5b4cf94f059b9e1e30d137b14346 Mon Sep 17 00:00:00 2001
From: rebloor 
Date: Tue, 23 May 2023 05:13:46 +1200
Subject: [PATCH 9/9] Feedback from review

Co-authored-by: Rob Wu 
---
 files/en-us/mozilla/firefox/releases/114/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md
index dc52a9c8f2c5aa4..b89254677651835 100644
--- a/files/en-us/mozilla/firefox/releases/114/index.md
+++ b/files/en-us/mozilla/firefox/releases/114/index.md
@@ -64,7 +64,7 @@ This article provides information about the changes in Firefox 114 that affect d
 
 ### Removals
 
-- Support for [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) in the manifest keys [`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action), [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), and [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) is deprecated for Manifest V3 extensions ([Firefox bug 1827910](https://bugzil.la/1827910)). See [Manifest v3 migration](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) for information about transitioning from `browser_style` in Manifest V3 extensions.
+- Support for [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) in the manifest keys [`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), and [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) is deprecated for Manifest V3 extensions ([Firefox bug 1827910](https://bugzil.la/1827910)). See [Manifest v3 migration](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) for information about transitioning from `browser_style` in Manifest V3 extensions.
 
 ### Other