Bug 30725

Summary: Web Inspector: Implement a Timeline panel
Product: WebKit Reporter: Timothy Hatcher <timothy>
Component: Web Inspector (Deprecated)Assignee: Pavel Feldman <pfeldman>
Status: RESOLVED FIXED    
Severity: Normal CC: aroben, bweinstein, joepeck, pfeldman, rik, timothy
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Mock-up
none
Panel icon
none
[PATCH] Add panel
none
[IMAGE] Panel with image, sidebar and working record button
none
Timeline Images none

Description Timothy Hatcher 2009-10-23 11:42:18 PDT
Created attachment 41738 [details]
Mock-up

We want to make a new panel that gives you a whole page timeline for DOM events, loads, script execution, parsing, painting, etc.

Attached is a mock-up.
Comment 1 Timothy Hatcher 2009-10-23 11:43:44 PDT
Created attachment 41739 [details]
Panel icon
Comment 2 Pavel Feldman 2009-10-23 15:56:48 PDT
Created attachment 41757 [details]
[PATCH] Add panel
Comment 3 Pavel Feldman 2009-10-23 15:58:25 PDT
Created attachment 41758 [details]
[IMAGE] Panel with image, sidebar and working record button
Comment 4 Timothy Hatcher 2009-10-23 16:10:16 PDT
Comment on attachment 41757 [details]
[PATCH] Add panel

> +            this._itemTypeNames[itemTypes.RecalculateStyles] = WebInspector.UIString("Recalc Style");

Can we just have the UIString be "Recalculate Style"? I hate abbrivations in UI strings. I also would just lump it under Layout at a high level, but indiviually label it Recalculate Style.


>          }
> +        // Uncomment this when timeline is ready.

Add a newline between these lines.
Comment 5 Timothy Hatcher 2009-10-23 16:37:05 PDT
I guess my ain point was. Records in the sidebar should have specific named like you mention. But when it comes to the color and category we need a small list, so the summary graph is not too tall and sparse.

So DOM Event classified as Scripting, Style Recalc classified as Layout, etc.
Comment 6 Pavel Feldman 2009-10-23 17:41:42 PDT
(In reply to comment #5)
> I guess my ain point was. Records in the sidebar should have specific named
> like you mention. But when it comes to the color and category we need a small
> list, so the summary graph is not too tall and sparse.
> 
> So DOM Event classified as Scripting, Style Recalc classified as Layout, etc.

Ok, I agree that colors could be limited to the legend. Not sure DOM events should be classified as scripting or other details - lets decide later?
Comment 7 Pavel Feldman 2009-10-23 17:41:56 PDT
Committing to http://svn.webkit.org/repository/webkit/trunk ...
	M	WebCore/ChangeLog
	M	WebCore/English.lproj/localizedStrings.js
	M	WebCore/WebCore.gypi
	M	WebCore/WebCore.vcproj/WebCore.vcproj
	A	WebCore/inspector/front-end/Images/timelineIcon.png
	M	WebCore/inspector/front-end/TimelineAgent.js
	A	WebCore/inspector/front-end/TimelinePanel.js
	M	WebCore/inspector/front-end/WebKit.qrc
	M	WebCore/inspector/front-end/inspector.css
	M	WebCore/inspector/front-end/inspector.html
	M	WebCore/inspector/front-end/inspector.js
Committed r50015
Comment 8 Timothy Hatcher 2009-10-23 21:11:05 PDT
Created attachment 41776 [details]
Timeline Images

Images needed to make the Timeline panel.

The bars can be used as border images for both the short and tall summary bars.

The other images are to be used as CSS sprites.
Comment 9 Timothy Hatcher 2009-11-08 08:20:42 PST
Pavel is using other bugs for the remaining work. Closing.