/**
* @constructor
- * @param {!Array.<!WebInspector.ContextMenuItem>} items
+ * @param {!Array.<!InspectorFrontendHostAPI.ContextMenuDescriptor>} items
+ * @param {function(string)} itemSelectedCallback
* @param {!WebInspector.SoftContextMenu=} parentMenu
*/
-WebInspector.SoftContextMenu = function(items, parentMenu)
+WebInspector.SoftContextMenu = function(items, itemSelectedCallback, parentMenu)
{
this._items = items;
+ this._itemSelectedCallback = itemSelectedCallback;
this._parentMenu = parentMenu;
}
WebInspector.SoftContextMenu.prototype = {
/**
- * @param {!Event} event
+ * @param {number} x
+ * @param {number} y
*/
- show: function(event)
+ show: function(x, y)
{
- this._x = event.x;
- this._y = event.y;
+ this._x = x;
+ this._y = y;
this._time = new Date().getTime();
- // Absolutely position menu for iframes.
- var absoluteX = event.pageX;
- var absoluteY = event.pageY;
- var targetElement = event.target;
- while (targetElement && window !== targetElement.ownerDocument.defaultView) {
- var frameElement = targetElement.ownerDocument.defaultView.frameElement;
- absoluteY += frameElement.totalOffsetTop();
- absoluteX += frameElement.totalOffsetLeft();
- targetElement = frameElement;
- }
-
// Create context menu.
- var targetRect;
- this._contextMenuElement = document.createElement("div");
- this._contextMenuElement.className = "soft-context-menu";
+ this._contextMenuElement = document.createElementWithClass("div", "soft-context-menu");
this._contextMenuElement.tabIndex = 0;
- this._contextMenuElement.style.top = absoluteY + "px";
- this._contextMenuElement.style.left = absoluteX + "px";
+ this._contextMenuElement.style.top = y + "px";
+ this._contextMenuElement.style.left = x + "px";
this._contextMenuElement.addEventListener("mouseup", consumeEvent, false);
this._contextMenuElement.addEventListener("keydown", this._menuKeyDown.bind(this), false);
// Install glass pane capturing events.
if (!this._parentMenu) {
- this._glassPaneElement = document.createElement("div");
- this._glassPaneElement.className = "soft-context-menu-glass-pane";
+ this._glassPaneElement = document.createElementWithClass("div", "soft-context-menu-glass-pane");
this._glassPaneElement.tabIndex = 0;
this._glassPaneElement.addEventListener("mouseup", this._glassPaneMouseUp.bind(this), false);
this._glassPaneElement.appendChild(this._contextMenuElement);
document.body.appendChild(this._glassPaneElement);
this._focus();
- } else
+ } else {
this._parentMenu._parentGlassPaneElement().appendChild(this._contextMenuElement);
+ }
// Re-position menu in case it does not fit.
if (document.body.offsetWidth < this._contextMenuElement.offsetLeft + this._contextMenuElement.offsetWidth)
- this._contextMenuElement.style.left = (absoluteX - this._contextMenuElement.offsetWidth) + "px";
+ this._contextMenuElement.style.left = Math.max(0, x - this._contextMenuElement.offsetWidth) + "px";
if (document.body.offsetHeight < this._contextMenuElement.offsetTop + this._contextMenuElement.offsetHeight)
- this._contextMenuElement.style.top = (document.body.offsetHeight - this._contextMenuElement.offsetHeight) + "px";
-
- event.consume(true);
+ this._contextMenuElement.style.top = Math.max(0, document.body.offsetHeight - this._contextMenuElement.offsetHeight) + "px";
},
_parentGlassPaneElement: function()
if (item.type === "subMenu")
return this._createSubMenu(item);
- var menuItemElement = document.createElement("div");
- menuItemElement.className = "soft-context-menu-item";
-
- var checkMarkElement = document.createElement("span");
+ var menuItemElement = document.createElementWithClass("div", "soft-context-menu-item");
+ var checkMarkElement = menuItemElement.createChild("span", "soft-context-menu-item-checkmark");
checkMarkElement.textContent = "\u2713 "; // Checkmark Unicode symbol
- checkMarkElement.className = "soft-context-menu-item-checkmark";
if (!item.checked)
checkMarkElement.style.opacity = "0";
- menuItemElement.appendChild(checkMarkElement);
- menuItemElement.appendChild(document.createTextNode(item.label));
+ menuItemElement.createTextChild(item.label);
menuItemElement.addEventListener("mousedown", this._menuItemMouseDown.bind(this), false);
menuItemElement.addEventListener("mouseup", this._menuItemMouseUp.bind(this), false);
_createSubMenu: function(item)
{
- var menuItemElement = document.createElement("div");
- menuItemElement.className = "soft-context-menu-item";
+ var menuItemElement = document.createElementWithClass("div", "soft-context-menu-item");
menuItemElement._subItems = item.subItems;
// Occupy the same space on the left in all items.
- var checkMarkElement = document.createElement("span");
+ var checkMarkElement = menuItemElement.createChild("span", "soft-context-menu-item-checkmark");
checkMarkElement.textContent = "\u2713 "; // Checkmark Unicode symbol
- checkMarkElement.className = "soft-context-menu-item-checkmark";
checkMarkElement.style.opacity = "0";
- menuItemElement.appendChild(checkMarkElement);
- var subMenuArrowElement = document.createElement("span");
- subMenuArrowElement.textContent = "\u25B6"; // BLACK RIGHT-POINTING TRIANGLE
- subMenuArrowElement.className = "soft-context-menu-item-submenu-arrow";
+ menuItemElement.createTextChild(item.label);
- menuItemElement.appendChild(document.createTextNode(item.label));
- menuItemElement.appendChild(subMenuArrowElement);
+ var subMenuArrowElement = menuItemElement.createChild("span", "soft-context-menu-item-submenu-arrow");
+ subMenuArrowElement.textContent = "\u25B6"; // BLACK RIGHT-POINTING TRIANGLE
menuItemElement.addEventListener("mousedown", this._menuItemMouseDown.bind(this), false);
menuItemElement.addEventListener("mouseup", this._menuItemMouseUp.bind(this), false);
_createSeparator: function()
{
- var separatorElement = document.createElement("div");
- separatorElement.className = "soft-context-menu-separator";
+ var separatorElement = document.createElementWithClass("div", "soft-context-menu-separator");
separatorElement._isSeparator = true;
separatorElement.addEventListener("mouseover", this._hideSubMenu.bind(this), false);
separatorElement.createChild("div", "separator-line");
if (!menuItemElement._subItems) {
this._discardMenu(true, event);
if (typeof menuItemElement._actionId !== "undefined") {
- WebInspector.contextMenuItemSelected(menuItemElement._actionId);
+ this._itemSelectedCallback(menuItemElement._actionId);
delete menuItemElement._actionId;
}
return;
}
- this._showSubMenu(menuItemElement, event);
+ this._showSubMenu(menuItemElement);
event.consume();
},
- _showSubMenu: function(menuItemElement, event)
+ _showSubMenu: function(menuItemElement)
{
if (menuItemElement._subMenuTimer) {
clearTimeout(menuItemElement._subMenuTimer);
if (this._subMenu)
return;
- this._subMenu = new WebInspector.SoftContextMenu(menuItemElement._subItems, this);
- this._subMenu.show(this._buildMouseEventForSubMenu(menuItemElement));
- },
-
- _buildMouseEventForSubMenu: function(subMenuItemElement)
- {
- var subMenuOffset = { x: subMenuItemElement.offsetWidth - 3, y: subMenuItemElement.offsetTop - 1 };
- var targetX = this._x + subMenuOffset.x;
- var targetY = this._y + subMenuOffset.y;
- var targetPageX = parseInt(this._contextMenuElement.style.left, 10) + subMenuOffset.x;
- var targetPageY = parseInt(this._contextMenuElement.style.top, 10) + subMenuOffset.y;
- return { x: targetX, y: targetY, pageX: targetPageX, pageY: targetPageY, consume: function() {} };
+ this._subMenu = new WebInspector.SoftContextMenu(menuItemElement._subItems, this._itemSelectedCallback, this);
+ this._subMenu.show(this._x + menuItemElement.offsetWidth - 3, this._y + menuItemElement.offsetTop - 1);
},
_hideSubMenu: function()
this._highlightedMenuItemElement.classList.add("soft-context-menu-item-mouse-over");
this._contextMenuElement.focus();
if (this._highlightedMenuItemElement._subItems && !this._highlightedMenuItemElement._subMenuTimer)
- this._highlightedMenuItemElement._subMenuTimer = setTimeout(this._showSubMenu.bind(this, this._highlightedMenuItemElement, this._buildMouseEventForSubMenu(this._highlightedMenuItemElement)), 150);
+ this._highlightedMenuItemElement._subMenuTimer = setTimeout(this._showSubMenu.bind(this, this._highlightedMenuItemElement), 150);
}
},
if (!this._highlightedMenuItemElement)
break;
if (this._highlightedMenuItemElement._subItems) {
- this._showSubMenu(this._highlightedMenuItemElement, this._buildMouseEventForSubMenu(this._highlightedMenuItemElement));
+ this._showSubMenu(this._highlightedMenuItemElement);
this._subMenu._focus();
this._subMenu._highlightNext();
}
delete this._parentMenu._subMenu;
}
}
-
-if (!InspectorFrontendHost.showContextMenu) {
-
-InspectorFrontendHost.showContextMenu = function(event, items)
-{
- new WebInspector.SoftContextMenu(items).show(event);
-}
-
-}