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

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 76 matching lines @@
  */
 UI.DragHandler = class {
   constructor() {
     this._elementDragMove = this._elementDragMove.bind(this);
     this._elementDragEnd = this._elementDragEnd.bind(this);
     this._mouseOutWhileDragging = this._mouseOutWhileDragging.bind(this);
   }
 
   _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() {
     if (!this._glassPaneInUse)
       return;
     this._glassPaneInUse = false;
     if (--UI.DragHandler._glassPaneUsageCount)
       return;
     UI.DragHandler._glassPane.dispose();
     delete UI.DragHandler._glassPane;
@@ skipping 188 matching lines @@
     elementDrag(lastX, lastY);
   }
 };
 
 /**
  * @unrestricted
  */
 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
  * @return {boolean}
  */
 UI.isBeingEdited = function(node) {
   if (!node || node.nodeType !== Node.ELEMENT_NODE)
     return false;
   var element = /** {!Element} */ (node);
   if (element.classList.contains('text-prompt') || element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA')
@@ skipping 871 matching lines @@
   document.defaultView.addEventListener('blur', UI._windowBlurred.bind(UI, document), false);
   document.addEventListener('focus', UI._focusChanged.bind(UI), true);
 
   if (!UI.themeSupport)
     UI.themeSupport = new UI.ThemeSupport(themeSetting);
   UI.themeSupport.applyTheme(document);
 
   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));
 };
 
 /**
  * @param {string} name
  * @return {string}
  */
 UI.beautifyFunctionName = function(name) {
   return name || Common.UIString('(anonymous)');
 };
 
@@ skipping 847 matching lines @@
    */
   constructor(message, okCallback, cancelCallback) {
     super(true);
     this.registerRequiredCSS('ui/confirmDialog.css');
     this.contentElement.createChild('div', 'message').createChild('span').textContent = message;
     var buttonsBar = this.contentElement.createChild('div', 'button');
     buttonsBar.appendChild(UI.createTextButton(Common.UIString('Ok'), okCallback));
     buttonsBar.appendChild(UI.createTextButton(Common.UIString('Cancel'), cancelCallback));
   }
 };