452906 - Long URLs smash the right column width

Status: RESOLVED FIXED

(Bugzilla :: User Interface, defect, P2)

Description

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Sort of the flip side of bug 452824; if there's actually a URL in the URL field, the field disappears and becomes an "inline" link with the URL as the link text.

Unfortunately, a long URL, like that in bug 386143 (or even the shorter URL in bug 452850) make the left column huge and smash the right column into a tiny space (depending on your window size, of course).

I think I'd much rather see the URL continue to sit in a text field (with the "URL" label serving as the active link) and have the text field be a bit longer as requested in bug 452824 than have an inline text link.  (As another plus, the URL field then remains tabable when it has data in it instead of only when it's empty, making the tab order more stable.)

Comment 1

[Tuukka Tolvanen (sp3000)]

Note that gecko 1.9 effectively mitigates those example cases by wrapping more aggressively. In opera 9.27 and konqueror 3.5.9 I see those example links ellipsized.

Comment 2

[timeless]

safari 1.x wraps them, but way too late for it to matter, damage is already done.

Comment 3

[Dave Miller [:justdave]]

Maybe put it in a <div> with a overflow: scroll on it, and let it scroll just that field horizontally if someone really wants to see the entire thing.  That'd give you a quick indication (via the proportional size of the thumb in most browsers) of how wide the URL really is, too.

Comment 4

[Guy Pyrzak]

My thought was to just truncate it (FILTER truncate) and use the title attribute to show the full URL. This is a more discoverable than the past method of making the URL label a link, which is why I changed how this worked. For new users the label being a link to the url in the field was not very discoverable.

Comment 5

[Dave Miller [:justdave]]

that would probably work.  There's a truncate method that does and elipsis in the middle, right?

Comment 6

[Max Kanat-Alexander]

Yes, truncate with elipsis. Using title might not work, though--titles are also truncated by the browser on display.

Comment 7

[Frédéric Buclin]

(In reply to comment #5)
> that would probably work.  There's a truncate method that does and elipsis in
> the middle, right?

Yes, that's the best solution. Modern browsers, such as Firefox 3, no longer truncates long titles. I don't remember if Opera 9.50 wraps long titles too or not.

I think URLs shouldn't be longer than the current width of the text field, so that column widths do no depend on whether there is a URL set or not.

Comment 8

[Guy Pyrzak]

Attachment: fix for URL breaking the column widths

Comment 9

[Max Kanat-Alexander]

Comment on attachment 336797 [details] [diff] [review]
fix for URL breaking the column widths

truncate then html-filter, not the other way around.

Comment 10

[Guy Pyrzak]

Attachment: fix for URL breaking the column widths v2

Comment 11

[Max Kanat-Alexander]

Comment on attachment 336800 [details] [diff] [review]
fix for URL breaking the column widths v2

I just looked, and there is no truncate filter, but there is a truncate scalar_op that we added, and you can add an elipsis in there, too.

Comment 12

[Guy Pyrzak]

(In reply to comment #11)
> (From update of attachment 336800 [details] [diff] [review])
> I just looked, and there is no truncate filter, but there is a truncate
> scalar_op that we added, and you can add an elipsis in there, too.

wrong. http://template-toolkit.org/docs/manual/Filters.html#section_truncate_length_dots_

Comment 13

[Max Kanat-Alexander]

Comment on attachment 336800 [details] [diff] [review]
fix for URL breaking the column widths v2

pyrzak showed me the truncate filter in the tt docs.

Comment 14

[Guy Pyrzak]

Checking in template/en/default/bug/edit.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/bug/edit.html.tmpl,v  <--  edit.html.tmpl
new revision: 1.131; previous revision: 1.130
done

Comment 15

[Guy Pyrzak]

Checking in template/en/default/bug/edit.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/bug/edit.html.tmpl,v  <--  edit.html.tmpl
new revision: 1.125.2.6; previous revision: 1.125.2.5
done