DevTools: Refactor network panel overview

Source/devtools/front_end/network/NetworkPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 41 matching lines @@
     this._filterBar = new WebInspector.FilterBar();
     this._filtersContainer = this.element.createChild("div", "network-filters-header hidden");
     this._filtersContainer.appendChild(this._filterBar.filtersElement());
     this._filterBar.addEventListener(WebInspector.FilterBar.Events.FiltersToggled, this._onFiltersToggled, this);
     this._filterBar.setName("networkPanel", true);
 
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setPlaceholder(WebInspector.UIString("Find by filename or path"));
     this._searchableView.show(this.element);
 
-    this._overview = new WebInspector.NetworkOverview();
+    // Create top overview component.
+    this._overviewPane = new WebInspector.TimelineOverviewPane("network");
+    this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
+    this._overviewPane.element.id = "network-overview-panel";
+    this._networkOverview = new WebInspector.NetworkOverview();
+    this._overviewPane.setOverviewControls([this._networkOverview]);
+    this._calculator = new WebInspector.NetworkTransferTimeCalculator();
 
     this._splitWidget = new WebInspector.SplitWidget(true, false, "networkPanelSplitViewState");
     this._splitWidget.hideMain();
 
     this._splitWidget.show(this._searchableView.element);
 
     this._progressBarContainer = createElement("div");
     this._createToolbarButtons();
 
     /** @type {!WebInspector.NetworkLogView} */
-    this._networkLogView = new WebInspector.NetworkLogView(this._overview, this._filterBar, this._progressBarContainer, this._networkLogLargeRowsSetting);
+    this._networkLogView = new WebInspector.NetworkLogView(this._filterBar, this._progressBarContainer, this._networkLogLargeRowsSetting);
     this._splitWidget.setSidebarWidget(this._networkLogView);
 
     this._detailsWidget = new WebInspector.VBox();
     this._detailsWidget.element.classList.add("network-details-view");
     this._splitWidget.setMainWidget(this._detailsWidget);
 
     this._closeButtonElement = createElementWithClass("div", "network-close-button", "dt-close-button");
     this._closeButtonElement.addEventListener("click", this._showRequest.bind(this, null), false);
 
     this._networkLogShowOverviewSetting.addChangeListener(this._toggleShowOverview, this);
     this._networkLogLargeRowsSetting.addChangeListener(this._toggleLargerRequests, this);
     this._networkRecordFilmStripSetting.addChangeListener(this._toggleRecordFilmStrip, this);
 
     this._toggleRecordButton(true);
     this._toggleShowOverview();
     this._toggleLargerRequests();
     this._toggleRecordFilmStrip();
     this._dockSideChanged();
 
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._dockSideChanged.bind(this));
     WebInspector.moduleSetting("splitVerticallyWhenDockedToRight").addChangeListener(this._dockSideChanged.bind(this));
     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.WillReloadPage, this._willReloadPage, this);
     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.Load, this._load, this);
     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.RequestSelected, this._onRequestSelected, this);
     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, this._onSearchCountUpdated, this);
     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.SearchIndexUpdated, this._onSearchIndexUpdated, this);
+    this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.UpdateRequest, this._onUpdateRequest, this);
 
     /**
      * @this {WebInspector.NetworkPanel}
      * @return {?WebInspector.SourceFrame}
      */
     function sourceFrameGetter()
     {
         return this._networkItemView.currentSourceFrame();
     }
     WebInspector.GoToLineDialog.install(this, sourceFrameGetter.bind(this));
     WebInspector.DataSaverInfobar.maybeShowInPanel(this);
 }
 
 WebInspector.NetworkPanel.prototype = {
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onWindowChanged: function(event)
+    {
+        var startTime = Math.max(this._calculator.minimumBoundary(), event.data.startTime / 1000);
+        var endTime = Math.min(this._calculator.maximumBoundary(), event.data.endTime / 1000);
+        this._networkLogView.setWindow(startTime, endTime);
+    },
+
     _createToolbarButtons: function()
     {
         this._recordButton = new WebInspector.ToolbarButton("", "record-toolbar-item");
         this._recordButton.addEventListener("click", this._onRecordButtonClicked, this);
         this._panelToolbar.appendToolbarItem(this._recordButton);
 
         this._clearButton = new WebInspector.ToolbarButton(WebInspector.UIString("Clear"), "clear-toolbar-item");
         this._clearButton.addEventListener("click", this._onClearButtonClicked, this);
         this._panelToolbar.appendToolbarItem(this._clearButton);
 
@@ skipping 24 matching lines @@
         this._panelToolbar.appendToolbarItem(this._disableCacheCheckbox);
 
         this._panelToolbar.appendToolbarItem(new WebInspector.ToolbarItem(this._progressBarContainer));
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onRecordButtonClicked: function(event)
     {
-        if (!this._recordButton.toggled())
-            this._networkLogView.reset();
+        if (!this._preserveLogCheckbox.checked() && !this._recordButton.toggled())
+            this._reset();
         this._toggleRecordButton(!this._recordButton.toggled());
     },
 
     /**
      * @param {boolean} toggled
      */
     _toggleRecordButton: function(toggled)
     {
         this._recordButton.setToggled(toggled);
         this._recordButton.setTitle(toggled ? WebInspector.UIString("Stop Recording Network Log") : WebInspector.UIString("Record Network Log"));
         this._networkLogView.setRecording(toggled);
         if (!toggled && this._filmStripRecorder)
             this._filmStripRecorder.stopRecording(this._filmStripAvailable.bind(this));
     },
 
     /**
      * @param {?WebInspector.FilmStripModel} filmStripModel
      */
     _filmStripAvailable: function(filmStripModel)
     {
         if (!filmStripModel)
             return;
         var calculator = this._networkLogView.timeCalculator();
         this._filmStripView.setModel(filmStripModel, calculator.minimumBoundary() * 1000, calculator.boundarySpan() * 1000);
-        this._overview.setFilmStripModel(filmStripModel);
+        this._networkOverview.setFilmStripModel(filmStripModel);
         for (var frame of filmStripModel.frames())
             this._networkLogView.addFilmStripFrame(frame.timestamp / 1000);
     },
 
     /**
      * @param {!Event} event
      */
     _onPreserveLogCheckboxChanged: function(event)
     {
         this._networkLogView.setPreserveLog(this._preserveLogCheckbox.checked());
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onClearButtonClicked: function(event)
     {
-        this._overview.reset();
+        this._reset();
+    },
+
+    _reset: function()
+    {
+        this._calculator.reset();
+        this._overviewPane.reset();
         this._networkLogView.reset();
         if (this._filmStripView)
             this._filmStripView.reset();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _willReloadPage: function(event)
     {
+        if (!this._preserveLogCheckbox.checked())
+            this._reset();
         this._toggleRecordButton(true);
-        if (!this._preserveLogCheckbox.checked())
-            this._networkLogView.reset();
         if (this.isShowing() && this._filmStripRecorder)
             this._filmStripRecorder.startRecording();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _load: function(event)
     {
         if (this._filmStripRecorder && this._filmStripRecorder.isRecording())
             setTimeout(this._toggleRecordButton.bind(this, false), 1000);
     },
 
     _toggleLargerRequests: function()
     {
         this._updateUI();
     },
 
     _toggleShowOverview: function()
     {
         var toggled = this._networkLogShowOverviewSetting.get();
         if (toggled)
-            this._overview.show(this._searchableView.element, this._splitWidget.element);
+            this._overviewPane.show(this._searchableView.element, this._splitWidget.element);
         else
-            this._overview.detach();
+            this._overviewPane.detach();
         this.doResize();
     },
 
     _toggleRecordFilmStrip: function()
     {
         var toggled = this._networkRecordFilmStripSetting.get();
         if (toggled && !this._filmStripRecorder) {
             this._filmStripView = new WebInspector.FilmStripView();
             this._filmStripView.element.classList.add("network-film-strip");
             this._filmStripRecorder = new WebInspector.NetworkPanel.FilmStripRecorder(this._filmStripView);
@@ skipping 252 matching lines @@
 
         appendRevealItem.call(this, request);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onFilmFrameSelected: function(event)
     {
         var timestamp = /** @type {number} */ (event.data);
-        this._overview.setWindow(0, timestamp / 1000);
+        this._overviewPane.requestWindowTimes(0, timestamp);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onFilmFrameEnter: function(event)
     {
         var timestamp = /** @type {number} */ (event.data);
-        this._overview.selectFilmStripFrame(timestamp / 1000);
+        this._networkOverview.selectFilmStripFrame(timestamp);
         this._networkLogView.selectFilmStripFrame(timestamp / 1000);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onFilmFrameExit: function(event)
     {
-        this._overview.clearFilmStripFrame();
+        this._networkOverview.clearFilmStripFrame();
         this._networkLogView.clearFilmStripFrame();
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onUpdateRequest: function(event)
+    {
+        var request = /** @type {!WebInspector.NetworkRequest} */ (event.data);
+        this._calculator.updateBoundaries(request);
+        // FIXME: Unify all time units across the frontend!
+        this._overviewPane.setBounds(this._calculator.minimumBoundary() * 1000, this._calculator.maximumBoundary() * 1000);
+        this._networkOverview.updateRequest(request);
+        this._overviewPane.update();
+    },
+
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ContextMenu.Provider}
  */
 WebInspector.NetworkPanel.ContextMenuProvider = function()
 {
 }
@@ skipping 153 matching lines @@
     {
         if (!this._target)
             return;
 
         this._target.tracingManager.stop();
         this._target = null;
         this._callback = callback;
         this._filmStripView.setFetching();
     }
 }