Bug 30725 - Web Inspector: Implement a Timeline panel
Summary: Web Inspector: Implement a Timeline panel
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Pavel Feldman
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2009-10-23 11:42 PDT by Timothy Hatcher
Modified: 2009-11-08 08:20 PST (History)
6 users (show)

See Also:


Attachments
Mock-up (74.88 KB, image/png)
2009-10-23 11:42 PDT, Timothy Hatcher
no flags Details
Panel icon (4.32 KB, image/png)
2009-10-23 11:43 PDT, Timothy Hatcher
no flags Details
[PATCH] Add panel (13.21 KB, patch)
2009-10-23 15:56 PDT, Pavel Feldman
no flags Details | Formatted Diff | Diff
[IMAGE] Panel with image, sidebar and working record button (159.15 KB, image/png)
2009-10-23 15:58 PDT, Pavel Feldman
no flags Details
Timeline Images (13.09 KB, application/zip)
2009-10-23 21:11 PDT, Timothy Hatcher
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.