Bug 30725 – Web Inspector: Implement a Timeline panel

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

[Timothy Hatcher]

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.

[Timothy Hatcher]

Created attachment 41739 [details]
Panel icon

[Pavel Feldman]

Created attachment 41757 [details]
[PATCH] Add panel

[Pavel Feldman]

Created attachment 41758 [details]
[IMAGE] Panel with image, sidebar and working record button

[Timothy Hatcher]

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.

[Timothy Hatcher]

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.

[Pavel Feldman]

(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?

[Pavel Feldman]

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

[Timothy Hatcher]

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.

[Timothy Hatcher]

Pavel is using other bugs for the remaining work. Closing.