Timeline: streamline flame chart views update logic

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

 // Copyright 2016 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.
 
 Timeline.FlameChartStyle = {
   textColor: '#333'
 };
 
 /**
  * @enum {symbol}
@@ skipping 101 matching lines @@
     this._model = null;
 
     this._splitWidget = new UI.SplitWidget(false, false, 'timelineFlamechartMainView', 150);
 
     this._dataProvider = new Timeline.TimelineFlameChartDataProvider(filters);
     var mainViewGroupExpansionSetting = Common.settings.createSetting('timelineFlamechartMainViewGroupExpansion', {});
     this._mainView = new PerfUI.FlameChart(this._dataProvider, this, mainViewGroupExpansionSetting);
     this._mainView.alwaysShowVerticalScroll();
     this._mainView.enableRuler(false);
 
-    var networkViewGroupExpansionSetting =
+    this._networkViewGroupExpansionSetting =
         Common.settings.createSetting('timelineFlamechartNetworkViewGroupExpansion', {});
     this._networkDataProvider = new Timeline.TimelineFlameChartNetworkDataProvider();
-    this._networkView = new PerfUI.FlameChart(this._networkDataProvider, this, networkViewGroupExpansionSetting);
+    this._networkView = new PerfUI.FlameChart(this._networkDataProvider, this, this._networkViewGroupExpansionSetting);
     this._networkView.alwaysShowVerticalScroll();
-    networkViewGroupExpansionSetting.addChangeListener(this.resizeToPreferredHeights.bind(this));
 
     this._networkPane = new UI.VBox();
     this._networkPane.setMinimumSize(23, 23);
     this._networkView.show(this._networkPane.element);
     this._splitResizer = this._networkPane.element.createChild('div', 'timeline-flamechart-resizer');
     this._splitWidget.hideDefaultResizer(true);
     this._splitWidget.installResizer(this._splitResizer);
 
     this._splitWidget.setMainWidget(this._mainView);
     this._splitWidget.setSidebarWidget(this._networkPane);
@@ skipping 56 matching lines @@
     if (this._model)
       this._model.removeEventListener(extensionDataAdded, this._appendExtensionData, this);
     this._model = model;
     if (this._model)
       this._model.addEventListener(extensionDataAdded, this._appendExtensionData, this);
     this._refresh();
   }
 
   _refresh() {
     this._dataProvider.setModel(this._model);
-    this._mainView.reset();
-
     this._networkDataProvider.setModel(this._model);
-    this._networkView.reset();
-
-    this._detailsView.setModel(this._model);
+    if (this._detailsView)
+      this._detailsView.setModel(this._model);
 
     this._nextExtensionIndex = 0;
     this._appendExtensionData();
-    this._mainView.scheduleUpdate();
 
-    this._networkDataProvider.reset();
     if (this._networkDataProvider.isEmpty()) {
       this._mainView.enableRuler(true);
       this._splitWidget.hideSidebar();
     } else {
       this._mainView.enableRuler(false);
       this._splitWidget.showBoth();
       this.resizeToPreferredHeights();
     }
-    this._networkView.scheduleUpdate();
+    this._mainView.reset();
+    this._networkView.reset();
   }
 
   _appendExtensionData() {
     if (!this._model)
       return;
     var extensions = this._model.extensionInfo();
     while (this._nextExtensionIndex < extensions.length)
       this._dataProvider.appendExtensionEvents(extensions[this._nextExtensionIndex++]);
     this._mainView.scheduleUpdate();
   }
 
   /**
    * @override
    * @param {?SDK.TracingModel.Event} event
    */
   highlightEvent(event) {
     var entryIndex =
         event ? this._dataProvider.entryIndexForSelection(Timeline.TimelineSelection.fromTraceEvent(event)) : -1;
     if (entryIndex >= 0)
       this._mainView.highlightEntry(entryIndex);
     else
       this._mainView.hideHighlight();
   }
 
   /**
    * @override
    */
   willHide() {
+    this._networkViewGroupExpansionSetting.removeChangeListener(this.resizeToPreferredHeights, this);
     Bindings.blackboxManager.removeChangeListener(this._boundRefresh);
   }
 
   /**
    * @override
    */
   wasShown() {
+    this._networkViewGroupExpansionSetting.addChangeListener(this.resizeToPreferredHeights, this);
     Bindings.blackboxManager.addChangeListener(this._boundRefresh);
+    if (this._needsResizeToPreferredHeights)
+      this.resizeToPreferredHeights();
     this._mainView.scheduleUpdate();
     this._networkView.scheduleUpdate();
   }
 
   /**
    * @override
    * @return {!UI.Widget}
    */
   view() {
     return this;
@@ skipping 42 matching lines @@
   /**
    * @param {!PerfUI.FlameChartDataProvider} dataProvider
    * @param {!Common.Event} event
    */
   _onEntrySelected(dataProvider, event) {
     var entryIndex = /** @type{number} */ (event.data);
     this._delegate.select(dataProvider.createSelection(entryIndex));
   }
 
   resizeToPreferredHeights() {
+    if (!this.isShowing()) {
+      this._needsResizeToPreferredHeights = true;
+      return;
+    }
+    this._needsResizeToPreferredHeights = false;
     this._networkPane.element.classList.toggle(
         'timeline-network-resizer-disabled', !this._networkDataProvider.isExpanded());
     this._splitWidget.setSidebarSize(
         this._networkDataProvider.preferredHeight() + this._splitResizer.clientHeight + PerfUI.FlameChart.HeaderHeight +
         2);
   }
 };
 
 /**
  * @unrestricted
  */
 Timeline.TimelineFlameChartView.Selection = class {
   /**
    * @param {!Timeline.TimelineSelection} selection
    * @param {number} entryIndex
    */
   constructor(selection, entryIndex) {
     this.timelineSelection = selection;
     this.entryIndex = entryIndex;
   }
 };