DevTools: Grey out outside parts of selection window on timeline overview.

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);
-
-    this._overviewWindowElement = parentElement.createChild("div", "overview-grid-window");
-    this._overviewWindowElement.appendChild(WebInspector.Widget.createStyleElement("ui_lazy/overviewGrid.css"));
-    this._overviewWindowBordersElement = parentElement.createChild("div", "overview-grid-window-rulers");
-    parentElement.createChild("div", "overview-grid-dividers-background");
+    this._parentElement.appendChild(WebInspector.Widget.createStyleElement("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 overview-grid-window-resizer-right");
+    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);
 }
 
 WebInspector.OverviewGrid.Events = {
     WindowChanged: "WindowChanged",
     Click: "Click"
 }
 
 WebInspector.OverviewGrid.Window.prototype = {
     reset: function()
     {
         this.windowLeft = 0.0;
         this.windowRight = 1.0;
-
-        this._overviewWindowElement.style.left = "0%";
-        this._overviewWindowElement.style.width = "100%";
-        this._overviewWindowBordersElement.style.left = "0%";
-        this._overviewWindowBordersElement.style.right = "0%";
         this._leftResizeElement.style.left = "0%";
         this._rightResizeElement.style.left = "100%";
         this.setEnabled(true);
     },
 
     /**
      * @param {boolean} enabled
      */
     setEnabled: function(enabled)
     {
@@ skipping 152 matching lines @@
             var factor = minWidthInPixels / widthInPixels;
             left = ((windowRight + windowLeft) - width * factor) / 2;
             right = ((windowRight + windowLeft) + width * factor) / 2;
         }
 
         this.windowLeft = windowLeft;
         this._leftResizeElement.style.left = left * 100 + "%";
         this.windowRight = windowRight;
         this._rightResizeElement.style.left = right * 100 + "%";
 
-        this._overviewWindowElement.style.left = left * 100 + "%";
-        this._overviewWindowBordersElement.style.left = left * 100 + "%";
-        this._overviewWindowElement.style.width = (right - left) * 100 + "%";
-        this._overviewWindowBordersElement.style.right = (1 - right) * 100 + "%";
-
         this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged);
     },
 
     /**
      * @param {?number} start
      * @param {?number} end
      */
     _setWindowPosition: function(start, end)
     {
         var clientWidth = this._parentElement.clientWidth;
@@ skipping 85 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";
         }
     }
 }