search

mozilla-mobile / focus-ios

⚠️ Firefox Focus (iOS) has moved to a new repository. It is now developed and maintained as part of: https://github.com/mozilla-mobile/firefox-ios
Mozilla Public License 2.0
1.26k stars 262 forks source link

Redesign menu & dialog – URL bar menu #1061

Closed brampitoyo closed 6 years ago

brampitoyo commented 6 years ago

Old

New

Assets

brampitoyo commented 6 years ago

After discussion, @oliviabrown9 and I decided against putting a shortcut to access Tracking Protection options inside this Page Actions menu. This was for the simple reason that Tracking Protection applies globally (while Page Actions applies locally – only to the currently opened page), and already has prominent placement in the header area.

brampitoyo commented 6 years ago

Update icon colours (grey-10 100%) and SVG asset.

oliviabrown9 commented 6 years ago

@brampitoyo What should happen if the keyboard is active on the home view screen? I can keep the currentl URL menu coming from the top if that's preferred. Or should the keyboard be dismissed to present the menu from the bottom?

oliviabrown9 commented 6 years ago

@brampitoyo Also, what should happen if the user does not have a string in their clipboard? Should those options not be present in the menu? I'm honestly not even sure how we handle this currently.

sblatz commented 6 years ago

@brampitoyo it seems odd that we duplicate the same icons twice. Is there any way we could get new assets for some of these?

oliviabrown9 commented 6 years ago

Closed with #1173.

brampitoyo commented 6 years ago

@oliviabrown9

What should happen if the keyboard is active on the home view screen? I can keep the currentl URL menu coming from the top if that's preferred. Or should the keyboard be dismissed to present the menu from the bottom?

Thanks for bringing this to my attention.

This is a scenario that can happen when the user taps on a textbox on a webpage, and then long-presses the URL bar.

In this case, the keyboard should be dismissed and the menu should appear from the bottom. But when the menu is closed, the keyboard should reappear.

Demo video

…what should happen if the user does not have a string in their clipboard? Should those options not be present in the menu?

If the clipboard doesn’t contain any string at all, then neither “Paste” nor “Paste & Go” should appear.

If the clipboard contains a string of text (rather than a URL), then “Paste & Go” would mean “Search this keyword using the default search engine”.

We seem to have both “Paste” and “Paste & Go” in our current implementation. Wonder if it’s something that the iOS system gives us for free, or a feature that we had to write from scratch?

@sblatz

it seems odd that we duplicate the same icons twice. Is there any way we could get new assets for some of these?

Yes. This does seem odd – although Firefox for iOS currently implements this (see demo video above). I will design an icon for “Paste & Go” and propose it to the UX team. Having a different icon in this dialogue will help differentiate the two menu items.

brampitoyo commented 6 years ago

@sblatz Mockup of the “Paste & Go” icon. Thoughts?

photon 2x

sblatz commented 6 years ago

@brampitoyo I like that icon a lot! My only concern is it looks off center from the other paste icon, other than that it looks great :)

brampitoyo commented 6 years ago

@sblatz Agreed! Centering it turned out to be more tricky than I had expected, but it was possible.

Icons (1x, 2x, 3x)

paste go 1x paste go 2x paste go 3x

Mocks

sblatz commented 6 years ago

@oliviabrown9 is this ticket truly closed, or do we need to import the new image still?

oliviabrown9 commented 6 years ago

@sblatz Good catch. Tracked in https://github.com/mozilla-mobile/focus-ios/issues/1189