chrome/browser/resources/ntp4/context_menu_handler.js - chromium/src - Git at Google

 // Copyright 2012 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

 // NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
 // version). These files and all files that depend on them are deprecated, and
 // should only be used by legacy UIs that have not yet been updated to new
 // patterns. Use Web Components in any new code.

 // clang-format off
 import {assertInstanceof} from 'chrome://resources/js/assert_ts.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.js';

 import {dispatchPropertyChange} from './cr_deprecated.js';
 import {Menu} from './menu.js';
 import {MenuItem} from './menu_item.js';
 import {HideType} from './menu_button.js';
 import {positionPopupAtPoint} from './position_util.js';
 import {decorate} from './ui.js';
 // clang-format on


 /**
  * Handles context menus.
  * @implements {EventListener}
  */
 class ContextMenuHandler extends EventTarget {
   constructor() {
     super();
     /** @private {!EventTracker} */
     this.showingEvents_ = new EventTracker();

     /**
      * The menu that we are currently showing.
      * @private {?Menu}
      */
     this.menu_ = null;

     /** @private {?number} */
     this.hideTimestamp_ = null;

     /** @private {boolean} */
     this.keyIsDown_ = false;
   }

   get menu() {
     return this.menu_;
   }

   /**
    * Shows a menu as a context menu.
    * @param {!Event} e The event triggering the show (usually a contextmenu
    *     event).
    * @param {!Menu} menu The menu to show.
    */
   showMenu(e, menu) {
     assertInstanceof(e.currentTarget, Node);
     menu.updateCommands(e.currentTarget);
     if (!menu.hasVisibleItems()) {
       return;
     }

     this.menu_ = menu;
     menu.classList.remove('hide-delayed');
     menu.show({x: e.screenX, y: e.screenY});
     menu.contextElement = e.currentTarget;

     // When the menu is shown we steal a lot of events.
     const doc = menu.ownerDocument;
     const win = /** @type {!Window} */ (doc.defaultView);
     this.showingEvents_.add(doc, 'keydown', this, true);
     this.showingEvents_.add(doc, 'mousedown', this, true);
     this.showingEvents_.add(doc, 'touchstart', this, true);
     this.showingEvents_.add(doc, 'focus', this);
     this.showingEvents_.add(win, 'popstate', this);
     this.showingEvents_.add(win, 'resize', this);
     this.showingEvents_.add(win, 'blur', this);
     this.showingEvents_.add(menu, 'contextmenu', this);
     this.showingEvents_.add(menu, 'activate', this);
     this.positionMenu_(e, menu);

     const ev = new Event('show');
     ev.element = menu.contextElement;
     ev.menu = menu;
     this.dispatchEvent(ev);
   }

   /**
    * Hide the currently shown menu.
    * @param {HideType=} opt_hideType Type of hide.
    *     default: HideType.INSTANT.
    */
   hideMenu(opt_hideType) {
     const menu = this.menu;
     if (!menu) {
       return;
     }

     if (opt_hideType === HideType.DELAYED) {
       menu.classList.add('hide-delayed');
     } else {
       menu.classList.remove('hide-delayed');
     }
     menu.hide();
     const originalContextElement = menu.contextElement;
     menu.contextElement = null;
     this.showingEvents_.removeAll();
     menu.selectedIndex = -1;
     this.menu_ = null;

     // On windows we might hide the menu in a right mouse button up and if
     // that is the case we wait some short period before we allow the menu
     // to be shown again.
     this.hideTimestamp_ = 0;
     // <if expr="is_win">
     this.hideTimestamp_ = Date.now();
     // </if>

     const ev = new Event('hide');
     ev.element = originalContextElement;
     ev.menu = menu;
     this.dispatchEvent(ev);
   }

   /**
    * Positions the menu
    * @param {!Event} e The event object triggering the showing.
    * @param {!Menu} menu The menu to position.
    * @private
    */
   positionMenu_(e, menu) {
     // TODO(arv): Handle scrolled documents when needed.

     const element = e.currentTarget;
     let x;
     let y;
     // When the user presses the context menu key (on the keyboard) we need
     // to detect this.
     if (this.keyIsDown_) {
       const rect = element.getRectForContextMenu ?
           element.getRectForContextMenu() :
           element.getBoundingClientRect();
       const offset = Math.min(rect.width, rect.height) / 2;
       x = rect.left + offset;
       y = rect.top + offset;
     } else {
       x = e.clientX;
       y = e.clientY;
     }

     positionPopupAtPoint(x, y, menu);
   }

   /**
    * Handles event callbacks.
    * @param {!Event} e The event object.
    */
   handleEvent(e) {
     // Keep track of keydown state so that we can use that to determine the
     // reason for the contextmenu event.
     switch (e.type) {
       case 'keydown':
         this.keyIsDown_ = !e.ctrlKey && !e.altKey &&
             // context menu key or Shift-F10
             (e.keyCode === 93 && !e.shiftKey || e.key === 'F10' && e.shiftKey);
         break;

       case 'keyup':
         this.keyIsDown_ = false;
         break;
     }

     // Context menu is handled even when we have no menu.
     if (e.type !== 'contextmenu' && !this.menu) {
       return;
     }

     switch (e.type) {
       case 'mousedown':
         if (!this.menu.contains(e.target)) {
           this.hideMenu();
           // <if expr="is_linux or is_macosx or chromeos_lacros">
           if (e.button === 0 /* Left button */) {
             // Emulate Mac and Linux, which swallow native 'mousedown' events
             // that close menus.
             e.preventDefault();
             e.stopPropagation();
           }
           // </if>
         } else {
           e.preventDefault();
         }
         break;

       case 'touchstart':
         if (!this.menu.contains(e.target)) {
           this.hideMenu();
         }
         break;

       case 'keydown':
         if (e.key === 'Escape') {
           this.hideMenu();
           e.stopPropagation();
           e.preventDefault();

           // If the menu is visible we let it handle all the keyboard events.
         } else if (this.menu) {
           this.menu.handleKeyDown(e);
           e.preventDefault();
           e.stopPropagation();
         }
         break;

       case 'activate':
         const hideDelayed = e.target instanceof MenuItem && e.target.checkable;
         this.hideMenu(hideDelayed ? HideType.DELAYED : HideType.INSTANT);
         break;

       case 'focus':
         if (!this.menu.contains(e.target)) {
           this.hideMenu();
         }
         break;

       case 'blur':
         this.hideMenu();
         break;

       case 'popstate':
       case 'resize':
         this.hideMenu();
         break;

       case 'contextmenu':
         if ((!this.menu || !this.menu.contains(e.target)) &&
             (!this.hideTimestamp_ || Date.now() - this.hideTimestamp_ > 50)) {
           this.showMenu(e, e.currentTarget.contextMenu);
         }
         e.preventDefault();
         // Don't allow elements further up in the DOM to show their menus.
         e.stopPropagation();
         break;
     }
   }

   /**
    * Adds a contextMenu property to an element or element class.
    * @param {!Element|!Function} elementOrClass The element or class to add
    *     the contextMenu property to.
    */
   addContextMenuProperty(elementOrClass) {
     const target = typeof elementOrClass === 'function' ?
         elementOrClass.prototype :
         elementOrClass;

     // eslint-disable-next-line no-restricted-properties
     target.__defineGetter__('contextMenu', function() {
       return this.contextMenu_;
     });
     // eslint-disable-next-line no-restricted-properties
     target.__defineSetter__('contextMenu', function(menu) {
       const oldContextMenu = this.contextMenu;

       if (typeof menu === 'string' && menu[0] === '#') {
         menu = this.ownerDocument.getElementById(menu.slice(1));
         decorate(menu, Menu);
       }

       if (menu === oldContextMenu) {
         return;
       }

       if (oldContextMenu && !menu) {
         this.removeEventListener('contextmenu', contextMenuHandler);
         this.removeEventListener('keydown', contextMenuHandler);
         this.removeEventListener('keyup', contextMenuHandler);
       }
       if (menu && !oldContextMenu) {
         this.addEventListener('contextmenu', contextMenuHandler);
         this.addEventListener('keydown', contextMenuHandler);
         this.addEventListener('keyup', contextMenuHandler);
       }

       this.contextMenu_ = menu;

       if (menu && menu.id) {
         this.setAttribute('contextmenu', '#' + menu.id);
       }

       dispatchPropertyChange(this, 'contextMenu', menu, oldContextMenu);
     });

     if (!target.getRectForContextMenu) {
       /**
        * @return {!ClientRect} The rect to use for positioning the context
        *     menu when the context menu is not opened using a mouse position.
        */
       target.getRectForContextMenu = function() {
         return this.getBoundingClientRect();
       };
     }
   }

   /**
    * Sets the given contextMenu to the given element. A contextMenu property
    * would be added if necessary.
    * @param {!Element} element The element or class to set the contextMenu to.
    * @param {!Menu} contextMenu The contextMenu property to be set.
    */
   setContextMenu(element, contextMenu) {
     if (!element.contextMenu) {
       this.addContextMenuProperty(element);
     }
     element.contextMenu = contextMenu;
   }
 }

 /**
  * The singleton context menu handler.
  * @type {!ContextMenuHandler}
  */
 export const contextMenuHandler = new ContextMenuHandler();
	// Copyright 2012 The Chromium Authors
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
	// version). These files and all files that depend on them are deprecated, and
	// should only be used by legacy UIs that have not yet been updated to new
	// patterns. Use Web Components in any new code.

	// clang-format off
	import {assertInstanceof} from 'chrome://resources/js/assert_ts.js';
	import {EventTracker} from 'chrome://resources/js/event_tracker.js';

	import {dispatchPropertyChange} from './cr_deprecated.js';
	import {Menu} from './menu.js';
	import {MenuItem} from './menu_item.js';
	import {HideType} from './menu_button.js';
	import {positionPopupAtPoint} from './position_util.js';
	import {decorate} from './ui.js';
	// clang-format on


	/**
	* Handles context menus.
	* @implements {EventListener}
	*/
	class ContextMenuHandler extends EventTarget {
	constructor() {
	super();
	/** @private {!EventTracker} */
	this.showingEvents_ = new EventTracker();

	/**
	* The menu that we are currently showing.
	* @private {?Menu}
	*/
	this.menu_ = null;

	/** @private {?number} */
	this.hideTimestamp_ = null;

	/** @private {boolean} */
	this.keyIsDown_ = false;
	}

	get menu() {
	return this.menu_;
	}

	/**
	* Shows a menu as a context menu.
	* @param {!Event} e The event triggering the show (usually a contextmenu
	* event).
	* @param {!Menu} menu The menu to show.
	*/
	showMenu(e, menu) {
	assertInstanceof(e.currentTarget, Node);
	menu.updateCommands(e.currentTarget);
	if (!menu.hasVisibleItems()) {
	return;
	}

	this.menu_ = menu;
	menu.classList.remove('hide-delayed');
	menu.show({x: e.screenX, y: e.screenY});
	menu.contextElement = e.currentTarget;

	// When the menu is shown we steal a lot of events.
	const doc = menu.ownerDocument;
	const win = /** @type {!Window} */ (doc.defaultView);
	this.showingEvents_.add(doc, 'keydown', this, true);
	this.showingEvents_.add(doc, 'mousedown', this, true);
	this.showingEvents_.add(doc, 'touchstart', this, true);
	this.showingEvents_.add(doc, 'focus', this);
	this.showingEvents_.add(win, 'popstate', this);
	this.showingEvents_.add(win, 'resize', this);
	this.showingEvents_.add(win, 'blur', this);
	this.showingEvents_.add(menu, 'contextmenu', this);
	this.showingEvents_.add(menu, 'activate', this);
	this.positionMenu_(e, menu);

	const ev = new Event('show');
	ev.element = menu.contextElement;
	ev.menu = menu;
	this.dispatchEvent(ev);
	}

	/**
	* Hide the currently shown menu.
	* @param {HideType=} opt_hideType Type of hide.
	* default: HideType.INSTANT.
	*/
	hideMenu(opt_hideType) {
	const menu = this.menu;
	if (!menu) {
	return;
	}

	if (opt_hideType === HideType.DELAYED) {
	menu.classList.add('hide-delayed');
	} else {
	menu.classList.remove('hide-delayed');
	}
	menu.hide();
	const originalContextElement = menu.contextElement;
	menu.contextElement = null;
	this.showingEvents_.removeAll();
	menu.selectedIndex = -1;
	this.menu_ = null;

	// On windows we might hide the menu in a right mouse button up and if
	// that is the case we wait some short period before we allow the menu
	// to be shown again.
	this.hideTimestamp_ = 0;
	// <if expr="is_win">
	this.hideTimestamp_ = Date.now();
	// </if>

	const ev = new Event('hide');
	ev.element = originalContextElement;
	ev.menu = menu;
	this.dispatchEvent(ev);
	}

	/**
	* Positions the menu
	* @param {!Event} e The event object triggering the showing.
	* @param {!Menu} menu The menu to position.
	* @private
	*/
	positionMenu_(e, menu) {
	// TODO(arv): Handle scrolled documents when needed.

	const element = e.currentTarget;
	let x;
	let y;
	// When the user presses the context menu key (on the keyboard) we need
	// to detect this.
	if (this.keyIsDown_) {
	const rect = element.getRectForContextMenu ?
	element.getRectForContextMenu() :
	element.getBoundingClientRect();
	const offset = Math.min(rect.width, rect.height) / 2;
	x = rect.left + offset;
	y = rect.top + offset;
	} else {
	x = e.clientX;
	y = e.clientY;
	}

	positionPopupAtPoint(x, y, menu);
	}

	/**
	* Handles event callbacks.
	* @param {!Event} e The event object.
	*/
	handleEvent(e) {
	// Keep track of keydown state so that we can use that to determine the
	// reason for the contextmenu event.
	switch (e.type) {
	case 'keydown':
	this.keyIsDown_ = !e.ctrlKey && !e.altKey &&
	// context menu key or Shift-F10
	(e.keyCode === 93 && !e.shiftKey \|\| e.key === 'F10' && e.shiftKey);
	break;

	case 'keyup':
	this.keyIsDown_ = false;
	break;
	}

	// Context menu is handled even when we have no menu.
	if (e.type !== 'contextmenu' && !this.menu) {
	return;
	}

	switch (e.type) {
	case 'mousedown':
	if (!this.menu.contains(e.target)) {
	this.hideMenu();
	// <if expr="is_linux or is_macosx or chromeos_lacros">
	if (e.button === 0 /* Left button */) {
	// Emulate Mac and Linux, which swallow native 'mousedown' events
	// that close menus.
	e.preventDefault();
	e.stopPropagation();
	}
	// </if>
	} else {
	e.preventDefault();
	}
	break;

	case 'touchstart':
	if (!this.menu.contains(e.target)) {
	this.hideMenu();
	}
	break;

	case 'keydown':
	if (e.key === 'Escape') {
	this.hideMenu();
	e.stopPropagation();
	e.preventDefault();

	// If the menu is visible we let it handle all the keyboard events.
	} else if (this.menu) {
	this.menu.handleKeyDown(e);
	e.preventDefault();
	e.stopPropagation();
	}
	break;

	case 'activate':
	const hideDelayed = e.target instanceof MenuItem && e.target.checkable;
	this.hideMenu(hideDelayed ? HideType.DELAYED : HideType.INSTANT);
	break;

	case 'focus':
	if (!this.menu.contains(e.target)) {
	this.hideMenu();
	}
	break;

	case 'blur':
	this.hideMenu();
	break;

	case 'popstate':
	case 'resize':
	this.hideMenu();
	break;

	case 'contextmenu':
	if ((!this.menu \|\| !this.menu.contains(e.target)) &&
	(!this.hideTimestamp_ \|\| Date.now() - this.hideTimestamp_ > 50)) {
	this.showMenu(e, e.currentTarget.contextMenu);
	}
	e.preventDefault();
	// Don't allow elements further up in the DOM to show their menus.
	e.stopPropagation();
	break;
	}
	}

	/**
	* Adds a contextMenu property to an element or element class.
	* @param {!Element\|!Function} elementOrClass The element or class to add
	* the contextMenu property to.
	*/
	addContextMenuProperty(elementOrClass) {
	const target = typeof elementOrClass === 'function' ?
	elementOrClass.prototype :
	elementOrClass;

	// eslint-disable-next-line no-restricted-properties
	target.__defineGetter__('contextMenu', function() {
	return this.contextMenu_;
	});
	// eslint-disable-next-line no-restricted-properties
	target.__defineSetter__('contextMenu', function(menu) {
	const oldContextMenu = this.contextMenu;

	if (typeof menu === 'string' && menu[0] === '#') {
	menu = this.ownerDocument.getElementById(menu.slice(1));
	decorate(menu, Menu);
	}

	if (menu === oldContextMenu) {
	return;
	}

	if (oldContextMenu && !menu) {
	this.removeEventListener('contextmenu', contextMenuHandler);
	this.removeEventListener('keydown', contextMenuHandler);
	this.removeEventListener('keyup', contextMenuHandler);
	}
	if (menu && !oldContextMenu) {
	this.addEventListener('contextmenu', contextMenuHandler);
	this.addEventListener('keydown', contextMenuHandler);
	this.addEventListener('keyup', contextMenuHandler);
	}

	this.contextMenu_ = menu;

	if (menu && menu.id) {
	this.setAttribute('contextmenu', '#' + menu.id);
	}

	dispatchPropertyChange(this, 'contextMenu', menu, oldContextMenu);
	});

	if (!target.getRectForContextMenu) {
	/**
	* @return {!ClientRect} The rect to use for positioning the context
	* menu when the context menu is not opened using a mouse position.
	*/
	target.getRectForContextMenu = function() {
	return this.getBoundingClientRect();
	};
	}
	}

	/**
	* Sets the given contextMenu to the given element. A contextMenu property
	* would be added if necessary.
	* @param {!Element} element The element or class to set the contextMenu to.
	* @param {!Menu} contextMenu The contextMenu property to be set.
	*/
	setContextMenu(element, contextMenu) {
	if (!element.contextMenu) {
	this.addContextMenuProperty(element);
	}
	element.contextMenu = contextMenu;
	}
	}

	/**
	* The singleton context menu handler.
	* @type {!ContextMenuHandler}
	*/
	export const contextMenuHandler = new ContextMenuHandler();