tor-browser

menu.js (6762B)

---

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
const EventEmitter = require("resource://devtools/shared/event-emitter.js");

/**
* A partial implementation of the Menu API provided by electron:
* https://github.com/electron/electron/blob/master/docs/api/menu.md.
*
* Extra features:
*  - Emits an 'open' and 'close' event when the menu is opened/closed

* @param String id (non standard)
*        Needed so tests can confirm the XUL implementation is working
*/
function Menu({ id = null } = {}) {
 this.menuitems = [];
 this.id = id;

 Object.defineProperty(this, "items", {
   get() {
     return this.menuitems;
   },
 });

 EventEmitter.decorate(this);
}

/**
* Add an item to the end of the Menu
*
* @param {MenuItem} menuItem
*/
Menu.prototype.append = function (menuItem) {
 this.menuitems.push(menuItem);
};

/**
* Remove all items from the Menu
*/
Menu.prototype.clear = function () {
 this.menuitems = [];
};

/**
* Add an item to a specified position in the menu
*
* @param {int} _pos
* @param {MenuItem} _menuItem
*/
Menu.prototype.insert = function (_pos, _menuItem) {
 throw Error("Not implemented");
};

/**
* Show the Menu next to the provided target. Anchor point is bottom-left.
*
* @param {Element} target
*        The element to use as anchor.
*/
Menu.prototype.popupAtTarget = function (target) {
 const rect = target.getBoundingClientRect();
 const doc = target.ownerDocument;
 const defaultView = doc.defaultView;
 const x = rect.left + defaultView.mozInnerScreenX;
 const y = rect.bottom + defaultView.mozInnerScreenY;

 this.popup(x, y, doc);
};

/**
* Hide an existing menu, if there's any.
*
* @param {Document} doc
*        The document that should own the context menu.
*/
Menu.prototype.hide = function (doc) {
 const win = doc.defaultView;
 doc = DevToolsUtils.getTopWindow(win).document;
 const popup = doc.querySelector('popupset menupopup[menu-api="true"]');
 if (!popup) {
   return;
 }
 popup.hidePopup();
};

/**
* Show the Menu at a specified location on the screen
*
* Missing features:
*   - browserWindow - BrowserWindow (optional) - Default is null.
*   - positioningItem Number - (optional) OS X
*
* @param {int} screenX
* @param {int} screenY
* @param {Document} doc
*        The document that should own the context menu.
*/
Menu.prototype.popup = function (screenX, screenY, doc) {
 // See bug 1285229, on Windows, opening the same popup multiple times in a
 // row ends up duplicating the popup. The newly inserted popup doesn't
 // dismiss the old one. So remove any previously displayed popup before
 // opening a new one.
 this.hide(doc);

 // The context-menu will be created in the topmost window to preserve keyboard
 // navigation (see Bug 1543940).
 // Keep a reference on the window owning the menu to hide the popup on unload.
 const win = doc.defaultView;
 const topWin = DevToolsUtils.getTopWindow(win);

 // Convert coordinates from win's CSS coordinate space to topWin's
 const winToTopWinCssScale = win.devicePixelRatio / topWin.devicePixelRatio;
 screenX = screenX * winToTopWinCssScale;
 screenY = screenY * winToTopWinCssScale;

 doc = topWin.document;

 let popupset = doc.querySelector("popupset");
 if (!popupset) {
   popupset = doc.createXULElement("popupset");
   doc.documentElement.appendChild(popupset);
 }

 const popup = doc.createXULElement("menupopup");
 popup.setAttribute("menu-api", "true");
 popup.setAttribute("consumeoutsideclicks", "false");
 popup.setAttribute("incontentshell", "false");

 if (this.id) {
   popup.id = this.id;
 }
 this._createMenuItems(popup);

 // The context menu will be created in the topmost chrome window. Hide it manually when
 // the owner document is unloaded.
 const onWindowUnload = () => popup.hidePopup();
 win.addEventListener("unload", onWindowUnload);

 // Remove the menu from the DOM once it's hidden.
 popup.addEventListener("popuphidden", e => {
   if (e.target === popup) {
     win.removeEventListener("unload", onWindowUnload);
     popup.remove();
     this.emit("close");
   }
 });

 popup.addEventListener("popupshown", e => {
   if (e.target === popup) {
     this.emit("open");
   }
 });

 popupset.appendChild(popup);
 popup.openPopupAtScreen(screenX, screenY, true);
};

Menu.prototype._createMenuItems = function (parent) {
 const doc = parent.ownerDocument;
 this.menuitems.forEach(item => {
   if (!item.visible) {
     return;
   }

   if (item.submenu) {
     const menupopup = doc.createXULElement("menupopup");
     menupopup.setAttribute("incontentshell", "false");

     item.submenu._createMenuItems(menupopup);

     const menu = doc.createXULElement("menu");
     menu.appendChild(menupopup);
     applyItemAttributesToNode(item, menu);
     parent.appendChild(menu);
   } else if (item.type === "separator") {
     const menusep = doc.createXULElement("menuseparator");
     parent.appendChild(menusep);
   } else {
     const menuitem = doc.createXULElement("menuitem");
     applyItemAttributesToNode(item, menuitem);

     menuitem.addEventListener("command", () => {
       item.click();
     });
     menuitem.addEventListener("DOMMenuItemActive", () => {
       item.hover();
     });

     parent.appendChild(menuitem);
   }
 });
};

Menu.getMenuElementById = function (id, doc) {
 const menuDoc = DevToolsUtils.getTopWindow(doc.defaultView).document;
 return menuDoc.getElementById(id);
};

Menu.setApplicationMenu = () => {
 throw Error("Not implemented");
};

Menu.sendActionToFirstResponder = () => {
 throw Error("Not implemented");
};

Menu.buildFromTemplate = () => {
 throw Error("Not implemented");
};

function applyItemAttributesToNode(item, node) {
 if (item.l10nID) {
   node.ownerDocument.l10n.setAttributes(node, item.l10nID);
 } else {
   node.setAttribute("label", item.label);
   if (item.accelerator) {
     node.setAttribute("acceltext", item.accelerator);
   }
   if (item.accesskey) {
     node.setAttribute("accesskey", item.accesskey);
   }
 }
 if (item.type === "checkbox") {
   node.setAttribute("type", "checkbox");
 }
 if (item.type === "radio") {
   node.setAttribute("type", "radio");
 }
 if (item.disabled) {
   node.setAttribute("disabled", "true");
 }
 if (item.checked) {
   node.setAttribute("checked", "true");
 }
 if (item.image) {
   node.setAttribute("image", item.image);
 }
 if (item.id) {
   node.id = item.id;
 }
}

module.exports = Menu;