Bug 48995 – Web Inspector: Need better way of switching back to the Timeline view of the Network tab

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[Xavier Morel]

In the -stable web inspector and the old Resources tab, it is possible to switch between the overall timeline view and a resource's details by selecting the resource, the Time graph or the Size graph.

In the new Network tab, there seems to be no such possibility: once a resource has been selected for inspection it is not possible to go back to the "bird's eye" view of resources, which is originally displayed (as a Time graph as well, it is not possible to see the Size graph anymore though that's probably a good thing)

Repro:
0. Open the web inspector
1. Switch to the Network tab
2. Open a page (e.g. google.com)
At this point you can see a list of resources and a graph on the right-hand side of the browser
3. Select a resource

Expected:
A way to go back to the state before 3.

Observed: 
No way to go back to the graph view, short of reloading the page

[Pavel Feldman]

(In reply to comment #0)
> In the -stable web inspector and the old Resources tab, it is possible to switch between the overall timeline view and a resource's details by selecting the resource, the Time graph or the Size graph.
> 
> In the new Network tab, there seems to be no such possibility: once a resource has been selected for inspection it is not possible to go back to the "bird's eye" view of resources, which is originally displayed (as a Time graph as well, it is not possible to see the Size graph anymore though that's probably a good thing)
> 
> Repro:
> 0. Open the web inspector
> 1. Switch to the Network tab
> 2. Open a page (e.g. google.com)
> At this point you can see a list of resources and a graph on the right-hand side of the browser
> 3. Select a resource
> 
> Expected:
> A way to go back to the state before 3.
> 
> Observed: 
> No way to go back to the graph view, short of reloading the page

- There is a "Close" icon in the top right corner of resource preview
- Esc hides the preview.

Leaving this bug open since we do need a more discoverable way of going back.

[Xavier Morel]

> - There is a "Close" icon in the top right corner of resource preview
Oh wow, I had completely missed it. Thank you very much.

> - Esc hides the preview.
This shortcut is very weird (and unexpected): as far as I know, in the inspector, in all tabs but the Console one, Esc shows a console pane. I really wouldn't have expected it to close anything.

[Kevin M. Dean]

Maybe moving the close icon to the left end of the bar just preceding the Headers and Content tabs would be better. Another idea would be a Show All button at the top of the left column. Another thought is clicking selects the resource and shows the Headers/Content, and Command-Clicking deselects the resource but doesn't remove the Headers/Content. Maybe it should if that's possible.

[Pavel Feldman]

Created attachment 72954 [details]
[PATCH] Proposed change.

[Pavel Feldman]

Committing to http://svn.webkit.org/repository/webkit/trunk ...
	M	WebCore/ChangeLog
	M	WebCore/inspector/InspectorController.cpp
	M	WebCore/inspector/InspectorState.cpp
	M	WebCore/inspector/InspectorState.h
	M	WebCore/inspector/front-end/AuditsPanel.js
	M	WebCore/inspector/front-end/DataGrid.js
	M	WebCore/inspector/front-end/NetworkPanel.js
	M	WebCore/inspector/front-end/inspector.css
	M	WebCore/inspector/front-end/networkPanel.css
Committed r71351