DevTools: encapsulate presentation model in timeline view.

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 17 matching lines @@
  * (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
  * @extends {WebInspector.View}
  * @implements {WebInspector.TimelineModeView}
  * @param {!WebInspector.TimelineModeViewDelegate} delegate
  * @param {!WebInspector.TimelineModel} model
- * @param {!WebInspector.TimelinePresentationModel} presentationModel
- * @param {?WebInspector.TimelineFrameModel} frameModel
  */
-WebInspector.TimelineView = function(delegate, model, presentationModel, frameModel)
+WebInspector.TimelineView = function(delegate, model)
 {
     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._presentationModel = new WebInspector.TimelinePresentationModel(model, delegate);

[caseq, 2014/03/04 15:47:49]

drop delegagte

[pfeldman, 2014/03/04 16:01:29]

Done.

     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);
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
 
     this.element.addEventListener("mousemove", this._mouseMove.bind(this), false);
     this.element.addEventListener("mouseout", this._mouseOut.bind(this), false);
     this.element.addEventListener("keydown", this._keyDown.bind(this), false);
 
     this._expandOffset = 15;
 }
 
 WebInspector.TimelineView.prototype = {
     /**
+     * @param {?WebInspector.TimelineFrameModel} frameModel
+     */
+    setFrameModel: function(frameModel)
+    {
+        this._frameModel = frameModel;
+    },
+
+    /**
      * @return {!WebInspector.SplitView}
      */
     _createRecordsView: function()
     {
         var recordsView = new WebInspector.SplitView(true, false, "timelinePanelRecorsSplitViewState");
         this._containerElement = recordsView.element;
         this._containerElement.tabIndex = 0;
         this._containerElement.id = "timeline-container";
         this._containerElement.addEventListener("scroll", this._onScroll.bind(this), false);
 
@@ skipping 31 matching lines @@
     _rootRecord: function()
     {
         return this._presentationModel.rootRecord();
     },
 
     _updateEventDividers: function()
     {
         this._timelineGrid.removeEventDividers();
         var clientWidth = this._graphRowsElementWidth;
         var dividers = [];
-        var eventDividerRecords = this._presentationModel.eventDividerRecords();
+        var eventDividerRecords = this._model.eventDividerRecords();
 
         for (var i = 0; i < eventDividerRecords.length; ++i) {
             var record = eventDividerRecords[i];
             var positions = this._calculator.computeBarGraphWindowPosition(record);
             var dividerPosition = Math.round(positions.left);
             if (dividerPosition < 0 || dividerPosition >= clientWidth || dividers[dividerPosition])
                 continue;
             var divider = WebInspector.TimelineUIUtils.createEventDivider(record.type, WebInspector.TimelineUIUtils.recordTitle(record));
             divider.style.left = dividerPosition + "px";
             dividers[dividerPosition] = divider;
@@ skipping 52 matching lines @@
         if (!frameBar)
             return;
         this._delegate.requestWindowTimes(frameBar._frame.startTime, frameBar._frame.endTime);
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */
     addRecord: function(record)
     {
-        if (this._innerAddRecordToTimeline(record))
-            this._invalidateAndScheduleRefresh(false, false);
+        this._presentationModel.addRecord(record);
+        this._invalidateAndScheduleRefresh(false, false);
     },
 
     /**
-     * @param {!WebInspector.TimelineModel.Record} record
-     * @return {boolean}
-     */
-    _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.TimelineModel.forAllRecords([record], checkVisible);
-        return hasVisibleRecords;
-    },
-
-    /**
      * @param {number} width
      */
     setSidebarSize: function(width)
     {
         this._recordsView.setSidebarSize(width);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
@@ skipping 22 matching lines @@
 
     _resetView: function()
     {
         this._windowStartTime = -1;
         this._windowEndTime = -1;
         this._boundariesAreValid = false;
         this._adjustScrollPosition(0);
         this._linkifier.reset();
         this._closeRecordDetails();
         this._automaticallySizeWindow = true;
+        this._presentationModel.reset();
     },
 
     reset: function()
     {
         this._resetView();
         this._invalidateAndScheduleRefresh(true, true);
     },
 
     /**
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         return [this._containerElement];
     },
 
-    refreshRecords: function()
+    /**
+     * @param {?RegExp} textFilter
+     */
+    refreshRecords: function(textFilter)
     {
         this._automaticallySizeWindow = false;
+        this._presentationModel.setTextFilter(textFilter);
         this._invalidateAndScheduleRefresh(false, true);
     },
 
     wasShown: function()
     {
         WebInspector.View.prototype.wasShown.call(this);
 
         if (!WebInspector.TimelinePanel._categoryStylesInitialized) {
             WebInspector.TimelinePanel._categoryStylesInitialized = true;
             this._injectCategoryStyles();
@@ skipping 157 matching lines @@
     /**
      * @param {!WebInspector.TimelinePresentationModel.Record} recordToReveal
      */
     _innerRevealRecord: function(recordToReveal)
     {
         var needRefresh = false;
         // Expand all ancestors.
         for (var parent = recordToReveal.presentationParent(); parent !== this._rootRecord(); parent = parent.presentationParent()) {
             if (!parent.collapsed())
                 continue;
-            this._presentationModel.invalidateFilteredRecords();

[caseq, 2014/03/04 15:47:49]

Why is this gone?

[pfeldman, 2014/03/04 16:01:29]

Done.

             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)
@@ skipping 16 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].record().startTime : this._presentationModel.minimumRecordTime();
+            var windowStartTime = startIndex ? recordsInWindow[startIndex].record().startTime : this._model.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";
@@ skipping 60 matching lines @@
 
         this._itemsGraphsElement.insertBefore(this._graphRowsElement, this._bottomGapElement);
         this._itemsGraphsElement.appendChild(this._expandElements);
         this._adjustScrollPosition(recordsInWindow.length * rowHeight + headerHeight);
 
         return recordsInWindow.length;
     },
 
     _refreshAllUtilizationBars: function()
     {
-        this._refreshUtilizationBars(WebInspector.UIString("CPU"), this._presentationModel.mainThreadTasks(), this._cpuBarsElement);
+        this._refreshUtilizationBars(WebInspector.UIString("CPU"), this._model.mainThreadTasks(), this._cpuBarsElement);
         if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
-            this._refreshUtilizationBars(WebInspector.UIString("GPU"), this._presentationModel.gpuThreadTasks(), this._gpuBarsElement);
+            this._refreshUtilizationBars(WebInspector.UIString("GPU"), this._model.gpuThreadTasks(), this._gpuBarsElement);
     },
 
     /**
      * @param {string} name
      * @param {!Array.<!WebInspector.TimelineModel.Record>} tasks
      * @param {?Element} container
      */
     _refreshUtilizationBars: function(name, tasks, container)
     {
         if (!container)
@@ skipping 124 matching lines @@
         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.presentationParent()) {
-                if ((!record.expandable() || record.collapsed()) && record.presentationParent() !== this._presentationModel.rootRecord()) {
+                if ((!record.hasPresentationChildren() || record.collapsed()) && record.presentationParent() !== this._presentationModel.rootRecord()) {

[caseq, 2014/03/04 15:47:49]

This seems to be different from the old logic.

[pfeldman, 2014/03/04 16:01:29]

Done.

                     this._selectRecord(record.presentationParent());
                 } else {
                     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()) {
+            if (record.hasPresentationChildren() && record.collapsed()) {

[caseq, 2014/03/04 15:47:49]

ditto

[pfeldman, 2014/03/04 16:01:29]

Done.

                 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":
             if (++index >= recordsInWindow.length)
@@ skipping 293 matching lines @@
         } 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", presentationRecord.hasPresentationChildren());
-        this._expandArrowElement.enableStyleClass("expanded", presentationRecord.visibleChildrenCount());
+        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.setCollapsed(!this._record.collapsed());
-        this._record.clicked = true;
         this._scheduleRefresh();
         event.consume(true);
     },
 
     /**
      * @param {?Event} event
      */
     _onClick: function(event)
     {
         this._selectRecord(this._record);
@@ skipping 107 matching lines @@
      * @param {boolean} selected
      */
     renderAsSelected: function(selected)
     {
         this.element.enableStyleClass("selected", selected);
     },
 
     _expand: function()
     {
         this._record.setCollapsed(!this._record.collapsed());
-        this._record.clicked = true;
         this._scheduleRefresh();
     },
 
     /**
      * @param {?Event} event
      */
     _onMouseOver: function(event)
     {
         this.element.classList.add("hovered");
         if (this._record.listRow())
@@ skipping 50 matching lines @@
             this._element.classList.remove("hidden");
         } else
             this._element.classList.add("hidden");
     },
 
     _dispose: function()
     {
         this._element.remove();
     }
 }