1484256 - Network request detail is visually inconsistent with Network panel

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: console-request-details.png

The network request widget in the Console has a few visual inconsistencies or bugs, compared to the same content in the Network panel.

1. It seems to inherit the monospace font, which makes things like tabs bigger than necessary, and is overall different from the same content in the Network panel.

2. Headers: missing some styles for the HTTP status badge (text color, padding, border-radius).

3. The "No parameters for this request" text is maybe a bit too big in this context. It’s the same as in the Network panel but in the monospace font makes it look bigger, and we’re in a more compact context so I would make it smaller than in Network anyway. 16px or 18px (instead of 24px) looks better to me.

4. The timings bars are unstyled and thus invisible (there should be a visible long bar between "Waiting:" and "-> 202ms").

Comment 1

[Sahithik]

I would be interested working on this

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Hello Sahithik,

Thanks for offering help, I can assign you the bug.

In order to set up the work environment you can read http://docs.firefox-dev.tools/getting-started/ (make sure to use artifact build as it's much faster and it is enough for working on devtools code).
Feel free to ask any question here if you are experiencing problem building Firefox.

So here the goal of the bug is to find out what we are missing in the console in comparison to the network panel. It could be that we are missing a stylesheet, or that some rules aren't applied in console because in the netmonitor they are declared with a panel ancestor (something like `.netmonitor-panel .badge` for example).

In order to find out, you can use the browser toolbox (see https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) which is basically DevTools for "Chrome" (i.e. not the content page). So you'll be able to inspect console and netmonitor elements and see what's missing.

You can also come and chat with us on Slack https://devtools-html-slack.herokuapp.com/ (there's a #console channel there).

Have fun !

Comment 3

[Victoria Wang [:victoria]]

Great finds, thanks for filing this Florens!

Sidenote re: Nicolas' comment: Added a mention of artifact builds to https://github.com/devtools-html/ux/blob/master/README.md#implementing-your-own-design :)

Comment 4

[Florens Verschelde :fvsch]

I heard from the assignee that they will not be able to work on this.

I could take it, but maybe this could be a good-first-bug?

Comment 5

[Brian Grinstead [:bgrins]]

(In reply to Florens Verschelde from comment #4)
> I heard from the assignee that they will not be able to work on this.
> 
> I could take it, but maybe this could be a good-first-bug?

Please do.

Comment 6

[Florens Verschelde :fvsch]

> 2. Headers: missing some styles for the HTTP status badge (text color, padding, border-radius).

This will be addressed in bug 1495971.

Comment 7

[Patrick Brosset <:pbro>]

This bug has not been updated in the last 3 months. Resetting the assignee field.
Please, feel free to pick it up again and add a comment outlining your plans for it if you do still intend to work on it.
This is just trying to clean our backlog of bugs and make bugs available for people.

Comment 8

[:Harald Kirschner :digitarald]

Making it available.

Comment 9

[u634192]

I'm interested in working on the bug

Comment 10

[Florens Verschelde :fvsch]

Cool. :) If this is your first bug, you should follow these steps to get started:
https://docs.firefox-dev.tools/getting-started/build.html

In particular, don't skip the "Building even faster with artifact builds" section, because artifact builds are a great way to work on CSS and JS changes when you don't need to build any C/C++/Rust code.

I would break this bug in 3 parts:

1. Can we remove the devtools-monospace class on the request details container?
   (Selector for that container is: .message.network > .message-body-wrapper > .network-info)
   That's the main reason why we have a monospace font everywhere on this container, and it would be nice to use the same style (not monospace except for a few elements) as in Network.

2. Can we make the "No (cookies|parameters) for this request" message smaller? It's 24px currently. In my tests, 16px works well enough. (Feel free to suggest a different size if you think something else works better.)

3. We are missing the colors for the timing bars in the Timings tab. The selector seems to be .network-monitor .requests-list-timings-box in devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css. We'll have to investigate why we have more styles for this element in Network but not in Console. Maybe we forgot to include a stylesheet?

Comment 11

[Nikolai Lopin :nlopin]

Hello guys.

I took a rough look at the issue. Here is what I found:

1. The monospace font is set at the .network-info div as mentioned at the comment #10. It looks like it is not needed in this particular case, but it needs checks to confirm that assumption.

2. The "No Cookies for this request" message in the Console tab shares styles with the Network tab message. I don't see any problem adding some customization there

3. Timing colors seem to work properly. I don't see any difference between Console and Network tabs (see attachments)

I can take this bug if it is still relevant.

Comment 12

[Nikolai Lopin :nlopin]

Attachment: Console_timings_colors.png

Comment 13

[Nikolai Lopin :nlopin]

Attachment: Network_timings_colors.png

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

Hello,

Some of the issues were fixed in Bug 1436043 (including the timing colors), but I think you can go on with 1. and 2. :)

Comment 15

[Nikolai Lopin :nlopin]

Attachment: console_empty_tab.png

I've removed the monospace font family and the empty text looks proportional now. Plus it is 100% the same as in the Network tab. I don't see a reason to make the font size less.

Nicolas, what do you think?

Comment 16

[Nikolai Lopin :nlopin]

Attachment: console_empty_text_smaller.png

Here is the same tab but with the 18px font.

Comment 17

[Nicolas Chevobbe [:nchevobbe]]

I've removed the monospace font family and the empty text looks proportional now. Plus it is 100% the same as in the Network tab. I don't see a reason to make the font size less.

So in the netmonitor, the detail panel takes the whole height of the devtools panel, whereas in the console there's a max-height to it, which means it's often smaller. Furthermore, in the console there's a lot of other items (like, the other messages), and having this big text may put to much emphasis on it.
I guess that was Florens vision.

Florens, correct me if I'm wrong :)

Comment 18

[Nikolai Lopin :nlopin]

Attachment: Bug 1484256 - use regular font family for network tab in console. r=nchevobbe!

The network details section in Console tab used monospace font family which caused inconsistent UI with the same section in Network tab.

Comment 19

[Nikolai Lopin :nlopin]

Attachment: Bug 1484256 - decrease font size of the empty text in network details in Console. r=nchevobbe!

Depends on D58849

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/49166fb54a27
use regular font family for network tab in console. r=nchevobbe
https://hg.mozilla.org/integration/autoland/rev/6d1f0e2620a9
decrease font size of the empty text in network details in Console. r=nchevobbe

Comment 21

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/49166fb54a27
https://hg.mozilla.org/mozilla-central/rev/6d1f0e2620a9