DevTools: Refactor network panel overview

Source/devtools/front_end/timeline/TimelineFrameOverview.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 18 matching lines @@
  */
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineOverviewBase}
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.TimelineFrameModelBase} frameModel
  */
 WebInspector.TimelineFrameOverview = function(model, frameModel)
 {
-    WebInspector.TimelineOverviewBase.call(this, model);
+    WebInspector.TimelineOverviewBase.call(this);
     this.element.id = "timeline-overview-frames";
+    this._model = model;
     this._frameModel = frameModel;
     this.reset();
 
     this._outerPadding = 4 * window.devicePixelRatio;
     this._maxInnerBarWidth = 10 * window.devicePixelRatio;
     this._topPadding = 6 * window.devicePixelRatio;
 
     // The below two are really computed by update() -- but let's have something so that windowTimes() is happy.
     this._actualPadding = 5 * window.devicePixelRatio;
     this._actualOuterBarWidth = this._maxInnerBarWidth + this._actualPadding;
 
     this._fillStyles = {};
     var categories = WebInspector.TimelineUIUtils.categories();
     for (var category in categories)
         this._fillStyles[category] = WebInspector.TimelineUIUtils.createFillStyleForCategory(this._context, this._maxInnerBarWidth, 0, categories[category]);
 
     this._frameTopShadeGradient = this._context.createLinearGradient(0, 0, 0, this._topPadding);
     this._frameTopShadeGradient.addColorStop(0, "rgba(255, 255, 255, 0.9)");
     this._frameTopShadeGradient.addColorStop(1, "rgba(255, 255, 255, 0.2)");
 
     this.element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this.element.addEventListener("mouseout", this._onMouseOut.bind(this), false);
 }
 
+WebInspector.TimelineFrameOverview.Events = {
+    SelectionChanged: "SelectionChanged"
+}
+
 WebInspector.TimelineFrameOverview.prototype = {
     /**
      * @override
      */
     reset: function()
     {
         /** @type {!Array<!{startTime:number, endTime:number}>} */
         this._barTimes = [];
         /** @type {!Array<!WebInspector.TimelineFrame>} */
         this._visibleFrames = [];
@@ skipping 21 matching lines @@
         this._context.save();
         for (var i = this._visibleFrames.length - 1; i >= 0; --i)
             this._drawBar(i);
         this._drawTopShadeGradient();
         this._drawFPSMarks();
         this._drawSelection();
         this._context.restore();
     },
 
     /**
-     * @override
      * @param {?WebInspector.TimelineSelection} selection
      */
     select: function(selection)
     {
         var oldSelectionIndex = this._selectedBarIndex;
         var frame = selection && selection.type() === WebInspector.TimelineSelection.Type.Frame ? /** @type {!WebInspector.TimelineFrame} */ (selection.object()) : null;
         var index = frame ? this._visibleFrames.indexOf(frame) : -1;
         this._selectedBarIndex = index >= 0 ? index : null;
         if (this._selectedBarIndex === oldSelectionIndex)
             return;
         if (typeof oldSelectionIndex === "number")
             this._redrawBar(oldSelectionIndex);
         this._drawSelection();
     },
 
     /**
      * @override
      * @param {!Event} event
-     * @return {?WebInspector.TimelineSelection|undefined}
+     * @return {boolean}
      */
-    selectionFromEvent: function(event)
+    onClick: function(event)
     {
         var barIndex = this._screenPositionToBarIndex(event.clientX);
         if (barIndex < 0 || barIndex >= this._visibleFrames.length)
-            return null;
-        return WebInspector.TimelineSelection.fromFrame(this._visibleFrames[barIndex]);
+            return false;
+        var selection = WebInspector.TimelineSelection.fromFrame(this._visibleFrames[barIndex]);
+        this.dispatchEventToListeners(WebInspector.TimelineFrameOverview.Events.SelectionChanged, selection);
+        return true;
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         var barIndex = this._screenPositionToBarIndex(event.clientX);
         if (barIndex < 0 || barIndex >= this._visibleFrames.length)
             barIndex = null;
@@ skipping 324 matching lines @@
      * @param {number} time
      * @param {function(number, {startTime:number, endTime:number}):number} comparator
      */
     _firstBarAfter: function(time, comparator)
     {
         return insertionIndexForObjectInListSortedByFunction(time, this._barTimes, comparator);
     },
 
     __proto__: WebInspector.TimelineOverviewBase.prototype
 }