DevTools: reformat front-end code to match chromium style.

third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 10 matching lines @@
  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (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
+ * @unrestricted
  */
-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>}
- */
-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]);
-    }
-    return regExp.test(tokens.join("|"));
-};
-
-/**
- * @param {!WebInspector.TimelineModel.Record} record
- * @return {!WebInspector.TimelineCategory}
- */
-WebInspector.TimelineUIUtils.categoryForRecord = function(record)
-{
+      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}
+   */
+  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%)";
-    }
-};
-
-/**
- * @param {!WebInspector.TracingModel.Event} event
- * @param {?WebInspector.Target} target
- * @return {?string}
- */
-WebInspector.TimelineUIUtils.buildDetailsTextForTraceEvent = function(event, target)
-{
+      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}
+   */
+  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));
-        break;
-    case recordType.FunctionCall:
+      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:
         // Omit internally generated script names.
         if (eventData)
-            detailsText = linkifyLocationAsText(eventData["scriptId"], eventData["lineNumber"], 0);
-        break;
-    case recordType.JSFrame:
-        detailsText = WebInspector.beautifyFunctionName(eventData["functionName"]);
-        break;
-    case recordType.EventDispatch:
-        detailsText = eventData ? eventData["type"] : null;
-        break;
-    case recordType.Paint:
+          detailsText = linkifyLocationAsText(eventData['scriptId'], eventData['lineNumber'], 0);
+        break;
+      case recordType.JSFrame:
+        detailsText = WebInspector.beautifyFunctionName(eventData['functionName']);
+        break;
+      case recordType.EventDispatch:
+        detailsText = eventData ? eventData['type'] : null;
+        break;
+      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);
-        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 : "");
-        break;
-
-    case recordType.CompileScript:
-    case recordType.EvaluateScript:
-        var url = eventData && eventData["url"];
+          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 : '');
+        break;
+
+      case recordType.CompileScript:
+      case recordType.EvaluateScript:
+        var url = eventData && eventData['url'];
         if (url)
-            detailsText = WebInspector.displayNameForURL(url) + ":" + (eventData["lineNumber"] + 1);
-        break;
-    case recordType.ParseScriptOnBackground:
-    case recordType.XHRReadyStateChange:
-    case recordType.XHRLoad:
-        var url = eventData["url"];
+          detailsText = WebInspector.displayNameForURL(url) + ':' + (eventData['lineNumber'] + 1);
+        break;
+      case recordType.ParseScriptOnBackground:
+      case recordType.XHRReadyStateChange:
+      case recordType.XHRLoad:
+        var url = eventData['url'];
         if (url)
-            detailsText = WebInspector.displayNameForURL(url);
-        break;
-    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:
+          detailsText = WebInspector.displayNameForURL(url);
+        break;
+      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:
         if (event.url)
-            detailsText = WebInspector.displayNameForURL(event.url);
-        break;
-
-    case recordType.EmbedderCallback:
-        detailsText = eventData["callbackName"];
-        break;
-
-    case recordType.Animation:
-        detailsText = eventData && eventData["name"];
-        break;
-
-    case recordType.GCIdleLazySweep:
-        detailsText = WebInspector.UIString("idle sweep");
-        break;
-
-    case recordType.GCCompleteSweep:
-        detailsText = WebInspector.UIString("complete sweep");
-        break;
-
-    case recordType.GCCollectGarbage:
-        detailsText = WebInspector.UIString("collect");
-        break;
-
-    default:
+          detailsText = WebInspector.displayNameForURL(event.url);
+        break;
+
+      case recordType.EmbedderCallback:
+        detailsText = eventData['callbackName'];
+        break;
+
+      case recordType.Animation:
+        detailsText = eventData && eventData['name'];
+        break;
+
+      case recordType.GCIdleLazySweep:
+        detailsText = WebInspector.UIString('idle sweep');
+        break;
+
+      case recordType.GCCompleteSweep:
+        detailsText = WebInspector.UIString('complete sweep');
+        break;
+
+      case recordType.GCCollectGarbage:
+        detailsText = WebInspector.UIString('collect');
+        break;
+
+      default:
         if (event.hasCategory(WebInspector.TimelineModel.Category.Console))
-            detailsText = null;
+          detailsText = null;
         else
-            detailsText = linkifyTopCallFrameAsText();
-        break;
-    }
-
+          detailsText = linkifyTopCallFrameAsText();
+        break;
+    }
+
     return detailsText;
 
     /**
      * @param {string} scriptId
      * @param {number} lineNumber
      * @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;
 
     /**
      * @param {string} scriptId
      * @param {string} url
      * @param {number} lineNumber
      * @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;
 
     // This message may vary per event.name;
     var relatedNodeLabel;
 
     var contentHelper = new WebInspector.TimelineDetailsContentHelper(model.targetByEvent(event), linkifier);
-    contentHelper.addSection(WebInspector.TimelineUIUtils.eventTitle(event), WebInspector.TimelineUIUtils.eventStyle(event).category);
-
-    var eventData = event.args["data"];
+    contentHelper.addSection(
+        WebInspector.TimelineUIUtils.eventTitle(event), WebInspector.TimelineUIUtils.eventStyle(event).category);
+
+    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));
-        break;
-    case recordTypes.JSFrame:
-    case recordTypes.FunctionCall:
-        var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier);
+      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);
         if (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"]);
+          contentHelper.appendElementRow(WebInspector.UIString('Function'), detailsNode);
+        break;
+      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"]);
-        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"];
-        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);
+      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'];
+        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);
         }
-        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"];
-        if (url)
-            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]));
+        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'];
+        if (url)
+          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]));
         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");
-        break;
-    case recordTypes.PaintImage:
-    case recordTypes.DecodeLazyPixelRef:
-    case recordTypes.DecodeImage:
-    case recordTypes.ResizeImage:
-    case recordTypes.DrawLazyPixelRef:
-        relatedNodeLabel = WebInspector.UIString("Owner Element");
+        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');
         if (event.url)
-            contentHelper.appendElementRow(WebInspector.UIString("Image URL"), WebInspector.linkifyResourceAsNode(event.url));
-        break;
-    case recordTypes.ParseAuthorStyleSheet:
-        var url = eventData["styleSheetUrl"];
-        if (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"]);
-        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");
-        break;
-    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"]);
-        break;
-    case recordTypes.EmbedderCallback:
-        contentHelper.appendTextRow(WebInspector.UIString("Callback Function"), eventData["callbackName"]);
-        break;
-    case recordTypes.Animation:
+          contentHelper.appendElementRow(
+              WebInspector.UIString('Image URL'), WebInspector.linkifyResourceAsNode(event.url));
+        break;
+      case recordTypes.ParseAuthorStyleSheet:
+        var url = eventData['styleSheetUrl'];
+        if (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']);
+        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');
+        break;
+      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']);
+        break;
+      case recordTypes.EmbedderCallback:
+        contentHelper.appendTextRow(WebInspector.UIString('Callback Function'), eventData['callbackName']);
+        break;
+      case recordTypes.Animation:
         if (event.phase === WebInspector.TracingModel.Phase.NestableAsyncInstant)
-            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;
-        if (url)
-            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.RequestIdleCallback:
-    case recordTypes.CancelIdleCallback:
-        contentHelper.appendTextRow(WebInspector.UIString("Callback ID"), eventData["id"]);
-        break;
-    case recordTypes.EventDispatch:
-        contentHelper.appendTextRow(WebInspector.UIString("Type"), eventData["type"]);
-        break;
-
-    default:
-        var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier);
+          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;
+        if (url)
+          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.RequestIdleCallback:
+      case recordTypes.CancelIdleCallback:
+        contentHelper.appendTextRow(WebInspector.UIString('Callback ID'), eventData['id']);
+        break;
+      case recordTypes.EventDispatch:
+        contentHelper.appendTextRow(WebInspector.UIString('Type'), eventData['type']);
+        break;
+
+      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 = {};
 
     /**
      * @param {number} value
      * @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);
+      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);
-    } 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);
-        }
+          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 {!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
- */
-WebInspector.TimelineUIUtils._generateCauses = 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 _generateCauses(event, target, relatedNodesMap, contentHelper) {
     var recordTypes = WebInspector.TimelineModel.RecordType;
 
     var callSiteStackLabel;
     var stackLabel;
     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);
 
     /**
      * @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();
-    }
-};
-
-/**
- * @param {!Set<number>} nodeIds
- * @param {!WebInspector.InvalidationTrackingEvent} invalidations
- */
-WebInspector.TimelineUIUtils._collectInvalidationNodeIds = function(nodeIds, invalidations)
-{
+
+        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
+   */
+  static _collectInvalidationNodeIds(nodeIds, invalidations) {
     for (var i = 0; i < invalidations.length; ++i) {
-        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)
-{
+      if (invalidations[i].nodeId)
+        nodeIds.add(invalidations[i].nodeId);
+    }
+  }
+
+  /**
+   * @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 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";
+    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);
+    }
+  }
+
+  /**
+   * @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];
-
-    var element = createElementWithClass("div", "timeline-details-view-pie-chart-wrapper hbox");
+      total += aggregatedStats[categoryName];
+
+    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
      * @param {string} title
      * @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));
-
-    if (Runtime.experiments.isEnabled("layersPanel") && frame.layerTree) {
-        contentHelper.appendElementRow(WebInspector.UIString("Layer tree"),
-                                       WebInspector.Linkifier.linkifyUsingRevealer(frame.layerTree, WebInspector.UIString("show")));
+    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')));
     }
 
     /**
      * @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}
+   */
+  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}
+   */
+  static quadHeight(quad) {
+    return Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2)));
+  }
+
+  /**
+   * @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%)';
+    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'])
+    ];
+    return WebInspector.TimelineUIUtils._eventDispatchDesciptors;
+  }
+
+  /**
+   * @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,
+      };
+    }
+    var recordTypes = WebInspector.TimelineModel.RecordType;
+    var tall = false;
+    var color = green;
+    switch (event.name) {
+      case recordTypes.MarkDOMContent:
+        color = blue;
+        tall = true;
+        break;
+      case recordTypes.MarkLoad:
+        color = red;
+        tall = true;
+        break;
+      case recordTypes.MarkFirstPaint:
+        color = green;
+        tall = true;
+        break;
+      case recordTypes.TimeStamp:
+        color = orange;
+        break;
+    }
+    return {
+      title: title,
+      dashStyle: tallMarkerDashStyle,
+      lineWidth: 0.5,
+      color: color,
+      tall: tall,
+      lowPriority: false,
+    };
+  }
+
+  /**
+   * @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
+    };
+  }
+
+  /**
+   * @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);
+    }
+    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;
+  }
 };
 
 /**
- * @param {!Array.<number>} quad
- * @return {number}
+ * @unrestricted
  */
-WebInspector.TimelineUIUtils.quadWidth = function(quad)
-{
-    return Math.round(Math.sqrt(Math.pow(quad[0] - quad[2], 2) + Math.pow(quad[1] - quad[3], 2)));
-};
+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;
+  }
+};
+
 
 /**
- * @param {!Array.<number>} quad
- * @return {number}
+ * @enum {symbol}
  */
-WebInspector.TimelineUIUtils.quadHeight = function(quad)
-{
-    return Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2)));
-};
+WebInspector.TimelineUIUtils.NetworkCategory = {
+  HTML: Symbol('HTML'),
+  Script: Symbol('Script'),
+  Style: Symbol('Style'),
+  Media: Symbol('Media'),
+  Other: Symbol('Other')
+};
+
+
+WebInspector.TimelineUIUtils._aggregatedStatsKey = Symbol('aggregatedStats');
+
 
 /**
- * @constructor
- * @param {number} priority
- * @param {string} color
- * @param {!Array.<string>} eventTypes
+ * @unrestricted
  */
-WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor = function(priority, color, eventTypes)
-{
+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._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);
+      }
+    }
+
+    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));
+    }
+
+    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(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(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 ]'));
+    }
+  }
+};
+
+
+/**
+ * @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;
-};
+  }
+};
+
 
 /**
- * @return {!Array.<!WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor>}
+ * @unrestricted
  */
-WebInspector.TimelineUIUtils.eventDispatchDesciptors = function()
-{
-    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%)";
-    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"])
-    ];
-    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)
-{
+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);
+  }
 };
 
 /** @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
+  VisibilityChanged: Symbol('VisibilityChanged')
 };
 
 /**
  * @typedef {!{
  *     title: string,
  *     color: string,
  *     lineWidth: number,
  *     dashStyle: !Array.<number>,
  *     tall: boolean,
  *     lowPriority: boolean
  * }}
  */
 WebInspector.TimelineMarkerStyle;
 
+
 /**
- * @param {!WebInspector.TracingModel.Event} event
- * @return {!WebInspector.TimelineMarkerStyle}
+ * @unrestricted
  */
-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)";
-    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,
-        };
-    }
-    var recordTypes = WebInspector.TimelineModel.RecordType;
-    var tall = false;
-    var color = green;
-    switch (event.name) {
-    case recordTypes.MarkDOMContent:
-        color = blue;
-        tall = true;
-        break;
-    case recordTypes.MarkLoad:
-        color = red;
-        tall = true;
-        break;
-    case recordTypes.MarkFirstPaint:
-        color = green;
-        tall = true;
-        break;
-    case recordTypes.TimeStamp:
-        color = orange;
-        break;
-    }
-    return {
-        title: title,
-        dashStyle: tallMarkerDashStyle,
-        lineWidth: 0.5,
-        color: color,
-        tall: tall,
-        lowPriority: false,
-    };
-};
-
-/**
- * @return {!WebInspector.TimelineMarkerStyle}
- */
-WebInspector.TimelineUIUtils.markerStyleForFrame = function()
-{
-    return {
-        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)
-{
-    if (!WebInspector.TimelineUIUtils.colorForURL._colorGenerator) {
-        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);
-};
-
-/**
- * @constructor
- * @param {string} title
- */
-WebInspector.TimelinePopupContentHelper = function(title)
-{
-    this._contentTable = createElement("table");
-    var titleCell = this._createCell(WebInspector.UIString("%s - Details", title), "timeline-details-title");
+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");
+    var titleRow = createElement('tr');
     titleRow.appendChild(titleCell);
     this._contentTable.appendChild(titleRow);
-};
-
-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;
-    },
-
-    /**
-     * @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);
-    }
+  }
+
+  /**
+   * @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);
+  }
 };
 
 /**
- * @constructor
- * @param {?WebInspector.Target} target
- * @param {?WebInspector.Linkifier} linkifier
+ * @unrestricted
  */
-WebInspector.TimelineDetailsContentHelper = function(target, linkifier)
-{
+WebInspector.TimelineDetailsContentHelper = class {
+  /**
+   * @param {?WebInspector.Target} target
+   * @param {?WebInspector.Linkifier} linkifier
+   */
+  constructor(target, linkifier) {
     this.fragment = createDocumentFragment();
 
     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.element = createElementWithClass('div', 'timeline-details-view-block');
+    this._tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body');
     this.fragment.appendChild(this.element);
-};
-
-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);
-        }
-
-        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: function()
-    {
-        return this._linkifier;
-    },
-
-    /**
-     * @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 || "");
-    },
-
-    /**
-     * @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);
-    },
-
-    /**
-     * @param {string} title
-     * @param {!RuntimeAgent.StackTrace} stackTrace
-     */
-    appendStackTrace: function(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: 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);
-    }
-};
-
-/**
- * @param {!WebInspector.TracingModel.Event} event
- * @param {string=} warningType
- * @return {?Element}
- */
-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"];
-
-    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;
-};
+  }
+
+  /**
+   * @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);
+    }
+
+    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);
+  }
+};
+
+