Closed Bug 1686527 Opened 3 years ago Closed 3 years ago

Refresh navbar toolbar icons

Categories

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

Product:
Firefox
Component:
Toolbars and Customization
Type:
enhancement
Points:
1

Tracking

()

Status:
VERIFIED FIXED
Milestone:
89 Branch
Tracking Flags:
Tracking Status
firefox89 --- verified

People

(Reporter: mstriemer, Assigned: mconley)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [proton-toolbar])

Attachments

(2 files)

Bug 1686527 - Update some navigation toolbar icons. r?jaws!
48 bytes, text/x-phabricator-request
Details | Review
update_arrow
4.35 KB, image/png
Details

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.

Summary: Refresh toolbar icons → Refresh tab and toolbar icons
Whiteboard: [proton-toolbar]

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.

Priority: -- → P2
Points: --- → 1

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

Priority: P2 → P1
Assignee: nobody → bigiri
Assignee: bigiri → nobody

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.

Flags: needinfo?(mstriemer)
Summary: Refresh tab and toolbar icons → Refresh navbar toolbar icons
Assignee: nobody → mconley

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

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?

Flags: needinfo?(sfoster)

Included in this set:

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

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

Flags: needinfo?(mstriemer)

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.

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

(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.

Flags: needinfo?(sfoster)
See Also: → 1702690

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

Depends on: 1700109

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.

Blocks: 1692088
Pushed by mconley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ae5416676bca
Update some navigation toolbar icons. r=jaws
Backout by abutkovits@mozilla.com:
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
Flags: needinfo?(mconley)
Pushed by mconley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e969ea2b31ad
Update some navigation toolbar icons. r=jaws

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

Status: NEW → RESOLVED
Closed: 3 years ago
status-firefox89: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 89 Branch
Regressions: 1704461
Attached image 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!

Flags: needinfo?(mconley)
  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.
Flags: needinfo?(mconley)

(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.

Status: RESOLVED → VERIFIED
status-firefox89: fixed → verified
Regressions: 1705306
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: