You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Bug-2001318 theme responsive SVG images
* typo
* Apply suggestion from @github-actions[bot]
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Apply suggestions from code review
Co-authored-by: rebloor <git@sherpa.co.nz>
* Correct errors caused by GitHub when it applied suggestions
* Replace SVG code examples in UI pages with links to details in manifest keys
* Feedback updates
* Highlighting an SVG icon with media query as an alternative to using theme_icons.
* Unrelated release note improvements
* Release note update
* Note tweak as per feedback
---------
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
<p>Optional, defaulting to <code>false</code>.</p>
84
-
<div class="notecard warning">
85
-
<p>
86
-
Do not set <code>browser_style</code> to true: its support in Manifest V3 was removed in Firefox 118. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration">Manifest V3 migration for <code>browser_style</code></a>.
87
-
</p>
88
-
</div>
89
-
</td>
90
-
</tr>
91
-
<tr>
92
-
<td><code>default_area</code>
93
-
<br />{{optional_inline}}</td>
94
-
<td><code>String</code></td>
95
-
<td>
96
-
<p>
97
-
Defines the part of the browser in which the button is initially
98
-
placed. This is a string that may take one of four values:
99
-
</p>
100
-
<ul>
101
-
<li>
102
-
"navbar": the button is placed in the main browser toolbar,
103
-
alongside the URL bar.
104
-
</li>
105
-
<li>"menupanel": the button is placed in a popup panel.</li>
106
-
<li>
107
-
"tabstrip": the button is placed in the toolbar that contains
108
-
browser tabs.
109
-
</li>
110
-
<li>
111
-
"personaltoolbar": the button is placed in the bookmarks toolbar.
112
-
</li>
113
-
</ul>
114
-
<p>This property is only supported in Firefox.</p>
115
-
<p>This property is optional, and defaults to "menupanel".</p>
116
-
<p>
117
-
Firefox remembers the <code>default_area</code> setting for an
118
-
extension, even if that extension is uninstalled and subsequently
119
-
reinstalled. To force the browser to acknowledge a new value for
120
-
<code>default_area</code>, the id of the extension must be changed.
121
-
</p>
122
-
<p>
123
-
An extension can't change the location of the button after it has been
124
-
installed, but the user may be able to move the button using the
125
-
browser's built-in UI customization mechanism.
126
-
</p>
127
-
</td>
128
-
</tr>
129
-
<tr>
130
-
<td><code>default_icon</code>
131
-
<br />{{optional_inline}}</td>
132
-
<td><code>Object</code> or <code>String</code></td>
133
-
<td>
134
-
<p>
135
-
Use this to specify one or more icons for the action. The icon
136
-
is shown in the browser toolbar by default.
137
-
</p>
138
-
<p>
139
-
Icons are specified as URLs relative to the manifest.json file itself.
140
-
</p>
141
-
<p>You can specify a single icon file by supplying a string here:</p>
> Do not set `browser_style` to true: its support in Manifest V3 was removed in Firefox 118. See [Manifest V3 migration for `browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration).
66
+
-`default_area` {{optional_inline}}
67
+
- : `String`. Defines the part of the browser in which the button is initially placed. This is a string that may take one of four values:
68
+
-`"navbar"`: the button is placed in the main browser toolbar, alongside the URL bar.
69
+
-`"menupanel"`: the button is placed in a popup panel.
70
+
-`"tabstrip"`: the button is placed in the toolbar that contains browser tabs.
71
+
-`"personaltoolbar"`: the button is placed in the bookmarks toolbar.
72
+
73
+
This property is only supported in Firefox. This property is optional, and defaults to `"menupanel"`. Firefox remembers the `default_area` setting for an extension, even if that extension is uninstalled and subsequently reinstalled. To force the browser to acknowledge a new value for `default_area`, the id of the extension must be changed. An extension can't change the location of the button after it has been installed, but the user may be able to move the button using the browser's built-in UI customization mechanism.
74
+
75
+
-`default_icon` {{optional_inline}}
76
+
- : `Object` or `String`. Use this to specify one or more icons for the action. The icon is shown in the browser toolbar by default. Icons are specified as URLs relative to the manifest.json file itself.
77
+
78
+
You can specify a single icon file by supplying a string here:
79
+
80
+
```json
81
+
"default_icon": "path/to/geo.svg"
82
+
```
83
+
84
+
To specify multiple icons in different sizes, specify an object here. The name of each property is the icon's height in pixels, and must be convertible to an integer. The value is the URL. For example:
85
+
86
+
```json
149
87
"default_icon": {
150
88
"16": "path/to/geo-16.png",
151
89
"32": "path/to/geo-32.png"
152
-
}</pre
153
-
>
154
-
<p>
155
-
You cannot specify multiple icons of the same sizes.<br /><br />See
156
-
<a
157
-
href="#choosing_icon_sizes"
158
-
>Choosing icon sizes</a
159
-
>
160
-
for more guidance on this.
161
-
</p>
162
-
</td>
163
-
</tr>
164
-
<tr>
165
-
<td><code>default_popup</code>
166
-
<br />{{optional_inline}}</td>
167
-
<td><code>String</code></td>
168
-
<td>
169
-
<p>
170
-
The path to an HTML file containing the specification of the popup.
171
-
</p>
172
-
<p>
173
-
The HTML file may include CSS and JavaScript files using
This property enables you to specify different icons for themes
246
-
depending on whether Firefox detects that the theme uses dark or light
247
-
text.
248
-
</p>
249
-
<p>
250
-
If this property is present, it's an array containing at least one
251
-
<code>ThemeIcons</code> object. A <code>ThemeIcons</code> object
252
-
contains three mandatory properties:
253
-
</p>
254
-
<dl>
255
-
<dt><code>"dark"</code></dt>
256
-
<dd>
257
-
A URL pointing to an icon. This icon displays when a theme using
258
-
dark text is active (such as the Firefox Light theme, and the
259
-
Default theme if no default_icon is specified).
260
-
</dd>
261
-
<dt><code>"light"</code></dt>
262
-
<dd>
263
-
A URL pointing to an icon. This icon displays when a theme using
264
-
light text is active (such as the Firefox Dark theme).
265
-
</dd>
266
-
<dt><code>"size"</code></dt>
267
-
<dd>The size of the two icons in pixels.</dd>
268
-
</dl>
269
-
<p>Icons are specified as URLs relative to the manifest.json file.</p>
270
-
<p>
271
-
You should supply 16x16 and 32x32 (for retina display)
272
-
<code>ThemeIcons</code>.
273
-
</p>
274
-
</td>
275
-
</tr>
276
-
</tbody>
277
-
</table>
90
+
}
91
+
```
92
+
93
+
You cannot specify multiple icons of the same sizes. See [Choosing icon sizes](#choosing_icon_sizes) for more guidance on this.
94
+
95
+
- `default_popup` {{optional_inline}}
96
+
- : `String`. The path to an HTML file containing the specification of the popup. The HTML file may include CSS and JavaScript files using `<link>` and `<script>` elements, just like a normal web page. However, `<script>` must have a `src` attribute to load a file. Don't use `<script>` with embedded code, because you'll get a confusing Content Violation Policy error. Unlike a normal web page, JavaScript running in the popup can access all the [WebExtension APIs](/en-US/docs/Mozilla/Add-ons/WebExtensions/API) (subject, of course, to the extension having the appropriate [permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)). This is a [localizable property](/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization#internationalizing_manifest.json).
97
+
- `default_title` {{optional_inline}}
98
+
- : `String`. Tooltip for the button, displayed when the user moves their mouse over it. If the button is added to the browser's menu panel, this is also shown under the app icon. This is a [localizable property](/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization#internationalizing_manifest.json).
99
+
- `theme_icons` {{optional_inline}}
100
+
- : `Array`. This property enables you to specify different icons for themes depending on whether Firefox detects that the theme uses dark or light text. If this property is present, it's an array containing at least one `ThemeIcons` object. A `ThemeIcons` object contains three mandatory properties:
101
+
- `"dark"`
102
+
- : A URL pointing to an icon. This icon displays when a theme using dark text is active (such as the Firefox Light theme and, if no `default_icon` is specified, the Default theme).
103
+
- `"light"`
104
+
- : A URL pointing to an icon. This icon displays when a theme using light text is active (such as the Firefox Dark theme).
105
+
- `"size"`
106
+
- : The size of the two icons in pixels.
107
+
108
+
Icons are specified as URLs relative to the manifest.json file. You should supply 16x16 and 32x32 (for retina display) `ThemeIcons`.
109
+
110
+
> [!NOTE]
111
+
> Alternatively, you can specify an SVG icon in `default_icon` and use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example:
112
+
>
113
+
> ```html
114
+
> <style>
115
+
> #outside {
116
+
> fill: black;
117
+
> }
118
+
> #inside {
119
+
> fill: red;
120
+
> }
121
+
> @media (prefers-color-scheme: dark) {
122
+
> #outside {
123
+
> fill: white;
124
+
> }
125
+
> #inside {
126
+
> fill: black;
127
+
> }
128
+
> }
129
+
> </style>
130
+
> ```
131
+
>
132
+
> For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example.
278
133
279
134
## Choosing icon sizes
280
135
281
136
The action's icon may need to be displayed in different sizes in different contexts:
282
137
283
-
- The icon is displayed in the browser toolbar. Older versions of Firefox supported the option of placing the icon in the browser's menu panel (the panel that opens when the user clicks the "hamburger" icon). In those versions of Firefox the icon in the menu panel was larger than the icon in the toolbar.
138
+
- The icon is displayed in the browser toolbar. Older versions of Firefox supported the option of placing the icon in the browser's menu panel (the panel that opens when the user clicks the "hamburger" icon). In those versions of Firefox, the menu panel icon was larger than the toolbar icon.
284
139
- On a high-density display like a Retina screen, icons needs to be twice as big.
285
140
286
141
If the browser can't find an icon of the right size in a given situation, it will pick the best match and scale it. Scaling may make the icon appear blurry, so it's important to choose icon sizes carefully.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments