Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js |
index 107ae0dfbdbfa2e9df7c4cd5c708e2bfebe11969..729c6a150652a76d3e6edb29f01c3dd97365bb11 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js |
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js |
@@ -28,462 +28,510 @@ |
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
*/ |
- |
-/** |
- * @constructor |
- */ |
-WebInspector.TimelineUIUtils = function() { }; |
- |
-/** |
- * @constructor |
- * @param {string} title |
- * @param {!WebInspector.TimelineCategory} category |
- * @param {boolean=} hidden |
- */ |
-WebInspector.TimelineRecordStyle = function(title, category, hidden) |
-{ |
- this.title = title; |
- this.category = category; |
- this.hidden = !!hidden; |
-}; |
- |
/** |
- * @return {!Object.<string, !WebInspector.TimelineRecordStyle>} |
+ * @unrestricted |
*/ |
-WebInspector.TimelineUIUtils._initEventStyles = function() |
-{ |
+WebInspector.TimelineUIUtils = class { |
+ /** |
+ * @return {!Object.<string, !WebInspector.TimelineRecordStyle>} |
+ */ |
+ static _initEventStyles() { |
if (WebInspector.TimelineUIUtils._eventStylesMap) |
- return WebInspector.TimelineUIUtils._eventStylesMap; |
+ return WebInspector.TimelineUIUtils._eventStylesMap; |
var recordTypes = WebInspector.TimelineModel.RecordType; |
var categories = WebInspector.TimelineUIUtils.categories(); |
var eventStyles = {}; |
- eventStyles[recordTypes.Task] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Task"), categories["other"]); |
- eventStyles[recordTypes.Program] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Other"), categories["other"]); |
- eventStyles[recordTypes.Animation] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Animation"), categories["rendering"]); |
- eventStyles[recordTypes.EventDispatch] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Event"), categories["scripting"]); |
- eventStyles[recordTypes.RequestMainThreadFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Request Main Thread Frame"), categories["rendering"], true); |
- eventStyles[recordTypes.BeginFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Frame Start"), categories["rendering"], true); |
- eventStyles[recordTypes.BeginMainThreadFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Frame Start (main thread)"), categories["rendering"], true); |
- eventStyles[recordTypes.DrawFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Draw Frame"), categories["rendering"], true); |
- eventStyles[recordTypes.HitTest] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Hit Test"), categories["rendering"]); |
- eventStyles[recordTypes.ScheduleStyleRecalculation] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Schedule Style Recalculation"), categories["rendering"], true); |
- eventStyles[recordTypes.RecalculateStyles] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Recalculate Style"), categories["rendering"]); |
- eventStyles[recordTypes.UpdateLayoutTree] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Recalculate Style"), categories["rendering"]); |
- eventStyles[recordTypes.InvalidateLayout] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Invalidate Layout"), categories["rendering"], true); |
- eventStyles[recordTypes.Layout] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Layout"), categories["rendering"]); |
- eventStyles[recordTypes.PaintSetup] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint Setup"), categories["painting"]); |
- eventStyles[recordTypes.PaintImage] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint Image"), categories["painting"], true); |
- eventStyles[recordTypes.UpdateLayer] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Update Layer"), categories["painting"], true); |
- eventStyles[recordTypes.UpdateLayerTree] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Update Layer Tree"), categories["rendering"]); |
- eventStyles[recordTypes.Paint] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint"), categories["painting"]); |
- eventStyles[recordTypes.RasterTask] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Rasterize Paint"), categories["painting"]); |
- eventStyles[recordTypes.ScrollLayer] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Scroll"), categories["rendering"]); |
- eventStyles[recordTypes.CompositeLayers] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Composite Layers"), categories["painting"]); |
- eventStyles[recordTypes.ParseHTML] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Parse HTML"), categories["loading"]); |
- eventStyles[recordTypes.ParseAuthorStyleSheet] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Parse Stylesheet"), categories["loading"]); |
- eventStyles[recordTypes.TimerInstall] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Install Timer"), categories["scripting"]); |
- eventStyles[recordTypes.TimerRemove] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Remove Timer"), categories["scripting"]); |
- eventStyles[recordTypes.TimerFire] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Timer Fired"), categories["scripting"]); |
- eventStyles[recordTypes.XHRReadyStateChange] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("XHR Ready State Change"), categories["scripting"]); |
- eventStyles[recordTypes.XHRLoad] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("XHR Load"), categories["scripting"]); |
- eventStyles[recordTypes.CompileScript] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Compile Script"), categories["scripting"]); |
- eventStyles[recordTypes.EvaluateScript] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Evaluate Script"), categories["scripting"]); |
- eventStyles[recordTypes.ParseScriptOnBackground] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Parse Script"), categories["scripting"]); |
- eventStyles[recordTypes.MarkLoad] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Load event"), categories["scripting"], true); |
- eventStyles[recordTypes.MarkDOMContent] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("DOMContentLoaded event"), categories["scripting"], true); |
- eventStyles[recordTypes.MarkFirstPaint] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("First paint"), categories["painting"], true); |
- eventStyles[recordTypes.TimeStamp] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Timestamp"), categories["scripting"]); |
- eventStyles[recordTypes.ConsoleTime] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Console Time"), categories["scripting"]); |
- eventStyles[recordTypes.UserTiming] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("User Timing"), categories["scripting"]); |
- eventStyles[recordTypes.ResourceSendRequest] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Send Request"), categories["loading"]); |
- eventStyles[recordTypes.ResourceReceiveResponse] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Receive Response"), categories["loading"]); |
- eventStyles[recordTypes.ResourceFinish] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Finish Loading"), categories["loading"]); |
- eventStyles[recordTypes.ResourceReceivedData] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Receive Data"), categories["loading"]); |
- eventStyles[recordTypes.RunMicrotasks] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Run Microtasks"), categories["scripting"]); |
- eventStyles[recordTypes.FunctionCall] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Function Call"), categories["scripting"]); |
- eventStyles[recordTypes.GCEvent] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("GC Event"), categories["scripting"]); |
- eventStyles[recordTypes.MajorGC] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Major GC"), categories["scripting"]); |
- eventStyles[recordTypes.MinorGC] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Minor GC"), categories["scripting"]); |
- eventStyles[recordTypes.JSFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("JS Frame"), categories["scripting"]); |
- eventStyles[recordTypes.RequestAnimationFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Request Animation Frame"), categories["scripting"]); |
- eventStyles[recordTypes.CancelAnimationFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Cancel Animation Frame"), categories["scripting"]); |
- eventStyles[recordTypes.FireAnimationFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Animation Frame Fired"), categories["scripting"]); |
- eventStyles[recordTypes.RequestIdleCallback] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Request Idle Callback"), categories["scripting"]); |
- eventStyles[recordTypes.CancelIdleCallback] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Cancel Idle Callback"), categories["scripting"]); |
- eventStyles[recordTypes.FireIdleCallback] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Fire Idle Callback"), categories["scripting"]); |
- eventStyles[recordTypes.WebSocketCreate] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Create WebSocket"), categories["scripting"]); |
- eventStyles[recordTypes.WebSocketSendHandshakeRequest] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Send WebSocket Handshake"), categories["scripting"]); |
- eventStyles[recordTypes.WebSocketReceiveHandshakeResponse] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Receive WebSocket Handshake"), categories["scripting"]); |
- eventStyles[recordTypes.WebSocketDestroy] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Destroy WebSocket"), categories["scripting"]); |
- eventStyles[recordTypes.EmbedderCallback] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Embedder Callback"), categories["scripting"]); |
- eventStyles[recordTypes.DecodeImage] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Image Decode"), categories["painting"]); |
- eventStyles[recordTypes.ResizeImage] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Image Resize"), categories["painting"]); |
- eventStyles[recordTypes.GPUTask] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("GPU"), categories["gpu"]); |
- eventStyles[recordTypes.LatencyInfo] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Input Latency"), categories["scripting"]); |
- |
- eventStyles[recordTypes.GCIdleLazySweep] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("DOM GC"), categories["scripting"]); |
- eventStyles[recordTypes.GCCompleteSweep] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("DOM GC"), categories["scripting"]); |
- eventStyles[recordTypes.GCCollectGarbage] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("DOM GC"), categories["scripting"]); |
+ eventStyles[recordTypes.Task] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Task'), categories['other']); |
+ eventStyles[recordTypes.Program] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Other'), categories['other']); |
+ eventStyles[recordTypes.Animation] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Animation'), categories['rendering']); |
+ eventStyles[recordTypes.EventDispatch] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Event'), categories['scripting']); |
+ eventStyles[recordTypes.RequestMainThreadFrame] = new WebInspector.TimelineRecordStyle( |
+ WebInspector.UIString('Request Main Thread Frame'), categories['rendering'], true); |
+ eventStyles[recordTypes.BeginFrame] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Frame Start'), categories['rendering'], true); |
+ eventStyles[recordTypes.BeginMainThreadFrame] = new WebInspector.TimelineRecordStyle( |
+ WebInspector.UIString('Frame Start (main thread)'), categories['rendering'], true); |
+ eventStyles[recordTypes.DrawFrame] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Draw Frame'), categories['rendering'], true); |
+ eventStyles[recordTypes.HitTest] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Hit Test'), categories['rendering']); |
+ eventStyles[recordTypes.ScheduleStyleRecalculation] = new WebInspector.TimelineRecordStyle( |
+ WebInspector.UIString('Schedule Style Recalculation'), categories['rendering'], true); |
+ eventStyles[recordTypes.RecalculateStyles] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Recalculate Style'), categories['rendering']); |
+ eventStyles[recordTypes.UpdateLayoutTree] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Recalculate Style'), categories['rendering']); |
+ eventStyles[recordTypes.InvalidateLayout] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Invalidate Layout'), categories['rendering'], true); |
+ eventStyles[recordTypes.Layout] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Layout'), categories['rendering']); |
+ eventStyles[recordTypes.PaintSetup] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Paint Setup'), categories['painting']); |
+ eventStyles[recordTypes.PaintImage] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Paint Image'), categories['painting'], true); |
+ eventStyles[recordTypes.UpdateLayer] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Update Layer'), categories['painting'], true); |
+ eventStyles[recordTypes.UpdateLayerTree] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Update Layer Tree'), categories['rendering']); |
+ eventStyles[recordTypes.Paint] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Paint'), categories['painting']); |
+ eventStyles[recordTypes.RasterTask] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Rasterize Paint'), categories['painting']); |
+ eventStyles[recordTypes.ScrollLayer] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Scroll'), categories['rendering']); |
+ eventStyles[recordTypes.CompositeLayers] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Composite Layers'), categories['painting']); |
+ eventStyles[recordTypes.ParseHTML] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Parse HTML'), categories['loading']); |
+ eventStyles[recordTypes.ParseAuthorStyleSheet] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Parse Stylesheet'), categories['loading']); |
+ eventStyles[recordTypes.TimerInstall] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Install Timer'), categories['scripting']); |
+ eventStyles[recordTypes.TimerRemove] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Remove Timer'), categories['scripting']); |
+ eventStyles[recordTypes.TimerFire] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Timer Fired'), categories['scripting']); |
+ eventStyles[recordTypes.XHRReadyStateChange] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('XHR Ready State Change'), categories['scripting']); |
+ eventStyles[recordTypes.XHRLoad] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('XHR Load'), categories['scripting']); |
+ eventStyles[recordTypes.CompileScript] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Compile Script'), categories['scripting']); |
+ eventStyles[recordTypes.EvaluateScript] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Evaluate Script'), categories['scripting']); |
+ eventStyles[recordTypes.ParseScriptOnBackground] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Parse Script'), categories['scripting']); |
+ eventStyles[recordTypes.MarkLoad] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Load event'), categories['scripting'], true); |
+ eventStyles[recordTypes.MarkDOMContent] = new WebInspector.TimelineRecordStyle( |
+ WebInspector.UIString('DOMContentLoaded event'), categories['scripting'], true); |
+ eventStyles[recordTypes.MarkFirstPaint] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('First paint'), categories['painting'], true); |
+ eventStyles[recordTypes.TimeStamp] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Timestamp'), categories['scripting']); |
+ eventStyles[recordTypes.ConsoleTime] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Console Time'), categories['scripting']); |
+ eventStyles[recordTypes.UserTiming] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('User Timing'), categories['scripting']); |
+ eventStyles[recordTypes.ResourceSendRequest] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Send Request'), categories['loading']); |
+ eventStyles[recordTypes.ResourceReceiveResponse] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Receive Response'), categories['loading']); |
+ eventStyles[recordTypes.ResourceFinish] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Finish Loading'), categories['loading']); |
+ eventStyles[recordTypes.ResourceReceivedData] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Receive Data'), categories['loading']); |
+ eventStyles[recordTypes.RunMicrotasks] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Run Microtasks'), categories['scripting']); |
+ eventStyles[recordTypes.FunctionCall] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Function Call'), categories['scripting']); |
+ eventStyles[recordTypes.GCEvent] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('GC Event'), categories['scripting']); |
+ eventStyles[recordTypes.MajorGC] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Major GC'), categories['scripting']); |
+ eventStyles[recordTypes.MinorGC] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Minor GC'), categories['scripting']); |
+ eventStyles[recordTypes.JSFrame] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('JS Frame'), categories['scripting']); |
+ eventStyles[recordTypes.RequestAnimationFrame] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Request Animation Frame'), categories['scripting']); |
+ eventStyles[recordTypes.CancelAnimationFrame] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Cancel Animation Frame'), categories['scripting']); |
+ eventStyles[recordTypes.FireAnimationFrame] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Animation Frame Fired'), categories['scripting']); |
+ eventStyles[recordTypes.RequestIdleCallback] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Request Idle Callback'), categories['scripting']); |
+ eventStyles[recordTypes.CancelIdleCallback] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Cancel Idle Callback'), categories['scripting']); |
+ eventStyles[recordTypes.FireIdleCallback] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Fire Idle Callback'), categories['scripting']); |
+ eventStyles[recordTypes.WebSocketCreate] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Create WebSocket'), categories['scripting']); |
+ eventStyles[recordTypes.WebSocketSendHandshakeRequest] = new WebInspector.TimelineRecordStyle( |
+ WebInspector.UIString('Send WebSocket Handshake'), categories['scripting']); |
+ eventStyles[recordTypes.WebSocketReceiveHandshakeResponse] = new WebInspector.TimelineRecordStyle( |
+ WebInspector.UIString('Receive WebSocket Handshake'), categories['scripting']); |
+ eventStyles[recordTypes.WebSocketDestroy] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Destroy WebSocket'), categories['scripting']); |
+ eventStyles[recordTypes.EmbedderCallback] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Embedder Callback'), categories['scripting']); |
+ eventStyles[recordTypes.DecodeImage] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Image Decode'), categories['painting']); |
+ eventStyles[recordTypes.ResizeImage] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Image Resize'), categories['painting']); |
+ eventStyles[recordTypes.GPUTask] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('GPU'), categories['gpu']); |
+ eventStyles[recordTypes.LatencyInfo] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('Input Latency'), categories['scripting']); |
+ |
+ eventStyles[recordTypes.GCIdleLazySweep] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('DOM GC'), categories['scripting']); |
+ eventStyles[recordTypes.GCCompleteSweep] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('DOM GC'), categories['scripting']); |
+ eventStyles[recordTypes.GCCollectGarbage] = |
+ new WebInspector.TimelineRecordStyle(WebInspector.UIString('DOM GC'), categories['scripting']); |
WebInspector.TimelineUIUtils._eventStylesMap = eventStyles; |
return eventStyles; |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TimelineIRModel.InputEvents} inputEventType |
- * @return {?string} |
- */ |
-WebInspector.TimelineUIUtils.inputEventDisplayName = function(inputEventType) |
-{ |
+ /** |
+ * @param {!WebInspector.TimelineIRModel.InputEvents} inputEventType |
+ * @return {?string} |
+ */ |
+ static inputEventDisplayName(inputEventType) { |
if (!WebInspector.TimelineUIUtils._inputEventToDisplayName) { |
- var inputEvent = WebInspector.TimelineIRModel.InputEvents; |
- |
- /** @type {!Map<!WebInspector.TimelineIRModel.InputEvents, string>} */ |
- WebInspector.TimelineUIUtils._inputEventToDisplayName = new Map([ |
- [inputEvent.Char, WebInspector.UIString("Key Character")], |
- [inputEvent.KeyDown, WebInspector.UIString("Key Down")], |
- [inputEvent.KeyDownRaw, WebInspector.UIString("Key Down")], |
- [inputEvent.KeyUp, WebInspector.UIString("Key Up")], |
- [inputEvent.Click, WebInspector.UIString("Click")], |
- [inputEvent.ContextMenu, WebInspector.UIString("Context Menu")], |
- [inputEvent.MouseDown, WebInspector.UIString("Mouse Down")], |
- [inputEvent.MouseMove, WebInspector.UIString("Mouse Move")], |
- [inputEvent.MouseUp, WebInspector.UIString("Mouse Up")], |
- [inputEvent.MouseWheel, WebInspector.UIString("Mouse Wheel")], |
- [inputEvent.ScrollBegin, WebInspector.UIString("Scroll Begin")], |
- [inputEvent.ScrollEnd, WebInspector.UIString("Scroll End")], |
- [inputEvent.ScrollUpdate, WebInspector.UIString("Scroll Update")], |
- [inputEvent.FlingStart, WebInspector.UIString("Fling Start")], |
- [inputEvent.FlingCancel, WebInspector.UIString("Fling Halt")], |
- [inputEvent.Tap, WebInspector.UIString("Tap")], |
- [inputEvent.TapCancel, WebInspector.UIString("Tap Halt")], |
- [inputEvent.ShowPress, WebInspector.UIString("Tap Begin")], |
- [inputEvent.TapDown, WebInspector.UIString("Tap Down")], |
- [inputEvent.TouchCancel, WebInspector.UIString("Touch Cancel")], |
- [inputEvent.TouchEnd, WebInspector.UIString("Touch End")], |
- [inputEvent.TouchMove, WebInspector.UIString("Touch Move")], |
- [inputEvent.TouchStart, WebInspector.UIString("Touch Start")], |
- [inputEvent.PinchBegin, WebInspector.UIString("Pinch Begin")], |
- [inputEvent.PinchEnd, WebInspector.UIString("Pinch End")], |
- [inputEvent.PinchUpdate, WebInspector.UIString("Pinch Update")] |
- ]); |
+ var inputEvent = WebInspector.TimelineIRModel.InputEvents; |
+ |
+ /** @type {!Map<!WebInspector.TimelineIRModel.InputEvents, string>} */ |
+ WebInspector.TimelineUIUtils._inputEventToDisplayName = new Map([ |
+ [inputEvent.Char, WebInspector.UIString('Key Character')], |
+ [inputEvent.KeyDown, WebInspector.UIString('Key Down')], |
+ [inputEvent.KeyDownRaw, WebInspector.UIString('Key Down')], |
+ [inputEvent.KeyUp, WebInspector.UIString('Key Up')], |
+ [inputEvent.Click, WebInspector.UIString('Click')], |
+ [inputEvent.ContextMenu, WebInspector.UIString('Context Menu')], |
+ [inputEvent.MouseDown, WebInspector.UIString('Mouse Down')], |
+ [inputEvent.MouseMove, WebInspector.UIString('Mouse Move')], |
+ [inputEvent.MouseUp, WebInspector.UIString('Mouse Up')], |
+ [inputEvent.MouseWheel, WebInspector.UIString('Mouse Wheel')], |
+ [inputEvent.ScrollBegin, WebInspector.UIString('Scroll Begin')], |
+ [inputEvent.ScrollEnd, WebInspector.UIString('Scroll End')], |
+ [inputEvent.ScrollUpdate, WebInspector.UIString('Scroll Update')], |
+ [inputEvent.FlingStart, WebInspector.UIString('Fling Start')], |
+ [inputEvent.FlingCancel, WebInspector.UIString('Fling Halt')], |
+ [inputEvent.Tap, WebInspector.UIString('Tap')], |
+ [inputEvent.TapCancel, WebInspector.UIString('Tap Halt')], |
+ [inputEvent.ShowPress, WebInspector.UIString('Tap Begin')], |
+ [inputEvent.TapDown, WebInspector.UIString('Tap Down')], |
+ [inputEvent.TouchCancel, WebInspector.UIString('Touch Cancel')], |
+ [inputEvent.TouchEnd, WebInspector.UIString('Touch End')], |
+ [inputEvent.TouchMove, WebInspector.UIString('Touch Move')], |
+ [inputEvent.TouchStart, WebInspector.UIString('Touch Start')], |
+ [inputEvent.PinchBegin, WebInspector.UIString('Pinch Begin')], |
+ [inputEvent.PinchEnd, WebInspector.UIString('Pinch End')], |
+ [inputEvent.PinchUpdate, WebInspector.UIString('Pinch Update')] |
+ ]); |
} |
return WebInspector.TimelineUIUtils._inputEventToDisplayName.get(inputEventType) || null; |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} traceEvent |
- * @param {!RegExp} regExp |
- * @return {boolean} |
- */ |
-WebInspector.TimelineUIUtils.testContentMatching = function(traceEvent, regExp) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} traceEvent |
+ * @param {!RegExp} regExp |
+ * @return {boolean} |
+ */ |
+ static testContentMatching(traceEvent, regExp) { |
var title = WebInspector.TimelineUIUtils.eventStyle(traceEvent).title; |
var tokens = [title]; |
if (traceEvent.url) |
- tokens.push(traceEvent.url); |
+ tokens.push(traceEvent.url); |
for (var argName in traceEvent.args) { |
- var argValue = traceEvent.args[argName]; |
- for (var key in argValue) |
- tokens.push(argValue[key]); |
+ var argValue = traceEvent.args[argName]; |
+ for (var key in argValue) |
+ tokens.push(argValue[key]); |
} |
- return regExp.test(tokens.join("|")); |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineModel.Record} record |
- * @return {!WebInspector.TimelineCategory} |
- */ |
-WebInspector.TimelineUIUtils.categoryForRecord = function(record) |
-{ |
+ return regExp.test(tokens.join('|')); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineModel.Record} record |
+ * @return {!WebInspector.TimelineCategory} |
+ */ |
+ static categoryForRecord(record) { |
return WebInspector.TimelineUIUtils.eventStyle(record.traceEvent()).category; |
-}; |
- |
+ } |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @return {!{title: string, category: !WebInspector.TimelineCategory}} |
- */ |
-WebInspector.TimelineUIUtils.eventStyle = function(event) |
-{ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @return {!{title: string, category: !WebInspector.TimelineCategory}} |
+ */ |
+ static eventStyle(event) { |
var eventStyles = WebInspector.TimelineUIUtils._initEventStyles(); |
- if (event.hasCategory(WebInspector.TimelineModel.Category.Console) || event.hasCategory(WebInspector.TimelineModel.Category.UserTiming)) |
- return { title: event.name, category: WebInspector.TimelineUIUtils.categories()["scripting"] }; |
+ if (event.hasCategory(WebInspector.TimelineModel.Category.Console) || |
+ event.hasCategory(WebInspector.TimelineModel.Category.UserTiming)) |
+ return {title: event.name, category: WebInspector.TimelineUIUtils.categories()['scripting']}; |
if (event.hasCategory(WebInspector.TimelineModel.Category.LatencyInfo)) { |
- /** @const */ |
- var prefix = "InputLatency::"; |
- var inputEventType = event.name.startsWith(prefix) ? event.name.substr(prefix.length) : event.name; |
- var displayName = WebInspector.TimelineUIUtils.inputEventDisplayName(/** @type {!WebInspector.TimelineIRModel.InputEvents} */ (inputEventType)); |
- return { title: displayName || inputEventType, category: WebInspector.TimelineUIUtils.categories()["scripting"] }; |
+ /** @const */ |
+ var prefix = 'InputLatency::'; |
+ var inputEventType = event.name.startsWith(prefix) ? event.name.substr(prefix.length) : event.name; |
+ var displayName = WebInspector.TimelineUIUtils.inputEventDisplayName( |
+ /** @type {!WebInspector.TimelineIRModel.InputEvents} */ (inputEventType)); |
+ return {title: displayName || inputEventType, category: WebInspector.TimelineUIUtils.categories()['scripting']}; |
} |
var result = eventStyles[event.name]; |
if (!result) { |
- result = new WebInspector.TimelineRecordStyle(event.name, WebInspector.TimelineUIUtils.categories()["other"], true); |
- eventStyles[event.name] = result; |
+ result = |
+ new WebInspector.TimelineRecordStyle(event.name, WebInspector.TimelineUIUtils.categories()['other'], true); |
+ eventStyles[event.name] = result; |
} |
return result; |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @return {string} |
- */ |
-WebInspector.TimelineUIUtils.eventColor = function(event) |
-{ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @return {string} |
+ */ |
+ static eventColor(event) { |
if (event.name === WebInspector.TimelineModel.RecordType.JSFrame) { |
- var frame = event.args["data"]; |
- if (WebInspector.TimelineUIUtils.isUserFrame(frame)) |
- return WebInspector.TimelineUIUtils.colorForURL(frame.url); |
+ var frame = event.args['data']; |
+ if (WebInspector.TimelineUIUtils.isUserFrame(frame)) |
+ return WebInspector.TimelineUIUtils.colorForURL(frame.url); |
} |
return WebInspector.TimelineUIUtils.eventStyle(event).category.color; |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @return {string} |
- */ |
-WebInspector.TimelineUIUtils.eventTitle = function(event) |
-{ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @return {string} |
+ */ |
+ static eventTitle(event) { |
var title = WebInspector.TimelineUIUtils.eventStyle(event).title; |
if (event.hasCategory(WebInspector.TimelineModel.Category.Console)) |
- return title; |
+ return title; |
if (event.name === WebInspector.TimelineModel.RecordType.TimeStamp) |
- return WebInspector.UIString("%s: %s", title, event.args["data"]["message"]); |
- if (event.name === WebInspector.TimelineModel.RecordType.Animation && event.args["data"] && event.args["data"]["name"]) |
- return WebInspector.UIString("%s: %s", title, event.args["data"]["name"]); |
+ return WebInspector.UIString('%s: %s', title, event.args['data']['message']); |
+ if (event.name === WebInspector.TimelineModel.RecordType.Animation && event.args['data'] && |
+ event.args['data']['name']) |
+ return WebInspector.UIString('%s: %s', title, event.args['data']['name']); |
return title; |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @return {?string} |
- */ |
-WebInspector.TimelineUIUtils.eventURL = function(event) |
-{ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @return {?string} |
+ */ |
+ static eventURL(event) { |
if (event.url) |
- return event.url; |
- var data = event.args["data"] || event.args["beginData"]; |
+ return event.url; |
+ var data = event.args['data'] || event.args['beginData']; |
return data && data.url || null; |
-}; |
+ } |
-/** |
- * !Map<!WebInspector.TimelineIRModel.Phases, !{color: string, label: string}> |
- */ |
-WebInspector.TimelineUIUtils._interactionPhaseStyles = function() |
-{ |
+ /** |
+ * !Map<!WebInspector.TimelineIRModel.Phases, !{color: string, label: string}> |
+ */ |
+ static _interactionPhaseStyles() { |
var map = WebInspector.TimelineUIUtils._interactionPhaseStylesMap; |
if (!map) { |
- map = new Map([ |
- [WebInspector.TimelineIRModel.Phases.Idle, {color: "white", label: "Idle"}], |
- [WebInspector.TimelineIRModel.Phases.Response, {color: "hsl(43, 83%, 64%)", label: WebInspector.UIString("Response")}], |
- [WebInspector.TimelineIRModel.Phases.Scroll, {color: "hsl(256, 67%, 70%)", label: WebInspector.UIString("Scroll")}], |
- [WebInspector.TimelineIRModel.Phases.Fling, {color: "hsl(256, 67%, 70%)", label: WebInspector.UIString("Fling")}], |
- [WebInspector.TimelineIRModel.Phases.Drag, {color: "hsl(256, 67%, 70%)", label: WebInspector.UIString("Drag")}], |
- [WebInspector.TimelineIRModel.Phases.Animation, {color: "hsl(256, 67%, 70%)", label: WebInspector.UIString("Animation")}], |
- [WebInspector.TimelineIRModel.Phases.Uncategorized, {color: "hsl(0, 0%, 87%)", label: WebInspector.UIString("Uncategorized")}] |
- ]); |
- WebInspector.TimelineUIUtils._interactionPhaseStylesMap = map; |
+ map = new Map([ |
+ [WebInspector.TimelineIRModel.Phases.Idle, {color: 'white', label: 'Idle'}], |
+ [ |
+ WebInspector.TimelineIRModel.Phases.Response, |
+ {color: 'hsl(43, 83%, 64%)', label: WebInspector.UIString('Response')} |
+ ], |
+ [ |
+ WebInspector.TimelineIRModel.Phases.Scroll, |
+ {color: 'hsl(256, 67%, 70%)', label: WebInspector.UIString('Scroll')} |
+ ], |
+ [ |
+ WebInspector.TimelineIRModel.Phases.Fling, |
+ {color: 'hsl(256, 67%, 70%)', label: WebInspector.UIString('Fling')} |
+ ], |
+ [WebInspector.TimelineIRModel.Phases.Drag, {color: 'hsl(256, 67%, 70%)', label: WebInspector.UIString('Drag')}], |
+ [ |
+ WebInspector.TimelineIRModel.Phases.Animation, |
+ {color: 'hsl(256, 67%, 70%)', label: WebInspector.UIString('Animation')} |
+ ], |
+ [ |
+ WebInspector.TimelineIRModel.Phases.Uncategorized, |
+ {color: 'hsl(0, 0%, 87%)', label: WebInspector.UIString('Uncategorized')} |
+ ] |
+ ]); |
+ WebInspector.TimelineUIUtils._interactionPhaseStylesMap = map; |
} |
return map; |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TimelineIRModel.Phases} phase |
- * @return {string} |
- */ |
-WebInspector.TimelineUIUtils.interactionPhaseColor = function(phase) |
-{ |
+ /** |
+ * @param {!WebInspector.TimelineIRModel.Phases} phase |
+ * @return {string} |
+ */ |
+ static interactionPhaseColor(phase) { |
return WebInspector.TimelineUIUtils._interactionPhaseStyles().get(phase).color; |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TimelineIRModel.Phases} phase |
- * @return {string} |
- */ |
-WebInspector.TimelineUIUtils.interactionPhaseLabel = function(phase) |
-{ |
+ /** |
+ * @param {!WebInspector.TimelineIRModel.Phases} phase |
+ * @return {string} |
+ */ |
+ static interactionPhaseLabel(phase) { |
return WebInspector.TimelineUIUtils._interactionPhaseStyles().get(phase).label; |
-}; |
- |
-/** |
- * @param {!RuntimeAgent.CallFrame} frame |
- * @return {boolean} |
- */ |
-WebInspector.TimelineUIUtils.isUserFrame = function(frame) |
-{ |
- return frame.scriptId !== "0" && !(frame.url && frame.url.startsWith("native ")); |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @return {?RuntimeAgent.CallFrame} |
- */ |
-WebInspector.TimelineUIUtils.topStackFrame = function(event) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!RuntimeAgent.CallFrame} frame |
+ * @return {boolean} |
+ */ |
+ static isUserFrame(frame) { |
+ return frame.scriptId !== '0' && !(frame.url && frame.url.startsWith('native ')); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @return {?RuntimeAgent.CallFrame} |
+ */ |
+ static topStackFrame(event) { |
var stackTrace = event.stackTrace || event.initiator && event.initiator.stackTrace; |
return stackTrace && stackTrace.length ? stackTrace[0] : null; |
-}; |
+ } |
-/** |
- * @enum {symbol} |
- */ |
-WebInspector.TimelineUIUtils.NetworkCategory = { |
- HTML: Symbol("HTML"), |
- Script: Symbol("Script"), |
- Style: Symbol("Style"), |
- Media: Symbol("Media"), |
- Other: Symbol("Other") |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineModel.NetworkRequest} request |
- * @return {!WebInspector.TimelineUIUtils.NetworkCategory} |
- */ |
-WebInspector.TimelineUIUtils.networkRequestCategory = function(request) |
-{ |
+ /** |
+ * @param {!WebInspector.TimelineModel.NetworkRequest} request |
+ * @return {!WebInspector.TimelineUIUtils.NetworkCategory} |
+ */ |
+ static networkRequestCategory(request) { |
var categories = WebInspector.TimelineUIUtils.NetworkCategory; |
switch (request.mimeType) { |
- case "text/html": |
+ case 'text/html': |
return categories.HTML; |
- case "application/javascript": |
- case "application/x-javascript": |
- case "text/javascript": |
+ case 'application/javascript': |
+ case 'application/x-javascript': |
+ case 'text/javascript': |
return categories.Script; |
- case "text/css": |
+ case 'text/css': |
return categories.Style; |
- case "audio/ogg": |
- case "image/gif": |
- case "image/jpeg": |
- case "image/png": |
- case "image/svg+xml": |
- case "image/webp": |
- case "image/x-icon": |
- case "font/opentype": |
- case "font/woff2": |
- case "application/font-woff": |
+ case 'audio/ogg': |
+ case 'image/gif': |
+ case 'image/jpeg': |
+ case 'image/png': |
+ case 'image/svg+xml': |
+ case 'image/webp': |
+ case 'image/x-icon': |
+ case 'font/opentype': |
+ case 'font/woff2': |
+ case 'application/font-woff': |
return categories.Media; |
- default: |
+ default: |
return categories.Other; |
} |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TimelineUIUtils.NetworkCategory} category |
- * @return {string} |
- */ |
-WebInspector.TimelineUIUtils.networkCategoryColor = function(category) |
-{ |
+ /** |
+ * @param {!WebInspector.TimelineUIUtils.NetworkCategory} category |
+ * @return {string} |
+ */ |
+ static networkCategoryColor(category) { |
var categories = WebInspector.TimelineUIUtils.NetworkCategory; |
switch (category) { |
- case categories.HTML: return "hsl(214, 67%, 66%)"; |
- case categories.Script: return "hsl(43, 83%, 64%)"; |
- case categories.Style: return "hsl(256, 67%, 70%)"; |
- case categories.Media: return "hsl(109, 33%, 55%)"; |
- default: return "hsl(0, 0%, 70%)"; |
+ case categories.HTML: |
+ return 'hsl(214, 67%, 66%)'; |
+ case categories.Script: |
+ return 'hsl(43, 83%, 64%)'; |
+ case categories.Style: |
+ return 'hsl(256, 67%, 70%)'; |
+ case categories.Media: |
+ return 'hsl(109, 33%, 55%)'; |
+ default: |
+ return 'hsl(0, 0%, 70%)'; |
} |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {?WebInspector.Target} target |
- * @return {?string} |
- */ |
-WebInspector.TimelineUIUtils.buildDetailsTextForTraceEvent = function(event, target) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {?WebInspector.Target} target |
+ * @return {?string} |
+ */ |
+ static buildDetailsTextForTraceEvent(event, target) { |
var recordType = WebInspector.TimelineModel.RecordType; |
var detailsText; |
- var eventData = event.args["data"]; |
+ var eventData = event.args['data']; |
switch (event.name) { |
- case recordType.GCEvent: |
- case recordType.MajorGC: |
- case recordType.MinorGC: |
- var delta = event.args["usedHeapSizeBefore"] - event.args["usedHeapSizeAfter"]; |
- detailsText = WebInspector.UIString("%s collected", Number.bytesToString(delta)); |
+ case recordType.GCEvent: |
+ case recordType.MajorGC: |
+ case recordType.MinorGC: |
+ var delta = event.args['usedHeapSizeBefore'] - event.args['usedHeapSizeAfter']; |
+ detailsText = WebInspector.UIString('%s collected', Number.bytesToString(delta)); |
break; |
- case recordType.FunctionCall: |
+ case recordType.FunctionCall: |
// Omit internally generated script names. |
if (eventData) |
- detailsText = linkifyLocationAsText(eventData["scriptId"], eventData["lineNumber"], 0); |
+ detailsText = linkifyLocationAsText(eventData['scriptId'], eventData['lineNumber'], 0); |
break; |
- case recordType.JSFrame: |
- detailsText = WebInspector.beautifyFunctionName(eventData["functionName"]); |
+ case recordType.JSFrame: |
+ detailsText = WebInspector.beautifyFunctionName(eventData['functionName']); |
break; |
- case recordType.EventDispatch: |
- detailsText = eventData ? eventData["type"] : null; |
+ case recordType.EventDispatch: |
+ detailsText = eventData ? eventData['type'] : null; |
break; |
- case recordType.Paint: |
+ case recordType.Paint: |
var width = WebInspector.TimelineUIUtils.quadWidth(eventData.clip); |
var height = WebInspector.TimelineUIUtils.quadHeight(eventData.clip); |
if (width && height) |
- detailsText = WebInspector.UIString("%d\u2009\u00d7\u2009%d", width, height); |
+ detailsText = WebInspector.UIString('%d\u2009\u00d7\u2009%d', width, height); |
break; |
- case recordType.ParseHTML: |
- var endLine = event.args["endData"] && event.args["endData"]["endLine"]; |
- var url = WebInspector.displayNameForURL(event.args["beginData"]["url"]); |
- detailsText = WebInspector.UIString("%s [%s\u2026%s]", url, event.args["beginData"]["startLine"] + 1, endLine >= 0 ? endLine + 1 : ""); |
+ case recordType.ParseHTML: |
+ var endLine = event.args['endData'] && event.args['endData']['endLine']; |
+ var url = WebInspector.displayNameForURL(event.args['beginData']['url']); |
+ detailsText = WebInspector.UIString( |
+ '%s [%s\u2026%s]', url, event.args['beginData']['startLine'] + 1, endLine >= 0 ? endLine + 1 : ''); |
break; |
- case recordType.CompileScript: |
- case recordType.EvaluateScript: |
- var url = eventData && eventData["url"]; |
+ case recordType.CompileScript: |
+ case recordType.EvaluateScript: |
+ var url = eventData && eventData['url']; |
if (url) |
- detailsText = WebInspector.displayNameForURL(url) + ":" + (eventData["lineNumber"] + 1); |
+ detailsText = WebInspector.displayNameForURL(url) + ':' + (eventData['lineNumber'] + 1); |
break; |
- case recordType.ParseScriptOnBackground: |
- case recordType.XHRReadyStateChange: |
- case recordType.XHRLoad: |
- var url = eventData["url"]; |
+ case recordType.ParseScriptOnBackground: |
+ case recordType.XHRReadyStateChange: |
+ case recordType.XHRLoad: |
+ var url = eventData['url']; |
if (url) |
- detailsText = WebInspector.displayNameForURL(url); |
+ detailsText = WebInspector.displayNameForURL(url); |
break; |
- case recordType.TimeStamp: |
- detailsText = eventData["message"]; |
+ case recordType.TimeStamp: |
+ detailsText = eventData['message']; |
break; |
- case recordType.WebSocketCreate: |
- case recordType.WebSocketSendHandshakeRequest: |
- case recordType.WebSocketReceiveHandshakeResponse: |
- case recordType.WebSocketDestroy: |
- case recordType.ResourceSendRequest: |
- case recordType.ResourceReceivedData: |
- case recordType.ResourceReceiveResponse: |
- case recordType.ResourceFinish: |
- case recordType.PaintImage: |
- case recordType.DecodeImage: |
- case recordType.ResizeImage: |
- case recordType.DecodeLazyPixelRef: |
+ case recordType.WebSocketCreate: |
+ case recordType.WebSocketSendHandshakeRequest: |
+ case recordType.WebSocketReceiveHandshakeResponse: |
+ case recordType.WebSocketDestroy: |
+ case recordType.ResourceSendRequest: |
+ case recordType.ResourceReceivedData: |
+ case recordType.ResourceReceiveResponse: |
+ case recordType.ResourceFinish: |
+ case recordType.PaintImage: |
+ case recordType.DecodeImage: |
+ case recordType.ResizeImage: |
+ case recordType.DecodeLazyPixelRef: |
if (event.url) |
- detailsText = WebInspector.displayNameForURL(event.url); |
+ detailsText = WebInspector.displayNameForURL(event.url); |
break; |
- case recordType.EmbedderCallback: |
- detailsText = eventData["callbackName"]; |
+ case recordType.EmbedderCallback: |
+ detailsText = eventData['callbackName']; |
break; |
- case recordType.Animation: |
- detailsText = eventData && eventData["name"]; |
+ case recordType.Animation: |
+ detailsText = eventData && eventData['name']; |
break; |
- case recordType.GCIdleLazySweep: |
- detailsText = WebInspector.UIString("idle sweep"); |
+ case recordType.GCIdleLazySweep: |
+ detailsText = WebInspector.UIString('idle sweep'); |
break; |
- case recordType.GCCompleteSweep: |
- detailsText = WebInspector.UIString("complete sweep"); |
+ case recordType.GCCompleteSweep: |
+ detailsText = WebInspector.UIString('complete sweep'); |
break; |
- case recordType.GCCollectGarbage: |
- detailsText = WebInspector.UIString("collect"); |
+ case recordType.GCCollectGarbage: |
+ detailsText = WebInspector.UIString('collect'); |
break; |
- default: |
+ default: |
if (event.hasCategory(WebInspector.TimelineModel.Category.Console)) |
- detailsText = null; |
+ detailsText = null; |
else |
- detailsText = linkifyTopCallFrameAsText(); |
+ detailsText = linkifyTopCallFrameAsText(); |
break; |
} |
@@ -495,110 +543,108 @@ WebInspector.TimelineUIUtils.buildDetailsTextForTraceEvent = function(event, tar |
* @param {number} columnNumber |
* @return {?string} |
*/ |
- function linkifyLocationAsText(scriptId, lineNumber, columnNumber) |
- { |
- var debuggerModel = WebInspector.DebuggerModel.fromTarget(target); |
- if (!target || target.isDisposed() || !scriptId || !debuggerModel) |
- return null; |
- var rawLocation = debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber); |
- if (!rawLocation) |
- return null; |
- var uiLocation = WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(rawLocation); |
- return uiLocation.linkText(); |
+ function linkifyLocationAsText(scriptId, lineNumber, columnNumber) { |
+ var debuggerModel = WebInspector.DebuggerModel.fromTarget(target); |
+ if (!target || target.isDisposed() || !scriptId || !debuggerModel) |
+ return null; |
+ var rawLocation = debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber); |
+ if (!rawLocation) |
+ return null; |
+ var uiLocation = WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(rawLocation); |
+ return uiLocation.linkText(); |
} |
/** |
* @return {?string} |
*/ |
- function linkifyTopCallFrameAsText() |
- { |
- var frame = WebInspector.TimelineUIUtils.topStackFrame(event); |
- if (!frame) |
- return null; |
- var text = linkifyLocationAsText(frame.scriptId, frame.lineNumber, frame.columnNumber); |
- if (!text) { |
- text = frame.url; |
- if (typeof frame.lineNumber === "number") |
- text += ":" + (frame.lineNumber + 1); |
- } |
- return text; |
+ function linkifyTopCallFrameAsText() { |
+ var frame = WebInspector.TimelineUIUtils.topStackFrame(event); |
+ if (!frame) |
+ return null; |
+ var text = linkifyLocationAsText(frame.scriptId, frame.lineNumber, frame.columnNumber); |
+ if (!text) { |
+ text = frame.url; |
+ if (typeof frame.lineNumber === 'number') |
+ text += ':' + (frame.lineNumber + 1); |
+ } |
+ return text; |
} |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {?WebInspector.Target} target |
- * @param {!WebInspector.Linkifier} linkifier |
- * @return {?Node} |
- */ |
-WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent = function(event, target, linkifier) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {?WebInspector.Target} target |
+ * @param {!WebInspector.Linkifier} linkifier |
+ * @return {?Node} |
+ */ |
+ static buildDetailsNodeForTraceEvent(event, target, linkifier) { |
var recordType = WebInspector.TimelineModel.RecordType; |
var details = null; |
var detailsText; |
- var eventData = event.args["data"]; |
+ var eventData = event.args['data']; |
switch (event.name) { |
- case recordType.GCEvent: |
- case recordType.MajorGC: |
- case recordType.MinorGC: |
- case recordType.EventDispatch: |
- case recordType.Paint: |
- case recordType.Animation: |
- case recordType.EmbedderCallback: |
- case recordType.ParseHTML: |
- case recordType.WebSocketCreate: |
- case recordType.WebSocketSendHandshakeRequest: |
- case recordType.WebSocketReceiveHandshakeResponse: |
- case recordType.WebSocketDestroy: |
- case recordType.GCIdleLazySweep: |
- case recordType.GCCompleteSweep: |
- case recordType.GCCollectGarbage: |
+ case recordType.GCEvent: |
+ case recordType.MajorGC: |
+ case recordType.MinorGC: |
+ case recordType.EventDispatch: |
+ case recordType.Paint: |
+ case recordType.Animation: |
+ case recordType.EmbedderCallback: |
+ case recordType.ParseHTML: |
+ case recordType.WebSocketCreate: |
+ case recordType.WebSocketSendHandshakeRequest: |
+ case recordType.WebSocketReceiveHandshakeResponse: |
+ case recordType.WebSocketDestroy: |
+ case recordType.GCIdleLazySweep: |
+ case recordType.GCCompleteSweep: |
+ case recordType.GCCollectGarbage: |
detailsText = WebInspector.TimelineUIUtils.buildDetailsTextForTraceEvent(event, target); |
break; |
- case recordType.PaintImage: |
- case recordType.DecodeImage: |
- case recordType.ResizeImage: |
- case recordType.DecodeLazyPixelRef: |
- case recordType.XHRReadyStateChange: |
- case recordType.XHRLoad: |
- case recordType.ResourceSendRequest: |
- case recordType.ResourceReceivedData: |
- case recordType.ResourceReceiveResponse: |
- case recordType.ResourceFinish: |
+ case recordType.PaintImage: |
+ case recordType.DecodeImage: |
+ case recordType.ResizeImage: |
+ case recordType.DecodeLazyPixelRef: |
+ case recordType.XHRReadyStateChange: |
+ case recordType.XHRLoad: |
+ case recordType.ResourceSendRequest: |
+ case recordType.ResourceReceivedData: |
+ case recordType.ResourceReceiveResponse: |
+ case recordType.ResourceFinish: |
if (event.url) |
- details = WebInspector.linkifyResourceAsNode(event.url); |
+ details = WebInspector.linkifyResourceAsNode(event.url); |
break; |
- case recordType.FunctionCall: |
- case recordType.JSFrame: |
- details = createElement("span"); |
- details.createTextChild(WebInspector.beautifyFunctionName(eventData["functionName"])); |
- var location = linkifyLocation(eventData["scriptId"], eventData["url"], eventData["lineNumber"], eventData["columnNumber"]); |
+ case recordType.FunctionCall: |
+ case recordType.JSFrame: |
+ details = createElement('span'); |
+ details.createTextChild(WebInspector.beautifyFunctionName(eventData['functionName'])); |
+ var location = linkifyLocation( |
+ eventData['scriptId'], eventData['url'], eventData['lineNumber'], eventData['columnNumber']); |
if (location) { |
- details.createTextChild(" @ "); |
- details.appendChild(location); |
+ details.createTextChild(' @ '); |
+ details.appendChild(location); |
} |
break; |
- case recordType.CompileScript: |
- case recordType.EvaluateScript: |
- var url = eventData["url"]; |
+ case recordType.CompileScript: |
+ case recordType.EvaluateScript: |
+ var url = eventData['url']; |
if (url) |
- details = linkifyLocation("", url, eventData["lineNumber"], 0); |
+ details = linkifyLocation('', url, eventData['lineNumber'], 0); |
break; |
- case recordType.ParseScriptOnBackground: |
- var url = eventData["url"]; |
+ case recordType.ParseScriptOnBackground: |
+ var url = eventData['url']; |
if (url) |
- details = linkifyLocation("", url, 0, 0); |
+ details = linkifyLocation('', url, 0, 0); |
break; |
- default: |
+ default: |
if (event.hasCategory(WebInspector.TimelineModel.Category.Console)) |
- detailsText = null; |
+ detailsText = null; |
else |
- details = linkifyTopCallFrame(); |
+ details = linkifyTopCallFrame(); |
break; |
} |
if (!details && detailsText) |
- details = createTextNode(detailsText); |
+ details = createTextNode(detailsText); |
return details; |
/** |
@@ -608,87 +654,82 @@ WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent = function(event, tar |
* @param {number=} columnNumber |
* @return {?Element} |
*/ |
- function linkifyLocation(scriptId, url, lineNumber, columnNumber) |
- { |
- return linkifier.linkifyScriptLocation(target, scriptId, url, lineNumber, columnNumber, "timeline-details"); |
+ function linkifyLocation(scriptId, url, lineNumber, columnNumber) { |
+ return linkifier.linkifyScriptLocation(target, scriptId, url, lineNumber, columnNumber, 'timeline-details'); |
} |
/** |
* @return {?Element} |
*/ |
- function linkifyTopCallFrame() |
- { |
- var frame = WebInspector.TimelineUIUtils.topStackFrame(event); |
- return frame ? linkifier.maybeLinkifyConsoleCallFrame(target, frame, "timeline-details") : null; |
+ function linkifyTopCallFrame() { |
+ var frame = WebInspector.TimelineUIUtils.topStackFrame(event); |
+ return frame ? linkifier.maybeLinkifyConsoleCallFrame(target, frame, 'timeline-details') : null; |
} |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {!WebInspector.TimelineModel} model |
- * @param {!WebInspector.Linkifier} linkifier |
- * @param {boolean} detailed |
- * @param {function(!DocumentFragment)} callback |
- */ |
-WebInspector.TimelineUIUtils.buildTraceEventDetails = function(event, model, linkifier, detailed, callback) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {!WebInspector.TimelineModel} model |
+ * @param {!WebInspector.Linkifier} linkifier |
+ * @param {boolean} detailed |
+ * @param {function(!DocumentFragment)} callback |
+ */ |
+ static buildTraceEventDetails(event, model, linkifier, detailed, callback) { |
var target = model.targetByEvent(event); |
if (!target) { |
- callbackWrapper(); |
- return; |
+ callbackWrapper(); |
+ return; |
} |
var relatedNodes = null; |
var barrier = new CallbackBarrier(); |
if (!event.previewElement) { |
- if (event.url) |
- WebInspector.DOMPresentationUtils.buildImagePreviewContents(target, event.url, false, barrier.createCallback(saveImage)); |
- else if (event.picture) |
- WebInspector.TimelineUIUtils.buildPicturePreviewContent(event, target, barrier.createCallback(saveImage)); |
+ if (event.url) |
+ WebInspector.DOMPresentationUtils.buildImagePreviewContents( |
+ target, event.url, false, barrier.createCallback(saveImage)); |
+ else if (event.picture) |
+ WebInspector.TimelineUIUtils.buildPicturePreviewContent(event, target, barrier.createCallback(saveImage)); |
} |
var nodeIdsToResolve = new Set(); |
if (event.backendNodeId) |
- nodeIdsToResolve.add(event.backendNodeId); |
+ nodeIdsToResolve.add(event.backendNodeId); |
if (event.invalidationTrackingEvents) |
- WebInspector.TimelineUIUtils._collectInvalidationNodeIds(nodeIdsToResolve, event.invalidationTrackingEvents); |
+ WebInspector.TimelineUIUtils._collectInvalidationNodeIds(nodeIdsToResolve, event.invalidationTrackingEvents); |
if (nodeIdsToResolve.size) { |
- var domModel = WebInspector.DOMModel.fromTarget(target); |
- if (domModel) |
- domModel.pushNodesByBackendIdsToFrontend(nodeIdsToResolve, barrier.createCallback(setRelatedNodeMap)); |
+ var domModel = WebInspector.DOMModel.fromTarget(target); |
+ if (domModel) |
+ domModel.pushNodesByBackendIdsToFrontend(nodeIdsToResolve, barrier.createCallback(setRelatedNodeMap)); |
} |
barrier.callWhenDone(callbackWrapper); |
/** |
* @param {!Element=} element |
*/ |
- function saveImage(element) |
- { |
- event.previewElement = element || null; |
+ function saveImage(element) { |
+ event.previewElement = element || null; |
} |
/** |
* @param {?Map<number, ?WebInspector.DOMNode>} nodeMap |
*/ |
- function setRelatedNodeMap(nodeMap) |
- { |
- relatedNodes = nodeMap; |
+ function setRelatedNodeMap(nodeMap) { |
+ relatedNodes = nodeMap; |
} |
- function callbackWrapper() |
- { |
- callback(WebInspector.TimelineUIUtils._buildTraceEventDetailsSynchronously(event, model, linkifier, detailed, relatedNodes)); |
+ function callbackWrapper() { |
+ callback(WebInspector.TimelineUIUtils._buildTraceEventDetailsSynchronously( |
+ event, model, linkifier, detailed, relatedNodes)); |
} |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {!WebInspector.TimelineModel} model |
- * @param {!WebInspector.Linkifier} linkifier |
- * @param {boolean} detailed |
- * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
- * @return {!DocumentFragment} |
- */ |
-WebInspector.TimelineUIUtils._buildTraceEventDetailsSynchronously = function(event, model, linkifier, detailed, relatedNodesMap) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {!WebInspector.TimelineModel} model |
+ * @param {!WebInspector.Linkifier} linkifier |
+ * @param {boolean} detailed |
+ * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
+ * @return {!DocumentFragment} |
+ */ |
+ static _buildTraceEventDetailsSynchronously(event, model, linkifier, detailed, relatedNodesMap) { |
var stats = {}; |
var recordTypes = WebInspector.TimelineModel.RecordType; |
@@ -696,194 +737,211 @@ WebInspector.TimelineUIUtils._buildTraceEventDetailsSynchronously = function(eve |
var relatedNodeLabel; |
var contentHelper = new WebInspector.TimelineDetailsContentHelper(model.targetByEvent(event), linkifier); |
- contentHelper.addSection(WebInspector.TimelineUIUtils.eventTitle(event), WebInspector.TimelineUIUtils.eventStyle(event).category); |
+ contentHelper.addSection( |
+ WebInspector.TimelineUIUtils.eventTitle(event), WebInspector.TimelineUIUtils.eventStyle(event).category); |
- var eventData = event.args["data"]; |
+ var eventData = event.args['data']; |
var initiator = event.initiator; |
if (event.warning) |
- contentHelper.appendWarningRow(event); |
- if (event.name === recordTypes.JSFrame && eventData["deoptReason"]) |
- contentHelper.appendWarningRow(event, WebInspector.TimelineModel.WarningType.V8Deopt); |
+ contentHelper.appendWarningRow(event); |
+ if (event.name === recordTypes.JSFrame && eventData['deoptReason']) |
+ contentHelper.appendWarningRow(event, WebInspector.TimelineModel.WarningType.V8Deopt); |
if (detailed) { |
- contentHelper.appendTextRow(WebInspector.UIString("Self Time"), Number.millisToString(event.selfTime, true)); |
- contentHelper.appendTextRow(WebInspector.UIString("Total Time"), Number.millisToString(event.duration || 0, true)); |
+ contentHelper.appendTextRow(WebInspector.UIString('Self Time'), Number.millisToString(event.selfTime, true)); |
+ contentHelper.appendTextRow( |
+ WebInspector.UIString('Total Time'), Number.millisToString(event.duration || 0, true)); |
} |
switch (event.name) { |
- case recordTypes.GCEvent: |
- case recordTypes.MajorGC: |
- case recordTypes.MinorGC: |
- var delta = event.args["usedHeapSizeBefore"] - event.args["usedHeapSizeAfter"]; |
- contentHelper.appendTextRow(WebInspector.UIString("Collected"), Number.bytesToString(delta)); |
+ case recordTypes.GCEvent: |
+ case recordTypes.MajorGC: |
+ case recordTypes.MinorGC: |
+ var delta = event.args['usedHeapSizeBefore'] - event.args['usedHeapSizeAfter']; |
+ contentHelper.appendTextRow(WebInspector.UIString('Collected'), Number.bytesToString(delta)); |
break; |
- case recordTypes.JSFrame: |
- case recordTypes.FunctionCall: |
- var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier); |
+ case recordTypes.JSFrame: |
+ case recordTypes.FunctionCall: |
+ var detailsNode = |
+ WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier); |
if (detailsNode) |
- contentHelper.appendElementRow(WebInspector.UIString("Function"), detailsNode); |
+ contentHelper.appendElementRow(WebInspector.UIString('Function'), detailsNode); |
break; |
- case recordTypes.TimerFire: |
- case recordTypes.TimerInstall: |
- case recordTypes.TimerRemove: |
- contentHelper.appendTextRow(WebInspector.UIString("Timer ID"), eventData["timerId"]); |
+ case recordTypes.TimerFire: |
+ case recordTypes.TimerInstall: |
+ case recordTypes.TimerRemove: |
+ contentHelper.appendTextRow(WebInspector.UIString('Timer ID'), eventData['timerId']); |
if (event.name === recordTypes.TimerInstall) { |
- contentHelper.appendTextRow(WebInspector.UIString("Timeout"), Number.millisToString(eventData["timeout"])); |
- contentHelper.appendTextRow(WebInspector.UIString("Repeats"), !eventData["singleShot"]); |
+ contentHelper.appendTextRow(WebInspector.UIString('Timeout'), Number.millisToString(eventData['timeout'])); |
+ contentHelper.appendTextRow(WebInspector.UIString('Repeats'), !eventData['singleShot']); |
} |
break; |
- case recordTypes.FireAnimationFrame: |
- contentHelper.appendTextRow(WebInspector.UIString("Callback ID"), eventData["id"]); |
+ case recordTypes.FireAnimationFrame: |
+ contentHelper.appendTextRow(WebInspector.UIString('Callback ID'), eventData['id']); |
break; |
- case recordTypes.ResourceSendRequest: |
- case recordTypes.ResourceReceiveResponse: |
- case recordTypes.ResourceReceivedData: |
- case recordTypes.ResourceFinish: |
- var url = (event.name === recordTypes.ResourceSendRequest) ? eventData["url"] : initiator && initiator.args["data"]["url"]; |
+ case recordTypes.ResourceSendRequest: |
+ case recordTypes.ResourceReceiveResponse: |
+ case recordTypes.ResourceReceivedData: |
+ case recordTypes.ResourceFinish: |
+ var url = (event.name === recordTypes.ResourceSendRequest) ? eventData['url'] : |
+ initiator && initiator.args['data']['url']; |
if (url) |
- contentHelper.appendElementRow(WebInspector.UIString("Resource"), WebInspector.linkifyResourceAsNode(url)); |
- if (eventData["requestMethod"]) |
- contentHelper.appendTextRow(WebInspector.UIString("Request Method"), eventData["requestMethod"]); |
- if (typeof eventData["statusCode"] === "number") |
- contentHelper.appendTextRow(WebInspector.UIString("Status Code"), eventData["statusCode"]); |
- if (eventData["mimeType"]) |
- contentHelper.appendTextRow(WebInspector.UIString("MIME Type"), eventData["mimeType"]); |
- if ("priority" in eventData) { |
- var priority = WebInspector.uiLabelForPriority(eventData["priority"]); |
- contentHelper.appendTextRow(WebInspector.UIString("Priority"), priority); |
+ contentHelper.appendElementRow(WebInspector.UIString('Resource'), WebInspector.linkifyResourceAsNode(url)); |
+ if (eventData['requestMethod']) |
+ contentHelper.appendTextRow(WebInspector.UIString('Request Method'), eventData['requestMethod']); |
+ if (typeof eventData['statusCode'] === 'number') |
+ contentHelper.appendTextRow(WebInspector.UIString('Status Code'), eventData['statusCode']); |
+ if (eventData['mimeType']) |
+ contentHelper.appendTextRow(WebInspector.UIString('MIME Type'), eventData['mimeType']); |
+ if ('priority' in eventData) { |
+ var priority = WebInspector.uiLabelForPriority(eventData['priority']); |
+ contentHelper.appendTextRow(WebInspector.UIString('Priority'), priority); |
} |
- if (eventData["encodedDataLength"]) |
- contentHelper.appendTextRow(WebInspector.UIString("Encoded Data Length"), WebInspector.UIString("%d Bytes", eventData["encodedDataLength"])); |
+ if (eventData['encodedDataLength']) |
+ contentHelper.appendTextRow( |
+ WebInspector.UIString('Encoded Data Length'), |
+ WebInspector.UIString('%d Bytes', eventData['encodedDataLength'])); |
break; |
- case recordTypes.CompileScript: |
- case recordTypes.EvaluateScript: |
- var url = eventData && eventData["url"]; |
+ case recordTypes.CompileScript: |
+ case recordTypes.EvaluateScript: |
+ var url = eventData && eventData['url']; |
if (url) |
- contentHelper.appendLocationRow(WebInspector.UIString("Script"), url, eventData["lineNumber"], eventData["columnNumber"]); |
+ contentHelper.appendLocationRow( |
+ WebInspector.UIString('Script'), url, eventData['lineNumber'], eventData['columnNumber']); |
break; |
- case recordTypes.Paint: |
- var clip = eventData["clip"]; |
- contentHelper.appendTextRow(WebInspector.UIString("Location"), WebInspector.UIString("(%d, %d)", clip[0], clip[1])); |
+ case recordTypes.Paint: |
+ var clip = eventData['clip']; |
+ contentHelper.appendTextRow( |
+ WebInspector.UIString('Location'), WebInspector.UIString('(%d, %d)', clip[0], clip[1])); |
var clipWidth = WebInspector.TimelineUIUtils.quadWidth(clip); |
var clipHeight = WebInspector.TimelineUIUtils.quadHeight(clip); |
- contentHelper.appendTextRow(WebInspector.UIString("Dimensions"), WebInspector.UIString("%d × %d", clipWidth, clipHeight)); |
- // Fall-through intended. |
- |
- case recordTypes.PaintSetup: |
- case recordTypes.Rasterize: |
- case recordTypes.ScrollLayer: |
- relatedNodeLabel = WebInspector.UIString("Layer Root"); |
+ contentHelper.appendTextRow( |
+ WebInspector.UIString('Dimensions'), WebInspector.UIString('%d × %d', clipWidth, clipHeight)); |
+ // Fall-through intended. |
+ |
+ case recordTypes.PaintSetup: |
+ case recordTypes.Rasterize: |
+ case recordTypes.ScrollLayer: |
+ relatedNodeLabel = WebInspector.UIString('Layer Root'); |
break; |
- case recordTypes.PaintImage: |
- case recordTypes.DecodeLazyPixelRef: |
- case recordTypes.DecodeImage: |
- case recordTypes.ResizeImage: |
- case recordTypes.DrawLazyPixelRef: |
- relatedNodeLabel = WebInspector.UIString("Owner Element"); |
+ case recordTypes.PaintImage: |
+ case recordTypes.DecodeLazyPixelRef: |
+ case recordTypes.DecodeImage: |
+ case recordTypes.ResizeImage: |
+ case recordTypes.DrawLazyPixelRef: |
+ relatedNodeLabel = WebInspector.UIString('Owner Element'); |
if (event.url) |
- contentHelper.appendElementRow(WebInspector.UIString("Image URL"), WebInspector.linkifyResourceAsNode(event.url)); |
+ contentHelper.appendElementRow( |
+ WebInspector.UIString('Image URL'), WebInspector.linkifyResourceAsNode(event.url)); |
break; |
- case recordTypes.ParseAuthorStyleSheet: |
- var url = eventData["styleSheetUrl"]; |
+ case recordTypes.ParseAuthorStyleSheet: |
+ var url = eventData['styleSheetUrl']; |
if (url) |
- contentHelper.appendElementRow(WebInspector.UIString("Stylesheet URL"), WebInspector.linkifyResourceAsNode(url)); |
+ contentHelper.appendElementRow( |
+ WebInspector.UIString('Stylesheet URL'), WebInspector.linkifyResourceAsNode(url)); |
break; |
- case recordTypes.UpdateLayoutTree: // We don't want to see default details. |
- case recordTypes.RecalculateStyles: |
- contentHelper.appendTextRow(WebInspector.UIString("Elements Affected"), event.args["elementCount"]); |
+ case recordTypes.UpdateLayoutTree: // We don't want to see default details. |
+ case recordTypes.RecalculateStyles: |
+ contentHelper.appendTextRow(WebInspector.UIString('Elements Affected'), event.args['elementCount']); |
break; |
- case recordTypes.Layout: |
- var beginData = event.args["beginData"]; |
- contentHelper.appendTextRow(WebInspector.UIString("Nodes That Need Layout"), WebInspector.UIString("%s of %s", beginData["dirtyObjects"], beginData["totalObjects"])); |
- relatedNodeLabel = WebInspector.UIString("Layout root"); |
+ case recordTypes.Layout: |
+ var beginData = event.args['beginData']; |
+ contentHelper.appendTextRow( |
+ WebInspector.UIString('Nodes That Need Layout'), |
+ WebInspector.UIString('%s of %s', beginData['dirtyObjects'], beginData['totalObjects'])); |
+ relatedNodeLabel = WebInspector.UIString('Layout root'); |
break; |
- case recordTypes.ConsoleTime: |
- contentHelper.appendTextRow(WebInspector.UIString("Message"), event.name); |
+ case recordTypes.ConsoleTime: |
+ contentHelper.appendTextRow(WebInspector.UIString('Message'), event.name); |
break; |
- case recordTypes.WebSocketCreate: |
- case recordTypes.WebSocketSendHandshakeRequest: |
- case recordTypes.WebSocketReceiveHandshakeResponse: |
- case recordTypes.WebSocketDestroy: |
- var initiatorData = initiator ? initiator.args["data"] : eventData; |
- if (typeof initiatorData["webSocketURL"] !== "undefined") |
- contentHelper.appendTextRow(WebInspector.UIString("URL"), initiatorData["webSocketURL"]); |
- if (typeof initiatorData["webSocketProtocol"] !== "undefined") |
- contentHelper.appendTextRow(WebInspector.UIString("WebSocket Protocol"), initiatorData["webSocketProtocol"]); |
- if (typeof eventData["message"] !== "undefined") |
- contentHelper.appendTextRow(WebInspector.UIString("Message"), eventData["message"]); |
+ case recordTypes.WebSocketCreate: |
+ case recordTypes.WebSocketSendHandshakeRequest: |
+ case recordTypes.WebSocketReceiveHandshakeResponse: |
+ case recordTypes.WebSocketDestroy: |
+ var initiatorData = initiator ? initiator.args['data'] : eventData; |
+ if (typeof initiatorData['webSocketURL'] !== 'undefined') |
+ contentHelper.appendTextRow(WebInspector.UIString('URL'), initiatorData['webSocketURL']); |
+ if (typeof initiatorData['webSocketProtocol'] !== 'undefined') |
+ contentHelper.appendTextRow(WebInspector.UIString('WebSocket Protocol'), initiatorData['webSocketProtocol']); |
+ if (typeof eventData['message'] !== 'undefined') |
+ contentHelper.appendTextRow(WebInspector.UIString('Message'), eventData['message']); |
break; |
- case recordTypes.EmbedderCallback: |
- contentHelper.appendTextRow(WebInspector.UIString("Callback Function"), eventData["callbackName"]); |
+ case recordTypes.EmbedderCallback: |
+ contentHelper.appendTextRow(WebInspector.UIString('Callback Function'), eventData['callbackName']); |
break; |
- case recordTypes.Animation: |
+ case recordTypes.Animation: |
if (event.phase === WebInspector.TracingModel.Phase.NestableAsyncInstant) |
- contentHelper.appendTextRow(WebInspector.UIString("State"), eventData["state"]); |
+ contentHelper.appendTextRow(WebInspector.UIString('State'), eventData['state']); |
break; |
- case recordTypes.ParseHTML: |
- var beginData = event.args["beginData"]; |
- var url = beginData["url"]; |
- var startLine = beginData["startLine"] - 1; |
- var endLine = event.args["endData"] ? event.args["endData"]["endLine"] - 1 : undefined; |
+ case recordTypes.ParseHTML: |
+ var beginData = event.args['beginData']; |
+ var url = beginData['url']; |
+ var startLine = beginData['startLine'] - 1; |
+ var endLine = event.args['endData'] ? event.args['endData']['endLine'] - 1 : undefined; |
if (url) |
- contentHelper.appendLocationRange(WebInspector.UIString("Range"), url, startLine, endLine); |
+ contentHelper.appendLocationRange(WebInspector.UIString('Range'), url, startLine, endLine); |
break; |
- case recordTypes.FireIdleCallback: |
- contentHelper.appendTextRow(WebInspector.UIString("Allotted Time"), Number.millisToString(eventData["allottedMilliseconds"])); |
- contentHelper.appendTextRow(WebInspector.UIString("Invoked by Timeout"), eventData["timedOut"]); |
- // Fall-through intended. |
+ case recordTypes.FireIdleCallback: |
+ contentHelper.appendTextRow( |
+ WebInspector.UIString('Allotted Time'), Number.millisToString(eventData['allottedMilliseconds'])); |
+ contentHelper.appendTextRow(WebInspector.UIString('Invoked by Timeout'), eventData['timedOut']); |
+ // Fall-through intended. |
- case recordTypes.RequestIdleCallback: |
- case recordTypes.CancelIdleCallback: |
- contentHelper.appendTextRow(WebInspector.UIString("Callback ID"), eventData["id"]); |
+ case recordTypes.RequestIdleCallback: |
+ case recordTypes.CancelIdleCallback: |
+ contentHelper.appendTextRow(WebInspector.UIString('Callback ID'), eventData['id']); |
break; |
- case recordTypes.EventDispatch: |
- contentHelper.appendTextRow(WebInspector.UIString("Type"), eventData["type"]); |
+ case recordTypes.EventDispatch: |
+ contentHelper.appendTextRow(WebInspector.UIString('Type'), eventData['type']); |
break; |
- default: |
- var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier); |
+ default: |
+ var detailsNode = |
+ WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier); |
if (detailsNode) |
- contentHelper.appendElementRow(WebInspector.UIString("Details"), detailsNode); |
+ contentHelper.appendElementRow(WebInspector.UIString('Details'), detailsNode); |
break; |
} |
if (event.timeWaitingForMainThread) |
- contentHelper.appendTextRow(WebInspector.UIString("Time Waiting for Main Thread"), Number.millisToString(event.timeWaitingForMainThread, true)); |
+ contentHelper.appendTextRow( |
+ WebInspector.UIString('Time Waiting for Main Thread'), |
+ Number.millisToString(event.timeWaitingForMainThread, true)); |
var relatedNode = relatedNodesMap && relatedNodesMap.get(event.backendNodeId); |
if (relatedNode) |
- contentHelper.appendElementRow(relatedNodeLabel || WebInspector.UIString("Related Node"), WebInspector.DOMPresentationUtils.linkifyNodeReference(relatedNode)); |
+ contentHelper.appendElementRow( |
+ relatedNodeLabel || WebInspector.UIString('Related Node'), |
+ WebInspector.DOMPresentationUtils.linkifyNodeReference(relatedNode)); |
if (event.previewElement) { |
- contentHelper.addSection(WebInspector.UIString("Preview")); |
- contentHelper.appendElementRow("", event.previewElement); |
+ contentHelper.addSection(WebInspector.UIString('Preview')); |
+ contentHelper.appendElementRow('', event.previewElement); |
} |
if (event.stackTrace || (event.initiator && event.initiator.stackTrace) || event.invalidationTrackingEvents) |
- WebInspector.TimelineUIUtils._generateCauses(event, model.targetByEvent(event), relatedNodesMap, contentHelper); |
+ WebInspector.TimelineUIUtils._generateCauses(event, model.targetByEvent(event), relatedNodesMap, contentHelper); |
var showPieChart = detailed && WebInspector.TimelineUIUtils._aggregatedStatsForTraceEvent(stats, model, event); |
if (showPieChart) { |
- contentHelper.addSection(WebInspector.UIString("Aggregated Time")); |
- var pieChart = WebInspector.TimelineUIUtils.generatePieChart(stats, WebInspector.TimelineUIUtils.eventStyle(event).category, event.selfTime); |
- contentHelper.appendElementRow("", pieChart); |
+ contentHelper.addSection(WebInspector.UIString('Aggregated Time')); |
+ var pieChart = WebInspector.TimelineUIUtils.generatePieChart( |
+ stats, WebInspector.TimelineUIUtils.eventStyle(event).category, event.selfTime); |
+ contentHelper.appendElementRow('', pieChart); |
} |
return contentHelper.fragment; |
-}; |
- |
-WebInspector.TimelineUIUtils._aggregatedStatsKey = Symbol("aggregatedStats"); |
- |
-/** |
- * @param {!WebInspector.TimelineModel} model |
- * @param {number} startTime |
- * @param {number} endTime |
- * @return {!DocumentFragment} |
- */ |
-WebInspector.TimelineUIUtils.buildRangeStats = function(model, startTime, endTime) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineModel} model |
+ * @param {number} startTime |
+ * @param {number} endTime |
+ * @return {!DocumentFragment} |
+ */ |
+ static buildRangeStats(model, startTime, endTime) { |
var aggregatedStats = {}; |
/** |
@@ -891,165 +949,159 @@ WebInspector.TimelineUIUtils.buildRangeStats = function(model, startTime, endTim |
* @param {!WebInspector.TimelineModel.Record} task |
* @return {number} |
*/ |
- function compareEndTime(value, task) |
- { |
- return value < task.endTime() ? -1 : 1; |
+ function compareEndTime(value, task) { |
+ return value < task.endTime() ? -1 : 1; |
} |
var mainThreadTasks = model.mainThreadTasks(); |
var taskIndex = mainThreadTasks.lowerBound(startTime, compareEndTime); |
for (; taskIndex < mainThreadTasks.length; ++taskIndex) { |
- var task = mainThreadTasks[taskIndex]; |
- if (task.startTime() > endTime) |
- break; |
- if (task.startTime() > startTime && task.endTime() < endTime) { |
- // cache stats for top-level entries that fit the range entirely. |
- var taskStats = task[WebInspector.TimelineUIUtils._aggregatedStatsKey]; |
- if (!taskStats) { |
- taskStats = {}; |
- WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord(task, startTime, endTime, taskStats); |
- task[WebInspector.TimelineUIUtils._aggregatedStatsKey] = taskStats; |
- } |
- for (var key in taskStats) |
- aggregatedStats[key] = (aggregatedStats[key] || 0) + taskStats[key]; |
- continue; |
+ var task = mainThreadTasks[taskIndex]; |
+ if (task.startTime() > endTime) |
+ break; |
+ if (task.startTime() > startTime && task.endTime() < endTime) { |
+ // cache stats for top-level entries that fit the range entirely. |
+ var taskStats = task[WebInspector.TimelineUIUtils._aggregatedStatsKey]; |
+ if (!taskStats) { |
+ taskStats = {}; |
+ WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord(task, startTime, endTime, taskStats); |
+ task[WebInspector.TimelineUIUtils._aggregatedStatsKey] = taskStats; |
} |
- WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord(task, startTime, endTime, aggregatedStats); |
+ for (var key in taskStats) |
+ aggregatedStats[key] = (aggregatedStats[key] || 0) + taskStats[key]; |
+ continue; |
+ } |
+ WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord(task, startTime, endTime, aggregatedStats); |
} |
var aggregatedTotal = 0; |
for (var categoryName in aggregatedStats) |
- aggregatedTotal += aggregatedStats[categoryName]; |
- aggregatedStats["idle"] = Math.max(0, endTime - startTime - aggregatedTotal); |
+ aggregatedTotal += aggregatedStats[categoryName]; |
+ aggregatedStats['idle'] = Math.max(0, endTime - startTime - aggregatedTotal); |
var startOffset = startTime - model.minimumRecordTime(); |
var endOffset = endTime - model.minimumRecordTime(); |
var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null); |
- contentHelper.addSection(WebInspector.UIString("Range: %s \u2013 %s", Number.millisToString(startOffset), Number.millisToString(endOffset))); |
+ contentHelper.addSection(WebInspector.UIString( |
+ 'Range: %s \u2013 %s', Number.millisToString(startOffset), Number.millisToString(endOffset))); |
var pieChart = WebInspector.TimelineUIUtils.generatePieChart(aggregatedStats); |
- contentHelper.appendElementRow("", pieChart); |
+ contentHelper.appendElementRow('', pieChart); |
return contentHelper.fragment; |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineModel.Record} record |
- * @param {number} startTime |
- * @param {number} endTime |
- * @param {!Object} aggregatedStats |
- */ |
-WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord = function(record, startTime, endTime, aggregatedStats) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineModel.Record} record |
+ * @param {number} startTime |
+ * @param {number} endTime |
+ * @param {!Object} aggregatedStats |
+ */ |
+ static _collectAggregatedStatsForRecord(record, startTime, endTime, aggregatedStats) { |
var records = []; |
if (!record.endTime() || record.endTime() < startTime || record.startTime() > endTime) |
- return; |
+ return; |
var childrenTime = 0; |
var children = record.children() || []; |
for (var i = 0; i < children.length; ++i) { |
- var child = children[i]; |
- if (!child.endTime() || child.endTime() < startTime || child.startTime() > endTime) |
- continue; |
- childrenTime += Math.min(endTime, child.endTime()) - Math.max(startTime, child.startTime()); |
- WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord(child, startTime, endTime, aggregatedStats); |
+ var child = children[i]; |
+ if (!child.endTime() || child.endTime() < startTime || child.startTime() > endTime) |
+ continue; |
+ childrenTime += Math.min(endTime, child.endTime()) - Math.max(startTime, child.startTime()); |
+ WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord(child, startTime, endTime, aggregatedStats); |
} |
var categoryName = WebInspector.TimelineUIUtils.categoryForRecord(record).name; |
var ownTime = Math.min(endTime, record.endTime()) - Math.max(startTime, record.startTime()) - childrenTime; |
aggregatedStats[categoryName] = (aggregatedStats[categoryName] || 0) + ownTime; |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineModel.NetworkRequest} request |
- * @param {!WebInspector.TimelineModel} model |
- * @param {!WebInspector.Linkifier} linkifier |
- * @return {!Promise<!DocumentFragment>} |
- */ |
-WebInspector.TimelineUIUtils.buildNetworkRequestDetails = function(request, model, linkifier) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineModel.NetworkRequest} request |
+ * @param {!WebInspector.TimelineModel} model |
+ * @param {!WebInspector.Linkifier} linkifier |
+ * @return {!Promise<!DocumentFragment>} |
+ */ |
+ static buildNetworkRequestDetails(request, model, linkifier) { |
var target = model.targetByEvent(request.children[0]); |
var contentHelper = new WebInspector.TimelineDetailsContentHelper(target, linkifier); |
var duration = request.endTime - (request.startTime || -Infinity); |
var items = []; |
if (request.url) |
- contentHelper.appendElementRow(WebInspector.UIString("URL"), WebInspector.linkifyURLAsNode(request.url)); |
+ contentHelper.appendElementRow(WebInspector.UIString('URL'), WebInspector.linkifyURLAsNode(request.url)); |
if (isFinite(duration)) |
- contentHelper.appendTextRow(WebInspector.UIString("Duration"), Number.millisToString(duration, true)); |
+ contentHelper.appendTextRow(WebInspector.UIString('Duration'), Number.millisToString(duration, true)); |
if (request.requestMethod) |
- contentHelper.appendTextRow(WebInspector.UIString("Request Method"), request.requestMethod); |
- if (typeof request.priority === "string") { |
- var priority = WebInspector.uiLabelForPriority(/** @type {!NetworkAgent.ResourcePriority} */ (request.priority)); |
- contentHelper.appendTextRow(WebInspector.UIString("Priority"), priority); |
+ contentHelper.appendTextRow(WebInspector.UIString('Request Method'), request.requestMethod); |
+ if (typeof request.priority === 'string') { |
+ var priority = WebInspector.uiLabelForPriority(/** @type {!NetworkAgent.ResourcePriority} */ (request.priority)); |
+ contentHelper.appendTextRow(WebInspector.UIString('Priority'), priority); |
} |
if (request.mimeType) |
- contentHelper.appendTextRow(WebInspector.UIString("Mime Type"), request.mimeType); |
+ contentHelper.appendTextRow(WebInspector.UIString('Mime Type'), request.mimeType); |
- var title = WebInspector.UIString("Initiator"); |
+ var title = WebInspector.UIString('Initiator'); |
var sendRequest = request.children[0]; |
var topFrame = WebInspector.TimelineUIUtils.topStackFrame(sendRequest); |
if (topFrame) { |
- var link = linkifier.maybeLinkifyConsoleCallFrame(target, topFrame); |
- if (link) |
- contentHelper.appendElementRow(title, link); |
+ var link = linkifier.maybeLinkifyConsoleCallFrame(target, topFrame); |
+ if (link) |
+ contentHelper.appendElementRow(title, link); |
} else if (sendRequest.initiator) { |
- var initiatorURL = WebInspector.TimelineUIUtils.eventURL(sendRequest.initiator); |
- if (initiatorURL) { |
- var link = linkifier.maybeLinkifyScriptLocation(target, null, initiatorURL, 0); |
- if (link) |
- contentHelper.appendElementRow(title, link); |
- } |
+ var initiatorURL = WebInspector.TimelineUIUtils.eventURL(sendRequest.initiator); |
+ if (initiatorURL) { |
+ var link = linkifier.maybeLinkifyScriptLocation(target, null, initiatorURL, 0); |
+ if (link) |
+ contentHelper.appendElementRow(title, link); |
+ } |
} |
/** |
* @param {function(?Element)} fulfill |
*/ |
- function action(fulfill) |
- { |
- WebInspector.DOMPresentationUtils.buildImagePreviewContents(/** @type {!WebInspector.Target} */(target), request.url, false, saveImage); |
- /** |
- * @param {!Element=} element |
- */ |
- function saveImage(element) |
- { |
- request.previewElement = element || null; |
- fulfill(request.previewElement); |
- } |
+ function action(fulfill) { |
+ WebInspector.DOMPresentationUtils.buildImagePreviewContents( |
+ /** @type {!WebInspector.Target} */ (target), request.url, false, saveImage); |
+ /** |
+ * @param {!Element=} element |
+ */ |
+ function saveImage(element) { |
+ request.previewElement = element || null; |
+ fulfill(request.previewElement); |
+ } |
} |
var previewPromise; |
if (request.previewElement) |
- previewPromise = Promise.resolve(request.previewElement); |
+ previewPromise = Promise.resolve(request.previewElement); |
else |
- previewPromise = request.url && target ? new Promise(action) : Promise.resolve(null); |
+ previewPromise = request.url && target ? new Promise(action) : Promise.resolve(null); |
/** |
* @param {?Element} element |
* @return {!DocumentFragment} |
*/ |
- function appendPreview(element) |
- { |
- if (element) |
- contentHelper.appendElementRow(WebInspector.UIString("Preview"), request.previewElement); |
- return contentHelper.fragment; |
+ function appendPreview(element) { |
+ if (element) |
+ contentHelper.appendElementRow(WebInspector.UIString('Preview'), request.previewElement); |
+ return contentHelper.fragment; |
} |
return previewPromise.then(appendPreview); |
-}; |
- |
-/** |
- * @param {!Array<!RuntimeAgent.CallFrame>} callFrames |
- * @return {!RuntimeAgent.StackTrace} |
- */ |
-WebInspector.TimelineUIUtils._stackTraceFromCallFrames = function(callFrames) |
-{ |
- return /** @type {!RuntimeAgent.StackTrace} */ ({ callFrames: callFrames }); |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {?WebInspector.Target} target |
- * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
- * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
- */ |
-WebInspector.TimelineUIUtils._generateCauses = function(event, target, relatedNodesMap, contentHelper) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!Array<!RuntimeAgent.CallFrame>} callFrames |
+ * @return {!RuntimeAgent.StackTrace} |
+ */ |
+ static _stackTraceFromCallFrames(callFrames) { |
+ return /** @type {!RuntimeAgent.StackTrace} */ ({callFrames: callFrames}); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {?WebInspector.Target} target |
+ * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
+ * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
+ */ |
+ static _generateCauses(event, target, relatedNodesMap, contentHelper) { |
var recordTypes = WebInspector.TimelineModel.RecordType; |
var callSiteStackLabel; |
@@ -1057,95 +1109,98 @@ WebInspector.TimelineUIUtils._generateCauses = function(event, target, relatedNo |
var initiator = event.initiator; |
switch (event.name) { |
- case recordTypes.TimerFire: |
- callSiteStackLabel = WebInspector.UIString("Timer Installed"); |
+ case recordTypes.TimerFire: |
+ callSiteStackLabel = WebInspector.UIString('Timer Installed'); |
break; |
- case recordTypes.FireAnimationFrame: |
- callSiteStackLabel = WebInspector.UIString("Animation Frame Requested"); |
+ case recordTypes.FireAnimationFrame: |
+ callSiteStackLabel = WebInspector.UIString('Animation Frame Requested'); |
break; |
- case recordTypes.FireIdleCallback: |
- callSiteStackLabel = WebInspector.UIString("Idle Callback Requested"); |
+ case recordTypes.FireIdleCallback: |
+ callSiteStackLabel = WebInspector.UIString('Idle Callback Requested'); |
break; |
- case recordTypes.UpdateLayoutTree: |
- case recordTypes.RecalculateStyles: |
- stackLabel = WebInspector.UIString("Recalculation Forced"); |
+ case recordTypes.UpdateLayoutTree: |
+ case recordTypes.RecalculateStyles: |
+ stackLabel = WebInspector.UIString('Recalculation Forced'); |
break; |
- case recordTypes.Layout: |
- callSiteStackLabel = WebInspector.UIString("First Layout Invalidation"); |
- stackLabel = WebInspector.UIString("Layout Forced"); |
+ case recordTypes.Layout: |
+ callSiteStackLabel = WebInspector.UIString('First Layout Invalidation'); |
+ stackLabel = WebInspector.UIString('Layout Forced'); |
break; |
} |
// Direct cause. |
if (event.stackTrace && event.stackTrace.length) { |
- contentHelper.addSection(WebInspector.UIString("Call Stacks")); |
- contentHelper.appendStackTrace(stackLabel || WebInspector.UIString("Stack Trace"), WebInspector.TimelineUIUtils._stackTraceFromCallFrames(event.stackTrace)); |
+ contentHelper.addSection(WebInspector.UIString('Call Stacks')); |
+ contentHelper.appendStackTrace( |
+ stackLabel || WebInspector.UIString('Stack Trace'), |
+ WebInspector.TimelineUIUtils._stackTraceFromCallFrames(event.stackTrace)); |
} |
// Indirect causes. |
- if (event.invalidationTrackingEvents && target) { // Full invalidation tracking (experimental). |
- contentHelper.addSection(WebInspector.UIString("Invalidations")); |
- WebInspector.TimelineUIUtils._generateInvalidations(event, target, relatedNodesMap, contentHelper); |
- } else if (initiator && initiator.stackTrace) { // Partial invalidation tracking. |
- contentHelper.appendStackTrace(callSiteStackLabel || WebInspector.UIString("First Invalidated"), WebInspector.TimelineUIUtils._stackTraceFromCallFrames(initiator.stackTrace)); |
+ if (event.invalidationTrackingEvents && target) { // Full invalidation tracking (experimental). |
+ contentHelper.addSection(WebInspector.UIString('Invalidations')); |
+ WebInspector.TimelineUIUtils._generateInvalidations(event, target, relatedNodesMap, contentHelper); |
+ } else if (initiator && initiator.stackTrace) { // Partial invalidation tracking. |
+ contentHelper.appendStackTrace( |
+ callSiteStackLabel || WebInspector.UIString('First Invalidated'), |
+ WebInspector.TimelineUIUtils._stackTraceFromCallFrames(initiator.stackTrace)); |
} |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {!WebInspector.Target} target |
- * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
- * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
- */ |
-WebInspector.TimelineUIUtils._generateInvalidations = function(event, target, relatedNodesMap, contentHelper) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {!WebInspector.Target} target |
+ * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
+ * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
+ */ |
+ static _generateInvalidations(event, target, relatedNodesMap, contentHelper) { |
if (!event.invalidationTrackingEvents) |
- return; |
+ return; |
var invalidations = {}; |
event.invalidationTrackingEvents.forEach(function(invalidation) { |
- if (!invalidations[invalidation.type]) |
- invalidations[invalidation.type] = [invalidation]; |
- else |
- invalidations[invalidation.type].push(invalidation); |
+ if (!invalidations[invalidation.type]) |
+ invalidations[invalidation.type] = [invalidation]; |
+ else |
+ invalidations[invalidation.type].push(invalidation); |
}); |
Object.keys(invalidations).forEach(function(type) { |
- WebInspector.TimelineUIUtils._generateInvalidationsForType( |
- type, target, invalidations[type], relatedNodesMap, contentHelper); |
+ WebInspector.TimelineUIUtils._generateInvalidationsForType( |
+ type, target, invalidations[type], relatedNodesMap, contentHelper); |
}); |
-}; |
- |
-/** |
- * @param {string} type |
- * @param {!WebInspector.Target} target |
- * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations |
- * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
- * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
- */ |
-WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, target, invalidations, relatedNodesMap, contentHelper) |
-{ |
+ } |
+ |
+ /** |
+ * @param {string} type |
+ * @param {!WebInspector.Target} target |
+ * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations |
+ * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
+ * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
+ */ |
+ static _generateInvalidationsForType(type, target, invalidations, relatedNodesMap, contentHelper) { |
var title; |
switch (type) { |
- case WebInspector.TimelineModel.RecordType.StyleRecalcInvalidationTracking: |
- title = WebInspector.UIString("Style Invalidations"); |
+ case WebInspector.TimelineModel.RecordType.StyleRecalcInvalidationTracking: |
+ title = WebInspector.UIString('Style Invalidations'); |
break; |
- case WebInspector.TimelineModel.RecordType.LayoutInvalidationTracking: |
- title = WebInspector.UIString("Layout Invalidations"); |
+ case WebInspector.TimelineModel.RecordType.LayoutInvalidationTracking: |
+ title = WebInspector.UIString('Layout Invalidations'); |
break; |
- default: |
- title = WebInspector.UIString("Other Invalidations"); |
+ default: |
+ title = WebInspector.UIString('Other Invalidations'); |
break; |
} |
var invalidationsTreeOutline = new TreeOutlineInShadow(); |
- invalidationsTreeOutline.registerRequiredCSS("timeline/invalidationsTree.css"); |
- invalidationsTreeOutline.element.classList.add("invalidations-tree"); |
+ invalidationsTreeOutline.registerRequiredCSS('timeline/invalidationsTree.css'); |
+ invalidationsTreeOutline.element.classList.add('invalidations-tree'); |
var invalidationGroups = groupInvalidationsByCause(invalidations); |
invalidationGroups.forEach(function(group) { |
- var groupElement = new WebInspector.TimelineUIUtils.InvalidationsGroupElement(target, relatedNodesMap, contentHelper, group); |
- invalidationsTreeOutline.appendChild(groupElement); |
+ var groupElement = |
+ new WebInspector.TimelineUIUtils.InvalidationsGroupElement(target, relatedNodesMap, contentHelper, group); |
+ invalidationsTreeOutline.appendChild(groupElement); |
}); |
contentHelper.appendElementRow(title, invalidationsTreeOutline.element, false, true); |
@@ -1153,421 +1208,259 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ |
* @param {!Array<!WebInspector.InvalidationTrackingEvent>} invalidations |
* @return {!Array<!Array<!WebInspector.InvalidationTrackingEvent>>} |
*/ |
- function groupInvalidationsByCause(invalidations) |
- { |
- /** @type {!Map<string, !Array<!WebInspector.InvalidationTrackingEvent>>} */ |
- var causeToInvalidationMap = new Map(); |
- for (var index = 0; index < invalidations.length; index++) { |
- var invalidation = invalidations[index]; |
- var causeKey = ""; |
- if (invalidation.cause.reason) |
- causeKey += invalidation.cause.reason + "."; |
- if (invalidation.cause.stackTrace) { |
- invalidation.cause.stackTrace.forEach(function(stackFrame) { |
- causeKey += stackFrame["functionName"] + "."; |
- causeKey += stackFrame["scriptId"] + "."; |
- causeKey += stackFrame["url"] + "."; |
- causeKey += stackFrame["lineNumber"] + "."; |
- causeKey += stackFrame["columnNumber"] + "."; |
- }); |
- } |
- |
- if (causeToInvalidationMap.has(causeKey)) |
- causeToInvalidationMap.get(causeKey).push(invalidation); |
- else |
- causeToInvalidationMap.set(causeKey, [ invalidation ]); |
+ function groupInvalidationsByCause(invalidations) { |
+ /** @type {!Map<string, !Array<!WebInspector.InvalidationTrackingEvent>>} */ |
+ var causeToInvalidationMap = new Map(); |
+ for (var index = 0; index < invalidations.length; index++) { |
+ var invalidation = invalidations[index]; |
+ var causeKey = ''; |
+ if (invalidation.cause.reason) |
+ causeKey += invalidation.cause.reason + '.'; |
+ if (invalidation.cause.stackTrace) { |
+ invalidation.cause.stackTrace.forEach(function(stackFrame) { |
+ causeKey += stackFrame['functionName'] + '.'; |
+ causeKey += stackFrame['scriptId'] + '.'; |
+ causeKey += stackFrame['url'] + '.'; |
+ causeKey += stackFrame['lineNumber'] + '.'; |
+ causeKey += stackFrame['columnNumber'] + '.'; |
+ }); |
} |
- return causeToInvalidationMap.valuesArray(); |
+ |
+ if (causeToInvalidationMap.has(causeKey)) |
+ causeToInvalidationMap.get(causeKey).push(invalidation); |
+ else |
+ causeToInvalidationMap.set(causeKey, [invalidation]); |
+ } |
+ return causeToInvalidationMap.valuesArray(); |
} |
-}; |
+ } |
-/** |
- * @param {!Set<number>} nodeIds |
- * @param {!WebInspector.InvalidationTrackingEvent} invalidations |
- */ |
-WebInspector.TimelineUIUtils._collectInvalidationNodeIds = function(nodeIds, invalidations) |
-{ |
+ /** |
+ * @param {!Set<number>} nodeIds |
+ * @param {!WebInspector.InvalidationTrackingEvent} invalidations |
+ */ |
+ static _collectInvalidationNodeIds(nodeIds, invalidations) { |
for (var i = 0; i < invalidations.length; ++i) { |
- if (invalidations[i].nodeId) |
- nodeIds.add(invalidations[i].nodeId); |
+ if (invalidations[i].nodeId) |
+ nodeIds.add(invalidations[i].nodeId); |
} |
-}; |
- |
-/** |
- * @constructor |
- * @param {!WebInspector.Target} target |
- * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
- * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
- * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations |
- * @extends {TreeElement} |
- */ |
-WebInspector.TimelineUIUtils.InvalidationsGroupElement = function(target, relatedNodesMap, contentHelper, invalidations) |
-{ |
- TreeElement.call(this, "", true); |
- |
- this.listItemElement.classList.add("header"); |
- this.selectable = false; |
- this.toggleOnClick = true; |
- |
- this._relatedNodesMap = relatedNodesMap; |
- this._contentHelper = contentHelper; |
- this._invalidations = invalidations; |
- this.title = this._createTitle(target); |
-}; |
- |
-WebInspector.TimelineUIUtils.InvalidationsGroupElement.prototype = { |
- |
- /** |
- * @param {!WebInspector.Target} target |
- * @return {!Element} |
- */ |
- _createTitle: function(target) |
- { |
- var first = this._invalidations[0]; |
- var reason = first.cause.reason; |
- var topFrame = first.cause.stackTrace && first.cause.stackTrace[0]; |
- |
- var title = createElement("span"); |
- if (reason) |
- title.createTextChild(WebInspector.UIString("%s for ", reason)); |
- else |
- title.createTextChild(WebInspector.UIString("Unknown cause for ")); |
- |
- this._appendTruncatedNodeList(title, this._invalidations); |
- |
- if (topFrame && this._contentHelper.linkifier()) { |
- title.createTextChild(WebInspector.UIString(". ")); |
- var stack = title.createChild("span", "monospace"); |
- stack.createChild("span").textContent = WebInspector.beautifyFunctionName(topFrame.functionName); |
- var link = this._contentHelper.linkifier().maybeLinkifyConsoleCallFrame(target, topFrame); |
- if (link) { |
- stack.createChild("span").textContent = " @ "; |
- stack.createChild("span").appendChild(link); |
- } |
- } |
- |
- return title; |
- }, |
- |
- /** |
- * @override |
- */ |
- onpopulate: function() |
- { |
- var content = createElementWithClass("div", "content"); |
- |
- var first = this._invalidations[0]; |
- if (first.cause.stackTrace) { |
- var stack = content.createChild("div"); |
- stack.createTextChild(WebInspector.UIString("Stack trace:")); |
- this._contentHelper.createChildStackTraceElement(stack, WebInspector.TimelineUIUtils._stackTraceFromCallFrames(first.cause.stackTrace)); |
- } |
- |
- content.createTextChild(this._invalidations.length > 1 ? WebInspector.UIString("Nodes:") : WebInspector.UIString("Node:")); |
- var nodeList = content.createChild("div", "node-list"); |
- var firstNode = true; |
- for (var i = 0; i < this._invalidations.length; i++) { |
- var invalidation = this._invalidations[i]; |
- var invalidationNode = this._createInvalidationNode(invalidation, true); |
- if (invalidationNode) { |
- if (!firstNode) |
- nodeList.createTextChild(WebInspector.UIString(", ")); |
- firstNode = false; |
- |
- nodeList.appendChild(invalidationNode); |
- |
- var extraData = invalidation.extraData ? ", " + invalidation.extraData : ""; |
- if (invalidation.changedId) |
- nodeList.createTextChild(WebInspector.UIString("(changed id to \"%s\"%s)", invalidation.changedId, extraData)); |
- else if (invalidation.changedClass) |
- nodeList.createTextChild(WebInspector.UIString("(changed class to \"%s\"%s)", invalidation.changedClass, extraData)); |
- else if (invalidation.changedAttribute) |
- nodeList.createTextChild(WebInspector.UIString("(changed attribute to \"%s\"%s)", invalidation.changedAttribute, extraData)); |
- else if (invalidation.changedPseudo) |
- nodeList.createTextChild(WebInspector.UIString("(changed pesudo to \"%s\"%s)", invalidation.changedPseudo, extraData)); |
- else if (invalidation.selectorPart) |
- nodeList.createTextChild(WebInspector.UIString("(changed \"%s\"%s)", invalidation.selectorPart, extraData)); |
- } |
- } |
- |
- var contentTreeElement = new TreeElement(content, false); |
- contentTreeElement.selectable = false; |
- this.appendChild(contentTreeElement); |
- }, |
- |
- /** |
- * @param {!Element} parentElement |
- * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations |
- */ |
- _appendTruncatedNodeList: function(parentElement, invalidations) |
- { |
- var invalidationNodes = []; |
- var invalidationNodeIdMap = {}; |
- for (var i = 0; i < invalidations.length; i++) { |
- var invalidation = invalidations[i]; |
- var invalidationNode = this._createInvalidationNode(invalidation, false); |
- invalidationNode.addEventListener("click", (e) => e.consume(), false); |
- if (invalidationNode && !invalidationNodeIdMap[invalidation.nodeId]) { |
- invalidationNodes.push(invalidationNode); |
- invalidationNodeIdMap[invalidation.nodeId] = true; |
- } |
- } |
- |
- if (invalidationNodes.length === 1) { |
- parentElement.appendChild(invalidationNodes[0]); |
- } else if (invalidationNodes.length === 2) { |
- parentElement.appendChild(invalidationNodes[0]); |
- parentElement.createTextChild(WebInspector.UIString(" and ")); |
- parentElement.appendChild(invalidationNodes[1]); |
- } else if (invalidationNodes.length >= 3) { |
- parentElement.appendChild(invalidationNodes[0]); |
- parentElement.createTextChild(WebInspector.UIString(", ")); |
- parentElement.appendChild(invalidationNodes[1]); |
- parentElement.createTextChild(WebInspector.UIString(", and %s others", invalidationNodes.length - 2)); |
- } |
- }, |
- |
- /** |
- * @param {!WebInspector.InvalidationTrackingEvent} invalidation |
- * @param {boolean} showUnknownNodes |
- */ |
- _createInvalidationNode: function(invalidation, showUnknownNodes) |
- { |
- var node = (invalidation.nodeId && this._relatedNodesMap) ? this._relatedNodesMap.get(invalidation.nodeId) : null; |
- if (node) |
- return WebInspector.DOMPresentationUtils.linkifyNodeReference(node); |
- if (invalidation.nodeName) { |
- var nodeSpan = createElement("span"); |
- nodeSpan.textContent = WebInspector.UIString("[ %s ]", invalidation.nodeName); |
- return nodeSpan; |
- } |
- if (showUnknownNodes) { |
- var nodeSpan = createElement("span"); |
- return nodeSpan.createTextChild(WebInspector.UIString("[ unknown node ]")); |
- } |
- }, |
- |
- __proto__: TreeElement.prototype |
-}; |
- |
-/** |
- * @param {!Object} total |
- * @param {!WebInspector.TimelineModel} model |
- * @param {!WebInspector.TracingModel.Event} event |
- * @return {boolean} |
- */ |
-WebInspector.TimelineUIUtils._aggregatedStatsForTraceEvent = function(total, model, event) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!Object} total |
+ * @param {!WebInspector.TimelineModel} model |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @return {boolean} |
+ */ |
+ static _aggregatedStatsForTraceEvent(total, model, event) { |
var events = model.inspectedTargetEvents(); |
/** |
* @param {number} startTime |
* @param {!WebInspector.TracingModel.Event} e |
* @return {number} |
*/ |
- function eventComparator(startTime, e) |
- { |
- return startTime - e.startTime; |
+ function eventComparator(startTime, e) { |
+ return startTime - e.startTime; |
} |
var index = events.binaryIndexOf(event.startTime, eventComparator); |
// Not a main thread event? |
if (index < 0) |
- return false; |
+ return false; |
var hasChildren = false; |
var endTime = event.endTime; |
if (endTime) { |
- for (var i = index; i < events.length; i++) { |
- var nextEvent = events[i]; |
- if (nextEvent.startTime >= endTime) |
- break; |
- if (!nextEvent.selfTime) |
- continue; |
- if (nextEvent.thread !== event.thread) |
- continue; |
- if (i > index) |
- hasChildren = true; |
- var categoryName = WebInspector.TimelineUIUtils.eventStyle(nextEvent).category.name; |
- total[categoryName] = (total[categoryName] || 0) + nextEvent.selfTime; |
- } |
+ for (var i = index; i < events.length; i++) { |
+ var nextEvent = events[i]; |
+ if (nextEvent.startTime >= endTime) |
+ break; |
+ if (!nextEvent.selfTime) |
+ continue; |
+ if (nextEvent.thread !== event.thread) |
+ continue; |
+ if (i > index) |
+ hasChildren = true; |
+ var categoryName = WebInspector.TimelineUIUtils.eventStyle(nextEvent).category.name; |
+ total[categoryName] = (total[categoryName] || 0) + nextEvent.selfTime; |
+ } |
} |
if (WebInspector.TracingModel.isAsyncPhase(event.phase)) { |
- if (event.endTime) { |
- var aggregatedTotal = 0; |
- for (var categoryName in total) |
- aggregatedTotal += total[categoryName]; |
- total["idle"] = Math.max(0, event.endTime - event.startTime - aggregatedTotal); |
- } |
- return false; |
+ if (event.endTime) { |
+ var aggregatedTotal = 0; |
+ for (var categoryName in total) |
+ aggregatedTotal += total[categoryName]; |
+ total['idle'] = Math.max(0, event.endTime - event.startTime - aggregatedTotal); |
+ } |
+ return false; |
} |
return hasChildren; |
-}; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {!WebInspector.Target} target |
- * @param {function(!Element=)} callback |
- */ |
-WebInspector.TimelineUIUtils.buildPicturePreviewContent = function(event, target, callback) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {!WebInspector.Target} target |
+ * @param {function(!Element=)} callback |
+ */ |
+ static buildPicturePreviewContent(event, target, callback) { |
new WebInspector.LayerPaintEvent(event, target).snapshotPromise().then(onSnapshotLoaded); |
/** |
* @param {?WebInspector.SnapshotWithRect} snapshotWithRect |
*/ |
- function onSnapshotLoaded(snapshotWithRect) |
- { |
- if (!snapshotWithRect) { |
- callback(); |
- return; |
- } |
- snapshotWithRect.snapshot.replay(null, null, 1).then(imageURL => onGotImage(imageURL)); |
- snapshotWithRect.snapshot.release(); |
+ function onSnapshotLoaded(snapshotWithRect) { |
+ if (!snapshotWithRect) { |
+ callback(); |
+ return; |
+ } |
+ snapshotWithRect.snapshot.replay(null, null, 1).then(imageURL => onGotImage(imageURL)); |
+ snapshotWithRect.snapshot.release(); |
} |
/** |
* @param {?string} imageURL |
*/ |
- function onGotImage(imageURL) |
- { |
- if (!imageURL) { |
- callback(); |
- return; |
- } |
- var container = createElement("div"); |
- container.classList.add("image-preview-container", "vbox", "link"); |
- var img = container.createChild("img"); |
- img.src = imageURL; |
- var paintProfilerButton = container.createChild("a"); |
- paintProfilerButton.textContent = WebInspector.UIString("Paint Profiler"); |
- container.addEventListener("click", showPaintProfiler, false); |
- callback(container); |
+ function onGotImage(imageURL) { |
+ if (!imageURL) { |
+ callback(); |
+ return; |
+ } |
+ var container = createElement('div'); |
+ container.classList.add('image-preview-container', 'vbox', 'link'); |
+ var img = container.createChild('img'); |
+ img.src = imageURL; |
+ var paintProfilerButton = container.createChild('a'); |
+ paintProfilerButton.textContent = WebInspector.UIString('Paint Profiler'); |
+ container.addEventListener('click', showPaintProfiler, false); |
+ callback(container); |
} |
- function showPaintProfiler() |
- { |
- WebInspector.TimelinePanel.instance().select(WebInspector.TimelineSelection.fromTraceEvent(event), WebInspector.TimelinePanel.DetailsTab.PaintProfiler); |
+ function showPaintProfiler() { |
+ WebInspector.TimelinePanel.instance().select( |
+ WebInspector.TimelineSelection.fromTraceEvent(event), WebInspector.TimelinePanel.DetailsTab.PaintProfiler); |
} |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineModel.RecordType} recordType |
- * @param {?string} title |
- * @param {number} position |
- * @return {!Element} |
- */ |
-WebInspector.TimelineUIUtils.createEventDivider = function(recordType, title, position) |
-{ |
- var eventDivider = createElement("div"); |
- eventDivider.className = "resources-event-divider"; |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineModel.RecordType} recordType |
+ * @param {?string} title |
+ * @param {number} position |
+ * @return {!Element} |
+ */ |
+ static createEventDivider(recordType, title, position) { |
+ var eventDivider = createElement('div'); |
+ eventDivider.className = 'resources-event-divider'; |
var recordTypes = WebInspector.TimelineModel.RecordType; |
if (recordType === recordTypes.MarkDOMContent) |
- eventDivider.className += " resources-blue-divider"; |
+ eventDivider.className += ' resources-blue-divider'; |
else if (recordType === recordTypes.MarkLoad) |
- eventDivider.className += " resources-red-divider"; |
+ eventDivider.className += ' resources-red-divider'; |
else if (recordType === recordTypes.MarkFirstPaint) |
- eventDivider.className += " resources-green-divider"; |
- else if (recordType === recordTypes.TimeStamp || recordType === recordTypes.ConsoleTime || recordType === recordTypes.UserTiming) |
- eventDivider.className += " resources-orange-divider"; |
+ eventDivider.className += ' resources-green-divider'; |
+ else if ( |
+ recordType === recordTypes.TimeStamp || recordType === recordTypes.ConsoleTime || |
+ recordType === recordTypes.UserTiming) |
+ eventDivider.className += ' resources-orange-divider'; |
else if (recordType === recordTypes.BeginFrame) |
- eventDivider.className += " timeline-frame-divider"; |
+ eventDivider.className += ' timeline-frame-divider'; |
if (title) |
- eventDivider.title = title; |
- eventDivider.style.left = position + "px"; |
+ eventDivider.title = title; |
+ eventDivider.style.left = position + 'px'; |
return eventDivider; |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineModel.Record} record |
- * @param {number} zeroTime |
- * @param {number} position |
- * @return {!Element} |
- */ |
-WebInspector.TimelineUIUtils.createDividerForRecord = function(record, zeroTime, position) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineModel.Record} record |
+ * @param {number} zeroTime |
+ * @param {number} position |
+ * @return {!Element} |
+ */ |
+ static createDividerForRecord(record, zeroTime, position) { |
var startTime = Number.millisToString(record.startTime() - zeroTime); |
- var title = WebInspector.UIString("%s at %s", WebInspector.TimelineUIUtils.eventTitle(record.traceEvent()), startTime); |
+ var title = |
+ WebInspector.UIString('%s at %s', WebInspector.TimelineUIUtils.eventTitle(record.traceEvent()), startTime); |
return WebInspector.TimelineUIUtils.createEventDivider(record.type(), title, position); |
-}; |
+ } |
-/** |
- * @return {!Array.<string>} |
- */ |
-WebInspector.TimelineUIUtils._visibleTypes = function() |
-{ |
+ /** |
+ * @return {!Array.<string>} |
+ */ |
+ static _visibleTypes() { |
var eventStyles = WebInspector.TimelineUIUtils._initEventStyles(); |
var result = []; |
for (var name in eventStyles) { |
- if (!eventStyles[name].hidden) |
- result.push(name); |
+ if (!eventStyles[name].hidden) |
+ result.push(name); |
} |
return result; |
-}; |
+ } |
-/** |
- * @return {!WebInspector.TimelineModel.Filter} |
- */ |
-WebInspector.TimelineUIUtils.visibleEventsFilter = function() |
-{ |
+ /** |
+ * @return {!WebInspector.TimelineModel.Filter} |
+ */ |
+ static visibleEventsFilter() { |
return new WebInspector.TimelineVisibleEventsFilter(WebInspector.TimelineUIUtils._visibleTypes()); |
-}; |
+ } |
-/** |
- * @return {!Object.<string, !WebInspector.TimelineCategory>} |
- */ |
-WebInspector.TimelineUIUtils.categories = function() |
-{ |
+ /** |
+ * @return {!Object.<string, !WebInspector.TimelineCategory>} |
+ */ |
+ static categories() { |
if (WebInspector.TimelineUIUtils._categories) |
- return WebInspector.TimelineUIUtils._categories; |
+ return WebInspector.TimelineUIUtils._categories; |
WebInspector.TimelineUIUtils._categories = { |
- loading: new WebInspector.TimelineCategory("loading", WebInspector.UIString("Loading"), true, "hsl(214, 67%, 74%)", "hsl(214, 67%, 66%)"), |
- scripting: new WebInspector.TimelineCategory("scripting", WebInspector.UIString("Scripting"), true, "hsl(43, 83%, 72%)", "hsl(43, 83%, 64%) "), |
- rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), true, "hsl(256, 67%, 76%)", "hsl(256, 67%, 70%)"), |
- painting: new WebInspector.TimelineCategory("painting", WebInspector.UIString("Painting"), true, "hsl(109, 33%, 64%)", "hsl(109, 33%, 55%)"), |
- gpu: new WebInspector.TimelineCategory("gpu", WebInspector.UIString("GPU"), false, "hsl(109, 33%, 64%)", "hsl(109, 33%, 55%)"), |
- other: new WebInspector.TimelineCategory("other", WebInspector.UIString("Other"), false, "hsl(0, 0%, 87%)", "hsl(0, 0%, 79%)"), |
- idle: new WebInspector.TimelineCategory("idle", WebInspector.UIString("Idle"), false, "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)") |
+ loading: new WebInspector.TimelineCategory( |
+ 'loading', WebInspector.UIString('Loading'), true, 'hsl(214, 67%, 74%)', 'hsl(214, 67%, 66%)'), |
+ scripting: new WebInspector.TimelineCategory( |
+ 'scripting', WebInspector.UIString('Scripting'), true, 'hsl(43, 83%, 72%)', 'hsl(43, 83%, 64%) '), |
+ rendering: new WebInspector.TimelineCategory( |
+ 'rendering', WebInspector.UIString('Rendering'), true, 'hsl(256, 67%, 76%)', 'hsl(256, 67%, 70%)'), |
+ painting: new WebInspector.TimelineCategory( |
+ 'painting', WebInspector.UIString('Painting'), true, 'hsl(109, 33%, 64%)', 'hsl(109, 33%, 55%)'), |
+ gpu: new WebInspector.TimelineCategory( |
+ 'gpu', WebInspector.UIString('GPU'), false, 'hsl(109, 33%, 64%)', 'hsl(109, 33%, 55%)'), |
+ other: new WebInspector.TimelineCategory( |
+ 'other', WebInspector.UIString('Other'), false, 'hsl(0, 0%, 87%)', 'hsl(0, 0%, 79%)'), |
+ idle: new WebInspector.TimelineCategory( |
+ 'idle', WebInspector.UIString('Idle'), false, 'hsl(0, 100%, 100%)', 'hsl(0, 100%, 100%)') |
}; |
return WebInspector.TimelineUIUtils._categories; |
-}; |
+ } |
-/** |
- * @param {!WebInspector.TimelineModel.AsyncEventGroup} group |
- * @return {string} |
- */ |
-WebInspector.TimelineUIUtils.titleForAsyncEventGroup = function(group) |
-{ |
+ /** |
+ * @param {!WebInspector.TimelineModel.AsyncEventGroup} group |
+ * @return {string} |
+ */ |
+ static titleForAsyncEventGroup(group) { |
if (!WebInspector.TimelineUIUtils._titleForAsyncEventGroupMap) { |
- var groups = WebInspector.TimelineModel.AsyncEventGroup; |
- WebInspector.TimelineUIUtils._titleForAsyncEventGroupMap = new Map([ |
- [groups.animation, WebInspector.UIString("Animation")], |
- [groups.console, WebInspector.UIString("Console")], |
- [groups.userTiming, WebInspector.UIString("User Timing")], |
- [groups.input, WebInspector.UIString("Input")] |
- ]); |
- } |
- return WebInspector.TimelineUIUtils._titleForAsyncEventGroupMap.get(group) || ""; |
-}; |
- |
-/** |
- * @param {!Object} aggregatedStats |
- * @param {!WebInspector.TimelineCategory=} selfCategory |
- * @param {number=} selfTime |
- * @return {!Element} |
- */ |
-WebInspector.TimelineUIUtils.generatePieChart = function(aggregatedStats, selfCategory, selfTime) |
-{ |
+ var groups = WebInspector.TimelineModel.AsyncEventGroup; |
+ WebInspector.TimelineUIUtils._titleForAsyncEventGroupMap = new Map([ |
+ [groups.animation, WebInspector.UIString('Animation')], [groups.console, WebInspector.UIString('Console')], |
+ [groups.userTiming, WebInspector.UIString('User Timing')], [groups.input, WebInspector.UIString('Input')] |
+ ]); |
+ } |
+ return WebInspector.TimelineUIUtils._titleForAsyncEventGroupMap.get(group) || ''; |
+ } |
+ |
+ /** |
+ * @param {!Object} aggregatedStats |
+ * @param {!WebInspector.TimelineCategory=} selfCategory |
+ * @param {number=} selfTime |
+ * @return {!Element} |
+ */ |
+ static generatePieChart(aggregatedStats, selfCategory, selfTime) { |
var total = 0; |
for (var categoryName in aggregatedStats) |
- total += aggregatedStats[categoryName]; |
+ total += aggregatedStats[categoryName]; |
- var element = createElementWithClass("div", "timeline-details-view-pie-chart-wrapper hbox"); |
+ var element = createElementWithClass('div', 'timeline-details-view-pie-chart-wrapper hbox'); |
var pieChart = new WebInspector.PieChart(100); |
- pieChart.element.classList.add("timeline-details-view-pie-chart"); |
+ pieChart.element.classList.add('timeline-details-view-pie-chart'); |
pieChart.setTotal(total); |
- var pieChartContainer = element.createChild("div", "vbox"); |
+ var pieChartContainer = element.createChild('div', 'vbox'); |
pieChartContainer.appendChild(pieChart.element); |
- pieChartContainer.createChild("div", "timeline-details-view-pie-chart-total").textContent = WebInspector.UIString("Total: %s", Number.millisToString(total, true)); |
- var footerElement = element.createChild("div", "timeline-aggregated-info-legend"); |
+ pieChartContainer.createChild('div', 'timeline-details-view-pie-chart-total').textContent = |
+ WebInspector.UIString('Total: %s', Number.millisToString(total, true)); |
+ var footerElement = element.createChild('div', 'timeline-aggregated-info-legend'); |
/** |
* @param {string} name |
@@ -1575,579 +1468,766 @@ WebInspector.TimelineUIUtils.generatePieChart = function(aggregatedStats, selfCa |
* @param {number} value |
* @param {string} color |
*/ |
- function appendLegendRow(name, title, value, color) |
- { |
- if (!value) |
- return; |
- pieChart.addSlice(value, color); |
- var rowElement = footerElement.createChild("div"); |
- rowElement.createChild("span", "timeline-aggregated-legend-value").textContent = Number.preciseMillisToString(value, 1); |
- rowElement.createChild("span", "timeline-aggregated-legend-swatch").style.backgroundColor = color; |
- rowElement.createChild("span", "timeline-aggregated-legend-title").textContent = title; |
+ function appendLegendRow(name, title, value, color) { |
+ if (!value) |
+ return; |
+ pieChart.addSlice(value, color); |
+ var rowElement = footerElement.createChild('div'); |
+ rowElement.createChild('span', 'timeline-aggregated-legend-value').textContent = |
+ Number.preciseMillisToString(value, 1); |
+ rowElement.createChild('span', 'timeline-aggregated-legend-swatch').style.backgroundColor = color; |
+ rowElement.createChild('span', 'timeline-aggregated-legend-title').textContent = title; |
} |
// In case of self time, first add self, then children of the same category. |
if (selfCategory) { |
- if (selfTime) |
- appendLegendRow(selfCategory.name, WebInspector.UIString("%s (self)", selfCategory.title), selfTime, selfCategory.color); |
- // Children of the same category. |
- var categoryTime = aggregatedStats[selfCategory.name]; |
- var value = categoryTime - selfTime; |
- if (value > 0) |
- appendLegendRow(selfCategory.name, WebInspector.UIString("%s (children)", selfCategory.title), value, selfCategory.childColor); |
+ if (selfTime) |
+ appendLegendRow( |
+ selfCategory.name, WebInspector.UIString('%s (self)', selfCategory.title), selfTime, selfCategory.color); |
+ // Children of the same category. |
+ var categoryTime = aggregatedStats[selfCategory.name]; |
+ var value = categoryTime - selfTime; |
+ if (value > 0) |
+ appendLegendRow( |
+ selfCategory.name, WebInspector.UIString('%s (children)', selfCategory.title), value, |
+ selfCategory.childColor); |
} |
// Add other categories. |
for (var categoryName in WebInspector.TimelineUIUtils.categories()) { |
- var category = WebInspector.TimelineUIUtils.categories()[categoryName]; |
- if (category === selfCategory) |
- continue; |
- appendLegendRow(category.name, category.title, aggregatedStats[category.name], category.childColor); |
+ var category = WebInspector.TimelineUIUtils.categories()[categoryName]; |
+ if (category === selfCategory) |
+ continue; |
+ appendLegendRow(category.name, category.title, aggregatedStats[category.name], category.childColor); |
} |
return element; |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineFrameModel} frameModel |
- * @param {!WebInspector.TimelineFrame} frame |
- * @param {?WebInspector.FilmStripModel.Frame} filmStripFrame |
- * @return {!Element} |
- */ |
-WebInspector.TimelineUIUtils.generateDetailsContentForFrame = function(frameModel, frame, filmStripFrame) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineFrameModel} frameModel |
+ * @param {!WebInspector.TimelineFrame} frame |
+ * @param {?WebInspector.FilmStripModel.Frame} filmStripFrame |
+ * @return {!Element} |
+ */ |
+ static generateDetailsContentForFrame(frameModel, frame, filmStripFrame) { |
var pieChart = WebInspector.TimelineUIUtils.generatePieChart(frame.timeByCategory); |
var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null); |
- contentHelper.addSection(WebInspector.UIString("Frame")); |
+ contentHelper.addSection(WebInspector.UIString('Frame')); |
var duration = WebInspector.TimelineUIUtils.frameDuration(frame); |
- contentHelper.appendElementRow(WebInspector.UIString("Duration"), duration, frame.hasWarnings()); |
+ contentHelper.appendElementRow(WebInspector.UIString('Duration'), duration, frame.hasWarnings()); |
if (filmStripFrame) { |
- var filmStripPreview = createElementWithClass("img", "timeline-filmstrip-preview"); |
- filmStripFrame.imageDataPromise().then(onGotImageData.bind(null, filmStripPreview)); |
- contentHelper.appendElementRow("", filmStripPreview); |
- filmStripPreview.addEventListener("click", frameClicked.bind(null, filmStripFrame), false); |
+ var filmStripPreview = createElementWithClass('img', 'timeline-filmstrip-preview'); |
+ filmStripFrame.imageDataPromise().then(onGotImageData.bind(null, filmStripPreview)); |
+ contentHelper.appendElementRow('', filmStripPreview); |
+ filmStripPreview.addEventListener('click', frameClicked.bind(null, filmStripFrame), false); |
} |
var durationInMillis = frame.endTime - frame.startTime; |
- contentHelper.appendTextRow(WebInspector.UIString("FPS"), Math.floor(1000 / durationInMillis)); |
- contentHelper.appendTextRow(WebInspector.UIString("CPU time"), Number.millisToString(frame.cpuTime, true)); |
+ contentHelper.appendTextRow(WebInspector.UIString('FPS'), Math.floor(1000 / durationInMillis)); |
+ contentHelper.appendTextRow(WebInspector.UIString('CPU time'), Number.millisToString(frame.cpuTime, true)); |
- if (Runtime.experiments.isEnabled("layersPanel") && frame.layerTree) { |
- contentHelper.appendElementRow(WebInspector.UIString("Layer tree"), |
- WebInspector.Linkifier.linkifyUsingRevealer(frame.layerTree, WebInspector.UIString("show"))); |
+ if (Runtime.experiments.isEnabled('layersPanel') && frame.layerTree) { |
+ contentHelper.appendElementRow( |
+ WebInspector.UIString('Layer tree'), |
+ WebInspector.Linkifier.linkifyUsingRevealer(frame.layerTree, WebInspector.UIString('show'))); |
} |
/** |
* @param {!Element} image |
* @param {?string} data |
*/ |
- function onGotImageData(image, data) |
- { |
- if (data) |
- image.src = "data:image/jpg;base64," + data; |
+ function onGotImageData(image, data) { |
+ if (data) |
+ image.src = 'data:image/jpg;base64,' + data; |
} |
/** |
* @param {!WebInspector.FilmStripModel.Frame} filmStripFrame |
*/ |
- function frameClicked(filmStripFrame) |
- { |
- new WebInspector.FilmStripView.Dialog(filmStripFrame, 0); |
+ function frameClicked(filmStripFrame) { |
+ new WebInspector.FilmStripView.Dialog(filmStripFrame, 0); |
} |
return contentHelper.fragment; |
-}; |
- |
-/** |
- * @param {!WebInspector.TimelineFrame} frame |
- * @return {!Element} |
- */ |
-WebInspector.TimelineUIUtils.frameDuration = function(frame) |
-{ |
- var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString(frame.endTime - frame.startTime, true), |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TimelineFrame} frame |
+ * @return {!Element} |
+ */ |
+ static frameDuration(frame) { |
+ var durationText = WebInspector.UIString( |
+ '%s (at %s)', Number.millisToString(frame.endTime - frame.startTime, true), |
Number.millisToString(frame.startTimeOffset, true)); |
- var element = createElement("span"); |
+ var element = createElement('span'); |
element.createTextChild(durationText); |
if (!frame.hasWarnings()) |
- return element; |
- element.createTextChild(WebInspector.UIString(". Long frame times are an indication of ")); |
- element.appendChild(WebInspector.linkifyURLAsNode("https://developers.google.com/web/fundamentals/performance/rendering/", |
- WebInspector.UIString("jank"), undefined, true)); |
- element.createTextChild("."); |
+ return element; |
+ element.createTextChild(WebInspector.UIString('. Long frame times are an indication of ')); |
+ element.appendChild(WebInspector.linkifyURLAsNode( |
+ 'https://developers.google.com/web/fundamentals/performance/rendering/', WebInspector.UIString('jank'), |
+ undefined, true)); |
+ element.createTextChild('.'); |
return element; |
-}; |
- |
-/** |
- * @param {!CanvasRenderingContext2D} context |
- * @param {number} width |
- * @param {number} height |
- * @param {string} color0 |
- * @param {string} color1 |
- * @param {string} color2 |
- * @return {!CanvasGradient} |
- */ |
-WebInspector.TimelineUIUtils.createFillStyle = function(context, width, height, color0, color1, color2) |
-{ |
+ } |
+ |
+ /** |
+ * @param {!CanvasRenderingContext2D} context |
+ * @param {number} width |
+ * @param {number} height |
+ * @param {string} color0 |
+ * @param {string} color1 |
+ * @param {string} color2 |
+ * @return {!CanvasGradient} |
+ */ |
+ static createFillStyle(context, width, height, color0, color1, color2) { |
var gradient = context.createLinearGradient(0, 0, width, height); |
gradient.addColorStop(0, color0); |
gradient.addColorStop(0.25, color1); |
gradient.addColorStop(0.75, color1); |
gradient.addColorStop(1, color2); |
return gradient; |
-}; |
+ } |
-/** |
- * @param {!Array.<number>} quad |
- * @return {number} |
- */ |
-WebInspector.TimelineUIUtils.quadWidth = function(quad) |
-{ |
+ /** |
+ * @param {!Array.<number>} quad |
+ * @return {number} |
+ */ |
+ static quadWidth(quad) { |
return Math.round(Math.sqrt(Math.pow(quad[0] - quad[2], 2) + Math.pow(quad[1] - quad[3], 2))); |
-}; |
+ } |
-/** |
- * @param {!Array.<number>} quad |
- * @return {number} |
- */ |
-WebInspector.TimelineUIUtils.quadHeight = function(quad) |
-{ |
+ /** |
+ * @param {!Array.<number>} quad |
+ * @return {number} |
+ */ |
+ static quadHeight(quad) { |
return Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2))); |
-}; |
+ } |
-/** |
- * @constructor |
- * @param {number} priority |
- * @param {string} color |
- * @param {!Array.<string>} eventTypes |
- */ |
-WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor = function(priority, color, eventTypes) |
-{ |
- this.priority = priority; |
- this.color = color; |
- this.eventTypes = eventTypes; |
-}; |
- |
-/** |
- * @return {!Array.<!WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor>} |
- */ |
-WebInspector.TimelineUIUtils.eventDispatchDesciptors = function() |
-{ |
+ /** |
+ * @return {!Array.<!WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor>} |
+ */ |
+ static eventDispatchDesciptors() { |
if (WebInspector.TimelineUIUtils._eventDispatchDesciptors) |
- return WebInspector.TimelineUIUtils._eventDispatchDesciptors; |
- var lightOrange = "hsl(40,100%,80%)"; |
- var orange = "hsl(40,100%,50%)"; |
- var green = "hsl(90,100%,40%)"; |
- var purple = "hsl(256,100%,75%)"; |
+ return WebInspector.TimelineUIUtils._eventDispatchDesciptors; |
+ var lightOrange = 'hsl(40,100%,80%)'; |
+ var orange = 'hsl(40,100%,50%)'; |
+ var green = 'hsl(90,100%,40%)'; |
+ var purple = 'hsl(256,100%,75%)'; |
WebInspector.TimelineUIUtils._eventDispatchDesciptors = [ |
- new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(1, lightOrange, ["mousemove", "mouseenter", "mouseleave", "mouseout", "mouseover"]), |
- new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(1, lightOrange, ["pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove"]), |
- new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(2, green, ["wheel"]), |
- new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(3, orange, ["click", "mousedown", "mouseup"]), |
- new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(3, orange, ["touchstart", "touchend", "touchmove", "touchcancel"]), |
- new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(3, orange, ["pointerdown", "pointerup", "pointercancel", "gotpointercapture", "lostpointercapture"]), |
- new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(3, purple, ["keydown", "keyup", "keypress"]) |
+ new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor( |
+ 1, lightOrange, ['mousemove', 'mouseenter', 'mouseleave', 'mouseout', 'mouseover']), |
+ new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor( |
+ 1, lightOrange, ['pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointermove']), |
+ new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(2, green, ['wheel']), |
+ new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(3, orange, ['click', 'mousedown', 'mouseup']), |
+ new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor( |
+ 3, orange, ['touchstart', 'touchend', 'touchmove', 'touchcancel']), |
+ new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor( |
+ 3, orange, ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture']), |
+ new WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor(3, purple, ['keydown', 'keyup', 'keypress']) |
]; |
return WebInspector.TimelineUIUtils._eventDispatchDesciptors; |
-}; |
- |
-/** |
- * @constructor |
- * @extends {WebInspector.Object} |
- * @param {string} name |
- * @param {string} title |
- * @param {boolean} visible |
- * @param {string} childColor |
- * @param {string} color |
- */ |
-WebInspector.TimelineCategory = function(name, title, visible, childColor, color) |
-{ |
- this.name = name; |
- this.title = title; |
- this.visible = visible; |
- this.childColor = childColor; |
- this.color = color; |
- this.hidden = false; |
-}; |
- |
-/** @enum {symbol} */ |
-WebInspector.TimelineCategory.Events = { |
- VisibilityChanged: Symbol("VisibilityChanged") |
-}; |
- |
-WebInspector.TimelineCategory.prototype = { |
- /** |
- * @return {boolean} |
- */ |
- get hidden() |
- { |
- return this._hidden; |
- }, |
- |
- set hidden(hidden) |
- { |
- this._hidden = hidden; |
- this.dispatchEventToListeners(WebInspector.TimelineCategory.Events.VisibilityChanged, this); |
- }, |
- |
- __proto__: WebInspector.Object.prototype |
-}; |
- |
-/** |
- * @typedef {!{ |
- * title: string, |
- * color: string, |
- * lineWidth: number, |
- * dashStyle: !Array.<number>, |
- * tall: boolean, |
- * lowPriority: boolean |
- * }} |
- */ |
-WebInspector.TimelineMarkerStyle; |
- |
-/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @return {!WebInspector.TimelineMarkerStyle} |
- */ |
-WebInspector.TimelineUIUtils.markerStyleForEvent = function(event) |
-{ |
- var red = "rgb(255, 0, 0)"; |
- var blue = "rgb(0, 0, 255)"; |
- var orange = "rgb(255, 178, 23)"; |
- var green = "rgb(0, 130, 0)"; |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @return {!WebInspector.TimelineMarkerStyle} |
+ */ |
+ static markerStyleForEvent(event) { |
+ var red = 'rgb(255, 0, 0)'; |
+ var blue = 'rgb(0, 0, 255)'; |
+ var orange = 'rgb(255, 178, 23)'; |
+ var green = 'rgb(0, 130, 0)'; |
var tallMarkerDashStyle = [10, 5]; |
var title = WebInspector.TimelineUIUtils.eventTitle(event); |
- if (event.hasCategory(WebInspector.TimelineModel.Category.Console) || event.hasCategory(WebInspector.TimelineModel.Category.UserTiming)) { |
- return { |
- title: title, |
- dashStyle: tallMarkerDashStyle, |
- lineWidth: 0.5, |
- color: orange, |
- tall: false, |
- lowPriority: false, |
- }; |
+ if (event.hasCategory(WebInspector.TimelineModel.Category.Console) || |
+ event.hasCategory(WebInspector.TimelineModel.Category.UserTiming)) { |
+ return { |
+ title: title, |
+ dashStyle: tallMarkerDashStyle, |
+ lineWidth: 0.5, |
+ color: orange, |
+ tall: false, |
+ lowPriority: false, |
+ }; |
} |
var recordTypes = WebInspector.TimelineModel.RecordType; |
var tall = false; |
var color = green; |
switch (event.name) { |
- case recordTypes.MarkDOMContent: |
+ case recordTypes.MarkDOMContent: |
color = blue; |
tall = true; |
break; |
- case recordTypes.MarkLoad: |
+ case recordTypes.MarkLoad: |
color = red; |
tall = true; |
break; |
- case recordTypes.MarkFirstPaint: |
+ case recordTypes.MarkFirstPaint: |
color = green; |
tall = true; |
break; |
- case recordTypes.TimeStamp: |
+ case recordTypes.TimeStamp: |
color = orange; |
break; |
} |
return { |
- title: title, |
- dashStyle: tallMarkerDashStyle, |
- lineWidth: 0.5, |
- color: color, |
- tall: tall, |
- lowPriority: false, |
+ title: title, |
+ dashStyle: tallMarkerDashStyle, |
+ lineWidth: 0.5, |
+ color: color, |
+ tall: tall, |
+ lowPriority: false, |
}; |
-}; |
+ } |
-/** |
- * @return {!WebInspector.TimelineMarkerStyle} |
- */ |
-WebInspector.TimelineUIUtils.markerStyleForFrame = function() |
-{ |
+ /** |
+ * @return {!WebInspector.TimelineMarkerStyle} |
+ */ |
+ static markerStyleForFrame() { |
return { |
- title: WebInspector.UIString("Frame"), |
- color: "rgba(100, 100, 100, 0.4)", |
- lineWidth: 3, |
- dashStyle: [3], |
- tall: true, |
- lowPriority: true |
+ title: WebInspector.UIString('Frame'), |
+ color: 'rgba(100, 100, 100, 0.4)', |
+ lineWidth: 3, |
+ dashStyle: [3], |
+ tall: true, |
+ lowPriority: true |
}; |
-}; |
+ } |
-/** |
- * @param {string} url |
- * @return {string} |
- */ |
-WebInspector.TimelineUIUtils.colorForURL = function(url) |
-{ |
+ /** |
+ * @param {string} url |
+ * @return {string} |
+ */ |
+ static colorForURL(url) { |
if (!WebInspector.TimelineUIUtils.colorForURL._colorGenerator) { |
- WebInspector.TimelineUIUtils.colorForURL._colorGenerator = new WebInspector.FlameChart.ColorGenerator( |
- { min: 30, max: 330 }, |
- { min: 50, max: 80, count: 3 }, |
- 85); |
+ WebInspector.TimelineUIUtils.colorForURL._colorGenerator = |
+ new WebInspector.FlameChart.ColorGenerator({min: 30, max: 330}, {min: 50, max: 80, count: 3}, 85); |
} |
return WebInspector.TimelineUIUtils.colorForURL._colorGenerator.colorForID(url); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {string=} warningType |
+ * @return {?Element} |
+ */ |
+ static eventWarning(event, warningType) { |
+ var warning = warningType || event.warning; |
+ if (!warning) |
+ return null; |
+ var warnings = WebInspector.TimelineModel.WarningType; |
+ var span = createElement('span'); |
+ var eventData = event.args['data']; |
+ |
+ switch (warning) { |
+ case warnings.ForcedStyle: |
+ case warnings.ForcedLayout: |
+ span.appendChild(WebInspector.linkifyDocumentationURLAsNode( |
+ '../../fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts', |
+ WebInspector.UIString('Forced reflow'))); |
+ span.createTextChild(WebInspector.UIString(' is a likely performance bottleneck.')); |
+ break; |
+ case warnings.IdleDeadlineExceeded: |
+ span.textContent = WebInspector.UIString( |
+ 'Idle callback execution extended beyond deadline by ' + |
+ Number.millisToString(event.duration - eventData['allottedMilliseconds'], true)); |
+ break; |
+ case warnings.V8Deopt: |
+ span.appendChild(WebInspector.linkifyURLAsNode( |
+ 'https://github.com/GoogleChrome/devtools-docs/issues/53', WebInspector.UIString('Not optimized'), |
+ undefined, true)); |
+ span.createTextChild(WebInspector.UIString(': %s', eventData['deoptReason'])); |
+ break; |
+ default: |
+ console.assert(false, 'Unhandled TimelineModel.WarningType'); |
+ } |
+ return span; |
+ } |
}; |
/** |
- * @constructor |
- * @param {string} title |
+ * @unrestricted |
*/ |
-WebInspector.TimelinePopupContentHelper = function(title) |
-{ |
- this._contentTable = createElement("table"); |
- var titleCell = this._createCell(WebInspector.UIString("%s - Details", title), "timeline-details-title"); |
- titleCell.colSpan = 2; |
- var titleRow = createElement("tr"); |
- titleRow.appendChild(titleCell); |
- this._contentTable.appendChild(titleRow); |
+WebInspector.TimelineRecordStyle = class { |
+ /** |
+ * @param {string} title |
+ * @param {!WebInspector.TimelineCategory} category |
+ * @param {boolean=} hidden |
+ */ |
+ constructor(title, category, hidden) { |
+ this.title = title; |
+ this.category = category; |
+ this.hidden = !!hidden; |
+ } |
}; |
-WebInspector.TimelinePopupContentHelper.prototype = { |
- /** |
- * @return {!Element} |
- */ |
- contentTable: function() |
- { |
- return this._contentTable; |
- }, |
- /** |
- * @param {string|number} content |
- * @param {string=} styleName |
- */ |
- _createCell: function(content, styleName) |
- { |
- var text = createElement("label"); |
- text.createTextChild(String(content)); |
- var cell = createElement("td"); |
- cell.className = "timeline-details"; |
- if (styleName) |
- cell.className += " " + styleName; |
- cell.textContent = content; |
- return cell; |
- }, |
+/** |
+ * @enum {symbol} |
+ */ |
+WebInspector.TimelineUIUtils.NetworkCategory = { |
+ HTML: Symbol('HTML'), |
+ Script: Symbol('Script'), |
+ Style: Symbol('Style'), |
+ Media: Symbol('Media'), |
+ Other: Symbol('Other') |
+}; |
- /** |
- * @param {string} title |
- * @param {string|number} content |
- */ |
- appendTextRow: function(title, content) |
- { |
- var row = createElement("tr"); |
- row.appendChild(this._createCell(title, "timeline-details-row-title")); |
- row.appendChild(this._createCell(content, "timeline-details-row-data")); |
- this._contentTable.appendChild(row); |
- }, |
- /** |
- * @param {string} title |
- * @param {!Node|string} content |
- */ |
- appendElementRow: function(title, content) |
- { |
- var row = createElement("tr"); |
- var titleCell = this._createCell(title, "timeline-details-row-title"); |
- row.appendChild(titleCell); |
- var cell = createElement("td"); |
- cell.className = "details"; |
- if (content instanceof Node) |
- cell.appendChild(content); |
- else |
- cell.createTextChild(content || ""); |
- row.appendChild(cell); |
- this._contentTable.appendChild(row); |
- } |
-}; |
+WebInspector.TimelineUIUtils._aggregatedStatsKey = Symbol('aggregatedStats'); |
+ |
/** |
- * @constructor |
- * @param {?WebInspector.Target} target |
- * @param {?WebInspector.Linkifier} linkifier |
+ * @unrestricted |
*/ |
-WebInspector.TimelineDetailsContentHelper = function(target, linkifier) |
-{ |
- this.fragment = createDocumentFragment(); |
- |
- this._linkifier = linkifier; |
- this._target = target; |
+WebInspector.TimelineUIUtils.InvalidationsGroupElement = class extends TreeElement { |
+ /** |
+ * @param {!WebInspector.Target} target |
+ * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap |
+ * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper |
+ * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations |
+ */ |
+ constructor(target, relatedNodesMap, contentHelper, invalidations) { |
+ super('', true); |
+ |
+ this.listItemElement.classList.add('header'); |
+ this.selectable = false; |
+ this.toggleOnClick = true; |
- this.element = createElementWithClass("div", "timeline-details-view-block"); |
- this._tableElement = this.element.createChild("div", "vbox timeline-details-chip-body"); |
- this.fragment.appendChild(this.element); |
-}; |
+ this._relatedNodesMap = relatedNodesMap; |
+ this._contentHelper = contentHelper; |
+ this._invalidations = invalidations; |
+ this.title = this._createTitle(target); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.Target} target |
+ * @return {!Element} |
+ */ |
+ _createTitle(target) { |
+ var first = this._invalidations[0]; |
+ var reason = first.cause.reason; |
+ var topFrame = first.cause.stackTrace && first.cause.stackTrace[0]; |
+ |
+ var title = createElement('span'); |
+ if (reason) |
+ title.createTextChild(WebInspector.UIString('%s for ', reason)); |
+ else |
+ title.createTextChild(WebInspector.UIString('Unknown cause for ')); |
+ |
+ this._appendTruncatedNodeList(title, this._invalidations); |
+ |
+ if (topFrame && this._contentHelper.linkifier()) { |
+ title.createTextChild(WebInspector.UIString('. ')); |
+ var stack = title.createChild('span', 'monospace'); |
+ stack.createChild('span').textContent = WebInspector.beautifyFunctionName(topFrame.functionName); |
+ var link = this._contentHelper.linkifier().maybeLinkifyConsoleCallFrame(target, topFrame); |
+ if (link) { |
+ stack.createChild('span').textContent = ' @ '; |
+ stack.createChild('span').appendChild(link); |
+ } |
+ } |
-WebInspector.TimelineDetailsContentHelper.prototype = { |
- /** |
- * @param {string} title |
- * @param {!WebInspector.TimelineCategory=} category |
- */ |
- addSection: function(title, category) |
- { |
- if (!this._tableElement.hasChildNodes()) { |
- this.element.removeChildren(); |
- } else { |
- this.element = createElementWithClass("div", "timeline-details-view-block"); |
- this.fragment.appendChild(this.element); |
- } |
+ return title; |
+ } |
+ |
+ /** |
+ * @override |
+ */ |
+ onpopulate() { |
+ var content = createElementWithClass('div', 'content'); |
+ |
+ var first = this._invalidations[0]; |
+ if (first.cause.stackTrace) { |
+ var stack = content.createChild('div'); |
+ stack.createTextChild(WebInspector.UIString('Stack trace:')); |
+ this._contentHelper.createChildStackTraceElement( |
+ stack, WebInspector.TimelineUIUtils._stackTraceFromCallFrames(first.cause.stackTrace)); |
+ } |
- if (title) { |
- var titleElement = this.element.createChild("div", "timeline-details-chip-title"); |
- if (category) |
- titleElement.createChild("div").style.backgroundColor = category.color; |
- titleElement.createTextChild(title); |
- } |
+ content.createTextChild( |
+ this._invalidations.length > 1 ? WebInspector.UIString('Nodes:') : WebInspector.UIString('Node:')); |
+ var nodeList = content.createChild('div', 'node-list'); |
+ var firstNode = true; |
+ for (var i = 0; i < this._invalidations.length; i++) { |
+ var invalidation = this._invalidations[i]; |
+ var invalidationNode = this._createInvalidationNode(invalidation, true); |
+ if (invalidationNode) { |
+ if (!firstNode) |
+ nodeList.createTextChild(WebInspector.UIString(', ')); |
+ firstNode = false; |
+ |
+ nodeList.appendChild(invalidationNode); |
+ |
+ var extraData = invalidation.extraData ? ', ' + invalidation.extraData : ''; |
+ if (invalidation.changedId) |
+ nodeList.createTextChild(WebInspector.UIString('(changed id to "%s"%s)', invalidation.changedId, extraData)); |
+ else if (invalidation.changedClass) |
+ nodeList.createTextChild( |
+ WebInspector.UIString('(changed class to "%s"%s)', invalidation.changedClass, extraData)); |
+ else if (invalidation.changedAttribute) |
+ nodeList.createTextChild( |
+ WebInspector.UIString('(changed attribute to "%s"%s)', invalidation.changedAttribute, extraData)); |
+ else if (invalidation.changedPseudo) |
+ nodeList.createTextChild( |
+ WebInspector.UIString('(changed pesudo to "%s"%s)', invalidation.changedPseudo, extraData)); |
+ else if (invalidation.selectorPart) |
+ nodeList.createTextChild(WebInspector.UIString('(changed "%s"%s)', invalidation.selectorPart, extraData)); |
+ } |
+ } |
- this._tableElement = this.element.createChild("div", "vbox timeline-details-chip-body"); |
- this.fragment.appendChild(this.element); |
- }, |
+ var contentTreeElement = new TreeElement(content, false); |
+ contentTreeElement.selectable = false; |
+ this.appendChild(contentTreeElement); |
+ } |
+ |
+ /** |
+ * @param {!Element} parentElement |
+ * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations |
+ */ |
+ _appendTruncatedNodeList(parentElement, invalidations) { |
+ var invalidationNodes = []; |
+ var invalidationNodeIdMap = {}; |
+ for (var i = 0; i < invalidations.length; i++) { |
+ var invalidation = invalidations[i]; |
+ var invalidationNode = this._createInvalidationNode(invalidation, false); |
+ invalidationNode.addEventListener('click', (e) => e.consume(), false); |
+ if (invalidationNode && !invalidationNodeIdMap[invalidation.nodeId]) { |
+ invalidationNodes.push(invalidationNode); |
+ invalidationNodeIdMap[invalidation.nodeId] = true; |
+ } |
+ } |
- /** |
- * @return {?WebInspector.Linkifier} |
- */ |
- linkifier: function() |
- { |
- return this._linkifier; |
- }, |
+ if (invalidationNodes.length === 1) { |
+ parentElement.appendChild(invalidationNodes[0]); |
+ } else if (invalidationNodes.length === 2) { |
+ parentElement.appendChild(invalidationNodes[0]); |
+ parentElement.createTextChild(WebInspector.UIString(' and ')); |
+ parentElement.appendChild(invalidationNodes[1]); |
+ } else if (invalidationNodes.length >= 3) { |
+ parentElement.appendChild(invalidationNodes[0]); |
+ parentElement.createTextChild(WebInspector.UIString(', ')); |
+ parentElement.appendChild(invalidationNodes[1]); |
+ parentElement.createTextChild(WebInspector.UIString(', and %s others', invalidationNodes.length - 2)); |
+ } |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.InvalidationTrackingEvent} invalidation |
+ * @param {boolean} showUnknownNodes |
+ */ |
+ _createInvalidationNode(invalidation, showUnknownNodes) { |
+ var node = (invalidation.nodeId && this._relatedNodesMap) ? this._relatedNodesMap.get(invalidation.nodeId) : null; |
+ if (node) |
+ return WebInspector.DOMPresentationUtils.linkifyNodeReference(node); |
+ if (invalidation.nodeName) { |
+ var nodeSpan = createElement('span'); |
+ nodeSpan.textContent = WebInspector.UIString('[ %s ]', invalidation.nodeName); |
+ return nodeSpan; |
+ } |
+ if (showUnknownNodes) { |
+ var nodeSpan = createElement('span'); |
+ return nodeSpan.createTextChild(WebInspector.UIString('[ unknown node ]')); |
+ } |
+ } |
+}; |
- /** |
- * @param {string} title |
- * @param {string|number|boolean} value |
- */ |
- appendTextRow: function(title, value) |
- { |
- var rowElement = this._tableElement.createChild("div", "timeline-details-view-row"); |
- rowElement.createChild("div", "timeline-details-view-row-title").textContent = title; |
- rowElement.createChild("div", "timeline-details-view-row-value").textContent = value; |
- }, |
- /** |
- * @param {string} title |
- * @param {!Node|string} content |
- * @param {boolean=} isWarning |
- * @param {boolean=} isStacked |
- */ |
- appendElementRow: function(title, content, isWarning, isStacked) |
- { |
- var rowElement = this._tableElement.createChild("div", "timeline-details-view-row"); |
- if (isWarning) |
- rowElement.classList.add("timeline-details-warning"); |
- if (isStacked) |
- rowElement.classList.add("timeline-details-stack-values"); |
- var titleElement = rowElement.createChild("div", "timeline-details-view-row-title"); |
- titleElement.textContent = title; |
- var valueElement = rowElement.createChild("div", "timeline-details-view-row-value"); |
- if (content instanceof Node) |
- valueElement.appendChild(content); |
- else |
- valueElement.createTextChild(content || ""); |
- }, |
+/** |
+ * @unrestricted |
+ */ |
+WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor = class { |
+ /** |
+ * @param {number} priority |
+ * @param {string} color |
+ * @param {!Array.<string>} eventTypes |
+ */ |
+ constructor(priority, color, eventTypes) { |
+ this.priority = priority; |
+ this.color = color; |
+ this.eventTypes = eventTypes; |
+ } |
+}; |
- /** |
- * @param {string} title |
- * @param {string} url |
- * @param {number} startLine |
- * @param {number=} startColumn |
- */ |
- appendLocationRow: function(title, url, startLine, startColumn) |
- { |
- if (!this._linkifier || !this._target) |
- return; |
- var link = this._linkifier.maybeLinkifyScriptLocation(this._target, null, url, startLine, startColumn); |
- if (!link) |
- return; |
- this.appendElementRow(title, link); |
- }, |
- /** |
- * @param {string} title |
- * @param {string} url |
- * @param {number} startLine |
- * @param {number=} endLine |
- */ |
- appendLocationRange: function(title, url, startLine, endLine) |
- { |
- if (!this._linkifier || !this._target) |
- return; |
- var locationContent = createElement("span"); |
- var link = this._linkifier.maybeLinkifyScriptLocation(this._target, null, url, startLine); |
- if (!link) |
- return; |
- locationContent.appendChild(link); |
- locationContent.createTextChild(String.sprintf(" [%s\u2026%s]", startLine + 1, endLine + 1 || "")); |
- this.appendElementRow(title, locationContent); |
- }, |
+/** |
+ * @unrestricted |
+ */ |
+WebInspector.TimelineCategory = class extends WebInspector.Object { |
+ /** |
+ * @param {string} name |
+ * @param {string} title |
+ * @param {boolean} visible |
+ * @param {string} childColor |
+ * @param {string} color |
+ */ |
+ constructor(name, title, visible, childColor, color) { |
+ super(); |
+ this.name = name; |
+ this.title = title; |
+ this.visible = visible; |
+ this.childColor = childColor; |
+ this.color = color; |
+ this.hidden = false; |
+ } |
+ |
+ /** |
+ * @return {boolean} |
+ */ |
+ get hidden() { |
+ return this._hidden; |
+ } |
+ |
+ /** |
+ * @param {boolean} hidden |
+ */ |
+ set hidden(hidden) { |
+ this._hidden = hidden; |
+ this.dispatchEventToListeners(WebInspector.TimelineCategory.Events.VisibilityChanged, this); |
+ } |
+}; |
- /** |
- * @param {string} title |
- * @param {!RuntimeAgent.StackTrace} stackTrace |
- */ |
- appendStackTrace: function(title, stackTrace) |
- { |
- if (!this._linkifier || !this._target) |
- return; |
+/** @enum {symbol} */ |
+WebInspector.TimelineCategory.Events = { |
+ VisibilityChanged: Symbol('VisibilityChanged') |
+}; |
- var rowElement = this._tableElement.createChild("div", "timeline-details-view-row"); |
- rowElement.createChild("div", "timeline-details-view-row-title").textContent = title; |
- this.createChildStackTraceElement(rowElement, stackTrace); |
- }, |
+/** |
+ * @typedef {!{ |
+ * title: string, |
+ * color: string, |
+ * lineWidth: number, |
+ * dashStyle: !Array.<number>, |
+ * tall: boolean, |
+ * lowPriority: boolean |
+ * }} |
+ */ |
+WebInspector.TimelineMarkerStyle; |
- /** |
- * @param {!Element} parentElement |
- * @param {!RuntimeAgent.StackTrace} stackTrace |
- */ |
- createChildStackTraceElement: function(parentElement, stackTrace) |
- { |
- if (!this._linkifier || !this._target) |
- return; |
- parentElement.classList.add("timeline-details-stack-values"); |
- var stackTraceElement = parentElement.createChild("div", "timeline-details-view-row-value timeline-details-view-row-stack-trace"); |
- var callFrameElem = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(this._target, this._linkifier, stackTrace); |
- stackTraceElement.appendChild(callFrameElem); |
- }, |
- /** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {string=} warningType |
- */ |
- appendWarningRow: function(event, warningType) |
- { |
- var warning = WebInspector.TimelineUIUtils.eventWarning(event, warningType); |
- if (warning) |
- this.appendElementRow(WebInspector.UIString("Warning"), warning, true); |
- } |
+/** |
+ * @unrestricted |
+ */ |
+WebInspector.TimelinePopupContentHelper = class { |
+ /** |
+ * @param {string} title |
+ */ |
+ constructor(title) { |
+ this._contentTable = createElement('table'); |
+ var titleCell = this._createCell(WebInspector.UIString('%s - Details', title), 'timeline-details-title'); |
+ titleCell.colSpan = 2; |
+ var titleRow = createElement('tr'); |
+ titleRow.appendChild(titleCell); |
+ this._contentTable.appendChild(titleRow); |
+ } |
+ |
+ /** |
+ * @return {!Element} |
+ */ |
+ contentTable() { |
+ return this._contentTable; |
+ } |
+ |
+ /** |
+ * @param {string|number} content |
+ * @param {string=} styleName |
+ */ |
+ _createCell(content, styleName) { |
+ var text = createElement('label'); |
+ text.createTextChild(String(content)); |
+ var cell = createElement('td'); |
+ cell.className = 'timeline-details'; |
+ if (styleName) |
+ cell.className += ' ' + styleName; |
+ cell.textContent = content; |
+ return cell; |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {string|number} content |
+ */ |
+ appendTextRow(title, content) { |
+ var row = createElement('tr'); |
+ row.appendChild(this._createCell(title, 'timeline-details-row-title')); |
+ row.appendChild(this._createCell(content, 'timeline-details-row-data')); |
+ this._contentTable.appendChild(row); |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {!Node|string} content |
+ */ |
+ appendElementRow(title, content) { |
+ var row = createElement('tr'); |
+ var titleCell = this._createCell(title, 'timeline-details-row-title'); |
+ row.appendChild(titleCell); |
+ var cell = createElement('td'); |
+ cell.className = 'details'; |
+ if (content instanceof Node) |
+ cell.appendChild(content); |
+ else |
+ cell.createTextChild(content || ''); |
+ row.appendChild(cell); |
+ this._contentTable.appendChild(row); |
+ } |
}; |
/** |
- * @param {!WebInspector.TracingModel.Event} event |
- * @param {string=} warningType |
- * @return {?Element} |
+ * @unrestricted |
*/ |
-WebInspector.TimelineUIUtils.eventWarning = function(event, warningType) |
-{ |
- var warning = warningType || event.warning; |
- if (!warning) |
- return null; |
- var warnings = WebInspector.TimelineModel.WarningType; |
- var span = createElement("span"); |
- var eventData = event.args["data"]; |
+WebInspector.TimelineDetailsContentHelper = class { |
+ /** |
+ * @param {?WebInspector.Target} target |
+ * @param {?WebInspector.Linkifier} linkifier |
+ */ |
+ constructor(target, linkifier) { |
+ this.fragment = createDocumentFragment(); |
- switch (warning) { |
- case warnings.ForcedStyle: |
- case warnings.ForcedLayout: |
- span.appendChild(WebInspector.linkifyDocumentationURLAsNode("../../fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts", |
- WebInspector.UIString("Forced reflow"))); |
- span.createTextChild(WebInspector.UIString(" is a likely performance bottleneck.")); |
- break; |
- case warnings.IdleDeadlineExceeded: |
- span.textContent = WebInspector.UIString("Idle callback execution extended beyond deadline by " + |
- Number.millisToString(event.duration - eventData["allottedMilliseconds"], true)); |
- break; |
- case warnings.V8Deopt: |
- span.appendChild(WebInspector.linkifyURLAsNode("https://github.com/GoogleChrome/devtools-docs/issues/53", |
- WebInspector.UIString("Not optimized"), undefined, true)); |
- span.createTextChild(WebInspector.UIString(": %s", eventData["deoptReason"])); |
- break; |
- default: |
- console.assert(false, "Unhandled TimelineModel.WarningType"); |
+ this._linkifier = linkifier; |
+ this._target = target; |
+ |
+ this.element = createElementWithClass('div', 'timeline-details-view-block'); |
+ this._tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body'); |
+ this.fragment.appendChild(this.element); |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {!WebInspector.TimelineCategory=} category |
+ */ |
+ addSection(title, category) { |
+ if (!this._tableElement.hasChildNodes()) { |
+ this.element.removeChildren(); |
+ } else { |
+ this.element = createElementWithClass('div', 'timeline-details-view-block'); |
+ this.fragment.appendChild(this.element); |
} |
- return span; |
+ |
+ if (title) { |
+ var titleElement = this.element.createChild('div', 'timeline-details-chip-title'); |
+ if (category) |
+ titleElement.createChild('div').style.backgroundColor = category.color; |
+ titleElement.createTextChild(title); |
+ } |
+ |
+ this._tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body'); |
+ this.fragment.appendChild(this.element); |
+ } |
+ |
+ /** |
+ * @return {?WebInspector.Linkifier} |
+ */ |
+ linkifier() { |
+ return this._linkifier; |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {string|number|boolean} value |
+ */ |
+ appendTextRow(title, value) { |
+ var rowElement = this._tableElement.createChild('div', 'timeline-details-view-row'); |
+ rowElement.createChild('div', 'timeline-details-view-row-title').textContent = title; |
+ rowElement.createChild('div', 'timeline-details-view-row-value').textContent = value; |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {!Node|string} content |
+ * @param {boolean=} isWarning |
+ * @param {boolean=} isStacked |
+ */ |
+ appendElementRow(title, content, isWarning, isStacked) { |
+ var rowElement = this._tableElement.createChild('div', 'timeline-details-view-row'); |
+ if (isWarning) |
+ rowElement.classList.add('timeline-details-warning'); |
+ if (isStacked) |
+ rowElement.classList.add('timeline-details-stack-values'); |
+ var titleElement = rowElement.createChild('div', 'timeline-details-view-row-title'); |
+ titleElement.textContent = title; |
+ var valueElement = rowElement.createChild('div', 'timeline-details-view-row-value'); |
+ if (content instanceof Node) |
+ valueElement.appendChild(content); |
+ else |
+ valueElement.createTextChild(content || ''); |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {string} url |
+ * @param {number} startLine |
+ * @param {number=} startColumn |
+ */ |
+ appendLocationRow(title, url, startLine, startColumn) { |
+ if (!this._linkifier || !this._target) |
+ return; |
+ var link = this._linkifier.maybeLinkifyScriptLocation(this._target, null, url, startLine, startColumn); |
+ if (!link) |
+ return; |
+ this.appendElementRow(title, link); |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {string} url |
+ * @param {number} startLine |
+ * @param {number=} endLine |
+ */ |
+ appendLocationRange(title, url, startLine, endLine) { |
+ if (!this._linkifier || !this._target) |
+ return; |
+ var locationContent = createElement('span'); |
+ var link = this._linkifier.maybeLinkifyScriptLocation(this._target, null, url, startLine); |
+ if (!link) |
+ return; |
+ locationContent.appendChild(link); |
+ locationContent.createTextChild(String.sprintf(' [%s\u2026%s]', startLine + 1, endLine + 1 || '')); |
+ this.appendElementRow(title, locationContent); |
+ } |
+ |
+ /** |
+ * @param {string} title |
+ * @param {!RuntimeAgent.StackTrace} stackTrace |
+ */ |
+ appendStackTrace(title, stackTrace) { |
+ if (!this._linkifier || !this._target) |
+ return; |
+ |
+ var rowElement = this._tableElement.createChild('div', 'timeline-details-view-row'); |
+ rowElement.createChild('div', 'timeline-details-view-row-title').textContent = title; |
+ this.createChildStackTraceElement(rowElement, stackTrace); |
+ } |
+ |
+ /** |
+ * @param {!Element} parentElement |
+ * @param {!RuntimeAgent.StackTrace} stackTrace |
+ */ |
+ createChildStackTraceElement(parentElement, stackTrace) { |
+ if (!this._linkifier || !this._target) |
+ return; |
+ parentElement.classList.add('timeline-details-stack-values'); |
+ var stackTraceElement = |
+ parentElement.createChild('div', 'timeline-details-view-row-value timeline-details-view-row-stack-trace'); |
+ var callFrameElem = |
+ WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(this._target, this._linkifier, stackTrace); |
+ stackTraceElement.appendChild(callFrameElem); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TracingModel.Event} event |
+ * @param {string=} warningType |
+ */ |
+ appendWarningRow(event, warningType) { |
+ var warning = WebInspector.TimelineUIUtils.eventWarning(event, warningType); |
+ if (warning) |
+ this.appendElementRow(WebInspector.UIString('Warning'), warning, true); |
+ } |
}; |
+ |
+ |