too much clickable white area's in timeline view

[itsme@…]

in the timeline view, most of the blank space on the screen can be clicked, resulting in non obvious browser actions.

this is caused by display: block; at line 24 in timeline.css in the dt>:link, dt>:visited style.

if you remove the display: block; line, only the text of the links can be clicked.

this is with firefox 1.5

[cboos]

I wonder if this was not done on purpose. Any opinion on this?

I would be OK with the proposed change.

[Tim Hatch <trac@…>]

I like the current behavior (whole line being clickable), and I think ​Fitts' Law would back me up. The hover background color and the pointing hand seem obvious enough to me.

[itsme@…]

ah, i had not noticed the slight color change until now, on my (lcd/laptop)screen you can see it only at a very straight viewing angle.

there are several issues i have with the current behavior:

• when you try to select text, you have to put the mouse very far away from the text you are actually trying to select, to prevent the link from being clicked.
• when you want to raise the window from the background, by clicking on it, you usually accidentally click a link that you did not intent to click.
• it is not what i am used to, normally the clickable part of the link is only the underlined part.

[Tim Hatch <trac@…>]

Do you apply the same logic apply to the tables that have block-level anchors to fill the td, or is your issue only with the timeline, not all such links?

[cboos]

Note that in such tables (TracBrowser, TracQuery), while the whole line highlights on mouse over, only one column (one <td> element) is clickable. So the area in the page that you can use to raise the window remains quite large.

OTOH, in the Timeline it's difficult to quickly find such place. So the more I think about it, the more I tend to agree with the reporter.

[Tim Hatch <trac@…>]

Okay, I'll concede it can be changed. There are some interesting bits related to background position in that css file, and vertical padding on inline elements doesn't take effect, so we're left with something like this (which attempts to emulate the behavior with tables -- the whole line highlights but only part is clickable, up for discussion). See t3132.diff​

The doubly-layered images were there in an attempt to prevent flicker on rollover (see r616) in IE/Win. This is ineffective on my system using IE6 (caching on "Every visit to the page") so I've removed it because:

1. it was causing issues with vertical alignment in Firefox w/o display: block
2. there are better ways of solving it now. One better solution is described in ​http://dean.edwards.name/my/flicker.html (site sluggish today). Basically if you send an Expires header, IE will just cache unconditionally and fetch from the cache on hover.

If the current flicker-preventing code works for anyone in IE, then the expires code patch is not needed.

[cboos]

See also #5506.

[cboos]

In [6146], I simply removed the display: block line, as suggested.
I didn't notice any adverse effect by doing that (tested FF, Opera and IE7 where there was no flickering on hover), so I didn't see the need for the more complex patch posted by Tim.

If I overlooked something, please reopen.