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

third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2009 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 26 matching lines @@
     this.element.appendChild(WebInspector.Widget.createStyleElement("ui_lazy/timelineGrid.css"));
 
     this._dividersElement = this.element.createChild("div", "resources-dividers");
 
     this._gridHeaderElement = createElement("div");
     this._gridHeaderElement.classList.add("timeline-grid-header");
     this._eventDividersElement = this._gridHeaderElement.createChild("div", "resources-event-dividers");
     this._dividersLabelBarElement = this._gridHeaderElement.createChild("div", "resources-dividers-label-bar");
     this.element.appendChild(this._gridHeaderElement);
 
-    this._leftCurtainElement = this.element.createChild("div", "timeline-cpu-curtain-left");
-    this._rightCurtainElement = this.element.createChild("div", "timeline-cpu-curtain-right");
+    this._leftCurtainElement = this.element.createChild("div", "timeline-curtain-left");
+    this._rightCurtainElement = this.element.createChild("div", "timeline-curtain-right");
 }
 
 /**
  * @param {!WebInspector.TimelineGrid.Calculator} calculator
  * @param {number=} freeZoneAtLeft
  * @return {!{offsets: !Array.<number>, precision: number}}
  */
 WebInspector.TimelineGrid.calculateDividerOffsets = function(calculator, freeZoneAtLeft)
 {
     /** @const */ var minGridSlicePx = 64; // minimal distance between grid lines.
@@ skipping 212 matching lines @@
         this._dividersElement.classList.remove("hidden");
     },
 
     hideCurtains: function()
     {
         this._leftCurtainElement.classList.add("hidden");
         this._rightCurtainElement.classList.add("hidden");
     },
 
     /**
-     * @param {number} gapOffset
-     * @param {number} gapWidth
+     * @param {number} left
+     * @param {number} right
      */
-    showCurtains: function(gapOffset, gapWidth)
+    showCurtains: function(left, right)
     {
-        this._leftCurtainElement.style.width = gapOffset + "px";
+        this._leftCurtainElement.style.width = (100 * left).toFixed(2) + "%";
         this._leftCurtainElement.classList.remove("hidden");
-        this._rightCurtainElement.style.left = (gapOffset + gapWidth) + "px";
+        this._rightCurtainElement.style.width = (100 * (1 - right)).toFixed(2) + "%";
         this._rightCurtainElement.classList.remove("hidden");
     },
 
     /**
      * @param {number} scrollTop
      */
     setScrollTop: function(scrollTop)
     {
         this._dividersLabelBarElement.style.top = scrollTop + "px";
         this._eventDividersElement.style.top = scrollTop + "px";
@@ skipping 31 matching lines @@
 
     /** @return {number} */
     zeroTime: function() { },
 
     /** @return {number} */
     maximumBoundary: function() { },
 
     /** @return {number} */
     boundarySpan: function() { }
 }