DevTools: extract TimelineModel.Record from TimelinePresentationModel.Record.

Source/devtools/front_end/TimelineView.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 30 matching lines @@
 WebInspector.TimelineView = function(delegate, model, presentationModel, frameModel)
 {
     WebInspector.View.call(this);
     this.element.classList.add("timeline-view");
     this.element.classList.add("hbox");
 
     this._delegate = delegate;
     this._model = model;
     this._presentationModel = presentationModel;
     this._frameModel = frameModel;
-    this._calculator = new WebInspector.TimelineCalculator(this._presentationModel);
+    this._calculator = new WebInspector.TimelineCalculator(model);
     this._linkifier = new WebInspector.Linkifier();
 
     this._boundariesAreValid = true;
     this._scrollTop = 0;
 
     this._recordsView = this._createRecordsView();
     this._recordsView.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
     this._recordsView.show(this.element);
     this.element.appendChild(this._timelineGrid.gridHeaderElement);
 
@@ skipping 42 matching lines @@
 
         // Create gpu tasks containers.
         var utilizationStripsElement = this._timelineGrid.gridHeaderElement.createChild("div", "timeline-utilization-strips vbox");
         this._cpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip");
         if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
             this._gpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip gpu");
 
         return recordsView;
     },
 
-    get calculator()
-    {
-        return this._calculator;
-    },
-
     _rootRecord: function()
     {
         return this._presentationModel.rootRecord();
     },
 
     _updateEventDividers: function()
     {
         this._timelineGrid.removeEventDividers();
         var clientWidth = this._graphRowsElementWidth;
         var dividers = [];
@@ skipping 59 matching lines @@
 
     _onFrameDoubleClicked: function(event)
     {
         var frameBar = event.target.enclosingNodeOrSelfWithClass("timeline-frame-strip");
         if (!frameBar)
             return;
         this._delegate.requestWindowTimes(frameBar._frame.startTime, frameBar._frame.endTime);
     },
 
     /**
-     * @param {!TimelineAgent.TimelineEvent} record
-     * @param {!Array.<!WebInspector.TimelinePresentationModel.Record>} presentationRecords
+     * @param {!WebInspector.TimelineModel.Record} record
      */
-    addRecord: function(record, presentationRecords)
+    addRecord: function(record)
     {
-        if (this._innerAddRecordToTimeline(record, presentationRecords))
+        if (this._innerAddRecordToTimeline(record))
             this._invalidateAndScheduleRefresh(false, false);
     },
 
     /**
-     * @param {!TimelineAgent.TimelineEvent} record
-     * @param {!Array.<!WebInspector.TimelinePresentationModel.Record>} presentationRecords
+     * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
-    _innerAddRecordToTimeline: function(record, presentationRecords)
+    _innerAddRecordToTimeline: function(record)
     {
         if (record.type === WebInspector.TimelineModel.RecordType.GPUTask)
             return record.startTime < this._windowEndTime;
 
         var hasVisibleRecords = false;
         var presentationModel = this._presentationModel;
         function checkVisible(record)
         {
             hasVisibleRecords |= presentationModel.isVisible(record);
         }
-        WebInspector.TimelinePresentationModel.forAllRecords(presentationRecords, checkVisible);
-
-        function isAdoptedRecord(record)
-        {
-            return record.parent !== presentationModel.rootRecord;
-        }
-        // Tell caller update is necessary either if we added a visible record or if we re-parented a record.
-        return hasVisibleRecords || presentationRecords.some(isAdoptedRecord);
+        WebInspector.TimelineModel.forAllRecords([record], checkVisible);
+        return hasVisibleRecords;
     },
 
     /**
      * @param {number} width
      */
     setSidebarSize: function(width)
     {
         this._recordsView.setSidebarSize(width);
     },
 
@@ skipping 89 matching lines @@
     {
         this._presentationModel.invalidateFilteredRecords();
         this._scheduleRefresh(preserveBoundaries, userGesture);
     },
 
     /**
      * @param {?WebInspector.TimelinePresentationModel.Record} record
      */
     _selectRecord: function(record)
     {
-        this._delegate.selectRecord(record);
+        this._delegate.selectRecord(record ? record.record() : null);
     },
 
     /**
-     * @param {?WebInspector.TimelinePresentationModel.Record} record
+     * @param {?WebInspector.TimelineModel.Record} record
      */
     setSelectedRecord: function(record)
     {
-        if (record === this._lastSelectedRecord)
+        var presentationRecord = this._presentationModel.toPresentationRecord(record);
+        if (presentationRecord === this._lastSelectedRecord)
             return;
 
-        // Remove selection rendering.
+        // Remove selection rendering.p
         if (this._lastSelectedRecord) {
-            var listRow = /** @type {!WebInspector.TimelineRecordListRow} */ (this._lastSelectedRecord.getUserObject("WebInspector.TimelineRecordListRow"));
-            if (listRow)
-                listRow.renderAsSelected(false);
-            var graphRow = /** @type {!WebInspector.TimelineRecordGraphRow} */ (this._lastSelectedRecord.getUserObject("WebInspector.TimelineRecordGraphRow"));
-            if (graphRow)
-                graphRow.renderAsSelected(false);
+            if (this._lastSelectedRecord.listRow())
+                this._lastSelectedRecord.listRow().renderAsSelected(false);
+            if (this._lastSelectedRecord.graphRow())
+                this._lastSelectedRecord.graphRow().renderAsSelected(false);
         }
 
-        this._lastSelectedRecord = record;
-        if (!record)
+        this._lastSelectedRecord = presentationRecord;
+        if (!presentationRecord)
             return;
 
-        this._innerRevealRecord(record);
-        var listRow = /** @type {!WebInspector.TimelineRecordListRow} */ (record.getUserObject("WebInspector.TimelineRecordListRow"));
-        if (listRow)
-            listRow.renderAsSelected(true);
-        var graphRow = /** @type {!WebInspector.TimelineRecordListRow} */ (record.getUserObject("WebInspector.TimelineRecordGraphRow"));
-        if (graphRow)
-            graphRow.renderAsSelected(true);
+        this._innerRevealRecord(presentationRecord);
+        if (presentationRecord.listRow())
+            presentationRecord.listRow().renderAsSelected(true);
+        if (presentationRecord.graphRow())
+            presentationRecord.graphRow().renderAsSelected(true);
     },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     setWindowTimes: function(startTime, endTime)
     {
         this._windowStartTime = startTime;
         this._windowEndTime = endTime;
@@ skipping 24 matching lines @@
 
     _refresh: function()
     {
         if (this._refreshTimeout) {
             clearTimeout(this._refreshTimeout);
             delete this._refreshTimeout;
         }
         var windowStartTime = this._windowStartTime;
         var windowEndTime = this._windowEndTime;
         this._timelinePaddingLeft = this._expandOffset;
+        if (windowStartTime === -1)
+            windowStartTime = this._model.minimumRecordTime();
+        if (windowEndTime === -1)
+            windowEndTime = this._model.maximumRecordTime();
         this._calculator.setWindow(windowStartTime, windowEndTime);
         this._calculator.setDisplayWindow(this._timelinePaddingLeft, this._graphRowsElementWidth);
 
         this._refreshRecords();
         if (!this._boundariesAreValid) {
             this._updateEventDividers();
             if (this._frameModel) {
                 var frames = this._frameModel.filteredFrames(windowStartTime, windowEndTime);
                 const maxFramesForFrameBars = 30;
                 if  (frames.length && frames.length < maxFramesForFrameBars) {
@@ skipping 11 matching lines @@
         this._boundariesAreValid = true;
     },
 
     /**
      * @param {!WebInspector.TimelinePresentationModel.Record} recordToReveal
      */
     _innerRevealRecord: function(recordToReveal)
     {
         var needRefresh = false;
         // Expand all ancestors.
-        for (var parent = recordToReveal.parent; parent !== this._rootRecord(); parent = parent.parent) {
-            if (!parent.collapsed)
+        for (var parent = recordToReveal.presentationParent(); parent !== this._rootRecord(); parent = parent.presentationParent()) {
+            if (!parent.collapsed())
                 continue;
             this._presentationModel.invalidateFilteredRecords();
-            parent.collapsed = false;
+            parent.setCollapsed(false);
             needRefresh = true;
         }
         var recordsInWindow = this._presentationModel.filteredRecords();
         var index = recordsInWindow.indexOf(recordToReveal);
 
         var itemOffset = index * WebInspector.TimelinePanel.rowHeight;
         var visibleTop = this._scrollTop - WebInspector.TimelinePanel.headerHeight;
         var visibleBottom = visibleTop + this._containerElementHeight - WebInspector.TimelinePanel.rowHeight;
         if (itemOffset < visibleTop)
             this._containerElement.scrollTop = itemOffset;
@@ skipping 15 matching lines @@
         var headerHeight = WebInspector.TimelinePanel.headerHeight;
 
         // Convert visible area to visible indexes. Always include top-level record for a visible nested record.
         var startIndex = Math.max(0, Math.min(Math.floor((visibleTop - headerHeight) / rowHeight), recordsInWindow.length - 1));
         var endIndex = Math.min(recordsInWindow.length, Math.ceil(visibleBottom / rowHeight));
         var lastVisibleLine = Math.max(0, Math.floor((visibleBottom - headerHeight) / rowHeight));
         if (this._automaticallySizeWindow && recordsInWindow.length > lastVisibleLine) {
             this._automaticallySizeWindow = false;
             this._selectRecord(null);
             // If we're at the top, always use real timeline start as a left window bound so that expansion arrow padding logic works.
-            var windowStartTime = startIndex ? recordsInWindow[startIndex].startTime : this._presentationModel.minimumRecordTime();
-            var windowEndTime = recordsInWindow[Math.max(0, lastVisibleLine - 1)].endTime;
+            var windowStartTime = startIndex ? recordsInWindow[startIndex].record().startTime : this._presentationModel.minimumRecordTime();
+            var windowEndTime = recordsInWindow[Math.max(0, lastVisibleLine - 1)].record().endTime;
             this._delegate.requestWindowTimes(windowStartTime, windowEndTime);
             recordsInWindow = this._presentationModel.filteredRecords();
             endIndex = Math.min(recordsInWindow.length, lastVisibleLine);
         }
 
         // Resize gaps first.
         this._topGapElement.style.height = (startIndex * rowHeight) + "px";
         this._recordsView.sidebarElement().firstElementChild.style.flexBasis = (startIndex * rowHeight + headerHeight) + "px";
         this._bottomGapElement.style.height = (recordsInWindow.length - endIndex) * rowHeight + "px";
         var rowsHeight = headerHeight + recordsInWindow.length * rowHeight;
@@ skipping 66 matching lines @@
 
     _refreshAllUtilizationBars: function()
     {
         this._refreshUtilizationBars(WebInspector.UIString("CPU"), this._presentationModel.mainThreadTasks(), this._cpuBarsElement);
         if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
             this._refreshUtilizationBars(WebInspector.UIString("GPU"), this._presentationModel.gpuThreadTasks(), this._gpuBarsElement);
     },
 
     /**
      * @param {string} name
-     * @param {!Array.<!TimelineAgent.TimelineEvent>} tasks
+     * @param {!Array.<!WebInspector.TimelineModel.Record>} tasks
      * @param {?Element} container
      */
     _refreshUtilizationBars: function(name, tasks, container)
     {
         if (!container)
             return;
 
         const barOffset = 3;
         const minGap = 3;
 
         var minWidth = WebInspector.TimelineCalculator._minWidth;
         var widthAdjustment = minWidth / 2;
 
         var width = this._graphRowsElementWidth;
         var boundarySpan = this._windowEndTime - this._windowStartTime;
         var scale = boundarySpan / (width - minWidth - this._timelinePaddingLeft);
         var startTime = (this._windowStartTime - this._timelinePaddingLeft * scale);
         var endTime = startTime + width * scale;
 
         /**
          * @param {number} value
-         * @param {!TimelineAgent.TimelineEvent} task
+         * @param {!WebInspector.TimelineModel.Record} task
          * @return {number}
          */
         function compareEndTime(value, task)
         {
             return value < task.endTime ? -1 : 1;
         }
 
         var taskIndex = insertionIndexForObjectInListSortedByFunction(startTime, tasks, compareEndTime);
 
         var foreignStyle = "gpu-task-foreign";
@@ skipping 64 matching lines @@
     {
         this._hideQuadHighlight();
     },
 
     /**
      * @param {?Event} e
      */
     _mouseMove: function(e)
     {
         var rowElement = e.target.enclosingNodeOrSelfWithClass("timeline-tree-item");
-        if (rowElement && rowElement.row && rowElement.row._record.highlightQuad)
-            this._highlightQuad(rowElement.row._record.highlightQuad);
+        if (rowElement && rowElement.row && rowElement.row._record.record().highlightQuad)
+            this._highlightQuad(rowElement.row._record.record().highlightQuad);
         else
             this._hideQuadHighlight();
 
         var taskBarElement = e.target.enclosingNodeOrSelfWithClass("timeline-graph-bar");
         if (taskBarElement && taskBarElement._tasksInfo) {
             var offset = taskBarElement.offsetLeft;
             this._timelineGrid.showCurtains(offset >= 0 ? offset : 0, taskBarElement.offsetWidth);
         } else
             this._timelineGrid.hideCurtains();
     },
@@ skipping 10 matching lines @@
         var recordsInWindow = this._presentationModel.filteredRecords();
         var index = recordsInWindow.indexOf(record);
         var recordsInPage = Math.floor(this._containerElementHeight / WebInspector.TimelinePanel.rowHeight);
         var rowHeight = WebInspector.TimelinePanel.rowHeight;
 
         if (index === -1)
             index = 0;
 
         switch (event.keyIdentifier) {
         case "Left":
-            if (record.parent) {
-                if ((!record.expandable || record.collapsed) && record.parent !== this._presentationModel.rootRecord()) {
-                    this._selectRecord(record.parent);
+            if (record.presentationParent()) {
+                if ((!record.expandable() || record.collapsed()) && record.presentationParent() !== this._presentationModel.rootRecord()) {
+                    this._selectRecord(record.presentationParent());
                 } else {
-                    record.collapsed = true;
+                    record.setCollapsed(true);
                     record.clicked = true;
                     this._invalidateAndScheduleRefresh(true, true);
                 }
             }
             event.consume(true);
             break;
         case "Up":
             if (--index < 0)
                 break;
             this._selectRecord(recordsInWindow[index]);
             event.consume(true);
             break;
         case "Right":
-            if (record.expandable && record.collapsed) {
-                record.collapsed = false;
+            if (record.expandable() && record.collapsed()) {
+                record.setCollapsed(false);
                 record.clicked = true;
                 this._invalidateAndScheduleRefresh(true, true);
             } else {
                 if (++index >= recordsInWindow.length)
                     break;
                 this._selectRecord(recordsInWindow[index]);
             }
             event.consume(true);
             break;
         case "Down":
@@ skipping 50 matching lines @@
 
     /**
      * @param {!Element} anchor
      * @param {!WebInspector.Popover} popover
      */
     _showPopover: function(anchor, popover)
     {
         if (anchor.classList.contains("timeline-frame-strip")) {
             var frame = anchor._frame;
             popover.show(WebInspector.TimelineUIUtils.generatePopupContentForFrame(frame), anchor);
-        } else {
-            if (anchor.row && anchor.row._record)
-                WebInspector.TimelineUIUtils.generatePopupContent.generatePopupContent(anchor.row._record, this._linkifier, showCallback);
-            else if (anchor._tasksInfo)
-                popover.show(WebInspector.TimelineUIUtils.generateMainThreadBarPopupContent(this._model, anchor._tasksInfo), anchor, null, null, WebInspector.Popover.Orientation.Bottom);
+        } else if (anchor._tasksInfo) {
+            popover.show(WebInspector.TimelineUIUtils.generateMainThreadBarPopupContent(this._model, anchor._tasksInfo), anchor, null, null, WebInspector.Popover.Orientation.Bottom);
         }
 
         function showCallback(popupContent)
         {
             popover.show(popupContent, anchor);
         }
     },
 
     _closeRecordDetails: function()
     {
         this._popoverHelper.hidePopover();
     },
 
     _injectCategoryStyles: function()
     {
         var style = document.createElement("style");
         var categories = WebInspector.TimelineUIUtils.categories();
 
         style.textContent = Object.values(categories).map(WebInspector.TimelineUIUtils.createStyleRuleForCategory).join("\n");
         document.head.appendChild(style);
     },
 
     /**
-     * @param {?WebInspector.TimelinePresentationModel.Record} record
+     * @param {?WebInspector.TimelineModel.Record} record
      * @param {string=} regex
      * @param {boolean=} selectRecord
      */
     highlightSearchResult: function(record, regex, selectRecord)
     {
        if (this._highlightDomChanges)
             WebInspector.revertDomChanges(this._highlightDomChanges);
         this._highlightDomChanges = [];
 
-        if (!record)
+        var presentationRecord = this._presentationModel.toPresentationRecord(record);
+        if (!presentationRecord)
             return;
 
         if (selectRecord)
-            this._selectRecord(record);
+            this._selectRecord(presentationRecord);
 
         for (var element = this._sidebarListElement.firstChild; element; element = element.nextSibling) {
-            if (element.row._record === record) {
+            if (element.row._record === presentationRecord) {
                 element.row.highlight(regex, this._highlightDomChanges);
                 break;
             }
         }
     },
 
     __proto__: WebInspector.View.prototype
 }
 
 /**
  * @constructor
- * @param {!WebInspector.TimelinePresentationModel} presentationModel
+ * @param {!WebInspector.TimelineModel} model
  * @implements {WebInspector.TimelineGrid.Calculator}
  */
-WebInspector.TimelineCalculator = function(presentationModel)
+WebInspector.TimelineCalculator = function(model)
 {
-    this._presentationModel = presentationModel;
+    this._model = model;
 }
 
 WebInspector.TimelineCalculator._minWidth = 5;
 
 WebInspector.TimelineCalculator.prototype = {
     /**
      * @return {number}
      */
     paddingLeft: function()
     {
@@ skipping 10 matching lines @@
     },
 
     /**
      * @return {!{start: number, end: number, endWithChildren: number, cpuWidth: number}}
      */
     computeBarGraphPercentages: function(record)
     {
         var start = (record.startTime - this._minimumBoundary) / this.boundarySpan() * 100;
         var end = (record.startTime + record.selfTime - this._minimumBoundary) / this.boundarySpan() * 100;
         var endWithChildren = (record.lastChildEndTime - this._minimumBoundary) / this.boundarySpan() * 100;
-        var cpuWidth = record.coalesced ? endWithChildren - start : record.cpuTime / this.boundarySpan() * 100;
+        var cpuWidth = record.cpuTime / this.boundarySpan() * 100;
         return {start: start, end: end, endWithChildren: endWithChildren, cpuWidth: cpuWidth};
     },
 
     /**
      * @return {!{left: number, width: number, widthWithChildren: number, cpuWidth: number}}
      */
     computeBarGraphWindowPosition: function(record)
     {
         var percentages = this.computeBarGraphPercentages(record);
         var widthAdjustment = 0;
@@ skipping 51 matching lines @@
     minimumBoundary: function()
     {
         return this._minimumBoundary;
     },
 
     /**
      * @return {number}
      */
     zeroTime: function()
     {
-        return this._presentationModel.minimumRecordTime();
+        return this._model.minimumRecordTime();
     },
 
     /**
      * @return {number}
      */
     boundarySpan: function()
     {
         return this._maximumBoundary - this._minimumBoundary;
     }
 }
@@ skipping 21 matching lines @@
     this._expandArrowElement.addEventListener("click", this._onExpandClick.bind(this), false);
     var iconElement = this.element.createChild("span", "timeline-tree-icon");
     this._typeElement = this.element.createChild("span", "type");
 
     this._dataElement = this.element.createChild("span", "data dimmed");
     this._scheduleRefresh = scheduleRefresh;
     this._selectRecord = selectRecord;
 }
 
 WebInspector.TimelineRecordListRow.prototype = {
-    update: function(record, offset)
+    /**
+     * @param {!WebInspector.TimelinePresentationModel.Record} presentationRecord
+     * @param {number} offset
+     */
+    update: function(presentationRecord, offset)
     {
-        this._record = record;
+        this._record = presentationRecord;
+        var record = presentationRecord.record();
         this._offset = offset;
 
         this.element.className = "timeline-tree-item timeline-category-" + record.category.name;
         var paddingLeft = 5;
         var step = -3;
-        for (var currentRecord = record.parent ? record.parent.parent : null; currentRecord; currentRecord = currentRecord.parent)
+        for (var currentRecord = presentationRecord.presentationParent() ? presentationRecord.presentationParent().presentationParent() : null; currentRecord; currentRecord = currentRecord.presentationParent())
             paddingLeft += 12 / (Math.max(1, step++));
         this.element.style.paddingLeft = paddingLeft + "px";
-        if (record.isBackground())
+        if (record.thread)
             this.element.classList.add("background");
 
         this._typeElement.textContent = record.title();
 
         if (this._dataElement.firstChild)
             this._dataElement.removeChildren();
 
-        this._warningElement.enableStyleClass("hidden", !record.hasWarnings() && !record.childHasWarnings());
-        this._warningElement.enableStyleClass("timeline-tree-item-child-warning", record.childHasWarnings() && !record.hasWarnings());
+        this._warningElement.enableStyleClass("hidden", !presentationRecord.hasWarnings() && !presentationRecord.childHasWarnings());
+        this._warningElement.enableStyleClass("timeline-tree-item-child-warning", presentationRecord.childHasWarnings() && !presentationRecord.hasWarnings());
 
-        var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNode(record, this._linkifier);
-        if (detailsNode) {
-            this._dataElement.appendChild(document.createTextNode("("));
-            this._dataElement.appendChild(detailsNode);
-            this._dataElement.appendChild(document.createTextNode(")"));
+        if (presentationRecord.coalesced()) {
+            this._dataElement.createTextChild(WebInspector.UIString("× %d", presentationRecord.presentationChildren().length));
+        } else {
+            var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNode(record, this._linkifier);
+            if (detailsNode) {
+                this._dataElement.appendChild(document.createTextNode("("));
+                this._dataElement.appendChild(detailsNode);
+                this._dataElement.appendChild(document.createTextNode(")"));
+            }
         }
-        this._expandArrowElement.enableStyleClass("parent", record.children && record.children.length);
-        this._expandArrowElement.enableStyleClass("expanded", record.visibleChildrenCount);
-        this._record.setUserObject("WebInspector.TimelineRecordListRow", this);
+
+        this._expandArrowElement.enableStyleClass("parent", presentationRecord.hasPresentationChildren());
+        this._expandArrowElement.enableStyleClass("expanded", presentationRecord.visibleChildrenCount());
+        this._record.setListRow(this);
     },
 
     highlight: function(regExp, domChanges)
     {
         var matchInfo = this.element.textContent.match(regExp);
         if (matchInfo)
             WebInspector.highlightSearchResult(this.element, matchInfo.index, matchInfo[0].length, domChanges);
     },
 
     dispose: function()
     {
         this.element.remove();
     },
 
     /**
      * @param {!Event} event
      */
     _onExpandClick: function(event)
     {
-        this._record.collapsed = !this._record.collapsed;
+        this._record.setCollapsed(!this._record.collapsed());
         this._record.clicked = true;
         this._scheduleRefresh();
         event.consume(true);
     },
 
     /**
      * @param {?Event} event
      */
     _onClick: function(event)
     {
         this._selectRecord(this._record);
     },
 
     /**
      * @param {boolean} selected
      */
     renderAsSelected: function(selected)
     {
         this.element.enableStyleClass("selected", selected);
     },
 
     /**
      * @param {?Event} event
      */
     _onMouseOver: function(event)
     {
         this.element.classList.add("hovered");
-        var graphRow = /** @type {!WebInspector.TimelineRecordGraphRow} */ (this._record.getUserObject("WebInspector.TimelineRecordGraphRow"));
-        graphRow.element.classList.add("hovered");
+        if (this._record.graphRow())
+            this._record.graphRow().element.classList.add("hovered");
     },
 
     /**
      * @param {?Event} event
      */
     _onMouseOut: function(event)
     {
         this.element.classList.remove("hovered");
-        var graphRow = /** @type {!WebInspector.TimelineRecordGraphRow} */ (this._record.getUserObject("WebInspector.TimelineRecordGraphRow"));
-        graphRow.element.classList.remove("hovered");
+    if (this._record.graphRow())
+        this._record.graphRow().element.classList.remove("hovered");
     }
 }
 
 /**
  * @constructor
  * @param {function(!WebInspector.TimelinePresentationModel.Record)} selectRecord
  * @param {function()} scheduleRefresh
  */
 WebInspector.TimelineRecordGraphRow = function(graphContainer, selectRecord, scheduleRefresh)
 {
@@ skipping 22 matching lines @@
     this._barElement.row = this;
     this._barAreaElement.appendChild(this._barElement);
 
     this._expandElement = new WebInspector.TimelineExpandableElement(graphContainer);
 
     this._selectRecord = selectRecord;
     this._scheduleRefresh = scheduleRefresh;
 }
 
 WebInspector.TimelineRecordGraphRow.prototype = {
-    update: function(record, calculator, expandOffset, index)
+    /**
+     * @param {!WebInspector.TimelinePresentationModel.Record} presentationRecord
+     * @param {!WebInspector.TimelineCalculator} calculator
+     * @param {number} expandOffset
+     * @param {number} index
+     */
+    update: function(presentationRecord, calculator, expandOffset, index)
     {
-        this._record = record;
+        this._record = presentationRecord;
+        var record = presentationRecord.record();
         this.element.className = "timeline-graph-side timeline-category-" + record.category.name;
-        if (record.isBackground())
+        if (record.thread)
             this.element.classList.add("background");
 
         var barPosition = calculator.computeBarGraphWindowPosition(record);
         this._barWithChildrenElement.style.left = barPosition.left + "px";
         this._barWithChildrenElement.style.width = barPosition.widthWithChildren + "px";
         this._barElement.style.left = barPosition.left + "px";
-        this._barElement.style.width = barPosition.width + "px";
+        this._barElement.style.width = (presentationRecord.coalesced() ? barPosition.widthWithChildren : barPosition.width) + "px";
         this._barCpuElement.style.left = barPosition.left + "px";
-        this._barCpuElement.style.width = barPosition.cpuWidth + "px";
-        this._expandElement._update(record, index, barPosition.left - expandOffset, barPosition.width);
-
-        this._record.setUserObject("WebInspector.TimelineRecordGraphRow", this);
+        this._barCpuElement.style.width = (presentationRecord.coalesced() ? barPosition.widthWithChildren : barPosition.cpuWidth) + "px";
+        this._expandElement._update(presentationRecord, index, barPosition.left - expandOffset, barPosition.width);
+        this._record.setGraphRow(this);
     },
 
     /**
      * @param {?Event} event
      */
     _onClick: function(event)
     {
         // check if we click arrow and expand if yes.
         if (this._expandElement._arrow.containsEventPoint(event))
             this._expand();
         this._selectRecord(this._record);
     },
 
     /**
      * @param {boolean} selected
      */
     renderAsSelected: function(selected)
     {
         this.element.enableStyleClass("selected", selected);
     },
 
     _expand: function()
     {
-        this._record.collapsed = !this._record.collapsed;
+        this._record.setCollapsed(!this._record.collapsed());
         this._record.clicked = true;
         this._scheduleRefresh();
     },
 
     /**
      * @param {?Event} event
      */
     _onMouseOver: function(event)
     {
         this.element.classList.add("hovered");
-        var listRow = /** @type {!WebInspector.TimelineRecordListRow} */ (this._record.getUserObject("WebInspector.TimelineRecordListRow"));
-        listRow.element.classList.add("hovered");
+        if (this._record.listRow())
+            this._record.listRow().element.classList.add("hovered");
     },
 
     /**
      * @param {?Event} event
      */
     _onMouseOut: function(event)
     {
         this.element.classList.remove("hovered");
-        var listRow = /** @type {!WebInspector.TimelineRecordListRow} */ (this._record.getUserObject("WebInspector.TimelineRecordListRow"));
-        listRow.element.classList.remove("hovered");
+        if (this._record.listRow())
+            this._record.listRow().element.classList.remove("hovered");
     },
 
     dispose: function()
     {
         this.element.remove();
         this._expandElement._dispose();
     }
 }
 
 /**
  * @constructor
  */
 WebInspector.TimelineExpandableElement = function(container)
 {
     this._element = container.createChild("div", "timeline-expandable");
     this._element.createChild("div", "timeline-expandable-left");
     this._arrow = this._element.createChild("div", "timeline-expandable-arrow");
 }
 
 WebInspector.TimelineExpandableElement.prototype = {
+    /**
+     * @param {!WebInspector.TimelinePresentationModel.Record} record
+     */
     _update: function(record, index, left, width)
     {
         const rowHeight = WebInspector.TimelinePanel.rowHeight;
         if (record.visibleChildrenCount || record.expandable) {
             this._element.style.top = index * rowHeight + "px";
             this._element.style.left = left + "px";
             this._element.style.width = Math.max(12, width + 25) + "px";
-            if (!record.collapsed) {
+            if (!record.collapsed()) {
                 this._element.style.height = (record.visibleChildrenCount + 1) * rowHeight + "px";
                 this._element.classList.add("timeline-expandable-expanded");
                 this._element.classList.remove("timeline-expandable-collapsed");
             } else {
                 this._element.style.height = rowHeight + "px";
                 this._element.classList.add("timeline-expandable-collapsed");
                 this._element.classList.remove("timeline-expandable-expanded");
             }
             this._element.classList.remove("hidden");
         } else
             this._element.classList.add("hidden");
     },
 
     _dispose: function()
     {
         this._element.remove();
     }
 }