1504146 - Pretty printing in the Response side panel

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

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

The Response side panel could offer pretty printing option to pretty-print minified resource. The panel could also detect those minified resources and pretty print them automatically.

Pretty printing UI could be exactly the same as in Debugger source tab - an {} icon at the bottom of the panel.

Honza

Comment 1

[pipio1994]

Hi @Jan, I just googled how to pretty print html in firefox dev tool today and saw this issue. I'd like to work on this since it would be helpful for tasks like debugging server side rendering, fb sharing, etc. If it's OK could I work on this? Thanks!

Comment 2

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

(In reply to pipio1994 from comment #1)
> Hi @Jan, I just googled how to pretty print html in firefox dev tool today
> and saw this issue. I'd like to work on this since it would be helpful for
> tasks like debugging server side rendering, fb sharing, etc. If it's OK
> could I work on this? Thanks!
Yas, thanks!


@Jason, how could we utilize existing pretty printing API from the Debugger?

Honza

Comment 3

[Jason Laster [:jlast]]

I think we'll want to create the parserWorkerService in the toolbox in the same way that we create the sourceMapService [1] and pass it into the debugger panel [2].

Once the parser worker is in the toolbox, we can pass the parser worker to the net monitor and use it directly. The API is fairly straight forward [3]



[1] https://searchfox.org/mozilla-central/source/devtools/client/framework/toolbox.js#608-613
[2] https://searchfox.org/mozilla-central/source/devtools/client/debugger/new/panel.js#34
[3] https://searchfox.org/mozilla-central/source/devtools/client/debugger/new/src/actions/sources/prettyPrint.js#51

Comment 4

[pipio1994]

@Jan Thanks for your reply!

@Jason Thanks for guidance. I'll try to look into this in the next few days.

Comment 5

[Neha]

Hello @Jan,
If this issue is still available, could it be assigned to me?
I would like to work on it.
Thanks!

Comment 6

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

(In reply to Neha from comment #5)

If this issue is still available, could it be assigned to me?

No activity in the last 3 months, so yes.

I would like to work on it.

It's yours, thanks for helping.

Honza

Comment 7

[Neha]

Hi @jlast, @honza,

I can see that the source is stored inside text in line#183 and this is used to create the editor panel for the received source in line#238. We have to check here if text has a pretty source and based on that we can show the Accessible Image for PrettyPrint from devtools/client/debugger/new/src/components/shared/.

In the SourceTreeItem in Debugger, this check is done in line#278 in mapStateToProps() with the checkHasPrettySource(state, source.id) function. Can you please help me with these three questions:

1. How we can use the checkHasPrettySource(state, source.id) function which comes from selectors for netmonitor response text? I followed the calls as listed here:

• hasPrettySource() ->
• getPrettySource() ->
• getOriginalSourceByURL() ->
• getSpecificSourceByURL() ->
• getSpecificSourceByURLInSources() ->
• isOriginalSource() ,
  but how to use the functions here is not clear.

2. In the checkHasPrettySource(state, source.id) in line#278, the source has an id property also, but the response text in netmonitor does not seem to have one.

3. There is also another file named pretty-print-worker.js in devtools/client/debugger/new/dist alongside parser-worker.js. Should we use this directly or we use the parser-worker file?

Also, could you please describe a bit more in detail how to create the parserWorkerService in the toolbox and how to pass in the debugger panel? The lines numbers in your comment seem to be pointing at different ones.

Thanks!

Comment 8

[Patrick Brosset <:pbro>]

I just noticed that questions were asked here, but honza was not needinfo'd, so he likely did not see them. Let me set the flag so this bug shows up on his radar.

Comment 9

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

Jason, how could we share pretty printing with debugger - to pretty print HTTP JS responses in the Network's Response side panel?

Honza

Comment 10

[Jason Laster [:jlast]]

Hi Neha, sorry for the delay. Here is a sketch of what I would change patch

Notice how the pretty print worker is created in the toolbox so it can be shared with the debugger and net monitor :)

Comment 11

[:Harald Kirschner :digitarald]

Since this might change how the input is rendered into a text area, bug 1556114 could be a consideration for this planning.

Comment 12

[Patrick Brosset <:pbro>]

Hi Neha, are you still interested in working on this bug? If not, please do let us know so it can be made available to others.