report(topbar): fix overflowing url

[psybuzz]

This modifies UI in the topbar to

• Show a tooltip when the URL is hovered
• Truncate the URL from the end via CSS, based on available space
• Round Lighthouse icon in the topbar used to shrink due to flexbox, and disappear. Now, it doesn't flex so it should maintain its size.

Screenshot: https://imgur.com/a/2DQ5RmV

Issue: #9142
Associated Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=971585

[psybuzz]

Hello Lighthouse reviewers! I heard there might be a way to truncate from the middle, but I couldn't find the utility. The screenshot above shows truncation from the right, which I think looks okay. What do others think?

[patrickhulce]

LGTM thanks very much @psybuzz!

@connorjclark was this the method you had in mind for fixing it?

[connorjclark]

yup this is perfect.

[psybuzz]

Thanks for the reviews! I'm not authorized to merge this PR, so feel free to merge it at will.

[patrickhulce]

It is line break/word wrap related so I feel like we at least have to give @paulirish a chance if he wants since it's almost as if those CSS properties have declared war on us 😆

[brendankenny]

LGTM, thanks for taking this, though has someone double checked how this works/looks in DevTools, where the bug originated?

[exterkamp]

I'll pile onto the LGTM 🚂

[connorjclark]

LGTM, thanks for taking this, though has someone double checked how this works/looks in DevTools, where the bug originated?

Perhaps @psybuzz could try that out. I could too, would just take awhile to build Chromium away from my desktop.

@psybuzz: basically you just build everything (yarn && yarn build-devtools) then roll to Chromium folder (yarn devtools). If the folder is in the standard location, it'll work. Otherwise, see roll-to-devtools.sh and symlink the folder it's trying to use. Then you can see how it looks in DevTools.

Alternatively, these changes seem benign enough to assume they'll work in DevTools (pending "jinx"...)

[paulirish]

iz good.

[psybuzz]

Thanks everyone!