1409413 - Split the styles needed to display requests in the webconsole into a separate css file

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P1)

Description

[Brian Grinstead [:bgrins]]

Right now we are loading the entire netmonitor.css file in the webconsole, which is causing extra reflow time (i.e. due to setting display:flex on the body). 

Rather than tracking down individual issues and overriding them, it would be better if we could split out only necessary styles for displaying the request / response component and import those styles from both the netmonitor and webconsole.

Comment 1

[Brian Grinstead [:bgrins]]

An example of the jank I'm seeing in the console:

Enter `for (var i = 0; i < 1000; i++) { console.log(i) }`
Try typing in the console input - each character takes a long time to show up

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Bug 1409413 - Split Netmonitor styles into more files;

Review commit: https://reviewboard.mozilla.org/r/194934/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/194934/

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Bug 1409413 - Put shared styles into network-monitor context;

Review commit: https://reviewboard.mozilla.org/r/194936/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/194936/

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Brian: I am attaching a patch the should solve the problem. Do you see any improvements?

Honza

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194934/diff/1-2/

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923801 [details]
Bug 1409413 - Put shared styles into network-monitor context;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194936/diff/1-2/

Comment 7

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

https://reviewboard.mozilla.org/r/194934/#review200316

Comment 8

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8923801 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/194936/#review200320

Comment 9

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Try push is green
https://treeherder.mozilla.org/#/jobs?repo=try&revision=60df1f7d00333c2aadaed9987b876f06f275d98d

Honza

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Bug 1409413 - Make sure text in the Console command line is v-centered;

Review commit: https://reviewboard.mozilla.org/r/195366/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/195366/

Comment 11

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194934/diff/2-3/

Comment 12

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923801 [details]
Bug 1409413 - Put shared styles into network-monitor context;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194936/diff/2-3/

Comment 13

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: command-line.png

@Nicolas: I had to append one style that ensures vertical alignment in the command line.

See the attached screenshot that shows the issue (if the patch is not applied).

Honza

Comment 14

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Comment on attachment 8924125 [details]
Bug 1409413 - Make sure text in the Console command line is v-centered;

https://reviewboard.mozilla.org/r/195366/#review200880

This looks good to me, both in new and old frontend (browser console)

Comment 15

[Brian Grinstead [:bgrins]]

(In reply to Jan Honza Odvarko [:Honza] from comment #4)
> @Brian: I am attaching a patch the should solve the problem. Do you see any
> improvements?

Can you remove the `display: block !important;` I put added as a workaround in Bug 1400176?  https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/webconsole.css#1137. Then I can confirm that we don't have any issues

Comment 16

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194934/diff/3-4/

Comment 17

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923801 [details]
Bug 1409413 - Put shared styles into network-monitor context;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194936/diff/3-4/

Comment 18

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8924125 [details]
Bug 1409413 - Make sure text in the Console command line is v-centered;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/195366/diff/1-2/

Comment 19

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Brian Grinstead [:bgrins] from comment #15)
> Can you remove the `display: block !important;` I put added as a workaround
> in Bug 1400176? 
> https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/
> webconsole.css#1137. Then I can confirm that we don't have any issues
Thanks, done.

Honza

Comment 20

[Mozilla Autoland]

We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s c3cad4aa58d6 -d dfc3f11935aa: rebasing 431895:c3cad4aa58d6 "Bug 1409413 - Split Netmonitor styles into more files; r=rickychien"
merging devtools/client/webconsole/webconsole.html
warning: conflicts while merging devtools/client/webconsole/webconsole.html! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)

Comment 21

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194934/diff/4-5/

Comment 22

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923801 [details]
Bug 1409413 - Put shared styles into network-monitor context;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194936/diff/4-5/

Comment 23

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8924125 [details]
Bug 1409413 - Make sure text in the Console command line is v-centered;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/195366/diff/2-3/

Comment 24

[Mozilla Autoland]

We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s a7cf0ffc26cb -d bbbd75cd12a9: rebasing 431896:a7cf0ffc26cb "Bug 1409413 - Split Netmonitor styles into more files; r=rickychien"
merging devtools/client/webconsole/webconsole.html
warning: conflicts while merging devtools/client/webconsole/webconsole.html! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)

Comment 25

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194934/diff/5-6/

Comment 26

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Bug 1409413 - Put shared styles into network-monitor context;

Review commit: https://reviewboard.mozilla.org/r/196590/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/196590/

Comment 27

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Bug 1409413 - Make sure text in the Console command line is v-centered;

Review commit: https://reviewboard.mozilla.org/r/196592/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/196592/

Comment 28

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194934/diff/6-7/

Comment 29

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8925474 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/196590/#review201830

Comment 30

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8925474 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/196590/#review201832

Comment 31

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Comment on attachment 8925475 [details]
Bug 1409413 - Make sure text in the Console command line is v-centered;

https://reviewboard.mozilla.org/r/196592/#review201836

Comment 32

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8925474 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/196590/#review201866

Comment 33

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/263fbdbfba96
Split Netmonitor styles into more files; r=rickychien
https://hg.mozilla.org/integration/autoland/rev/2f4dd6186137
Put shared styles into network-monitor context; r=rickychien
https://hg.mozilla.org/integration/autoland/rev/3a63235751b8
Make sure text in the Console command line is v-centered; r=nchevobbe

Comment 34

[Natalia Csoregi [:nataliaCs]]

Backed out 3 changesets (bug 1409413) for failing Devtools browser_net_headers-alignment.js 

https://hg.mozilla.org/integration/autoland/rev/772f0ebc6889484d1e17daf9062dffd1a17455e2

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=3a63235751b83f6382e268794970cc1222681334&filter-resultStatus=testfailed&filter-resultStatus=busted&filter-resultStatus=exception&filter-resultStatus=success&filter-resultStatus=usercancel

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=142405094&repo=autoland&lineNumber=6607

Comment 35

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/194934/diff/7-8/

Comment 36

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8925474 [details]
Bug 1409413 - Put shared styles into network-monitor context;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/196590/diff/1-2/

Comment 37

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8925475 [details]
Bug 1409413 - Make sure text in the Console command line is v-centered;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/196592/diff/1-2/

Comment 38

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Try is green, let's try to land this again.
https://treeherder.mozilla.org/#/jobs?repo=try&revision=e142416a6c76307b6fbcf28b73ffc48bdb1f5b0b

Honza

Comment 39

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5ed21ce36c1b
Split Netmonitor styles into more files; r=rickychien
https://hg.mozilla.org/integration/autoland/rev/9958747d871d
Put shared styles into network-monitor context; r=rickychien
https://hg.mozilla.org/integration/autoland/rev/e96092796151
Make sure text in the Console command line is v-centered; r=nchevobbe

Comment 40

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/5ed21ce36c1b
https://hg.mozilla.org/mozilla-central/rev/9958747d871d
https://hg.mozilla.org/mozilla-central/rev/e96092796151

Comment 41

[Johann Hofmann [:johannh]]

This caused a slight visual difference in the console, not sure if it was intended:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=4ea775c267be77107929d68799628a66027f3172&newProject=mozilla-central&newRev=62aeebcc676e93dc56a97d44753f4e2f963d43c3&filter=console

Comment 42

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Johann Hofmann [:johannh] from comment #41)
> This caused a slight visual difference in the console, not sure if it was
> intended:
> 
> https://screenshots.mattn.ca/compare/?oldProject=mozilla-
> central&oldRev=4ea775c267be77107929d68799628a66027f3172&newProject=mozilla-
> central&newRev=62aeebcc676e93dc56a97d44753f4e2f963d43c3&filter=console
I created a follow up: bug 1415137

Thanks!
Honza