Reland of [DevTools] Migrate SoftContextMenu to use GlassPane

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

 /*
  * Copyright (C) 2011 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:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 22 matching lines @@
    * @param {!UI.SoftContextMenu=} parentMenu
    */
   constructor(items, itemSelectedCallback, parentMenu) {
     this._items = items;
     this._itemSelectedCallback = itemSelectedCallback;
     this._parentMenu = parentMenu;
   }
 
   /**
    * @param {!Document} document
-   * @param {number} x
-   * @param {number} y
+   * @param {!AnchorBox} anchorBox
    */
-  show(document, x, y) {
+  show(document, anchorBox) {
     if (!this._items.length)
       return;
 
     this._document = document;
-    this._x = x;
-    this._y = y;
-    this._time = new Date().getTime();
 
-    // Create context menu.
-    this.element = createElementWithClass('div', 'soft-context-menu');
-    var root = UI.createShadowRootWithCoreStyles(this.element, 'ui/softContextMenu.css');
-    this._contextMenuElement = root.createChild('div');
-    this.element.style.top = y + 'px';
-    var subMenuOverlap = 3;
-    this.element.style.left = (this._parentMenu ? x - subMenuOverlap : x) + 'px';
+    this._glassPane = new UI.GlassPane();
+    this._glassPane.setBlockPointerEvents(!this._parentMenu);
+    this._glassPane.setSetOutsideClickCallback(event => {
+      this._discardMenu(true, event);
+      event.consume();
+    });
+    this._glassPane.registerRequiredCSS('ui/softContextMenu.css');
+    this._glassPane.setContentAnchorBox(anchorBox);
+    this._glassPane.setSizeBehavior(UI.GlassPane.SizeBehavior.MeasureContent);
+    this._glassPane.setMarginBehavior(UI.GlassPane.MarginBehavior.NoMargin);
+    this._glassPane.setAnchorBehavior(
+        this._parentMenu ? UI.GlassPane.AnchorBehavior.PreferRight : UI.GlassPane.AnchorBehavior.PreferBottom);
 
+    this._contextMenuElement = this._glassPane.contentElement.createChild('div', 'soft-context-menu');
     this._contextMenuElement.tabIndex = 0;
     this._contextMenuElement.addEventListener('mouseup', e => e.consume(), false);
     this._contextMenuElement.addEventListener('keydown', this._menuKeyDown.bind(this), false);
 
     for (var i = 0; i < this._items.length; ++i)
       this._contextMenuElement.appendChild(this._createMenuItem(this._items[i]));
 
-    // Install glass pane capturing events.
-    if (!this._parentMenu) {
-      this._glassPaneElement = createElementWithClass('div', 'soft-context-menu-glass-pane fill');
-      this._glassPaneElement.tabIndex = 0;
-      this._glassPaneElement.style.zIndex = '20000';
-      this._glassPaneElement.addEventListener('mouseup', this._glassPaneMouseUp.bind(this), false);
-      this._glassPaneElement.appendChild(this.element);
-      document.body.appendChild(this._glassPaneElement);
-      this._discardMenuOnResizeListener = this._discardMenu.bind(this, true);
-      document.defaultView.addEventListener('resize', this._discardMenuOnResizeListener, false);
-    } else {
-      this._parentMenu._parentGlassPaneElement().appendChild(this.element);
-    }
-
-    // Re-position menu in case it does not fit.
-    var containerElement = UI.GlassPane.container(document);
-    var hostLeft = containerElement.totalOffsetLeft();
-    var hostRight = hostLeft + containerElement.offsetWidth;
-    if (hostRight < this.element.offsetLeft + this.element.offsetWidth) {
-      var left = this._parentMenu ? this._parentMenu.element.offsetLeft - this.element.offsetWidth + subMenuOverlap :
-                                    hostRight - this.element.offsetWidth;
-      this.element.style.left = Math.max(hostLeft, left) + 'px';
-    }
-
-    // Move submenus upwards if it does not fit.
-    if (this._parentMenu && document.body.offsetHeight < this.element.offsetTop + this.element.offsetHeight) {
-      y = Math.max(containerElement.totalOffsetTop(), document.body.offsetHeight - this.element.offsetHeight);
-      this.element.style.top = y + 'px';
-    }
-
-    var maxHeight = containerElement.offsetHeight;
-    maxHeight -= y - containerElement.totalOffsetTop();
-    this.element.style.maxHeight = maxHeight + 'px';
-
+    this._glassPane.show(document);
     this._focus();
   }
 
   discard() {
     this._discardMenu(true);
   }
 
-  _parentGlassPaneElement() {
-    if (this._glassPaneElement)
-      return this._glassPaneElement;
-    if (this._parentMenu)
-      return this._parentMenu._parentGlassPaneElement();
-    return null;
-  }
-
   _createMenuItem(item) {
     if (item.type === 'separator')
       return this._createSeparator();
 
     if (item.type === 'subMenu')
       return this._createSubMenu(item);
 
     var menuItemElement = createElementWithClass('div', 'soft-context-menu-item');
     var checkMarkElement = UI.Icon.create('smallicon-checkmark', 'checkmark');
     menuItemElement.appendChild(checkMarkElement);
@@ skipping 85 matching lines @@
 
   _showSubMenu(menuItemElement) {
     if (menuItemElement._subMenuTimer) {
       clearTimeout(menuItemElement._subMenuTimer);
       delete menuItemElement._subMenuTimer;
     }
     if (this._subMenu)
       return;
 
     this._subMenu = new UI.SoftContextMenu(menuItemElement._subItems, this._itemSelectedCallback, this);
-    var topPadding = 4;
-    this._subMenu.show(
-        this._document, menuItemElement.totalOffsetLeft() + menuItemElement.offsetWidth,
-        menuItemElement.totalOffsetTop() - 1 - topPadding);
+    var anchorBox = menuItemElement.boxInWindow();
+    // Adjust for padding.
+    anchorBox.y -= 5;
+    anchorBox.x += 3;
+    anchorBox.width -= 6;
+    anchorBox.height += 10;
+    this._subMenu.show(this._document, anchorBox);
   }
 
   _hideSubMenu() {
     if (!this._subMenu)
       return;
     this._subMenu._discardSubMenus();
     this._focus();
   }
 
   _menuItemMouseOver(event) {
     this._highlightMenuItem(event.target, true);
   }
 
   _menuItemMouseLeave(event) {
     if (!this._subMenu || !event.relatedTarget) {
       this._highlightMenuItem(null, true);
       return;
     }
 
     var relatedTarget = event.relatedTarget;
-    if (relatedTarget.classList.contains('soft-context-menu-glass-pane'))
+    if (relatedTarget === this._contextMenuElement)
       this._highlightMenuItem(null, true);
   }
 
   /**
    * @param {?Element} menuItemElement
    * @param {boolean} scheduleSubMenu
    */
   _highlightMenuItem(menuItemElement, scheduleSubMenu) {
     if (this._highlightedMenuItemElement === menuItemElement)
       return;
@@ skipping 73 matching lines @@
           this._triggerAction(this._highlightedMenuItemElement, event);
         if (this._highlightedMenuItemElement._subItems) {
           this._subMenu._focus();
           this._subMenu._highlightNext();
         }
         break;
     }
     event.consume(true);
   }
 
-  _glassPaneMouseUp(event) {
-    // Return if this is simple 'click', since dispatched on glass pane, can't use 'click' event.
-    if (new Date().getTime() - this._time < 300)
-      return;
-    if (event.target === this.element)
-      return;
-    this._discardMenu(true, event);
-    event.consume();
-  }
-
   /**
    * @param {boolean} closeParentMenus
    * @param {!Event=} event
    */
   _discardMenu(closeParentMenus, event) {
     if (this._subMenu && !closeParentMenus)
       return;
-    if (this._glassPaneElement) {
-      var glassPane = this._glassPaneElement;
-      delete this._glassPaneElement;
-      // This can re-enter discardMenu due to blur.
-      this._document.body.removeChild(glassPane);
-      if (this._parentMenu) {
-        delete this._parentMenu._subMenu;
-        if (closeParentMenus)
-          this._parentMenu._discardMenu(closeParentMenus, event);
-        else
-          this._parentMenu._focus();
-      }
 
-      if (event)
-        event.consume(true);
-    } else if (this._parentMenu && this._contextMenuElement.parentElementOrShadowHost()) {
-      this._discardSubMenus();
+    this._discardSubMenus();
+
+    if (this._parentMenu) {
       if (closeParentMenus)
         this._parentMenu._discardMenu(closeParentMenus, event);
       else
         this._parentMenu._focus();
-      if (event)
-        event.consume(true);
     }
-    if (this._discardMenuOnResizeListener) {
-      this._document.defaultView.removeEventListener('resize', this._discardMenuOnResizeListener, false);
-      delete this._discardMenuOnResizeListener;
-    }
+
+    if (event)
+      event.consume(true);
   }
 
   _discardSubMenus() {
     if (this._subMenu)
       this._subMenu._discardSubMenus();
-    if (this.element)
-      this.element.remove();
+    if (this._glassPane) {
+      this._glassPane.hide();
+      delete this._glassPane;
+    }
     if (this._parentMenu)
       delete this._parentMenu._subMenu;
   }
 };