1131830 - Make the logout button less prominent, so it's harder to accidentally click & declutters the UI

Status: VERIFIED FIXED

(Tree Management :: Treeherder, defect, P3)

Description

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

I accidentally log myself out way too often when I try to click into the filter box that's right below the "logout" button.

There should be a confirmation prompt when logout is clicked. (Or maybe stick the logout button into a menu or something so a single misclick doesn't log me out?)

Comment 1

[Ed Morley [:emorley]]

I really really don't like prompts for logging out (my bank does this and virtually every time I have to double take since I thought the logout had already occurred).

Let's fix the root problem - avoiding accidental clicks on log out. As an added bonus the fix for this may also make the log out link/text smaller or tucked away, which would win us screen estate and help with bug 1125264 :-)

Comment 2

[Jonathan French (:jfrench)]

Given we are seeking discover-ability, one low-impact change might be to just invert the padding and margin values on the 'Logout' element when logged in. It would reduce the target area when logged in without altering the UI. So I think you could 'miss' the search field by a substantial amount without triggering a logout.

If we wanted consider a more significant UI change, we could consider the possibility of relocating the search to the upper bar, to the right of the 'Treeherder' logo. Missing the click there, might result in a reload of a repo however.

A third option might be to convert the Logout button to post a one-entry logout menu. So accidental clicks will not immediately result in a logout. But it would require more effort to log out, which could be annoying for users.

Just some ideas, fwiw.

Comment 3

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

How often are people going to be signing out of Treeherder manually?

Comment 4

[Jonathan French (:jfrench)]

For new users, a11y w/screen reader, or if users wish to switch their account id, I would imagine they would expect discoverable access to a logout text button. My guess anyway. What did you have in mind?

Comment 5

[Ed Morley [:emorley]]

I'm pretty sure logging out is going to be extremely infrequent - I mean Treeherder isn't your online banking or email account, so the security risk is pretty low.

I think given that in the future we'll want to have a "settings" menu option, I think we should make a popout menu that for now just contains "log out", but the in the future can also include {"Settings", "Some other feature", ...}

Comment 6

[Jonathan French (:jfrench)]

Attachment: logoutSpecProposed_1

What about doing something like this attachment, using the generic Mozilla persona icon. The spec shows the login/register state (unchanged), and the logged in state (proposed).

Maybe later we get fancy, and use the user's actual persona image if they have one.

On hover we could show the userid, and you could hang Settings, Logout, etc menu entries off its down arrow.

The Help button still risks being hit, but it's a small target area relative to what the Logout button used to be. If you miss the filter cell all it does is launch help, which is non-destructive.

This also does away with the old "[e-mail]" style user id cell, resulting in consistent position for the adjacent Filter/Repo menus for all users.

I would guess we could add aria properties if needed also.

Comment 7

[Ed Morley [:emorley]]

That sounds spot on :-)

Comment 8

[Jonathan French (:jfrench)]

Cool. In addition to this work, it crossed my mind we could also consider a shortcut to focus the Filter field (eg. 'f'). This would speed up sheriff workflow further and avoid the annoyance of manual interaction.

Comment 9

[Jonathan French (:jfrench)]

Above Filter shortcut entered as bug 1133545.

Comment 10

[Jonathan French (:jfrench)]

Making progress on the new logout, some minor tweaks and things still to sort out.

Comment 11

[Jonathan French (:jfrench)]

Attachment: treeherder-ui-PR#443

Please see above PR for status and review.

Comment 12

[William Lachance (:wlach)]

Comment on attachment 8584834 [details] [review]
treeherder-ui-PR#443

Looks good! As stated in the PR, I think it's best to leave out the actions label for now.

Comment 13

[Jonathan French (:jfrench)]

Yup, will do.

Comment 14

[Treeherder GitHub Bugbot]

Commits pushed to master at https://github.com/mozilla/treeherder-ui

https://github.com/mozilla/treeherder-ui/commit/4f32e3cafa86116111212125d38c9fb0ed5f17f5
Bug 1131830 - Prevent accidental logouts with a dropdown logout menu

https://github.com/mozilla/treeherder-ui/commit/ac0c7d9642a89cc8d2e4ffd7b7cf4ad4e1219964
Merge pull request #443 from tojonmz/new-logout

Bug 1131830 - Prevent accidental logouts with a dropdown logout menu

Comment 15

[Jonathan French (:jfrench)]

Marking fixed per above merge. I'll verify on the next push to stage/prod.

Comment 16

[Jonathan French (:jfrench)]

Verified fixed on stage.

Comment 17

[Treeherder GitHub Bugbot]

Commits pushed to master at https://github.com/mozilla/treeherder

https://github.com/mozilla/treeherder/commit/3510398e965e25bebed9e3fc72f2c91be1c1048e
Bug 1131830 - Prevent accidental logouts with a dropdown logout menu

https://github.com/mozilla/treeherder/commit/f4ef54b3a273ebd65249da692fb4e36cb3eac356
Merge pull request #443 from tojonmz/new-logout

Bug 1131830 - Prevent accidental logouts with a dropdown logout menu