1140315 - [Search] tapping "No internet connection" is easy to trigger search engine setting when offline

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Search, defect)

Description

[Hermes Cheng (inactive after July 27, 2015)]

* Description:
After refactoring search result layout, tapping "No internet connection" is easy to trigger search engine setting menu when offline.

* STR:
1. no network connection
2. launch search app
3. tap "No internet connection"

* Expected result
trigger Network connection menu

* Actual result
easily trigger search engine

Comment 1

[Hermes Cheng (inactive after July 27, 2015)]

video link: https://www.youtube.com/watch?v=s3pieqq6kmA

Comment 2

[Gregor Wagner [:gwagner]]

Can you make the video public?

Comment 3

[Kevin Grandon :kgrandon]

(In reply to Gregor Wagner [:gwagner] from comment #2)
> Can you make the video public?

+1.


Also going to ask UX here. I think there's some overlap in the hit targets but even if we fix that it seems that these buttons might be too close together to easily distinguish. 

Francis - is this as speced, do we need some separation?

Comment 4

[Kevin Grandon :kgrandon]

Attachment: Screenshot of offline experience

Comment 5

[Hermes Cheng (inactive after July 27, 2015)]

(In reply to Gregor Wagner [:gwagner] from comment #2)
> Can you make the video public?

sorry about that, I forgot to press 'save' after changing it yesterday

Comment 6

[Francis Djabri [:djabber]]

(In reply to Kevin Grandon :kgrandon from comment #4)
> Created attachment 8574038 [details]
> Screenshot of offline experience

There's definitely some overlap going on with the touch targets. I'm tapping squarely on the No Internet Connection label and it's still bringing up the search selection dialog. 

However, you're right, these targets do look a bit close together. Eric, does the target size for the No Internet connection label meet our minimum touch target guidelines? I would say, following these guidelines, it should be at least 9mm tall:

http://www.uxmatters.com/mt/archives/2013/11/design-for-fingers-and-thumbs-instead-of-touch.php

Comment 7

[Eric Pang [:epang] UX]

Attachment: Rocket_Bar_Search_Offline.jpg

Let's vertically center 'no internet connection' between the search suggestion header and keyboard.  It's 8rem on hvga and 12 rem on fvga.  This should give more then enough room for touch targets.  See attached image, thanks!

Comment 8

[Gregor Wagner [:gwagner]]

Thanks gmarty!

Comment 9

[GitHub Autolander Bot]

Attachment: [gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

Comment 10

[Guillaume Marty [:gmarty]]

Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

Before asking for a r+, I'd like you to have a look Eric. There's a couple of things I find weird:
1. When adding the top margin, if you have items in your history matching your search (I have 2), the "No internet connection" is hidden underneath the keyboard and is not easily dismissed.
2. The click target is the cog icon, which is very small. Tapping the text "No internet connection" isn't effective (This is not related to this patch).

Comment 11

[Hermes Cheng (inactive after July 27, 2015)]

(In reply to Guillaume Marty [:gmarty] from comment #10)
> Comment on attachment 8577172 [details] [review]
> [gaia]
> gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-
> search-engine-setting-when-offline > mozilla-b2g:master
> 
> Before asking for a r+, I'd like you to have a look Eric. There's a couple
> of things I find weird:
> 1. When adding the top margin, if you have items in your history matching
> your search (I have 2), the "No internet connection" is hidden underneath
> the keyboard and is not easily dismissed.
> 2. The click target is the cog icon, which is very small. Tapping the text
> "No internet connection" isn't effective (This is not related to this patch).

The max number of matched history is 3. So, the original "1rem", "No internet connection" would also be hidden under keyboard when 3 matched histories. What I concern is that the place of "No internet connection" might be very close to the bottom when there are 3 matched history results.

Eric, how do you think?

Comment 12

[Eric Pang [:epang] UX]

Attachment: Rocket_Bar_Search(offline).jpg

I agree, let's move the 'no internet connection' to below the Rocket Bar.  It's pretty important for the user to know they are not connected so having it covered by the keyboard isn't ideal.

Guillaume, is it possible to make the cog and text a rectangle hit target?

We'll have to try it out and see how it feels - worried it might be a little too close to the local searches.

Thanks!

Comment 13

[Eric Pang [:epang] UX]

Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

removing ui-review for now

Comment 14

[Guillaume Marty [:gmarty]]

Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

I implemented the changes Eric. Can you have a look? Thanks :-)

Comment 15

[Eric Pang [:epang] UX]

Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

Looks good, thanks Guillaume!

Comment 16

[Guillaume Marty [:gmarty]]

Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

Kevin, can you review this patch for me?

Comment 17

[Kevin Grandon :kgrandon]

Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

LGTM!

Comment 18

[GitHub Autolander Bot]

http://docs.taskcluster.net/tools/task-graph-inspector/#WcH8GfG9RTOBGyQVidwlFQ

The pull request failed to pass integration tests. It could not be landed, please try again.

Comment 19

[GitHub Autolander Bot]

https://github.com/mozilla-b2g/gaia/pull/28865

Autolander could not land the pull request due to not having collaborator rights. This is possibly due to a tree closure. Please check the tree status and request checkin again once the tree is open.

Comment 20

[Kevin Grandon :kgrandon]

Sorry, this is probably due to the tree closure issues today... Should clear up once the tree reopens.

Comment 21

[Guillaume Marty [:gmarty]]

Landed in master:
https://github.com/mozilla-b2g/gaia/commit/b551f3ce4eb84daba511b67f8d0e7a436acfae5e

Comment 22

[Guillaume Marty [:gmarty]]

Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): Browser
[User impact] if declined: When offline, the settings link is badly placed, next to another link and with a tiny touch target. It makes it difficult for the user to use or even notice.
[Testing completed]: Manual testing is required
[Risk to taking this patch] (and alternatives if risky): Risk is low as it is only a markup and CSS change
[String changes made]: None

Comment 23

[Hermes Cheng (inactive after July 27, 2015)]

NI myself for following verification

Comment 24

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/63ddf04a04c442dbef75cbeba1747ac90f3d074b

Comment 25

[Hermes Cheng (inactive after July 27, 2015)]

verified with below builds
*2.2
Build ID               20150329162502
Gaia Revision          473cd63f53c855299b719285d9b95e3f2910782f
Gaia Date              2015-03-27 20:14:43
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/4b13c4254e2f
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150329.200030
Firmware Date          Sun Mar 29 20:00:41 EDT 2015
Bootloader             L1TC000118D0

*master
Build ID               20150329160203
Gaia Revision          67ad91f3f660b1f16b354ee4c5159ddc5a74d149
Gaia Date              2015-03-28 10:02:40
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/385840329d91
Gecko Version          39.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150329.191719
Firmware Date          Sun Mar 29 19:17:28 EDT 2015
Bootloader             L1TC100118D0