Network request detail is visually inconsistent with Network panel
Categories
(DevTools :: Console, enhancement, P3)
Tracking
(firefox74 fixed)
Tracking | Status | |
---|---|---|
firefox74 | --- | fixed |
People
(Reporter: fvsch, Assigned: nlopin, Mentored)
Details
(Keywords: good-first-bug)
Attachments
(7 files)
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 2•6 years ago
|
||
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•6 years ago
|
||
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 :)
Reporter | ||
Comment 4•6 years ago
|
||
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•6 years ago
|
||
(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.
Reporter | ||
Comment 6•6 years ago
|
||
> 2. Headers: missing some styles for the HTTP status badge (text color, padding, border-radius). This will be addressed in bug 1495971.
Comment 7•6 years ago
|
||
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.
Reporter | ||
Comment 10•5 years ago
|
||
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:
-
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. -
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.)
-
We are missing the colors for the timing bars in the Timings tab. The selector seems to be
.network-monitor .requests-list-timings-box
indevtools/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?
Updated•5 years ago
|
Assignee | ||
Comment 11•5 years ago
|
||
Hello guys.
I took a rough look at the issue. Here is what I found:
-
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. -
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
-
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.
Assignee | ||
Comment 12•5 years ago
|
||
Assignee | ||
Comment 13•5 years ago
|
||
Comment 14•5 years ago
|
||
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. :)
Updated•5 years ago
|
Assignee | ||
Comment 15•5 years ago
|
||
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 17•5 years ago
|
||
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 :)
Assignee | ||
Comment 18•5 years ago
|
||
The network details section in Console tab used monospace font family which caused inconsistent UI with the same section in Network tab.
Updated•5 years ago
|
Updated•5 years ago
|
Comment 20•5 years ago
|
||
Pushed by nchevobbe@mozilla.com: 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•5 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/49166fb54a27
https://hg.mozilla.org/mozilla-central/rev/6d1f0e2620a9
Description
•