Don’t merge request number and url.

[tobli]

Put request number in a separate element, so request url is shown unchanged (in hover and title). Right aligns the request number, and aligns the start position of all urls. Additionally reorders some code in row svg creation.

[tobli]

before: note the inclusion of request number in the <title>, and that the url shifts to the right from 9 to 10.

after: request number is now separate, and written right align in a space that's wide enough to fit all numbers.

[tobli]

@micmro and @soulgalore - I need some input on this. I'm separating request number into it's own element, which I think is good. However some of the other changes might be controversial, and should maybe to broken out. The layout still doesn't look good for HARs with hundreds of entries, especially not if at least one entry has multiple warning triangles (e.g. www.dn.se). I'd propose some additional changes enabled by this separation:

• collapse all warnings into one symbol (showing details on hover, and when expanding the overlay).
• put request number to the far left (and configurable)
• swap warning and mime icons (so mime and url are directly next to each other).

[micmro]

• collapse all warnings into one symbol (showing details on hover, and when expanding the overlay).

That's a pretty elegant solution - really like this. 👍

• put request number to the far left (and configurable)

Works for me

• swap warning and mime icons (so mime and url are directly next to each other).

No objects to this, I've just create a mockup, just to see what it looks like:

Before:

After (not sure with the first warning sign if we should move it as well):

[soulgalore]

This looks great!

After (not sure with the first warning sign if we should move it as well):

Maybe the first one should have a ? Or we move it in, it will probably look better.

[micmro]

can you just add a type for this?
@param {number} n

[tobli]

yeah, I'll fix that. Will check for a lint rule as well.

[tobli]

My idea for the main icon is to view it as "response status" that covers mime type (for 2xx replies), redirect (for 3xx) and errors (for 4/5xx). Anything else (e.g. missing gzip) is a warning that's listed in the additional icon column.