| | 1 | = Proposed Web Inspector UI Refresh = |
| | 2 | |
| | 3 | The general idea is the resources sidebar takes up a lot of room and features of the current inspector are hard to find or use. So these mock-ups remove the resources sidebar and provides you with 4 sections—Elements, Resources, Databases and Scripts. The section names represent the fundamental items you will work with inside the respective sections. |
| | 4 | |
| | 5 | == Elements == |
| | 6 | |
| | 7 | The first mock-up is the Elements section. This is the DOM tree, with the ability to dig into nested frames. This mock-up also shows the console open at the bottom. When the console is opened, the bottom bar animates up to reveal the console underneath. |
| | 8 | |
| | 9 | You might notice we have a different looking search field too. This is based on the design in iPhoto 7, which has a search scope selection menu. The default scope would search everything, and the selector menu would let you pick an area to search. This could also be flipped, where the current scope if based on the current section and you switch it to search everything. |
| | 10 | |
| | 11 | The status bar below the console has the console toggle button and a clear console button. We also talked about adding scope buttons to that bar to filter the console content as desired. |
| | 12 | |
| | 13 | The next mock-up is the Resources section—a combination of the network timeline and the source view. This mock-up shows taller rows using file icon mode, which can be toggled in the status bar. When using file icon mode each row has an icon, and for image resources the icon would include a preview (not shown.) The status bar also has various controls to change shorting and grouping of the resources. We would have: don’t group, group by type and group by document (or frame). There are also two sorting modes: sort by time and sort by size. The sorting modes control what the graph shows, so when sorting by size the bars would graph file size. |
| | 14 | |
| | 15 | == Resources == |
| | 16 | |
| | 17 | The first mock up shows the Time graph. There are two graph types that we would have—Time and Size. When in a graph view you will see a summary graph and a line graph corresponding to the resources in the sidebar. The sorting and the graphs are disconnected, so you can change the sorting while still looking at the Time or Size graph. |
| | 18 | |
| | 19 | When you click on a resource, the graphs is replaces with the source view (or preview for images). The source view has the full URL and headers at the top. Also when you click on a resource the alternating rows in the sidebar fade out, since they are not useful when looking at the source. |
| | 20 | |
