Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

browser_style deprecated in MV3 #26642

Merged
merged 13 commits into from May 22, 2023
Merged

browser_style deprecated in MV3 #26642

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7c652c5
browser_style deprecated in MV3
rebloor May 8, 2023
0f93563
Merge branch 'main' into Deprecate-browser_style-in-MV3
rebloor May 10, 2023
6adfcc8
Merge branch 'main' into Deprecate-browser_style-in-MV3
rebloor May 15, 2023
c654438
WIP feedback changes
rebloor May 16, 2023
3c0f238
Remove other references to setting browser_style
rebloor May 18, 2023
59269ff
Apply suggestions from review
rebloor May 19, 2023
1c5f3d7
Further updates on feedback
rebloor May 19, 2023
418d526
Merge branch 'main' into Deprecate-browser_style-in-MV3
queengooborg May 20, 2023
9292afa
Feedback updates
rebloor May 20, 2023
05d6c1e
Merge branch 'Deprecate-browser_style-in-MV3' of ssh://github.com/reb…
rebloor May 20, 2023
15f0bd4
Remove style guide reference from sidebar_action and page_action
rebloor May 21, 2023
310a450
Release note updates
rebloor May 22, 2023
b73f35e
Feedback from review
rebloor May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 8 additions & 7 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 29: remove browser_style from the example.

This also applies to the browser_action and page_action articles.

Expand Up @@ -72,12 +72,13 @@ The `action` key is an object that may have any of these properties, all optiona
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
>
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All other keys are also optional. For consistency, add this label to the other action keys.

<br />{{deprecated_inline}}
</td>
<td><code>Boolean</code></td>
<td>
Expand All @@ -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 <code>browser_style</code> property. Although this key defaults to
<code>false</code>, it's recommended that you include it and set it to
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not recommended to include it since support will be dropped. Reword this in every article. To avoid repetition consider relying on the canonical browser_styles article.

<code>true</code> in order to make your popups consistent with the
<code>true</code> to make your popups consistent with the
look of the rest of the browser user interface.
</p>
<p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove everything else in this cell (besides the depreciation notice above), until the closing </div>. The information is not relevant and should not occupy that much space.

Expand Down
14 changes: 7 additions & 7 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 29: remove browser_style from example.

Expand Up @@ -72,12 +72,12 @@ The `browser_action` key is an object that may have any of the following propert
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
>
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All other keys are optional, add the optional label to browser_action keys for consistency.

</td>
<td><code>Boolean</code></td>
<td>
Expand All @@ -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 <code>browser_style</code> property. Although this key defaults to
<code>false</code>, it's recommended that you include it and set it to
<code>true</code> in order to make your popups consistent with the
<code>true</code> to make your popups consistent with the
look of the rest of the browser user interface.
</p>
<p>
Expand Down
21 changes: 13 additions & 8 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
View file
Open in desktop
Expand Up @@ -60,16 +60,21 @@ The `options_ui` key is an object with the following contents:
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
><br />{{optional_inline}}
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
<br />{{deprecated_inline}} in Manifest V3.
</td>
<td><code>Boolean</code></td>
<td>
<p>Defaults to <code>true</code>.</p>
<p>Optional, defaulting to:</p>
<ul>
<li><code>true</code> in Manifest V2 and prior to Firefox 115 in Manifest V3.</li>
<li><code>false</code> in Manifest V3 from Firefox 115.</li>
</ul>
<p>
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
Expand All @@ -91,7 +96,7 @@ The `options_ui` key is an object with the following contents:
href="https://acorn.firefox.com/latest/acorn.html"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This recommendation does not make sense in the context of browser_style. That page provides the resources (assets) to mimic the latest browser styles, but that is completely independent of the browser_style styles.

Let's keep the references to the "browser styles" article, and expand the article with a section that references acorn for people interested in that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment here also applies to sidebar_action and page_action, which has similar text.

>Firefox Style Guide</a
>
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.
</p>
</td>
Expand Down
15 changes: 8 additions & 7 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
View file
Open in desktop
Expand Up @@ -67,12 +67,13 @@ The `page_action` key is an object that may have any of three properties, all op
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
>
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
<br />{{deprecated_inline}} in Manifest V3.
</td>
<td><code>Boolean</code></td>
<td>
Expand All @@ -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 <code>browser_style</code> property. Although this key defaults to
<code>false</code>, it's recommended that you include it and set it to
<code>true</code> in order to make your popups consistent with the
<code>true</code> to make your popups consistent with the
look of the rest of the browser user interface.
</p>
<p>
Expand Down
19 changes: 12 additions & 7 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md
View file
Open in desktop
Expand Up @@ -63,16 +63,21 @@ The `sidebar_action` key is an object that may have any of the properties listed
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
>
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency, add optional to every other key except for default_panel.

<br />{{deprecated_inline}} in Manifest V3.
</td>
<td><code>Boolean</code></td>
<td>
<p>Optional, defaulting to <code>true</code>.</p>
<p>Optional, defaulting to:</p>
<ul>
<li><code>true</code> in Manifest V2 and prior to Firefox 115 in Manifest V3.</li>
<li><code>false</code> in Manifest V3 from Firefox 115.</li>
</ul>
<p>
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
Expand Down
19 changes: 12 additions & 7 deletions files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
View file
Open in desktop
Expand Up @@ -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`.
rebloor marked this conversation as resolved.
Show resolved Hide resolved
> 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).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Repeat this recommendation and reference to the stylesheet in the Firefox panel components section at the bottom of this article.

Could you introduce a new section, Migrating away from browser_style? for example for options_ui (most common case since browser_style there used to default to true):

  1. set options_ui/browser_style to false. If nothing happened, just remove the key.
  2. if the appearance of the page changes, try to see what dependency there is, and put the relevant properties in the extension's stylesheet. In the bug I explained in detail which styles are most likely going to potentially cause (or not cause) issues.
  3. if one cannot figure out step 2, try including the content of extension.css with the extension and delete all parts that aren't relevant. Most extensions won't use browser-style class, so it's mainly the two blocks I annotated in the bug.

rebloor marked this conversation as resolved.
Show resolved Hide resolved
> 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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

chrome_style support was removed from MV3.


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.

Expand Down
2 changes: 2 additions & 0 deletions files/en-us/mozilla/firefox/releases/114/index.md
View file
Open in desktop
Expand Up @@ -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
Expand Down