Reland of [DevTools] Migrate SoftContextMenu to use GlassPane

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

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 UI.GlassPane = class {
   constructor() {
     this._widget = new UI.Widget(true);
     this._widget.markAsRoot();
     this.element = this._widget.element;
     this.contentElement = this._widget.contentElement;
     this._arrowElement = UI.Icon.create('', 'arrow hidden');
     this.element.shadowRoot.appendChild(this._arrowElement);
 
     this.registerRequiredCSS('ui/glassPane.css');
     this.element.classList.add('no-pointer-events');
     this._onMouseDownBound = this._onMouseDown.bind(this);
     /** @type {?function(!Event)} */
     this._onClickOutsideCallback = null;
     /** @type {?UI.Size} */
     this._maxSize = null;
     /** @type {?number} */
     this._positionX = null;
     /** @type {?number} */
     this._positionY = null;
     /** @type {?AnchorBox} */
     this._anchorBox = null;
     this._anchorBehavior = UI.GlassPane.AnchorBehavior.PreferTop;
     this._sizeBehavior = UI.GlassPane.SizeBehavior.SetExactSize;
-    this._showArrow = false;
+    this._marginBehavior = UI.GlassPane.MarginBehavior.DefaultMargin;
   }
 
   /**
    * @return {boolean}
    */
   isShowing() {
     return this._widget.isShowing();
   }
 
   /**
@@ skipping 61 matching lines @@
   }
 
   /**
    * @param {!UI.GlassPane.AnchorBehavior} behavior
    */
   setAnchorBehavior(behavior) {
     this._anchorBehavior = behavior;
   }
 
   /**
-   * @param {boolean} showArrow
+   * @param {boolean} behavior
    */
-  setShowArrow(showArrow) {
-    this._showArrow = showArrow;
-    this._arrowElement.classList.toggle('hidden', !showArrow);
+  setMarginBehavior(behavior) {
+    this._marginBehavior = behavior;
+    this._arrowElement.classList.toggle('hidden', behavior !== UI.GlassPane.MarginBehavior.Arrow);
   }
 
   /**
    * @param {!Document} document
    */
   show(document) {
     if (this.isShowing())
       return;
     // Deliberately starts with 3000 to hide other z-indexed elements below.
     this.element.style.zIndex = 3000 + 1000 * UI.GlassPane._panes.size;
-    document.body.addEventListener('mousedown', this._onMouseDownBound, true);
+    document.body.addEventListener('click', this._onMouseDownBound, true);
     this._widget.show(document.body);
     UI.GlassPane._panes.add(this);
     this._positionContent();
   }
 
   hide() {
     if (!this.isShowing())
       return;
     UI.GlassPane._panes.delete(this);
-    this.element.ownerDocument.body.removeEventListener('mousedown', this._onMouseDownBound, true);
+    this.element.ownerDocument.body.removeEventListener('click', this._onMouseDownBound, true);
     this._widget.detach();
   }
 
   /**
    * @param {!Event} event
    */
   _onMouseDown(event) {
     if (!this._onClickOutsideCallback)
       return;
     if (this.contentElement.isSelfOrAncestor(/** @type {?Node} */ (event.deepElementFromPoint())))
       return;
     this._onClickOutsideCallback.call(null, event);
   }
 
   _positionContent() {
     if (!this.isShowing())
       return;
 
-    var gutterSize = this._showArrow ? 8 : 3;
+    var showArrow = this._marginBehavior === UI.GlassPane.MarginBehavior.Arrow;
+    var gutterSize = showArrow ? 8 : (this._marginBehavior === UI.GlassPane.MarginBehavior.NoMargin ? 0 : 3);
     var scrollbarSize = 14;
     var arrowSize = 10;
 
     var container = UI.GlassPane._containers.get(/** @type {!Document} */ (this.element.ownerDocument));
     if (this._sizeBehavior === UI.GlassPane.SizeBehavior.MeasureContent) {
       this.contentElement.positionAt(0, 0);
       this.contentElement.style.width = '';
       this.contentElement.style.maxWidth = '';
       this.contentElement.style.height = '';
       this.contentElement.style.maxHeight = '';
@@ skipping 67 matching lines @@
             height = Math.min(height, spaceBottom);
           }
           this._arrowElement.setIconType('mediumicon-arrow-top');
           this._arrowElement.classList.add('arrow-top');
           arrowY = anchorBox.y + anchorBox.height + gutterSize;
         }
 
         positionX = Math.max(gutterSize, Math.min(anchorBox.x, containerWidth - width - gutterSize));
         if (!enoughHeight)
           positionX += arrowSize;
-        else if (this._showArrow && positionX - arrowSize >= gutterSize)
+        else if (showArrow && positionX - arrowSize >= gutterSize)
           positionX -= arrowSize;
         width = Math.min(width, containerWidth - positionX - gutterSize);
         if (2 * arrowSize >= width) {
           this._arrowElement.classList.add('arrow-none');
         } else {
           var arrowX = anchorBox.x + Math.min(50, Math.floor(anchorBox.width / 2));
           arrowX = Number.constrain(arrowX, positionX + arrowSize, positionX + width - arrowSize);
           this._arrowElement.positionAt(arrowX, arrowY, container);
         }
       } else {
@@ skipping 37 matching lines @@
             width = Math.min(width, spaceRight);
           }
           this._arrowElement.setIconType('mediumicon-arrow-left');
           this._arrowElement.classList.add('arrow-left');
           arrowX = anchorBox.x + anchorBox.width + gutterSize;
         }
 
         positionY = Math.max(gutterSize, Math.min(anchorBox.y, containerHeight - height - gutterSize));
         if (!enoughWidth)
           positionY += arrowSize;
-        else if (this._showArrow && positionY - arrowSize >= gutterSize)
+        else if (showArrow && positionY - arrowSize >= gutterSize)
           positionY -= arrowSize;
         height = Math.min(height, containerHeight - positionY - gutterSize);
         if (2 * arrowSize >= height) {
           this._arrowElement.classList.add('arrow-none');
         } else {
           var arrowY = anchorBox.y + Math.min(50, Math.floor(anchorBox.height / 2));
           arrowY = Number.constrain(arrowY, positionY + arrowSize, positionY + height - arrowSize);
           this._arrowElement.positionAt(arrowX, arrowY, container);
         }
       }
@@ skipping 62 matching lines @@
 
 /**
  * @enum {symbol}
  */
 UI.GlassPane.SizeBehavior = {
   SetExactSize: Symbol('SetExactSize'),
   SetExactWidthMaxHeight: Symbol('SetExactWidthMaxHeight'),
   MeasureContent: Symbol('MeasureContent')
 };
 
+/**
+ * @enum {symbol}
+ */
+UI.GlassPane.MarginBehavior = {
+  Arrow: Symbol('Arrow'),
+  DefaultMargin: Symbol('DefaultMargin'),
+  NoMargin: Symbol('NoMargin')
+};
+
 /** @type {!Map<!Document, !Element>} */
 UI.GlassPane._containers = new Map();
 /** @type {!Set<!UI.GlassPane>} */
 UI.GlassPane._panes = new Set();