DevTools: Refactor network panel overview

Source/devtools/front_end/timeline/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 61 matching lines @@
     this._currentViews = [];
 
     this._overviewModeSetting = WebInspector.settings.createSetting("timelineOverviewMode", WebInspector.TimelinePanel.OverviewMode.Frames);
     this._flameChartEnabledSetting = WebInspector.settings.createSetting("timelineFlameChartEnabled", true);
     this._createToolbarItems();
 
     var topPaneElement = this.element.createChild("div", "hbox");
     topPaneElement.id = "timeline-overview-panel";
 
     // Create top overview component.
-    this._overviewPane = new WebInspector.TimelineOverviewPane();
-    this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.SelectionChanged, this._onOverviewSelectionChanged.bind(this));
+    this._overviewPane = new WebInspector.TimelineOverviewPane("timeline");
     this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
     this._overviewPane.show(topPaneElement);
 
     this._createFileSelector();
     this._registerShortcuts();
 
     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.WillReloadPage, this._willReloadPage, this);
     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.Load, this._loadEventFired, this);
 
     // Create top level properties splitter.
@@ skipping 503 matching lines @@
     },
 
     _onModeChanged: function()
     {
         this._stackView.detach();
 
         var isFrameMode = this._overviewModeSetting.get() === WebInspector.TimelinePanel.OverviewMode.Frames;
         this._removeAllModeViews();
         this._overviewControls = [];
 
-        var mainOverview = isFrameMode ? new WebInspector.TimelineFrameOverview(this._model, this._frameModel())
-                                       : new WebInspector.TimelineEventOverview(this._model, this._frameModel());
-        this._overviewControls.push(mainOverview);
+        if (isFrameMode) {
+            this._frameOverview = new WebInspector.TimelineFrameOverview(this._model, this._frameModel());
+            this._frameOverview.addEventListener(WebInspector.TimelineFrameOverview.Events.SelectionChanged, this._onOverviewSelectionChanged, this);
+            this._overviewControls.push(this._frameOverview);
+        } else {
+            this._frameOverview = null;
+            this._overviewControls.push(new WebInspector.TimelineEventOverview(this._model, this._frameModel()));
+        }
         this.element.classList.toggle("timeline-overview-frames-mode", isFrameMode);
 
         if (this._flameChartEnabledSetting.get()) {
             this._filterBar.filterButton().setEnabled(false);
             this._filtersContainer.classList.toggle("hidden", true);
             this._flameChart = new WebInspector.TimelineFlameChartView(this, this._model, this._frameModel());
             this._flameChart.enableNetworkPane(this._captureNetworkSetting.get());
             this._addModeView(this._flameChart);
         } else {
             this._flameChart = null;
             this._filterBar.filterButton().setEnabled(true);
             this._filtersContainer.classList.toggle("hidden", !this._filterBar.filtersToggled());
             var timelineView = new WebInspector.TimelineView(this, this._model);
             this._addModeView(timelineView);
             timelineView.setFrameModel(isFrameMode ? this._frameModel() : null);
         }
 
         if (this._captureMemorySetting.get()) {
             if (!isFrameMode)  // Frame mode skews time, don't render aux overviews.
                 this._overviewControls.push(new WebInspector.TimelineMemoryOverview(this._model));
             this._addModeView(new WebInspector.MemoryCountersGraph(this, this._model));
         }
 
         if (Runtime.experiments.isEnabled("filmStripInNetworkAndTimeline") && !isFrameMode && this._captureFilmStripSetting.get())
-            this._overviewControls.push(new WebInspector.TimelineFilmStripOverview(this._model, this._tracingModel));
+            this._overviewControls.push(new WebInspector.TimelineFilmStripOverview(this._tracingModel));
 
         var mainTarget = WebInspector.targetManager.mainTarget();
         this._overviewPane.setOverviewControls(this._overviewControls);
         this.doResize();
         this._selection = null;
         this._updateSelectionDetails();
 
         this._stackView.show(this._searchableView.element);
     },
 
@@ skipping 581 matching lines @@
     {
         this._detailsLinkifier.reset();
         this._selection = selection;
         if (preferredTab)
             this._detailsView.setPreferredTab(preferredTab);
 
         for (var i = 0; i < this._currentViews.length; ++i) {
             var view = this._currentViews[i];
             view.setSelection(selection);
         }
-        this._overviewPane.select(selection);
+        if (this._frameOverview)
+            this._frameOverview.select(selection);
         this._updateSelectionDetails();
     },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     _revealTimeRange: function(startTime, endTime)
     {
         var timeShift = 0;
@@ skipping 559 matching lines @@
     handleQueryParam: function(value)
     {
         WebInspector.TimelinePanel.show();
         WebInspector.TimelinePanel.instance()._loadFromURL(value);
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineOverviewBase}
- * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.TracingModel} tracingModel
  */
-WebInspector.TimelineFilmStripOverview = function(model, tracingModel)
+WebInspector.TimelineFilmStripOverview = function(tracingModel)
 {
-    WebInspector.TimelineOverviewBase.call(this, model);
+    WebInspector.TimelineOverviewBase.call(this);
     this._tracingModel = tracingModel;
     this._filmStripView = new WebInspector.FilmStripView();
     this._filmStripView.show(this.element);
 }
 
 WebInspector.TimelineFilmStripOverview.prototype = {
     /**
      * @override
      */
     update: function()
     {
         var model = this._tracingModel;
         this._filmStripModel = new WebInspector.FilmStripModel(model);
         this._filmStripView.setModel(this._filmStripModel, model.minimumRecordTime(), model.maximumRecordTime() - model.minimumRecordTime());
     },
 
     /**
      * @override
      */
     reset: function()
     {
         this._filmStripView.reset();
     },
 
     __proto__: WebInspector.TimelineOverviewBase.prototype
 }