Long URL names overlap when wrapping

[jlarrew]

Long URL names that exceed the width of the list item wrap awkwardly and often overlap with other list items. See the image below for an example:

[jlarrew]

After some debugging, I discovered that there are potentially two causes for the overlapping text:

1. The tab doesn't have a favicon, or
2. The favicon URL is broken or otherwise unreadable.

If the favicon doesn't exist, then the browser will render the 'title' text instead. Since the display property for 'item' is set to inline-block, the tab title is printed on a newline. However, since the vertical size of 'item' is fixed, this extra line overlaps with neighboring items.

For the case of missing favicons, I was able to work around it by simply assigning one:

if (!f) f = chrome.runtime.getURL('images/logo_16.png');

For the case of a broken favicon URL, I simply set the favicon 'title' to something non-printable (instead of the full URL):

favicon.title = ' ';

There may be better solutions to the second case, but this works well enough for me. Here is what the same tab list looks like now:

[insaner]

I can confirm the bug (which has been annoying me as well for a while!) and the fix (thank you!).

I will be PR'ing the fix soon. Stay tuned.

[insaner]

I submitted the fix as PR 12
#12

[RJHsiao]

Well done!
I'll release with new version, which will released at the end of August(Maybe).

[insaner]

Awesome! Thank you! That's great news!

[RJHsiao]

@jlarrew & @insaner
New version released, thanks for your help!

[insaner]

That's amazing! Glad to have been of some help!