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

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

 /*
  * Copyright (C) 2012 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 23 matching lines @@
 UI.Dialog = class extends UI.Widget {
   constructor() {
     super(true);
     this.markAsRoot();
     this.registerRequiredCSS('ui/dialog.css');
 
     this.contentElement.createChild('content');
     this.contentElement.tabIndex = 0;
     this.contentElement.addEventListener('focus', this._onFocus.bind(this), false);
     this._keyDownBound = this._onKeyDown.bind(this);
+    this._onClickBound = this._onGlassPaneClick.bind(this);
+    this._overlay = new UI.ModalOverlay();
+    this._overlay.setBlockPointerEvents(true);
+    this._wrapsContent = false;
+    this._maxSize = null;
 
-    this._wrapsContent = false;
-    this._dimmed = false;
     /** @type {!Map<!HTMLElement, number>} */
     this._tabIndexMap = new Map();
   }
 
   /**
    * @return {boolean}
    */
   static hasInstance() {
     return !!UI.Dialog._instance;
   }
 
   /**
-   * @param {!UI.Widget} view
-   */
-  static setModalHostView(view) {
-    UI.Dialog._modalHostView = view;
-  }
-
-  /**
-   * FIXME: make utility method in Dialog, so clients use it instead of this getter.
-   * Method should be like Dialog.showModalElement(position params, reposition callback).
-   * @return {?UI.Widget}
-   */
-  static modalHostView() {
-    return UI.Dialog._modalHostView;
-  }
-
-  static modalHostRepositioned() {
-    if (UI.Dialog._instance)
-      UI.Dialog._instance._position();
-  }
-
-  /**
    * @override
    */
   show() {
     if (UI.Dialog._instance)
       UI.Dialog._instance.detach();
     UI.Dialog._instance = this;
 
-    var document = /** @type {!Document} */ (UI.Dialog._modalHostView.element.ownerDocument);
-    this._disableTabIndexOnElements(document);
+    this._disableTabIndexOnElements(this._overlay.document());
 
-    this._glassPane = new UI.GlassPane(document, this._dimmed);
-    this._glassPane.element.addEventListener('click', this._onGlassPaneClick.bind(this), false);
-    this.element.ownerDocument.body.addEventListener('keydown', this._keyDownBound, false);
+    super.show(this._overlay.element);
+    this._overlay.show();
+    this._overlay.addGlassPaneEventListener('click', this._onClickBound, false);
+    this._overlay.document().body.addEventListener('keydown', this._keyDownBound, false);

[caseq, 2017/01/31 21:27:19]

I wonder if we can make it simpler by focusing to the dialog and listening
locally instead?

[dgozman, 2017/01/31 23:39:49]

Done.

+    this._overlay.setMaxSize(this._effectiveMaxSize());
+    this._overlay.position();
 
-    super.show(this._glassPane.element);
-
-    this._position();
     this._focusRestorer = new UI.WidgetFocusRestorer(this);
   }
 
   /**
    * @override
    */
   detach() {
     this._focusRestorer.restore();
 
-    this.element.ownerDocument.body.removeEventListener('keydown', this._keyDownBound, false);
+    this._overlay.document().body.removeEventListener('keydown', this._keyDownBound, false);
+    this._overlay.removeGlassPaneEventListener('click', this._onClickBound, false);
     super.detach();
-
-    this._glassPane.dispose();
-    delete this._glassPane;
+    this._overlay.hide();
 
     this._restoreTabIndexOnElements();
 
     delete UI.Dialog._instance;
   }
 
   addCloseButton() {
     var closeButton = this.contentElement.createChild('div', 'dialog-close-button', 'dt-close-button');
     closeButton.gray = true;
     closeButton.addEventListener('click', () => this.detach(), false);
   }
 
   /**
-   * @param {number=} positionX
-   * @param {number=} positionY
+   * @param {?number} positionX
+   * @param {?number} positionY
    */
   setPosition(positionX, positionY) {
-    this._defaultPositionX = positionX;
-    this._defaultPositionY = positionY;
+    this._overlay.setPosition(positionX, positionY);
+    if (this._overlay.visible())

[caseq, 2017/01/31 21:27:20]

remove?

[dgozman, 2017/01/31 23:39:49]

Done.

+      this._overlay.position();
   }
 
   /**
    * @param {!UI.Size} size
    */
   setMaxSize(size) {
     this._maxSize = size;
+    this._overlay.setMaxSize(this._effectiveMaxSize());
+    if (this._overlay.visible())

[caseq, 2017/01/31 21:27:20]

ditto

+      this._overlay.position();
+  }
+
+  /**
+   * @return {?UI.Size}
+   */
+  _effectiveMaxSize() {
+    if (!this._wrapsContent)
+      return this._maxSize;
+
+    var size = new UI.Size(this.contentElement.offsetWidth, this.contentElement.offsetHeight);
+    size.sizeToMin(this._maxSize);
+    return size;
   }
 
   /**
    * @param {boolean} wraps
    */
   setWrapsContent(wraps) {
+    this._wrapsContent = wraps;
     this.element.classList.toggle('wraps-content', wraps);
-    this._wrapsContent = wraps;
+    this._overlay.setMaxSize(this._effectiveMaxSize());
+    if (this._overlay.visible())

[caseq, 2017/01/31 21:27:19]

ditto.

+      this._overlay.position();
   }
 
   /**
    * @param {boolean} dimmed
    */
   setDimmed(dimmed) {
-    this._dimmed = dimmed;
+    this._overlay.setDimmed(dimmed);
   }
 
   contentResized() {
-    if (this._wrapsContent)
-      this._position();
+    if (!this._wrapsContent)
+      return;
+    this._overlay.setMaxSize(this._effectiveMaxSize());
+    if (this._overlay.visible())

[caseq, 2017/01/31 21:27:19]

ditto.

+      this._overlay.position();
   }
 
   /**
    * @param {!Document} document
    */
   _disableTabIndexOnElements(document) {
     this._tabIndexMap.clear();
     for (var node = document; node; node = node.traverseNextNode(document)) {
       if (node instanceof HTMLElement) {
         var element = /** @type {!HTMLElement} */ (node);
@@ skipping 20 matching lines @@
   }
 
   /**
    * @param {!Event} event
    */
   _onGlassPaneClick(event) {
     if (!this.element.isSelfOrAncestor(/** @type {?Node} */ (event.target)))
       this.detach();
   }
 
-  _position() {
-    var container = UI.Dialog._modalHostView.element;
-
-    var width = container.offsetWidth - 10;
-    var height = container.offsetHeight - 10;
-
-    if (this._wrapsContent) {
-      width = Math.min(width, this.contentElement.offsetWidth);
-      height = Math.min(height, this.contentElement.offsetHeight);
-    }
-
-    if (this._maxSize) {
-      width = Math.min(width, this._maxSize.width);
-      height = Math.min(height, this._maxSize.height);
-    }
-
-    var positionX;
-    if (typeof this._defaultPositionX === 'number') {
-      positionX = this._defaultPositionX;
-    } else {
-      positionX = (container.offsetWidth - width) / 2;
-      positionX = Number.constrain(positionX, 0, container.offsetWidth - width);
-    }
-
-    var positionY;
-    if (typeof this._defaultPositionY === 'number') {
-      positionY = this._defaultPositionY;
-    } else {
-      positionY = (container.offsetHeight - height) / 2;
-      positionY = Number.constrain(positionY, 0, container.offsetHeight - height);
-    }
-
-    this.element.style.width = width + 'px';
-    this.element.style.height = height + 'px';
-    this.element.positionAt(positionX, positionY, container);
-  }
-
   /**
    * @param {!Event} event
    */
   _onKeyDown(event) {
     if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code) {
       event.consume(true);
       this.detach();
     }
   }
 };
-
-
-/** @type {?Element} */
-UI.Dialog._previousFocusedElement = null;
-
-/** @type {?UI.Widget} */
-UI.Dialog._modalHostView = null;