519280 - [faceted search] more obvious click target

Status: RESOLVED FIXED

(Thunderbird :: Search, defect)

Description

[Bryan Clark (DevTools PM) [:clarkbw]]

each message in the search result has only the subject as the click target which can vary greatly in size.  Currently we're underlining that subject when a person's mouse hovers over any part of the message.

I don't underlining is clear enough what the click target should be.  I'd like to try a more obvious method like inverting the colors (a.k.a http://flickr.com/ link style) such that the subject becomes a much clearer click target when hovering.

Comment 1

[Bryan Clark (DevTools PM) [:clarkbw]]

giving this over to andreas to take a look

Comment 2

[Andreas Nilsson (:andreasn)]

Attachment: patch to fix the issue

Sorry for giving you more stuff to ui-review. :(

Who should I put as code reviewer here?

Comment 3

[Andreas Nilsson (:andreasn)]

note that I have issues with the build from current trunk, so this is against a slightly older build (a couple of days ago)

Comment 4

[Bryan Clark (DevTools PM) [:clarkbw]]

Comment on attachment 408591 [details] [diff] [review]
patch to fix the issue

The gray here is a consistent color theme but I think it looks kind of bad when it's against the white background instead of the light blue background of the sidebar.

I was wondering if we should just use the sidebar background color on hover of the message and then maybe a darker blue color on hover of the subject.

Comment 5

[Andreas Nilsson (:andreasn)]

Attachment: updated patch

this use the same color as the sidebar

Comment 6

[Bryan Clark (DevTools PM) [:clarkbw]]

Comment on attachment 409051 [details] [diff] [review]
updated patch

That seems a lot clearer even though I think we can do better over time.

Comment 7

[Bryan Clark (DevTools PM) [:clarkbw]]

we probably need a quick code review from someone and then can ask for tb3 approval

Comment 8

[Andreas Nilsson (:andreasn)]

Comment on attachment 409051 [details] [diff] [review]
updated patch

thanks for taking this review blake! I owe you one.

Comment 9

[Andreas Nilsson (:andreasn)]

Blake: you said you were about to check in a patch that would bitrot this one, but checking out the tree today my patch still worked well (maybe it didn't go in yet, will try later today as well). Will also add some select stuff in order to work with keyboard selection

Comment 10

[Andreas Nilsson (:andreasn)]

Attachment: updated patch with keyboard focus

Just waiting for this to bitrot now :)

Comment 11

[Andreas Nilsson (:andreasn)]

note that the above patch includes the keyboard focus

Comment 12

[Andreas Nilsson (:andreasn)]

Attachment: screenshot to aid the review

hovering message on top, hovering subject on bottom.

Comment 13

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 410206 [details] [diff] [review]
updated patch with keyboard focus

> .message:hover .message-subject {

Just to note for posterity, this doesn't need a matching
  .message:focus .message-subject {
because the message isn't in the tab order, and so won't get focus.  Only the message subject does.

>+.message .message-subject:hover {
>+  color: #ffffff;
>+  background-color: #729fcf;
>+}
>+
>+.message .message-subject:focus {
>+  color: #ffffff;
>+  background-color: #729fcf;
>+}

r=me, if you change that to:
.message .message-subject:hover,
.message .message-subject:focus {
  color: #ffffff;
  background-color: #729fcf;
}
and make sure it still works.  ;)

Thanks,
Blake.

Comment 14

[Andreas Nilsson (:andreasn)]

Attachment: updated to match bwintons comments

Here we go!

Comment 15

[Andreas Nilsson (:andreasn)]

Attachment: and one more thing for blake to be ok with it

same as last patch, but puts the two selectors on separate lines

Comment 16

[Bryan Clark (DevTools PM) [:clarkbw]]

Comment on attachment 410508 [details] [diff] [review]
and one more thing for blake to be ok with it

this is a pretty simple CSS change

Comment 17

[Mark Banner (:standard8)]

Checked in:
http://hg.mozilla.org/comm-central/rev/c933fab89d6d
http://hg.mozilla.org/releases/comm-1.9.1/rev/1062b3c037e3