[DevTools] Make UI.GlassPane position contentElement for different overlay controls.

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

Index: third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
index 1e79d2231cf554d764e8a278a30592c07fd4a2f5..0e29305c37ef5b80e0e49f965ca41985122e8844 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
@@ -94,8 +94,10 @@ UI.DragHandler = class {
 
   _createGlassPane() {
     this._glassPaneInUse = true;
-    if (!UI.DragHandler._glassPaneUsageCount++)
-      UI.DragHandler._glassPane = new UI.GlassPane(UI.DragHandler._documentForMouseOut);
+    if (!UI.DragHandler._glassPaneUsageCount++) {
+      UI.DragHandler._glassPane =
+          new UI.GlassPane(UI.DragHandler._documentForMouseOut, false /* dimmed */, true /* blockPointerEvents */);
+    }
   }
 
   _disposeGlassPane() {
@@ -304,28 +306,27 @@ UI.installInertialDragHandle = function(
 UI.GlassPane = class {
   /**
    * @param {!Document} document
-   * @param {boolean=} dimmed
+   * @param {boolean} dimmed
+   * @param {boolean} blockPointerEvents
    */
-  constructor(document, dimmed) {
+  constructor(document, dimmed, blockPointerEvents) {
     this.element = createElement('div');
     var background = dimmed ? 'rgba(255, 255, 255, 0.5)' : 'transparent';
-    this._zIndex = UI._glassPane ? UI._glassPane._zIndex + 1000 :
-                                   3000;  // Deliberately starts with 3000 to hide other z-indexed elements below.
     this.element.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;background-color:' + background +
-        ';z-index:' + this._zIndex + ';overflow:hidden;';
+        ';z-index:' + UI._glassPaneZIndex + ';overflow:hidden;' + (blockPointerEvents ? '' : 'pointer-events:none;');
+    UI._glassPaneZIndex += 1000;
     document.body.appendChild(this.element);
-    UI._glassPane = this;
     // TODO(dgozman): disallow focus outside of glass pane?
   }
 
   dispose() {
-    delete UI._glassPane;
+    UI._glassPaneZIndex -= 1000;

[einbinder, 2017/01/30 23:59:47]

Should we do a check if this.element has a parent here? I'm thinking some weird
bug later where dispose gets called more than once on a GlassPane and the
z-index moves too low.

     this.element.remove();
   }
 };
 
-/** @type {!UI.GlassPane|undefined} */
-UI._glassPane;
+/** @type {number} */
+UI._glassPaneZIndex = 3000;  // Deliberately starts with 3000 to hide other z-indexed elements below.
 
 /**
  * @param {?Node=} node
@@ -1217,6 +1218,7 @@ UI.initializeUIUtils = function(document, themeSetting) {
   var body = /** @type {!Element} */ (document.body);
   UI.appendStyle(body, 'ui/inspectorStyle.css');
   UI.appendStyle(body, 'ui/popover.css');
+  UI.ModalOverlay.setRootElement(/** @type {!Element} */ (document.body));
 };
 
 /**