1686527 - Refresh navbar toolbar icons

Status: VERIFIED FIXED

(Firefox :: Toolbars and Customization, enhancement, P1)

Description

[Mark Striemer [:mstriemer]]

The icons in the toolbar will be updated. In the interim, they could be updated with the current spec's placeholder icons while we wait for the final versions. Keep these icons out of the bundle except for Nightly if we're including placeholders early to avoid increasing the bundle size.

Comment 1

[Stephan Sokolow]

Is there any chance you could go back to an icon for about:blank that gives a stronger sense of "absence of an icon", like the "paste icon here"-esque square of perforations?

As-is, when I have a lot of tabs open, icons like the firefox logo make it hard to tell at a glance whether I'm looking at an empty tab or a tab pointed at some Firefox-related Mozilla site.

Comment 2

[Romain Testard [:RT]]

Marking as P1. Per experience review we agreed to mark as P1 bug the ones that will block MR1.

Comment 3

[Sam Foster [:sfoster] (he/him)]

I'd like to update the tabstrip and the tab's various ornaments in their own patches.
Lots of these icons are used across multiple surfaces so its a bit arbitrary where each should land, but does something like this list sound ok for this bug?

• Back arrow
• Next arrow
• (stop/reload will need to be its own patch, and I think that needs to land at the same time as the animation is updated)
• Home
• Pocket
• Library
• Sidebar
• App menu / App menu badge, and its update badge

I think I'll do all the Fxa icons in its own patch, same for extensions.

Comment 4

[Mike Conley (:mconley) (:⚙️)]

Going to try writing a patch to update the icons listed in comment 3.

Comment 5

[Mike Conley (:mconley) (:⚙️)]

Sidebar icons aren't currently ready. Do you think it makes sense to wait for it, or should I spin out sidebar to its own bug like stop/reload?

Comment 6

[Mike Conley (:mconley) (:⚙️)]

Attachment: Bug 1686527 - Update some navigation toolbar icons. r?jaws!

Included in this set:

• Back
• Forward
• Home
• Library
• AppMenu (normal, badged)
• Pocket
• Update badge icon

Comment 7

[Mark Striemer [:mstriemer]]

It probably makes sense to do the overflow chevron as well. That icon is also used in the paginator in the print preview modal.

There are several other buttons which seem to mostly be related to the toolbar [1], notably:

• bookmarks-toolbar-button
• bookmarks-menu-button
• history-panelmenu
• downloads-button
• privatebrowsing-button
• print-button (This is also used in the print dialog)
• fullscreen-button
• email-link-button

Icons I don't see replacements for in figma:

• open-file-button (I don't see a matching icon in icons figma)
• screenshot-button (ditto, unsure if we're getting a new icon here)
• save-page-button (like open, I only see a generic folder not one with an arrow)
• characterencoding-button
• new-window-button
• new-tab-button
• developer-button
• profiler-button-button
• panic-button
• cut-button
• copy-button
• paste-button

[1] https://searchfox.org/mozilla-central/rev/402802eb42ba7d905531fd8e3b089fc8b2292f66/browser/themes/shared/toolbarbutton-icons.inc.css#157-231

Comment 8

[Mike Conley (:mconley) (:⚙️)]

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:

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:

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.

Comment 9

[Mike Conley (:mconley) (:⚙️)]

I'm going to try adding the overflow panel chevron while I'm here.

Comment 10

[Sam Foster [:sfoster] (he/him)]

(In reply to Mike Conley (:mconley) (:⚙️) (Catching up on needinfos) from comment #5)

Sidebar icons aren't currently ready. Do you think it makes sense to wait for it, or should I spin out sidebar to its own bug like stop/reload?

Yeah I think so. I don't see it in the latest batch either so its probably best in its own bug.

Comment 11

[Mike Conley (:mconley) (:⚙️)]

Also note that the Download button has its own bug - bug 1700238.

Comment 12

[:Gijs (he/him)]

Also note that the windows context menu icons that are used when the browser.proton.contextmenus.enabled pref is turned on won't quite be updated until bug 1692088 also lands. It should be possible to verify this bug's effect on the context menu by not having that pref turned on.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ae5416676bca
Update some navigation toolbar icons. r=jaws

Comment 14

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dfe441e36e61
Backed out 2 changesets (bug 1686527, bug 1702837) for causing failures at browser_parsable_css.js. CLOSED TREE

Comment 15

[Atila Butkovits]

Backed out for causing failures at browser_parsable_css.js.

Backout link: https://hg.mozilla.org/integration/autoland/rev/dfe441e36e614edd8ead54759558c986c4795051

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&selectedTaskRun=eGLz4hQqTcG5w7DIMEMZ8A.0&resultStatus=testfailed%2Cbusted%2Cexception%2Csuccess%2Cusercancel%2Crunning%2Cpending%2Crunnable&searchStr=linux%2C18.04%2Cx64%2Copt%2Cmochitests%2Ctest-linux1804-64%2Fopt-mochitest-browser-chrome-e10s%2Cbc3&revision=e2ab833e253488967610d0fa3da2b83588e0f0dd

Failure log: https://treeherder.mozilla.org/logviewer?job_id=335794211&repo=autoland&lineNumber=2561

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e969ea2b31ad
Update some navigation toolbar icons. r=jaws

Comment 17

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/e969ea2b31ad

Comment 18

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Attachment: update_arrow

Hello! We confirmed on Windows 10x64,macOS 10.15 and Ubuntu 18.04 that the icons are displayed as in the MR1 Icons spreadsheet using the provided steps from comment 8.
Just to be sure I have some questions:

1. The fill pocket icon should still be red when clicked/saved to pocket or grey as in the spreadsheet? (screenshot)
2. The update badge icon should be a different color from the one in AppMenu? (see attached screenshot)

Thank you in advance!

Comment 19

[Mark Striemer [:mstriemer]]

1. There weren't any planned changes on the proton side for the colouring of the Pocket button, so the red should be expected still.
2. Sounds like the badge colour is incorrect, and they're all being fixed up in bug 1703943.

Comment 20

[Alexandru Trif, Desktop Test Engineering [:atrif]]

(In reply to Mark Striemer [:mstriemer] from comment #19)

1. There weren't any planned changes on the proton side for the colouring of the Pocket button, so the red should be expected still.
2. Sounds like the badge colour is incorrect, and they're all being fixed up in bug 1703943.

Thank you Mark! Closing as verified per comment 18 and comment 19.