DevTools: encapsulate presentation model in timeline view.

Source/devtools/front_end/TimelinePanel.js

 /*
  * Copyright (C) 2012 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 47 matching lines @@
 
     this._detailsLinkifier = new WebInspector.Linkifier();
     this._windowStartTime = 0;
     this._windowEndTime = Infinity;
 
     // Create model.
     this._model = new WebInspector.TimelineModel();
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStarted, this._onRecordingStarted, this);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStopped, this._onRecordingStopped, this);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._onRecordsCleared, this);
+    this._model.addEventListener(WebInspector.TimelineModel.Events.RecordFilterChanged, this._refreshViews, this);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordAdded, this._onRecordAdded, this);
 
-    // Create presentation model.
-    this._presentationModel = new WebInspector.TimelinePresentationModel(this._model);
+    this._windowFilter = new WebInspector.TimelineWindowFilter();
+    this._categoryFilter = new WebInspector.TimelineCategoryFilter();
     this._durationFilter = new WebInspector.TimelineIsLongFilter();
-    this._windowFilter = new WebInspector.TimelineWindowFilter();
-    this._presentationModel.addFilter(this._windowFilter);
-    this._presentationModel.addFilter(new WebInspector.TimelineCategoryFilter());
-    this._presentationModel.addFilter(this._durationFilter);
+    this._textFilter = new WebInspector.TimelineTextFilter();
+
+    this._model.addFilter(new WebInspector.TimelineHiddenFilter());
+     this._model.addFilter(this._windowFilter);

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

indent

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

Done.

+    this._model.addFilter(this._categoryFilter);
+    this._model.addFilter(this._durationFilter);
+    this._model.addFilter(this._textFilter);
 
     this._presentationModeSetting = WebInspector.settings.createSetting("timelineOverviewMode", WebInspector.TimelinePanel.Mode.Events);
 
     this._createStatusBarItems();
 
     this._topPane = new WebInspector.SplitView(true, false);
     this._topPane.element.id = "timeline-overview-panel";
     this._topPane.show(this.element);
     this._topPane.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
     this._topPane.setResizable(false);
@@ skipping 115 matching lines @@
      * @param {number} windowEndTime
      */
     requestWindowTimes: function(windowStartTime, windowEndTime)
     {
         this._overviewPane.requestWindowTimes(windowStartTime, windowEndTime);
     },
 
     /**
      * @return {!WebInspector.TimelineFrameModel}
      */
-    frameModel: function()
+    _frameModel: function()
     {
-        this._frameModel = this._frameModel || new WebInspector.TimelineFrameModel(this._model);
-        return this._frameModel;
+        if (!this._lazyFrameModel)
+            this._lazyFrameModel = new WebInspector.TimelineFrameModel(this._model);
+        return this._lazyFrameModel;
     },
 
     /**
+     * @return {!WebInspector.TimelineView}
+     */
+    _timelineView: function()
+    {
+        if (!this._lazyTimelineView)
+            this._lazyTimelineView = new WebInspector.TimelineView(this, this._model);
+        return this._lazyTimelineView;
+    },
+
+    /**
      * @param {string} mode
      */
     _viewsForMode: function(mode)
     {
         var views = this._viewsMap[mode];
         if (!views) {
             views = {};
             switch (mode) {
             case WebInspector.TimelinePanel.Mode.Events:
                 views.overviewView = new WebInspector.TimelineEventOverview(this._model);
-                views.mainViews = [new WebInspector.TimelineView(this, this._model, this._presentationModel, null)];
+                this._timelineView().setFrameModel(null);
+                views.mainViews = [this._timelineView()];
                 break;
             case WebInspector.TimelinePanel.Mode.Frames:
-                views.overviewView = new WebInspector.TimelineFrameOverview(this._model, this.frameModel());
-                views.mainViews = [new WebInspector.TimelineView(this, this._model, this._presentationModel, this.frameModel())];
+                views.overviewView = new WebInspector.TimelineFrameOverview(this._model, this._frameModel());
+                this._timelineView().setFrameModel(this._frameModel());
+                views.mainViews = [this._timelineView()];
                 break;
             case WebInspector.TimelinePanel.Mode.Memory:
                 views.overviewView = new WebInspector.TimelineMemoryOverview(this._model);
-                var timelineView = new WebInspector.TimelineView(this, this._model, this._presentationModel, null);
-                views.mainViews = [timelineView];
-                var memoryStatistics = new WebInspector.CountersGraph(this, this._model);
-                views.mainViews.push(memoryStatistics);
+                this._timelineView().setFrameModel(null);
+                views.mainViews = [this._timelineView(), new WebInspector.CountersGraph(this, this._model)];
                 break;
             case WebInspector.TimelinePanel.Mode.FlameChart:
-                views.overviewView = new WebInspector.TimelineFrameOverview(this._model, this.frameModel());
+                views.overviewView = new WebInspector.TimelineFrameOverview(this._model, this._frameModel());
                 views.mainViews = [
-                    new WebInspector.TimelineFlameChart(this, this._model, this.frameModel(), true),
-                    new WebInspector.TimelineFlameChart(this, this._model, this.frameModel(), false)
+                    new WebInspector.TimelineFlameChart(this, this._model, this._frameModel(), true),
+                    new WebInspector.TimelineFlameChart(this, this._model, this._frameModel(), false)
                 ];
                 break;
             default:
                 console.assert(false, "Unknown mode: " + mode);
             }
             for (var i = 0; i < views.mainViews.length; ++i)
                 views.mainViews[i].addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
             this._viewsMap[mode] = views;
         }
         return views;
@@ skipping 93 matching lines @@
             this._filters._categoryFiltersUI[category.name] = filter;
             filter.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._categoriesFilterChanged.bind(this, categoryName), this);
             this._filterBar.addFilter(filter);
         }
         return this._filterBar;
     },
 
     _textFilterChanged: function(event)
     {
         var searchQuery = this._filters._textFilterUI.value();
-        this._presentationModel.setSearchFilter(null);
-        delete this._searchFilter;
-
         this.searchCanceled();
-        if (searchQuery) {
-            this._searchFilter = new WebInspector.TimelineSearchFilter(createPlainTextSearchRegex(searchQuery, "i"));
-            this._presentationModel.setSearchFilter(this._searchFilter);
-        }
-        this._refreshViews();
+        this._textFilter.setRegex(searchQuery ? createPlainTextSearchRegex(searchQuery, "i") : null);
     },
 
     _durationFilterChanged: function()
     {
         var duration = this._filters._durationFilterUI.value();
         var minimumRecordDuration = parseInt(duration, 10);
         this._durationFilter.setMinimumRecordDuration(minimumRecordDuration);
-        this._refreshViews();
     },
 
     _categoriesFilterChanged: function(name, event)
     {
         var categories = WebInspector.TimelineUIUtils.categories();
         categories[name].hidden = !this._filters._categoryFiltersUI[name].checked();
-        this._refreshViews();
+        this._categoryFilter.notifyFilterChanged();
     },
 
     /**
      * @return {!Element}
      */
     defaultFocusedElement: function()
     {
         return this.element;
     },
 
@@ skipping 104 matching lines @@
     {
         if (!this._overviewItems[mode])
             mode = WebInspector.TimelinePanel.Mode.Events;
         this._overviewItems[mode].revealAndSelect(false);
     },
 
     _refreshViews: function()
     {
         for (var i = 0; i < this._currentViews.length; ++i) {
             var view = this._currentViews[i];
-            view.refreshRecords();
+            view.refreshRecords(this._textFilter._regex);
         }
         this._updateSelectionDetails();
     },
 
     _onModeChanged: function(mode)
     {
         this.element.classList.remove("timeline-" + this._presentationModeSetting.get().toLowerCase() + "-view");
         this._presentationModeSetting.set(mode);
         this.element.classList.add("timeline-" + mode.toLowerCase() + "-view");
         this._stackView.detachChildViews();
         var views = this._viewsForMode(mode);
         this._currentViews = views.mainViews;
         for (var i = 0; i < this._currentViews.length; ++i) {
             var view = this._currentViews[i];
             view.setWindowTimes(this.windowStartTime(), this.windowEndTime());
             this._stackView.appendView(view, "timelinePanelTimelineStackSplitViewState");
-            view.refreshRecords();
+            view.refreshRecords(this._textFilter._regex);
         }
         this._overviewControl = views.overviewView;
         this._overviewPane.setOverviewControl(this._overviewControl);
         this._updateSelectionDetails();
     },
 
     /**
      * @param {boolean} userInitiated
      */
     _startRecording: function(userInitiated)
@@ skipping 29 matching lines @@
         HeapProfilerAgent.collectGarbage();
     },
 
     _onClearButtonClick: function()
     {
         this._model.reset();
     },
 
     _onRecordsCleared: function()
     {
-        this._presentationModel.reset();
         this.requestWindowTimes(0, Infinity);
-        this._windowFilter.reset();
-        if (this._frameModel)
-            this._frameModel.reset();
+        this._windowFilter._reset();
+        if (this._lazyFrameModel)
+            this._lazyFrameModel.reset();
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].reset();
         this._overviewControl.reset();
         this._updateSelectionDetails();
     },
 
     _onRecordingStarted: function()
     {
         this.toggleTimelineButton.title = WebInspector.UIString("Stop");
         this.toggleTimelineButton.toggled = true;
@@ skipping 13 matching lines @@
     _onRecordAdded: function(event)
     {
         this._addRecord(/** @type {!WebInspector.TimelineModel.Record} */(event.data));
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */
     _addRecord: function(record)
     {
-        this._presentationModel.addRecord(record);
-        if (this._frameModel)
-            this._frameModel.addRecord(record);
+        if (this._lazyFrameModel)
+            this._lazyFrameModel.addRecord(record);
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].addRecord(record);
         this._overviewPane.addRecord(record);
-
         this._updateSearchHighlight(false, true);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _willReloadPage: function(event)
     {
         if (this._operationInProgress || this._userInitiatedRecording || !this.isShowing())
             return;
@@ skipping 24 matching lines @@
     {
         if (!this._searchResults || !this._searchResults.length)
             return;
         var index = this._selectedSearchResult ? this._searchResults.indexOf(this._selectedSearchResult) : 0;
         this._jumpToSearchResult(index - 1);
     },
 
     _jumpToSearchResult: function(index)
     {
         this._selectSearchResult((index + this._searchResults.length) % this._searchResults.length);
-        this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegExp, true);
+        this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegex, true);
     },
 
     _selectSearchResult: function(index)
     {
         this._selectedSearchResult = this._searchResults[index];
         this._searchableView.updateCurrentMatchIndex(index);
     },
 
     _clearHighlight: function()
     {
         this._currentViews[0].highlightSearchResult(null);
     },
 
     /**
      * @param {boolean} revealRecord
      * @param {boolean} shouldJump
      */
     _updateSearchHighlight: function(revealRecord, shouldJump)
     {
-        if (this._searchFilter || !this._searchRegExp) {
+        if (this._textFilter || !this._searchRegex) {
             this._clearHighlight();
             return;
         }
 
         if (!this._searchResults)
             this._updateSearchResults(shouldJump);
-        this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegExp, revealRecord);
+        this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegex, revealRecord);
     },
 
     _updateSearchResults: function(shouldJump)
     {
-        var searchRegExp = this._searchRegExp;
+        var searchRegExp = this._searchRegex;
         if (!searchRegExp)
             return;
 
         var matches = [];
-        var presentationModel = this._presentationModel;
 
         /**
          * @param {!WebInspector.TimelineModel.Record} record
          */
         function processRecord(record)
         {
-            if (presentationModel.isVisible(record) && record.testContentMatching(searchRegExp))
+            if (record.testContentMatching(searchRegExp))
                 matches.push(record);
-            return false;
         }
-        this._model.forAllRecords(processRecord);
+        this._model.forAllFilteredRecords(processRecord);
 
         var matchesCount = matches.length;
         if (matchesCount) {
             this._searchResults = matches;
             this._searchableView.updateSearchMatchesCount(matchesCount);
 
             var selectedIndex = matches.indexOf(this._selectedSearchResult);
             if (shouldJump && selectedIndex === -1)
                 selectedIndex = 0;
             this._selectSearchResult(selectedIndex);
         } else {
             this._searchableView.updateSearchMatchesCount(0);
             delete this._selectedSearchResult;
         }
     },
 
     searchCanceled: function()
     {
         this._clearHighlight();
         delete this._searchResults;
         delete this._selectedSearchResult;
-        delete this._searchRegExp;
+        delete this._searchRegex;
     },
 
     /**
      * @param {string} query
      * @param {boolean} shouldJump
      */
     performSearch: function(query, shouldJump)
     {
-        this._searchRegExp = createPlainTextSearchRegex(query, "i");
+        this._searchRegex = createPlainTextSearchRegex(query, "i");
         delete this._searchResults;
         this._updateSearchHighlight(true, shouldJump);
     },
 
     _updateSelectionDetails: function()
     {
         var startTime = this._windowStartTime;
         var endTime = this._windowEndTime;
 
         // Return early in case 0 selection window.
@@ skipping 27 matching lines @@
                 if (!child.endTime || child.endTime < startTime || child.startTime > endTime)
                     continue;
                 childrenTime += Math.min(endTime, child.endTime) - Math.max(startTime, child.startTime);
                 aggregateTimeForRecordWithinWindow(child);
             }
             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;
         }
 
-        var mainThreadTasks = this._presentationModel.mainThreadTasks();
+        var mainThreadTasks = this._model.mainThreadTasks();
         var taskIndex = insertionIndexForObjectInListSortedByFunction(startTime, mainThreadTasks, compareEndTime);
         for (; taskIndex < mainThreadTasks.length; ++taskIndex) {
             var task = mainThreadTasks[taskIndex];
             if (task.startTime > endTime)
                 break;
             aggregateTimeForRecordWithinWindow(task);
         }
 
         var aggregatedTotal = 0;
         for (var categoryName in aggregatedStats)
@@ skipping 100 matching lines @@
 /**
  * @interface
  */
 WebInspector.TimelineModeView = function()
 {
 }
 
 WebInspector.TimelineModeView.prototype = {
     reset: function() {},
 
-    refreshRecords: function() {},
+    /**
+     * @param {?RegExp} textFilter
+     */
+    refreshRecords: function(textFilter) {},
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */
     addRecord: function(record) {},
 
     /**
      * @param {?WebInspector.TimelineModel.Record} record
      * @param {string=} regex
      * @param {boolean=} selectRecord
@@ skipping 31 matching lines @@
 
     /**
      * @param {?WebInspector.TimelineModel.Record} record
      */
     selectRecord: function(record) {},
 
     /**
      * @param {string} title
      * @param {!Object} aggregatedStats
      */
-    showAggregatedStatsInDetails: function(title, aggregatedStats) {}
+    showAggregatedStatsInDetails: function(title, aggregatedStats) {},
 }
 
 /**
  * @constructor
- * @implements {WebInspector.TimelinePresentationModel.Filter}
+ * @extends {WebInspector.TimelineModel.Filter}
  */
 WebInspector.TimelineCategoryFilter = function()
 {
+    WebInspector.TimelineModel.Filter.call(this);
 }
 
 WebInspector.TimelineCategoryFilter.prototype = {
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return !record.category.hidden;
-    }
+    },
+
+    __proto__: WebInspector.TimelineModel.Filter.prototype
 }
 
 /**
  * @constructor
- * @implements {WebInspector.TimelinePresentationModel.Filter}
+ * @extends {WebInspector.TimelineModel.Filter}
  */
 WebInspector.TimelineIsLongFilter = function()
 {
+    WebInspector.TimelineModel.Filter.call(this);
     this._minimumRecordDuration = 0;
 }
 
 WebInspector.TimelineIsLongFilter.prototype = {
     /**
      * @param {number} value
      */
     setMinimumRecordDuration: function(value)
     {
         this._minimumRecordDuration = value;
+        this.notifyFilterChanged();
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return this._minimumRecordDuration ? ((record.lastChildEndTime - record.startTime) >= this._minimumRecordDuration) : true;
-    }
+    },
+
+    __proto__: WebInspector.TimelineModel.Filter.prototype
+
 }
 
 /**
- * @param {!RegExp} regExp
  * @constructor
- * @implements {WebInspector.TimelinePresentationModel.Filter}
+ * @extends {WebInspector.TimelineModel.Filter}
  */
-WebInspector.TimelineSearchFilter = function(regExp)
+WebInspector.TimelineTextFilter = function()
 {
-    this._regExp = regExp;
+    WebInspector.TimelineModel.Filter.call(this);
 }
 
-WebInspector.TimelineSearchFilter.prototype = {
+WebInspector.TimelineTextFilter.prototype = {
+    /**
+     * @param {?RegExp} regex
+     */
+    setRegex: function(regex)
+    {
+        this._regex = regex;
+        this.notifyFilterChanged();
+    },
+
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
-        return record.testContentMatching(this._regExp);
-    }
+        if (!this._regex)
+            return true;
+
+        /**
+         * @param {!WebInspector.TimelineModel.Record} record
+         * @return {boolean}
+         * @this {!WebInspector.TimelineTextFilter}
+         */
+        function innerTraverse(record)
+        {
+            if (record.testContentMatching(this._regex))
+                return true;
+            var children = record.children;
+            for (var i = 0; i < children.length; ++i) {
+                if (innerTraverse.call(this, children[i]))
+                    return true;
+            }
+            return false;
+        }
+
+        return innerTraverse.call(this, record);

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

Use farAllRecords?

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

Done.

+    },
+
+    __proto__: WebInspector.TimelineModel.Filter.prototype
 }
 
 /**
  * @constructor
- * @implements {WebInspector.TimelinePresentationModel.Filter}
+ * @extends {WebInspector.TimelineModel.Filter}
  */
 WebInspector.TimelineWindowFilter = function()
 {
-    this.reset();
+    WebInspector.TimelineModel.Filter.call(this);
+    this._reset();
 }
 
 WebInspector.TimelineWindowFilter.prototype = {
-    reset: function()
+    _reset: function()
     {
         this._windowStartTime = 0;
         this._windowEndTime = Infinity;
     },
 
     setWindowTimes: function(windowStartTime, windowEndTime)
     {
         this._windowStartTime = windowStartTime;
         this._windowEndTime = windowEndTime;
+        this.notifyFilterChanged();
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return record.lastChildEndTime >= this._windowStartTime && record.startTime <= this._windowEndTime;
-    }
+    },
+
+    __proto__: WebInspector.TimelineModel.Filter.prototype
 }
+
+/**
+ * @constructor
+ * @extends {WebInspector.TimelineModel.Filter}
+ */
+WebInspector.TimelineHiddenFilter = function()
+{
+    WebInspector.TimelineModel.Filter.call(this);
+    this._hiddenRecords = {};
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.MarkDOMContent] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.MarkLoad] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.MarkFirstPaint] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.GPUTask] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.ScheduleStyleRecalculation] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.InvalidateLayout] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.RequestMainThreadFrame] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.ActivateLayerTree] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.DrawFrame] = 1;
+    this._hiddenRecords[WebInspector.TimelineModel.RecordType.BeginFrame] = 1;
+}
+
+WebInspector.TimelineHiddenFilter.prototype = {
+    /**
+     * @param {!WebInspector.TimelineModel.Record} record
+     * @return {boolean}
+     */
+    accept: function(record)
+    {
+        return !this._hiddenRecords[record.type];
+    },
+
+    __proto__: WebInspector.TimelineModel.Filter.prototype
+}