DevTools: move overview grid window curtains handling into said window

third_party/WebKit/Source/devtools/front_end/ui_lazy/OverviewGrid.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 26 matching lines @@
     this.element = createElement("div");
     this.element.id = prefix + "-overview-container";
 
     this._grid = new WebInspector.TimelineGrid();
     this._grid.element.id = prefix + "-overview-grid";
     this._grid.setScrollTop(0);
 
     this.element.appendChild(this._grid.element);
 
     this._window = new WebInspector.OverviewGrid.Window(this.element, this._grid.dividersLabelBarElement);
-    this._window.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
 }
 
 WebInspector.OverviewGrid.prototype = {
     /**
      * @return {number}
      */
     clientWidth: function()
     {
         return this.element.clientWidth;
     },
@@ skipping 68 matching lines @@
     {
         this._window._zoom(zoomFactor, referencePoint);
     },
 
     /**
      * @param {boolean} enabled
      */
     setResizeEnabled: function(enabled)
     {
         this._window.setEnabled(enabled);
-    },
-
-    _onWindowChanged: function()
-    {
-        this._grid.showCurtains(this.windowLeft(), this.windowRight());
     }
 }
 
 
 WebInspector.OverviewGrid.MinSelectableSize = 14;
 
 WebInspector.OverviewGrid.WindowScrollSpeedFactor = .3;
 
 WebInspector.OverviewGrid.ResizerOffset = 3.5; // half pixel because offset values are not rounded but ceiled
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
  * @param {!Element} parentElement
  * @param {!Element=} dividersLabelBarElement
  */
 WebInspector.OverviewGrid.Window = function(parentElement, dividersLabelBarElement)
 {
     this._parentElement = parentElement;
 
     WebInspector.installDragHandle(this._parentElement, this._startWindowSelectorDragging.bind(this), this._windowSelectorDragging.bind(this), this._endWindowSelectorDragging.bind(this), "text", null);
     if (dividersLabelBarElement)
         WebInspector.installDragHandle(dividersLabelBarElement, this._startWindowDragging.bind(this), this._windowDragging.bind(this), null, "-webkit-grabbing", "-webkit-grab");
 
-    this.windowLeft = 0.0;
-    this.windowRight = 1.0;
-
     this._parentElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), true);
     this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
     WebInspector.appendStyle(this._parentElement, "ui_lazy/overviewGrid.css");
 
     this._leftResizeElement = parentElement.createChild("div", "overview-grid-window-resizer");
-    this._leftResizeElement.style.left = "0";
     WebInspector.installDragHandle(this._leftResizeElement, this._resizerElementStartDragging.bind(this), this._leftResizeElementDragging.bind(this), null, "ew-resize");
+    this._rightResizeElement = parentElement.createChild("div", "overview-grid-window-resizer");
+    WebInspector.installDragHandle(this._rightResizeElement, this._resizerElementStartDragging.bind(this), this._rightResizeElementDragging.bind(this), null, "ew-resize");
 
-    this._rightResizeElement = parentElement.createChild("div", "overview-grid-window-resizer");
-    this._rightResizeElement.style.right = "0";
-    WebInspector.installDragHandle(this._rightResizeElement, this._resizerElementStartDragging.bind(this), this._rightResizeElementDragging.bind(this), null, "ew-resize");
-    this.setEnabled(true);
+    this._leftCurtainElement = parentElement.createChild("div", "window-curtain-left");
+    this._rightCurtainElement = parentElement.createChild("div", "window-curtain-right");
+    this.reset();
 }
 
 /** @enum {symbol} */
 WebInspector.OverviewGrid.Events = {
     WindowChanged: Symbol("WindowChanged"),
     Click: Symbol("Click")
 }
 
 WebInspector.OverviewGrid.Window.prototype = {
     reset: function()
     {
         this.windowLeft = 0.0;
         this.windowRight = 1.0;
-        this._leftResizeElement.style.left = "0%";
-        this._rightResizeElement.style.left = "100%";
         this.setEnabled(true);
+        this._updateCurtains();
     },
 
     /**
      * @param {boolean} enabled
      */
     setEnabled: function(enabled)
     {
         this._enabled = enabled;
     },
 
@@ skipping 131 matching lines @@
     {
         this._setWindowPosition(0, this._parentElement.clientWidth);
     },
 
     /**
      * @param {number} windowLeft
      * @param {number} windowRight
      */
     _setWindow: function(windowLeft, windowRight)
     {
-        var left = windowLeft;
-        var right = windowRight;
-        var width = windowRight - windowLeft;
+        this.windowLeft = windowLeft;
+        this.windowRight = windowRight;
+        this._updateCurtains();
+        this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged);
+    },
+
+    _updateCurtains: function()
+    {
+        var left = this.windowLeft;
+        var right = this.windowRight;
+        var width = right - left;
 
         // We allow actual time window to be arbitrarily small but don't want the UI window to be too small.
         var widthInPixels = width * this._parentElement.clientWidth;
         var minWidthInPixels = WebInspector.OverviewGrid.MinSelectableSize / 2;
         if (widthInPixels < minWidthInPixels) {
             var factor = minWidthInPixels / widthInPixels;
-            left = ((windowRight + windowLeft) - width * factor) / 2;
-            right = ((windowRight + windowLeft) + width * factor) / 2;
+            left = ((this.windowRight + this.windowLeft) - width * factor) / 2;
+            right = ((this.windowRight + this.windowLeft) + width * factor) / 2;
         }
+        this._leftResizeElement.style.left = (100 * left).toFixed(2) + "%";
+        this._rightResizeElement.style.left = (100 * right).toFixed(2) + "%";
 
-        this.windowLeft = windowLeft;
-        this._leftResizeElement.style.left = left * 100 + "%";
-        this.windowRight = windowRight;
-        this._rightResizeElement.style.left = right * 100 + "%";
-
-        this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged);
+        this._leftCurtainElement.style.width = (100 * left).toFixed(2) + "%";
+        this._rightCurtainElement.style.width = (100 * (1 - right)).toFixed(2) + "%";
     },
 
     /**
      * @param {?number} start
      * @param {?number} end
      */
     _setWindowPosition: function(start, end)
     {
         var clientWidth = this._parentElement.clientWidth;
         var windowLeft = typeof start === "number" ? start / clientWidth : this.windowLeft;
@@ skipping 84 matching lines @@
         position = Math.max(0, Math.min(position, this._width));
         if (position < this._startPosition) {
             this._windowSelector.style.left = position + "px";
             this._windowSelector.style.right = this._width - this._startPosition + "px";
         } else {
             this._windowSelector.style.left = this._startPosition + "px";
             this._windowSelector.style.right = this._width - position + "px";
         }
     }
 }