[Listing] Display "friendly name" for response status codes

[lostintangent]

Most web devs probably know what a 200, 404, 500 etc. are, but the distinction between a 301 and 304 can be subtle for folks, and so displaying the "friendly name" in addition to just the actual status code can be pretty helpful (e.g. Moved Permanently vs. Not Modified).

This is definitely a nice-to-have, but it was something we did in the F12 network tool based on feedback, and we found it to be a simple improvement, somewhat similarly to how the Glimpse client displays a "friendly name" for well known middleware.

[nikmd23]

@chetsangnil, this is great feedback from @lostintangent and I agree with his suggestion.

Could you take a look at the list of status codes and their descriptions and figure out how we'd add this to the UI? A word of warning, some of the descriptions can get a little long, like 431 - Request Header Fields Too Large, so we'll want to make sure to account for those cases, as well as the short ones like 200 - OK.

[chetsangnil]

Looking into it now, no problem!

[nikmd23]

Hey @chetsangnil. I see this is marked as In Review now, would you mind posting the changes your proposing here?

[chetsangnil]

There you go! Nothing on the right panel got changed. I added the describtion of the status code right next to the Status number in the request panel.

[nikmd23]

I'll set up a call to discuss this. Much easier to be on the phone for design stuff.

[chetsangnil]

Updated mock: element that got changed are in the red box

[chetsangnil]

Here're 3 different variation for this issue:

V1.

V.2

V.3

My vote would be V.2 because it allows viewers to easily scan for various different content (Method, Status, and url) since they line up very nicely. For V1 and V3, I had difficult time scanning for content that matter to me but they maybe a more common way to display these kind of contents? What do you think?

[lostintangent]

I would also vote for v2

[nikmd23]

I voted for an edited version of V2. 😉

@chetsangnil will add another option soon.

[chetsangnil]

3 more edited versions!

V2.1

V2.2

V2.3

Let me know what you think! I do have the one i prefer in mind but I wonder if you would pick to same one ;)

[lostintangent]

I like v2.3 :)

[nikmd23]

Yeah, I think 2.3 is the winner as well. Let's go with it. I liked the idea of having the status icons aligned, but the spacing ends up looking a bit off.

I'm going to move this to devs to implement.

Note to the developers. OK is the standard message for a 200 and File Not Found is the standard message for 404, but they don't have to be. We should be sure to respect the response.statusMessage property.

[chetsangnil]

YES! I prefer v2.3 as well! Perfect, please move this into the development. Thanks guys for all the input, this is great :D

[chetsangnil]

Here's the clean up version of 2.3 (grouping request a little bit better) ready for development.

Full mock:

Element that got effected:

@avanderhoorn : Let me know when you need those status icon, I can send them over to you.

[nikmd23]

👍

[nikmd23]

This is now available in Glimpse for Node 0.16.4. Please see our announcement issue for more information.