[Feature] Add/Edit bookmark buttons in three-dot menu

[eliserichards]

Meta: #17796
Followup to #17771

UX point of contact: @violasong (Victoria)

Figma designs (bottom right, labeled "Final design"): https://www.figma.com/file/NHu4cTmzfYgi3QJz5DIDWD/Fenix-Toolbar-Menus?node-id=0%3A1

Acceptance criteria

• Create a button labeled "Add" that allows users to add the current page as a bookmark directly from the menu
• Clicking on the ⭐ star should add the current tab as a bookmark
  • When the page is bookmarked, the button text should change to "Edit"
• If the user is on a bookmarked page, clicking the ⭐ star again should remove the page from bookmarks without navigating away
• The "Edit" button should navigate the user to the bookmark edit screen
• The user should be able to navigate backwards from that screen

┆Issue is synchronized with this Jira Task

[mcarare]

Opened mozilla-mobile/android-components#9840 for the AC part.

[mcarare]

@topotropic With the icons back in the menu, how will this item look? Wouldn't be redundant to have 2 star icons on the same row?

[violasong]

The updated look is in the figma file. This does end up with 2 star icons in the row, but I think the difference in icon styles makes this okay. CC: @vesta0 in case she has thoughts on this. If there's concern, I'll ask Bram to look into it.

[amedyne]

@brampitoyo Any thoughts on the star icons for bookmarks?

[brampitoyo]

@amedyne I’m happy to go with @violasong’s recommendation up above, of using an additional star for the action of adding and editing a bookmark:

This does end up with 2 star icons in the row, but I think the difference in icon styles makes this okay.

[amedyne]

Thanks for providing the feedback @brampitoyo. @mcarare See comment above.

[cadeyrn]

@mcarare Could the spacing between the star icon and the text increased a bit? The mockup shows more spacing than the current implementation. Thanks!

[mcarare]

@violasong Can you please check the implementation and have it compared with the ones from Figma? And if there are any things that need to be changed, can you open an implementation review issue (like these implementation review )? Thank you!

LE: Can you also check on the dark theme colors? There were no specs for that in Figma.

[lobontiumira]

Verified on the debug build with AC: 75.0.20210405143037, a69f74ece, and GV 89.0a1-20210405094633 on Google Pixel (Android 10), Samsung Galaxy Note 8 (Android 9), and HTC 10 (Android 8).
Tapping on the "Add" option from the page's three-dot menu, adds the page to Bookmarks.
Tapping on the "Edit" option redirects the user to the editing page of the bookmark.

However, the mockup shows more spacing than the current implementation.
@violasong could you please review?

bookmark.new.UI.mp4

[violasong]

Thanks for the screenshots!

Yes, there should be a 7px spacing between the star and the "Add/Edit" text - it does look like this is short some pixels. (FYI for the future, if you're signed into Figma you can use the Inspect mode to look at pixel measurements between elements)

The star icon should also be smaller - 19px instead of the standard 24px.

For dark mode, the purple text should be the main purple text color used in dark mode (Violet 40 - #ad3bff)

[eliserichards]

I will open up a followup issue to tackle those. Thanks @violasong! 👍

[eliserichards]

Followup filed: #18829