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

third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.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 35 matching lines @@
 };
 
 /**
  * @implements {UI.ListDelegate}
  */
 UI.SuggestBox = class {
   /**
    * @param {!UI.SuggestBoxDelegate} suggestBoxDelegate
    * @param {number=} maxItemsHeight
    * @param {boolean=} captureEnter
+   * @suppressGlobalPropertiesCheck
    */
   constructor(suggestBoxDelegate, maxItemsHeight, captureEnter) {
     this._suggestBoxDelegate = suggestBoxDelegate;
     this._maxItemsHeight = maxItemsHeight;
+    this._captureEnter = captureEnter;
     this._maybeHideBound = this._maybeHide.bind(this);
     this._hideBound = this.hide.bind(this);
-    this._container = createElementWithClass('div', 'suggest-box-container');
     this._rowHeight = 17;
+    this._userInteracted = false;
+    this._userEnteredText = '';
+    this._hideTimeoutId = 0;
+    /** @type {?string} */
+    this._onlyCompletion = null;
+
+    var container = createElement('div');
+    var shadowRoot = UI.createShadowRootWithCoreStyles(container, 'ui/suggestBox.css');
+
     /** @type {!UI.ListControl<!UI.SuggestBox.Suggestion>} */
     this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems);
     this._element = this._list.element;
     this._element.classList.add('suggest-box');
-    this._container.appendChild(this._element);
+    shadowRoot.appendChild(this._element);
     this._element.addEventListener('mousedown', this._onBoxMouseDown.bind(this), true);
-    this._userInteracted = false;
-    this._captureEnter = captureEnter;
-    this._hasVerticalScroll = false;
-    this._userEnteredText = '';
 
-    /** @type {?UI.SuggestBox.Overlay} */
-    this._overlay = null;
-    /** @type {?AnchorBox} */
-    this._lastAnchorBox = null;
-    this._lastItemCount = 0;
-    this._hideTimeoutId = 0;
-    /** @type {?Element} */
-    this._bodyElement = null;
-    /** @type {?string} */
-    this._onlyCompletion = null;
+    // TODO(dgozman): take document in constructor.
+    this._glassPane = new UI.GlassPane(document, false /* dimmed */, false /* blockPointerEvents */);
+    this._glassPane.setAnchorBehavior(UI.GlassPane.AnchorBehavior.PreferTop);

[pfeldman, 2017/02/01 00:07:19]

PreferBottom

[dgozman, 2017/02/01 16:19:44]

Done.

+    this._glassPane.setContentElement(container);
   }
 
   /**
    * @return {boolean}
    */
   visible() {
-    return !!this._container.parentElement;
+    return this._glassPane.visible();
   }
 
   /**
    * @param {!AnchorBox} anchorBox
    */
   setPosition(anchorBox) {
-    this._updateBoxPosition(anchorBox, this._list.length());
-  }
-
-  /**
-   * @param {!AnchorBox} anchorBox
-   * @param {number} length
-   */
-  _updateBoxPosition(anchorBox, length) {
-    console.assert(this._overlay);
-    if (this._lastAnchorBox && this._lastAnchorBox.equals(anchorBox) && this._lastItemCount === length)
-      return;
-    this._lastItemCount = length;
-    this._lastAnchorBox = anchorBox;
-
-    // Position relative to main DevTools element.
-    var container = UI.Dialog.modalHostView().element;
-    anchorBox = anchorBox.relativeToElement(container);
-    var totalHeight = container.offsetHeight;
-    var aboveHeight = anchorBox.y;
-    var underHeight = totalHeight - anchorBox.y - anchorBox.height;
-
-    this._overlay.setLeftOffset(anchorBox.x);
-
-    var under = underHeight >= aboveHeight;
-    if (under)
-      this._overlay.setVerticalOffset(anchorBox.y + anchorBox.height, true);
-    else
-      this._overlay.setVerticalOffset(totalHeight - anchorBox.y, false);
-
-    var spacer = 6;
-    var maxHeight = Math.min(
-        Math.max(underHeight, aboveHeight) - spacer,
-        this._maxItemsHeight ? this._maxItemsHeight * this._rowHeight : Infinity);
-    var height = this._rowHeight * length;
-    this._hasVerticalScroll = height > maxHeight;
-    this._element.style.height = Math.min(maxHeight, height) + 'px';
+    this._glassPane.setAnchorBox(anchorBox);
+    this._glassPane.positionContent();
   }
 
   /**
    * @param {!UI.SuggestBox.Suggestions} items
    */
-  _updateWidth(items) {
-    if (this._hasVerticalScroll) {
-      this._element.style.width = '100vw';
-      return;
-    }
+  _updateMaxSize(items) {
+    var maxWidth = this._maxWidth(items);
+    var length = this._maxItemsHeight ? Math.min(this._maxItemsHeight, items.length) : items.length;
+    var maxHeight = length * this._rowHeight;
+    this._glassPane.setMaxContentSize(new UI.Size(maxWidth, maxHeight));
+  }
+
+  /**
+   * @param {!UI.SuggestBox.Suggestions} items
+   * @return {number}
+   */
+  _maxWidth(items) {
+    var kMaxWidth = 300;
     if (!items.length)
-      return;
-    // If there are no scrollbars, set the width to the width of the largest row.
+      return kMaxWidth;
     var maxItem;
     var maxLength = -Infinity;
     for (var i = 0; i < items.length; i++) {
       var length = items[i].title.length + (items[i].subtitle || '').length;
       if (length > maxLength) {
         maxLength = length;
         maxItem = items[i];
       }
     }
-    this._element.style.width =
-        UI.measurePreferredSize(
-              this.createElementForItem(/** @type {!UI.SuggestBox.Suggestion} */ (maxItem)), this._element)
-            .width +
-        'px';
+    var element = this.createElementForItem(/** @type {!UI.SuggestBox.Suggestion} */ (maxItem));
+    return Math.min(kMaxWidth, UI.measurePreferredSize(element, this._element).width);
   }
 
   /**
    * @param {!Event} event
    */
   _onBoxMouseDown(event) {
     if (this._hideTimeoutId) {
       window.clearTimeout(this._hideTimeoutId);
       this._hideTimeoutId = 0;
     }
     event.preventDefault();
   }
 
   _maybeHide() {
     if (!this._hideTimeoutId)
       this._hideTimeoutId = window.setTimeout(this._hideBound, 0);
   }
 
-  /**
-   * // FIXME: make SuggestBox work for multiple documents.
-   * @suppressGlobalPropertiesCheck
-   */
   _show() {
     if (this.visible())
       return;
-    this._bodyElement = document.body;
-    this._bodyElement.addEventListener('mousedown', this._maybeHideBound, true);
-    this._element.ownerDocument.defaultView.addEventListener('resize', this._hideBound, false);
-    this._overlay = new UI.SuggestBox.Overlay();
-    this._overlay.setContentElement(this._container);
+    this._glassPane.show();
+    this._glassPane.element.ownerDocument.body.addEventListener('mousedown', this._maybeHideBound, true);

[pfeldman, 2017/02/01 00:07:18]

You don't need it anymore.

[dgozman, 2017/02/01 16:19:44]

Done.

+    this._glassPane.element.window().addEventListener('resize', this._hideBound, false);

[pfeldman, 2017/02/01 00:07:19]

You don't need it anymore

[dgozman, 2017/02/01 16:19:44]

Done.

     this._rowHeight =
         UI.measurePreferredSize(this.createElementForItem({title: '1', subtitle: '12'}), this._element).height;
   }
 
   hide() {
     if (!this.visible())
       return;
-
     this._userInteracted = false;
-    this._bodyElement.removeEventListener('mousedown', this._maybeHideBound, true);
-    this._element.ownerDocument.defaultView.removeEventListener('resize', this._hideBound, false);
-    this._bodyElement = null;
-    this._container.remove();
-    this._overlay.dispose();
-    this._overlay = null;
-    this._lastAnchorBox = null;
+    this._glassPane.element.ownerDocument.body.removeEventListener('mousedown', this._maybeHideBound, true);

[pfeldman, 2017/02/01 00:07:18]

You should not need it anymore.

[dgozman, 2017/02/01 16:19:44]

Done.

+    this._glassPane.element.window().removeEventListener('resize', this._hideBound, false);
+    this._glassPane.hide();
   }
 
   /**
    * @param {boolean=} isIntermediateSuggestion
    * @return {boolean}
    */
   _applySuggestion(isIntermediateSuggestion) {
     if (this._onlyCompletion) {
       this._suggestBoxDelegate.applySuggestion(this._onlyCompletion, isIntermediateSuggestion);
       return true;
@@ skipping 125 matching lines @@
    * @param {boolean} selectHighestPriority
    * @param {boolean} canShowForSingleItem
    * @param {string} userEnteredText
    */
   updateSuggestions(anchorBox, completions, selectHighestPriority, canShowForSingleItem, userEnteredText) {
     this._onlyCompletion = null;
     if (this._canShowBox(completions, canShowForSingleItem, userEnteredText)) {
       this._userEnteredText = userEnteredText;
 
       this._show();
-      this._updateBoxPosition(anchorBox, completions.length);
-      this._updateWidth(completions);
+      this._updateMaxSize(completions);
+      this._glassPane.setAnchorBox(anchorBox);
+      this._glassPane.positionContent();
       this._list.invalidateItemHeight();
       this._list.replaceAllItems(completions);
 
       if (selectHighestPriority) {
         var highestPriorityItem = completions[0];
         var highestPriority = completions[0].priority || 0;
         for (var i = 0; i < completions.length; i++) {
           var priority = completions[i].priority || 0;
           if (highestPriority < priority) {
             highestPriority = priority;
@@ skipping 60 matching lines @@
 
 /**
  * @typedef {!{title: string, subtitle: (string|undefined), iconType: (string|undefined), priority: (number|undefined), isSecondary: (boolean|undefined)}}
  */
 UI.SuggestBox.Suggestion;
 
 /**
  * @typedef {!Array<!UI.SuggestBox.Suggestion>}
  */
 UI.SuggestBox.Suggestions;
-
-UI.SuggestBox.Overlay = class {
-  /**
-   * // FIXME: make SuggestBox work for multiple documents.
-   * @suppressGlobalPropertiesCheck
-   */
-  constructor() {
-    this.element = createElementWithClass('div', 'suggest-box-overlay');
-    var root = UI.createShadowRootWithCoreStyles(this.element, 'ui/suggestBox.css');
-    this._leftSpacerElement = root.createChild('div', 'suggest-box-left-spacer');
-    this._horizontalElement = root.createChild('div', 'suggest-box-horizontal');
-    this._topSpacerElement = this._horizontalElement.createChild('div', 'suggest-box-top-spacer');
-    this._bottomSpacerElement = this._horizontalElement.createChild('div', 'suggest-box-bottom-spacer');
-    this._resize();
-    document.body.appendChild(this.element);
-  }
-
-  /**
-   * @param {number} offset
-   */
-  setLeftOffset(offset) {
-    this._leftSpacerElement.style.flexBasis = offset + 'px';
-  }
-
-  /**
-   * @param {number} offset
-   * @param {boolean} isTopOffset
-   */
-  setVerticalOffset(offset, isTopOffset) {
-    this.element.classList.toggle('under-anchor', isTopOffset);
-
-    if (isTopOffset) {
-      this._bottomSpacerElement.style.flexBasis = 'auto';
-      this._topSpacerElement.style.flexBasis = offset + 'px';
-    } else {
-      this._bottomSpacerElement.style.flexBasis = offset + 'px';
-      this._topSpacerElement.style.flexBasis = 'auto';
-    }
-  }
-
-  /**
-   * @param {!Element} element
-   */
-  setContentElement(element) {
-    this._horizontalElement.insertBefore(element, this._bottomSpacerElement);
-  }
-
-  _resize() {
-    var container = UI.Dialog.modalHostView().element;
-    var containerBox = container.boxInWindow(container.ownerDocument.defaultView);
-
-    this.element.style.left = containerBox.x + 'px';
-    this.element.style.top = containerBox.y + 'px';
-    this.element.style.height = containerBox.height + 'px';
-    this.element.style.width = containerBox.width + 'px';
-  }
-
-  dispose() {
-    this.element.remove();
-  }
-};