Closed Bug 1409413 Opened 7 years ago Closed 7 years ago

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

Categories

(DevTools :: Netmonitor, enhancement, P1)

Product:
DevTools
Component:
Netmonitor
Type:
enhancement

Tracking

(firefox57 wontfix, firefox58 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 58
Tracking Flags:
Tracking Status
firefox57 --- wontfix
firefox58 --- fixed

People

(Reporter: bgrins, Assigned: Honza)

References

Details

(Whiteboard: [reserve-console-html])

Attachments

(4 files, 2 obsolete files)

Bug 1409413 - Split Netmonitor styles into more files;
59 bytes, text/x-review-board-request
rickychien
: review+
Details
command-line.png
1.71 KB, image/png
Details
Bug 1409413 - Put shared styles into network-monitor context;
59 bytes, text/x-review-board-request
rickychien
: review+
Details
Bug 1409413 - Make sure text in the Console command line is v-centered;
59 bytes, text/x-review-board-request
nchevobbe
: review+
Details 
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.
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
Priority: P2 → P3
Whiteboard: [console-html][triage] → [reserve-console-html]
Assignee: nobody → odvarko
Status: NEW → ASSIGNED
Priority: P3 → P1
@Brian: I am attaching a patch the should solve the problem. Do you see any improvements?

Honza
Flags: needinfo?(bgrinstead)
Comment on attachment 8923800 [details]
Bug 1409413 - Split Netmonitor styles into more files;

https://reviewboard.mozilla.org/r/194934/#review200316
Attachment #8923800 - Flags: review?(rchien) → review+
Comment on attachment 8923801 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/194936/#review200320
Attachment #8923801 - Flags: review?(rchien) → review+
See Also: → 1409651
Attached image 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 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)
Attachment #8924125 - Flags: review?(nchevobbe) → review+
(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
Flags: needinfo?(bgrinstead) → needinfo?(odvarko)
(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
Flags: needinfo?(odvarko)
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)
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)
Attachment #8923801 - Attachment is obsolete: true
Attachment #8924125 - Attachment is obsolete: true
Attachment #8923801 - Attachment is obsolete: false
Attachment #8924125 - Attachment is obsolete: false
Attachment #8923801 - Attachment is obsolete: true
Attachment #8924125 - Attachment is obsolete: true
Comment on attachment 8925474 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/196590/#review201830
Attachment #8925474 - Flags: review+
Comment on attachment 8925474 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/196590/#review201832
Attachment #8925474 - Flags: review+
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
Attachment #8925475 - Flags: review?(nchevobbe) → review+
Comment on attachment 8925474 [details]
Bug 1409413 - Put shared styles into network-monitor context;

https://reviewboard.mozilla.org/r/196590/#review201866
Attachment #8925474 - Flags: review?(rchien) → review+
Pushed by jodvarko@mozilla.com:
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
Pushed by jodvarko@mozilla.com:
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
https://hg.mozilla.org/mozilla-central/rev/5ed21ce36c1b
https://hg.mozilla.org/mozilla-central/rev/9958747d871d
https://hg.mozilla.org/mozilla-central/rev/e96092796151
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
status-firefox58: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 58
(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
Depends on: 1439242
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: