DevTools: Refactor network panel overview

Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js

 /*
  * Copyright (C) 2013 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 13 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (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.VBox}
+ * @param {string} prefix
  */
-WebInspector.TimelineOverviewPane = function()
+WebInspector.TimelineOverviewPane = function(prefix)
 {
     WebInspector.VBox.call(this);
-    this.element.id = "timeline-overview-pane";
+    this.element.id = prefix + "-overview-pane";
 
     this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
-    this._overviewCalculator._setWindow(0, 1000);
-
-    this._overviewGrid = new WebInspector.OverviewGrid("timeline");
+    this._overviewGrid = new WebInspector.OverviewGrid(prefix);
     this.element.appendChild(this._overviewGrid.element);
 
     this._overviewGrid.setResizeEnabled(false);
     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.Click, this._onClick, this);
     this._overviewControls = [];
     this._markers = new Map();
 }
 
 WebInspector.TimelineOverviewPane.Events = {
-    WindowChanged: "WindowChanged",
-    SelectionChanged: "SelectionChanged"
+    WindowChanged: Symbol("WindowChanged")

[yurys, 2015/06/11 15:33:36]

If you allow to use Symbols for event names, you should update
WebInspector.Object.prototype.*Listener* method annotations. Would be nice to
have all of that in a separate CL.

[alph, 2015/06/11 16:35:00]

Acknowledged.

 };
 
 WebInspector.TimelineOverviewPane.prototype = {
     /**
      * @override
      */
     wasShown: function()
     {
         this.update();
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         this.update();
     },
 
     /**
      * @param {!Array.<!WebInspector.TimelineOverview>} overviewControls
      */
     setOverviewControls: function(overviewControls)
     {
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].dispose();
 
         for (var i = 0; i < overviewControls.length; ++i) {
+            overviewControls[i].setCalculator(this._overviewCalculator);
             overviewControls[i].show(this._overviewGrid.element);
-            if (this._currentSelection)
-                overviewControls[i].select(this._currentSelection);
         }
         this._overviewControls = overviewControls;
         this.update();
     },
 
     /**
      * @param {number} minimumBoundary
      * @param {number} maximumBoundary
      */
     setBounds: function(minimumBoundary, maximumBoundary)
     {
-        this._overviewCalculator._setWindow(minimumBoundary, maximumBoundary);
+        this._overviewCalculator.setBounds(minimumBoundary, maximumBoundary);
         this._overviewGrid.setResizeEnabled(true);
     },
 
     update: function()
     {
         if (!this.isShowing())
             return;
-        this._overviewCalculator._setDisplayWindow(0, this._overviewGrid.clientWidth());
+        this._overviewCalculator.setDisplayWindow(this._overviewGrid.clientWidth());
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].update();
         this._overviewGrid.updateDividers(this._overviewCalculator);
         this._updateMarkers();
         this._updateWindow();
     },
 
     /**
-     * @param {?WebInspector.TimelineSelection} selection
-     */
-    select: function(selection)
-    {
-        this._currentSelection = selection;
-        for (var overviewControl of this._overviewControls)
-            overviewControl.select(selection);
-    },
-
-    /**
      * @param {!Map<number, !Element>} markers
      */
     setMarkers: function(markers)
     {
         this._markers = markers;
         this._updateMarkers();
     },
 
     _updateMarkers: function()
     {
@@ skipping 22 matching lines @@
             this._overviewControls[i].reset();
         this.update();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onClick: function(event)
     {
         var domEvent = /** @type {!Event} */ (event.data);
-        var selection;
         for (var overviewControl of this._overviewControls) {
-            selection = overviewControl.selectionFromEvent(domEvent);
-            if (selection)
-                break;
+            if (overviewControl.onClick(domEvent)) {
+                event.preventDefault();
+                return;
+            }
         }
-        if (typeof selection !== "object")
-            return;
-        event.preventDefault();
-        this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.SelectionChanged, selection);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onWindowChanged: function(event)
     {
         if (this._muteOnWindowChanged)
             return;
         // Always use first control as a time converter.
@@ skipping 31 matching lines @@
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @implements {WebInspector.TimelineGrid.Calculator}
  */
 WebInspector.TimelineOverviewCalculator = function()
 {
+    this.reset();
 }
 
 WebInspector.TimelineOverviewCalculator.prototype = {
     /**
      * @override
      * @return {number}
      */
     paddingLeft: function()
     {
         return this._paddingLeft;
     },
 
     /**
      * @override
      * @param {number} time
      * @return {number}
      */
     computePosition: function(time)
     {
         return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea + this._paddingLeft;
     },
 
     /**
-     * @param {number=} minimumRecordTime
-     * @param {number=} maximumRecordTime
+     * @param {number} minimumBoundary
+     * @param {number} maximumBoundary
      */
-    _setWindow: function(minimumRecordTime, maximumRecordTime)
+    setBounds: function(minimumBoundary, maximumBoundary)
     {
-        this._minimumBoundary = minimumRecordTime;
-        this._maximumBoundary = maximumRecordTime;
+        this._minimumBoundary = minimumBoundary;
+        this._maximumBoundary = maximumBoundary;
     },
 
     /**
-     * @param {number} paddingLeft
      * @param {number} clientWidth
+     * @param {number=} paddingLeft
      */
-    _setDisplayWindow: function(paddingLeft, clientWidth)
+    setDisplayWindow: function(clientWidth, paddingLeft)
     {
-        this._workingArea = clientWidth - paddingLeft;
-        this._paddingLeft = paddingLeft;
+        this._paddingLeft = paddingLeft || 0;
+        this._workingArea = clientWidth - this._paddingLeft;
     },
 
     reset: function()
     {
-        this._setWindow(0, 1000);
+        this.setBounds(0, 1000);
     },
 
     /**
      * @override
      * @param {number} value
      * @param {number=} precision
      * @return {string}
      */
     formatTime: function(value, precision)
     {
@@ skipping 33 matching lines @@
      */
     boundarySpan: function()
     {
         return this._maximumBoundary - this._minimumBoundary;
     }
 }
 
 /**
  * @interface
  */
-WebInspector.TimelineOverview = function(model)
+WebInspector.TimelineOverview = function()
 {
 }
 
 WebInspector.TimelineOverview.prototype = {
     /**
      * @param {?Element} parentElement
      * @param {!Element=} insertBefore
      */
     show: function(parentElement, insertBefore) { },
 
     update: function() { },
 
     dispose: function() { },
 
     reset: function() { },
 
     /**
-     * @param {!WebInspector.TimelineSelection} selection
+     * @param {!Event} event
+     * @return {boolean}
      */
-    select: function(selection) { },
-
-    /**
-     * @param {!Event} event
-     * @return {?WebInspector.TimelineSelection|undefined}
-     */
-    selectionFromEvent: function(event) { },
+    onClick: function(event) { },
 
     /**
      * @param {number} windowLeft
      * @param {number} windowRight
      * @return {!{startTime: number, endTime: number}}
      */
     windowTimes: function(windowLeft, windowRight) { },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      * @return {!{left: number, right: number}}
      */
     windowBoundaries: function(startTime, endTime) { },
 
     timelineStarted: function() { },
 
     timelineStopped: function() { },
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.TimelineOverview}
- * @param {!WebInspector.TimelineModel} model
  */
-WebInspector.TimelineOverviewBase = function(model)
+WebInspector.TimelineOverviewBase = function()
 {
     WebInspector.VBox.call(this);
-
-    this._model = model;
+    /** @type {?WebInspector.TimelineOverviewCalculator} */
+    this._calculator = null;
     this._canvas = this.element.createChild("canvas", "fill");
     this._context = this._canvas.getContext("2d");
 }
 
 WebInspector.TimelineOverviewBase.prototype = {
     /**
      * @override
      */
     update: function()
     {
@@ skipping 23 matching lines @@
     },
 
     /**
      * @override
      */
     timelineStopped: function()
     {
     },
 
     /**
+     * @param {!WebInspector.TimelineOverviewCalculator} calculator
+     */
+    setCalculator: function(calculator)
+    {
+        this._calculator = calculator;
+    },
+
+    /**
      * @override
-     * @param {!WebInspector.TimelineSelection} selection
+     * @param {!Event} event
+     * @return {boolean}
      */
-    select: function(selection) { },
-
-    /**
-     * @override
-     * @param {!Event} event
-     * @return {?WebInspector.TimelineSelection|undefined}
-     */
-    selectionFromEvent: function(event)
+    onClick: function(event)
     {
-        return undefined;
+        return false;
     },
 
     /**
      * @override
      * @param {number} windowLeft
      * @param {number} windowRight
      * @return {!{startTime: number, endTime: number}}
      */
     windowTimes: function(windowLeft, windowRight)
     {
-        var absoluteMin = this._model.minimumRecordTime();
-        var timeSpan = this._model.maximumRecordTime() - absoluteMin;
+        var absoluteMin = this._calculator.minimumBoundary();

[yurys, 2015/06/11 15:33:36]

Do we need this code in base?

[alph, 2015/06/11 16:35:00]

I'd like to have a default implementation in base.

+        var timeSpan = this._calculator.maximumBoundary() - absoluteMin;
         return {
             startTime: absoluteMin + timeSpan * windowLeft,
             endTime: absoluteMin + timeSpan * windowRight
         };
     },
 
     /**
      * @override
      * @param {number} startTime
      * @param {number} endTime
      * @return {!{left: number, right: number}}
      */
     windowBoundaries: function(startTime, endTime)
     {
-        var absoluteMin = this._model.minimumRecordTime();
-        var timeSpan = this._model.maximumRecordTime() - absoluteMin;
+        var absoluteMin = this._calculator.minimumBoundary();
+        var timeSpan = this._calculator.maximumBoundary() - absoluteMin;
         var haveRecords = absoluteMin > 0;
         return {
             left: haveRecords && startTime ? Math.min((startTime - absoluteMin) / timeSpan, 1) : 0,
             right: haveRecords && endTime < Infinity ? (endTime - absoluteMin) / timeSpan : 1
         };
     },
 
     resetCanvas: function()
     {
         this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
         this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
     },
 
     __proto__: WebInspector.VBox.prototype
 }