Update UX for history management

[TitanNano]

Steps to reproduce

Go into Fenix history management

Expected behavior

On android list actions are usually in the page header. When a list item is selected the header switches into edit mode, providing special editing actions.

Actual behavior

The current history management is very unandroidy. There is a delete-history-button right below the header which changes into "delete x Items" when a history entry is selected. I attached a screenshot of how Google Messages does it. The X on the right side of the header is also very strange.

Device information

• Android device: 7.1.1
• Fenix version: 1.0

┆Issue is synchronized with this Jira Task

[yoasif]

FWIW, Bromite/Kiwi have a more "Android" UI around history management that replicates Fenix's features in a nicer way.

A couple of things:

• No three dot menu in Bromite; as the only option is delete, they use an icon for it
• They also have the "X" in the header to exit this view

The selection of multiple items is just as undiscoverable as on Fenix, (hold on favicon) but that seems to be an Android-ism.

As the reporter noted, once selected, the header changes to show options to perform with the selected items; interestingly, the options inside the three dot menu include opening the history entries in new tabs (either normal or private). The header text also updates to show the number of selected items.

[bbinto]

Some of these issue have been discussed with UX, will review once the Library UI is done

[topotropic]

@boek could you update history so that selections matches the spec here https://mozilla.invisionapp.com/share/8KRF5PW9Q6Z ?

[topotropic]

@vesta0 @bifleming Is this still blocked?

[vesta0]

@topotropic no I think it's ready for engineering.

[bsurd]

The checkmark when selecting history elements does not match the one from the design specs in invision. Bookmark items are displayed as the design specs.

There are also inconsistencies between bookmarks and history elements. The bookmarks are displayed with a circle and history ones have a square that turns into a circle when long tapping to select multiple elements.

@sblatz Could you take a look at this?

[cadeyrn]

See also #2435.

[sblatz]

@topotropic for the fav icons in bookmarks and history, do we want them to be the rounded square or the square inside the circle?

[topotropic]

@sblatz circles

[cadeyrn]

@topotropic Then the favicons in the "open tabs" section on the home screen should also be changed because it doesn't make much sense to have different favicon styles across the product. Now just one inconsistency has been swapped for another inconsistency.

By the way, in my opinion it looks much cleaner without the circle and the design without the circle has also the advantage of bigger icons.

[yoasif]

FWIW, Bromite, Kiwi, Opera all use circles for bookmarks on Android. Edge does not, but it also doesn't seem to care about looking like an Android app.

I think #2132 is a bigger issue as compared to other Android apps, but I don't have much of an opinion about the circles.

[cadeyrn]

I've never heard of Kiwi and Bromite but in Fennec there are also no circles. ;-) But it's a design decision and therefore not important what others do. Fenix as a whole should look coherent. So I can live with both styles but it could be better to use only one style for all places. ;-)

[yoasif]

Sad. I forgot to check Fennec, and I like the Fennec design the most, upon review.

[topotropic]

Thanks for your feedback! I can see where you are coming from. The idea behind using squares on start screen and circles on history/bookmarks is that the context is a different one: on start screen images are embeded in cards, on history/bookmarks we use list elements. The placeholders on start screen are also slightly bigger and this format allows room for using other source material then favicons, for example images. Hope that helps.

[bsurd]

Verified on the latest build (5/15) on a Nexus 5 and OnePlus 5T.