983961 - Should be able to see my page as it was during any moment of page load

Status: NEW

(DevTools :: Netmonitor, defect)

Description

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

User story:

I want to optimize for the above-the-fold content of my page to be shown quickly. That doesn't correspond exactly with onload or any DOM event. It has to do with a subset of my CSS and a subset of my content and possibly some JS (but hopefully not). I want to be able to view what my page looks like at various times during load so I can see exactly when the content is visible to the user.

----------------------------------------------

Implementation I'm imagining:

When the user has the network monitor focused and refreshes the page, we should take screenshots every n milliseconds while the page is loading until after onload fires or network activity stops or something.

Then, we show these captured screenshots as film strip thumbnails across the top or bottom of the waterfall (sort of like some video editing software: http://static.ddmcdn.com/gif/video-edit-timeline.jpg). As the user moves the mouse across the time x-axis of the waterfall, we can show a larger version of what the page looked like at that corresponding time. Maybe this would be another view, not sure. ni?ing Darrin for an opinion on this.

Comment 1

[Darrin Henein [:darrin]]

I like this idea Nick! This also has a nice tie-in with vporof's canvas filmstrip view we recently saw demoed. 

My only concern is adding a row of thumbnails would occupy some vertical space, which as we know is at a premium these days ;) I think the primary UX challenge here will be adding the UI in a way that doesn't get in the way of the rest of the panel. This should probably be something that is toggle-able, as well.

Comment 2

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Yeah definitely toggle-able.