Correctly calculate highlighted quad for tracing based timeline events

Source/devtools/front_end/timeline/TracingTimelineModel.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @param {!WebInspector.TracingModel} tracingModel
  * @constructor
  * @extends {WebInspector.TimelineModel}
  */
 WebInspector.TracingTimelineModel = function(tracingModel)
@@ skipping 348 matching lines @@
             var frameId = event.args.frame;
             if (!this._layoutInvalidate[frameId] && this._lastRecalculateStylesEvent && this._lastRecalculateStylesEvent.endTime >  event.startTime)
                 layoutInitator = this._lastRecalculateStylesEvent.initiator;
             this._layoutInvalidate[frameId] = layoutInitator;
             break;
 
         case recordTypes.Layout:
             var frameId = event.args["beginData"]["frame"];
             event.initiator = this._layoutInvalidate[frameId];
             event.backendNodeId = event.args["endData"]["rootNode"];
+            event.clip =  event.args["endData"]["root"];

[caseq, 2014/06/10 13:21:23]

I'd rather not use clip, this seems to be not generic enough and particularly
sounds weird in case of layout. How about just _highlightQuad?

[yurys, 2014/06/10 13:25:37]

Done.

             this._layoutInvalidate[frameId] = null;
             if (this._currentScriptEvent)
                 event.warning = WebInspector.UIString("Forced synchronous layout is a possible performance bottleneck.");
             break;
 
         case recordTypes.WebSocketCreate:
             this._webSocketCreateEvents[event.args.data["identifier"]] = event;
             break;
 
         case recordTypes.WebSocketSendHandshakeRequest:
         case recordTypes.WebSocketReceiveHandshakeResponse:
         case recordTypes.WebSocketDestroy:
             event.initiator = this._webSocketCreateEvents[event.args.data["identifier"]];
             break;
 
         case recordTypes.EvaluateScript:
         case recordTypes.FunctionCall:
             if (!this._currentScriptEvent)
                 this._currentScriptEvent = event;
             break;
 
         case recordTypes.SetLayerTreeId:
             this._inspectedTargetLayerTreeId = event.args["layerTreeId"];
             break;
 
         case recordTypes.Paint:
+            event.clip = event.args["data"]["clip"];
+            // Initionally fall through.
         case recordTypes.ScrollLayer:
             event.backendNodeId = event.args["data"]["nodeId"];
             break;
 
         case recordTypes.PaintImage:
             event.backendNodeId = event.args["data"]["nodeId"];
             event.imageURL = event.args["data"]["url"];
             break;
 
         case recordTypes.DecodeImage:
@@ skipping 169 matching lines @@
 
     /**
      * @return {string}
      */
     type: function()
     {
         return this._event.name;
     },
 
     /**
+     * @return {?Object}
+     */
+    highlightQuad: function()
+    {
+        return this._event.clip || null;
+    },
+
+    /**
      * @return {string}
      */
     frameId: function()
     {
         switch (this._event.name) {
         case WebInspector.TracingTimelineModel.RecordType.ScheduleStyleRecalculation:
         case WebInspector.TracingTimelineModel.RecordType.RecalculateStyles:
         case WebInspector.TracingTimelineModel.RecordType.InvalidateLayout:
             return this._event.args["frameId"];
         case WebInspector.TracingTimelineModel.RecordType.Layout:
@@ skipping 60 matching lines @@
     {
         var tokens = [this.title()];
         var data = this._event.args.data;
         if (data) {
             for (var key in data)
                 tokens.push(data[key]);
         }
         return regExp.test(tokens.join("|"));
     }
 }