Some notes for QA when it comes to testing this batch:
# Back
The back icon is obviously used for the back button in the toolbar, but it's also used in the back button long-press menu when the mouse hovers one of the menuitems in the session history.
It's also used in the content context menu on Windows and Linux.
It appears in the macOS touch bar when the browser is in the foreground.
On Windows, it appears in the Library window as the back button icon.
It also appears in our DevTools if you follow these instructions:
1. Ensure you have devtools.aboutdebugging.local-tab-debugging set to true
2. Go to about:debugging
3. Press on "This Nightly"
4. There should be a list of tabs you can inspect. Click on the "Inspect" button for any of them and it should open a toolbox tab showing the UI you're referring to in that code snippet.
5. The back button icon appears towards the top of the UI there for navigating the tab.
# Forward
The forward icon is obviously used for the back button in the toolbar, but it's also used in the forward button long-press menu when the mouse hovers one of the menuitems in the session history.
It's also used in the content context menu on Windows and Linux.
It appears in the macOS touch bar when the browser is in the foreground.
On Windows, it appears in the Library window as the forward button icon.
It also appears in our DevTools if you follow these instructions:
1. Ensure you have devtools.aboutdebugging.local-tab-debugging set to true
2. Go to about:debugging
3. Press on "This Nightly"
4. There should be a list of tabs you can inspect. Click on the "Inspect" button for any of them and it should open a toolbox tab showing the UI you're referring to in that code snippet.
5. The forward button icon appears towards the top of the UI there for navigating the tab.
It also appears at the right side of the URL bar if focus and text is inputted. Same goes for the (off by default) separate search input.
# Home
This icon appears on the Home button, and also appears on the sidebar of about:preferences for the "Home" section.
# Library
This icon only appears in the Library button.
# AppMenu
This icon appears in the main toolbar for the AppMenu. It also appears in about:preferences if you have an extension like Facebook Container installed, and then in about:preferences, choose to "Disable Extension" to regain control over the "Enable Container Tabs" preference.
The badged state of the AppMenu icon can be entered by putting this snippet in the Browser Console:
```lang=js
AppMenuNotifications.showNotification("update-manual", { callback: () => {}});
```
# Pocket
This icon is used in the Pocket toolbar button. A filled mode is displayed if the user has the Pocket panel open or if the current page is Pocket'ed.
The filled state of the icon is also displayed in Reader Mode in the left sidebar.
# Update badge icon
Visible by putting the following line in the Browser Console:
```lang=js
AppMenuNotifications.showNotification("update-manual", { callback: () => {}});
```
The icon is visible both in the AppMenu toolbar button badge, but also in the item that appears in the panel upon opening.
Bug 1686527 Comment 8 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
Some notes for QA when it comes to testing this batch:
# Back
The back icon is obviously used for the back button in the toolbar, but it's also used in the back button long-press menu when the mouse hovers one of the menuitems in the session history.
It's also used in the content context menu on Windows and Linux.
It appears in the macOS touch bar when the browser is in the foreground.
On Windows, it appears in the Library window as the back button icon.
It also appears in our DevTools if you follow these instructions:
1. Ensure you have devtools.aboutdebugging.local-tab-debugging set to true
2. Go to about:debugging
3. Press on "This Nightly"
4. There should be a list of tabs you can inspect. Click on the "Inspect" button for any of them and it should open a toolbox tab showing the UI you're referring to in that code snippet.
5. The back button icon appears towards the top of the UI there for navigating the tab.
# Forward
The forward icon is obviously used for the back button in the toolbar, but it's also used in the forward button long-press menu when the mouse hovers one of the menuitems in the session history.
It's also used in the content context menu on Windows and Linux.
It appears in the macOS touch bar when the browser is in the foreground.
On Windows, it appears in the Library window as the forward button icon.
It also appears in our DevTools if you follow these instructions:
1. Ensure you have devtools.aboutdebugging.local-tab-debugging set to true
2. Go to about:debugging
3. Press on "This Nightly"
4. There should be a list of tabs you can inspect. Click on the "Inspect" button for any of them and it should open a toolbox tab showing the UI you're referring to in that code snippet.
5. The forward button icon appears towards the top of the UI there for navigating the tab.
It also appears at the right side of the URL bar if focus and text is inputted. Same goes for the (off by default) separate search input.
# Home
This icon appears on the Home button, and also appears on the sidebar of about:preferences for the "Home" section.
# Library
This icon only appears in the Library button.
# AppMenu
This icon appears in the main toolbar for the AppMenu. It also appears in about:preferences if you have an extension like Facebook Container installed, and then in about:preferences, choose to "Disable Extension" to regain control over the "Enable Container Tabs" preference.
The badged state of the AppMenu icon can be entered by putting this snippet in the Browser Console:
```lang=js
AppMenuNotifications.showNotification("update-manual", { callback: () => {}});
```
# Pocket
This icon is used in the Pocket toolbar button. A filled mode is displayed if the user has the Pocket panel open or if the current page is Pocket'ed.
The filled state of the icon is also displayed in Reader Mode in the left sidebar.
# Update badge icon
Visible by putting the following line in the Browser Console:
```lang=js
AppMenuNotifications.showNotification("update-manual", { callback: () => {}});
```
The icon is visible both in the AppMenu toolbar button badge, but also in the item that appears in the panel upon opening.
# Chevron
The icon is displayed in a button that only appears when the toolbar gets too crowded to show everything. You can decrease the width of the window until it appears.
The other place it appears is in Print Preview, at the bottom of the preview document, where the page forward / page backward controls are.