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 5 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
8 changes: 3 additions & 5 deletions files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md
View file
Open in desktop
Expand Up @@ -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",
Expand All @@ -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:

Expand Down
34 changes: 16 additions & 18 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,38 +72,36 @@ 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>
<p>Optional, defaulting to <code>false</code>.</p>
<p>
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 <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
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 <code>browser_style</code> property.
rebloor marked this conversation as resolved.
Show resolved Hide resolved
</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.

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
<code>box-sizing: border-box</code> (see
<a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a>).
</p>
<p>
<a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>Browser styles</a
> 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.
</p>
<p>
The
Expand All @@ -118,12 +116,12 @@ The `action` key is an object that may have any of these properties, all optiona
<strong>Note:</strong> Setting <code>browser_style</code> to
<code>true</code> 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:
</p>
<ol>
<li>Set <code>browser_style</code> to <code>false</code></li>
<li>Set <code>browser_style</code> to <code>false</code>.</li>
<li>
Use CSS styling on the body of your sidebar or popup's HTML to
allow text selection by adding the rule
Expand Down
33 changes: 15 additions & 18 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,38 +72,35 @@ 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>
<p>Optional, defaulting to <code>false</code>.</p>
<p>
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 <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
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 <code>browser_style</code> property.
</p>
<p>
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
<code>box-sizing: border-box</code> (see
<a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a>).
</p>
<p>
<a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>Browser styles</a
> 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.
</p>
<p>
The
Expand All @@ -118,12 +115,12 @@ The `browser_action` key is an object that may have any of the following propert
<strong>Note:</strong> Setting <code>browser_style</code> to
<code>true</code> 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:
</p>
<ol>
<li>Set <code>browser_style</code> to <code>false</code></li>
<li>Set <code>browser_style</code> to <code>false</code>.</li>
<li>
Use CSS styling on the body of your sidebar or popup's HTML to
allow text selection by adding the rule
Expand Down
32 changes: 18 additions & 14 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
View file
Open in desktop
Expand Up @@ -60,27 +60,31 @@ 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
the <code>browser_style</code> property. Although it defaults to
<code>true</code>, 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 <code>browser_style</code> property.
</p>
<p>
In Firefox, the stylesheet can be seen at
<code>chrome://browser/content/extension.css</code>, or
<code>chrome://browser/content/extension.css</code> or
<code>chrome://browser/content/extension-mac.css</code> on macOS. When
setting dimensions, be aware that this style sheet currently sets
setting dimensions, be aware that this style sheet sets
<code>box-sizing: border-box</code> (see
<a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a>).
</p>
Expand All @@ -91,7 +95,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
26 changes: 12 additions & 14 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
View file
Open in desktop
Expand Up @@ -67,35 +67,33 @@ 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>
<p>Optional. Defaults to <code>false</code>.</p>
<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
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
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 <code>browser_style</code> property.
</p>
<p>
In Firefox, the stylesheet can be seen at
<code>chrome://browser/content/extension.css</code>, or
<code>chrome://browser/content/extension.css</code> or
<code>chrome://browser/content/extension-mac.css</code> on macOS.
</p>
<p>
The
<a href="https://firefoxux.github.io/StyleGuide/#/controls"
>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>
<p>
Expand Down
31 changes: 18 additions & 13 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md
View file
Open in desktop
Expand Up @@ -63,26 +63,31 @@ 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
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 <code>browser_style</code> property.
</p>
<p>
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
<code>box-sizing: border-box</code> (see
<a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a>).
</p>
Expand All @@ -93,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</a
>
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.
</p>
</td>
</tr>
Expand Down