Revert 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 {!AnchorBox} anchorBox
+   * @param {number} x
+   * @param {number} y
    */
-  show(document, anchorBox) {
+  show(document, x, y) {
     if (!this._items.length)
       return;
 
     this._document = document;
+    this._x = x;
+    this._y = y;
+    this._time = new Date().getTime();
 
-    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);
+    // 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._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]));
 
-    this._glassPane.show(document);
+    // 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._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 anchorBox = menuItemElement.boxInWindow();
-    // Adjust for padding.
-    anchorBox.y -= 5;
-    anchorBox.x += 3;
-    anchorBox.width -= 6;
-    anchorBox.height += 10;
-    this._subMenu.show(this._document, anchorBox);
+    var topPadding = 4;
+    this._subMenu.show(
+        this._document, menuItemElement.totalOffsetLeft() + menuItemElement.offsetWidth,
+        menuItemElement.totalOffsetTop() - 1 - topPadding);
   }
 
   _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 === this._contextMenuElement)
+    if (relatedTarget.classList.contains('soft-context-menu-glass-pane'))
       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();
+      }
 
-    this._discardSubMenus();
-
-    if (this._parentMenu) {
+      if (event)
+        event.consume(true);
+    } else if (this._parentMenu && this._contextMenuElement.parentElementOrShadowHost()) {
+      this._discardSubMenus();
       if (closeParentMenus)
         this._parentMenu._discardMenu(closeParentMenus, event);
       else
         this._parentMenu._focus();
+      if (event)
+        event.consume(true);
     }
-
-    if (event)
-      event.consume(true);
+    if (this._discardMenuOnResizeListener) {
+      this._document.defaultView.removeEventListener('resize', this._discardMenuOnResizeListener, false);
+      delete this._discardMenuOnResizeListener;
+    }
   }
 
   _discardSubMenus() {
     if (this._subMenu)
       this._subMenu._discardSubMenus();
-    if (this._glassPane) {
-      this._glassPane.hide();
-      delete this._glassPane;
-    }
+    if (this.element)
+      this.element.remove();
     if (this._parentMenu)
       delete this._parentMenu._subMenu;
   }
 };