Bug 158938 – Web Inspector: preview content view for MIME type application/json should be a collapsible tree outline

• Component: Web Inspector
• Status: RESOLVED FIXED

Created attachment 281647 [details]
Chrome vs. Safari

Would like to see better formatting in the Network tab with JSON responses. Currently the payload is displayed as indented text, which can be cumbersome and difficult to parse especially if the response is a list of items. The dev tools in Chrome do a better job of handling this situation. See attached. Chrome displays each item in the list individually, so it's easy to drill down and find a specific record.

[Radar WebKit Bug Importer]

<rdar://problem/26891128>

[Joseph Pecoraro]

<rdar://problem/11279262>

[Joseph Pecoraro]

Created attachment 322595 [details]
[IMAGE] Text - Default view is still the response text

[Joseph Pecoraro]

Created attachment 322596 [details]
[IMAGE] JSON - Initial View of a JSON Response

[Joseph Pecoraro]

Created attachment 322597 [details]
[IMAGE] JSON - Expanded View

[Joseph Pecoraro]

Created attachment 322598 [details]
[IMAGE] JSON - Expanded More

[Joseph Pecoraro]

Created attachment 322599 [details]
[PATCH] Proposed Fix

[Joseph Pecoraro]

Comment on attachment 322595 [details]
[IMAGE] Text - Default view is still the response text

Oops this was clearly the wrong image!

[Joseph Pecoraro]

Created attachment 322602 [details]
[IMAGE] Text - Default view is still the response text

[Matt Baker]

Comment on attachment 322599 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=322599&action=review

r=me, with minor nits.

> Source/WebInspectorUI/ChangeLog:23
> +        JSON view evaluates the json content on the page and shows an ObjectTree

Nit: json -> JSON

> Source/WebInspectorUI/ChangeLog:42
> +        In this case the only one we have is a JSON response can get a JSON view.

Nit: the second sentence is somewhat awkward.

> Source/WebInspectorUI/UserInterface/Views/ResourceClusterContentView.js:131
> +    get customResponseContentView()

This getter could be simplified a little:

get customResponseContentView()
{
    if (!this._canShowCustomResponseContentView())
        return null;

    if (!this._customResponseContentView)
        this._customResponseContentView = new this._customResponseContentViewConstructor(this._resource);

    return this._customResponseContentView;
}

[Matt Baker]

Comment on attachment 322599 [details]
[PATCH] Proposed Fix

Okay I can reproduce this fairly often now:

1. Goto theverge.com
2. Open Network tab (legacy view)
3. Filter by XHRs, bring up a content view for one of the JSON resources
4. Change view to JSON
5. Click one of the other tree elements
  => Content view does not change

Debugging the Inspector shows that tree selection handler is bailing out early at NetworkGridContentView.js:393.

[Matt Baker]

(In reply to Matt Baker from comment #11)
> Comment on attachment 322599 [details]
> [PATCH] Proposed Fix
> 
> Okay I can reproduce this fairly often now:
> 
> 1. Goto theverge.com
> 2. Open Network tab (legacy view)
> 3. Filter by XHRs, bring up a content view for one of the JSON resources
> 4. Change view to JSON
> 5. Click one of the other tree elements
>   => Content view does not change
> 
> Debugging the Inspector shows that tree selection handler is bailing out
> early at NetworkGridContentView.js:393.

Sometimes it is necessary to do steps 1-4, reload the page, and then repeat the steps again to trigger the bug.

[Joseph Pecoraro]

I see, it may be worth just waiting until the legacy network tab goes away instead of spending time to change its behavior.

[Joseph Pecoraro]

Created attachment 324484 [details]
[PATCH] Proposed Fix

Rebaselined. The legacy network tab doesn't exist anymore so its bugs are no longer relevant and don't need to be worked around!

[Blaze Burg]

Comment on attachment 324484 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=324484&action=review

r=me

Do we want JSON trees in the request as well, if they payload contains JSON-like data? (This would be a followup patch)

> Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:509
> +localizedStrings["JSON"] = "JSON";

I don't think this is localizable.

> Source/WebInspectorUI/UserInterface/Views/JSONResourceContentView.js:47
> +            JSON.parse(content);

This all seems rather duplicative, but I guess it's fine?

[WebKit Commit Bot]

Comment on attachment 324484 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 324484

Committed r223806: <https://trac.webkit.org/changeset/223806>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.