Correctly calculate highlighted quad for tracing based timeline events

highlightQuad method is added to TimelineMode.Rectord. The method encapsulates logic specific to timeline events and trace events.

BUG=361045
R=caseq@chromium.org

Review URL: https://codereview.chromium.org/326063004

git-svn-id: svn://svn.chromium.org/blink/trunk@175892 bbb929c8-8fbe-4397-9dbb-9b2b20218538

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

@@ -387,6 +387,11 @@ WebInspector.TimelineModel.Record.prototype = {
      */
     data: function() { },
 
+    /**
+     * @return {?Object}
+     */
+    highlightQuad: function() { },
+
     /**
      * @return {string}
      */

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

@@ -478,6 +478,26 @@ WebInspector.TimelineModel.RecordImpl.prototype = {
         return this._record.type;
     },
 
+    /**
+     * @return {?Object}
+     */
+    highlightQuad: function()
+    {
+        var quad = null;
+        var recordTypes = WebInspector.TimelineModel.RecordType;
+        switch(this.type()) {
+        case recordTypes.Layout:
+            quad = this.data().root;
+            break;
+        case recordTypes.Paint:
+            quad = this.data().clip;
+            break;
+        default:
+            break;
+        }
+        return quad;
+    },
+
     /**
      * @return {string}
      */

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

@@ -829,18 +829,7 @@ WebInspector.TimelineView.prototype = {
             return true;
         this._highlightedQuadRecord = record;
 
-        var quad = null;
-        var recordTypes = WebInspector.TimelineModel.RecordType;
-        switch(record.type()) {
-        case recordTypes.Layout:
-            quad = record.data().root;
-            break;
-        case recordTypes.Paint:
-            quad = record.data().clip;
-            break;
-        default:
-            return false;
-        }
+        var quad = record.highlightQuad();
         if (!quad)
             return false;
         record.target().domAgent().highlightQuad(quad, WebInspector.Color.PageHighlight.Content.toProtocolRGBA(), WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA());

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

@@ -366,6 +366,7 @@ WebInspector.TracingTimelineModel.prototype = {
             var frameId = event.args["beginData"]["frame"];
             event.initiator = this._layoutInvalidate[frameId];
             event.backendNodeId = event.args["endData"]["rootNode"];
+            event.highlightQuad =  event.args["endData"]["root"];
             this._layoutInvalidate[frameId] = null;
             if (this._currentScriptEvent)
                 event.warning = WebInspector.UIString("Forced synchronous layout is a possible performance bottleneck.");
@@ -392,6 +393,8 @@ WebInspector.TracingTimelineModel.prototype = {
             break;
 
         case recordTypes.Paint:
+            event.highlightQuad = event.args["data"]["clip"];
+            // Initionally fall through.
         case recordTypes.ScrollLayer:
             event.backendNodeId = event.args["data"]["nodeId"];
             break;
@@ -580,6 +583,14 @@ WebInspector.TracingTimelineModel.TraceEventRecord.prototype = {
         return this._event.name;
     },
 
+    /**
+     * @return {?Object}
+     */
+    highlightQuad: function()
+    {
+        return this._event.highlightQuad || null;
+    },
+
     /**
      * @return {string}
      */