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

   1 /*
   2  * Copyright (C) 2009 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @param {!WebInspector.ContextMenu} topLevelMenu
  34  * @param {string} type
  35  * @param {string=} label
  36  * @param {boolean=} disabled
  37  * @param {boolean=} checked
  38  */
  39 WebInspector.ContextMenuItem = function(topLevelMenu, type, label, disabled, checked)
  40 {
  41     this._type = type;
  42     this._label = label;
  43     this._disabled = disabled;
  44     this._checked = checked;
  45     this._contextMenu = topLevelMenu;
  46     if (type === "item" || type === "checkbox")
  47         this._id = topLevelMenu._nextId();
  48 }
  49
  50 WebInspector.ContextMenuItem.prototype = {
  51     /**
  52      * @return {number}
  53      */
  54     id: function()
  55     {
  56         return this._id;
  57     },
  58
  59     /**
  60      * @return {string}
  61      */
  62     type: function()
  63     {
  64         return this._type;
  65     },
  66
  67     /**
  68      * @return {boolean}
  69      */
  70     isEnabled: function()
  71     {
  72         return !this._disabled;
  73     },
  74
  75     /**
  76      * @param {boolean} enabled
  77      */
  78     setEnabled: function(enabled)
  79     {
  80         this._disabled = !enabled;
  81     },
  82
  83     /**
  84      * @return {!InspectorFrontendHostAPI.ContextMenuDescriptor}
  85      */
  86     _buildDescriptor: function()
  87     {
  88         switch (this._type) {
  89         case "item":
  90             var result = { type: "item", id: this._id, label: this._label, enabled: !this._disabled };
  91             if (this._customElement)
  92                 result.element = this._customElement;
  93             if (this._shortcut)
  94                 result.shortcut = this._shortcut;
  95             return result;
  96         case "separator":
  97             return { type: "separator" };
  98         case "checkbox":
  99             return { type: "checkbox", id: this._id, label: this._label, checked: !!this._checked, enabled: !this._disabled };
 100         }
 101         throw new Error("Invalid item type:"  + this._type);
 102     },
 103
 104     /**
 105      * @param {string} shortcut
 106      */
 107     setShortcut: function(shortcut)
 108     {
 109         this._shortcut = shortcut;
 110     }
 111 }
 112
 113 /**
 114  * @constructor
 115  * @extends {WebInspector.ContextMenuItem}
 116  * @param {!WebInspector.ContextMenu} topLevelMenu
 117  * @param {string=} label
 118  * @param {boolean=} disabled
 119  */
 120 WebInspector.ContextSubMenuItem = function(topLevelMenu, label, disabled)
 121 {
 122     WebInspector.ContextMenuItem.call(this, topLevelMenu, "subMenu", label, disabled);
 123     /** @type {!Array.<!WebInspector.ContextMenuItem>} */
 124     this._items = [];
 125 }
 126
 127 WebInspector.ContextSubMenuItem.prototype = {
 128     /**
 129      * @param {string} label
 130      * @param {function(?)} handler
 131      * @param {boolean=} disabled
 132      * @return {!WebInspector.ContextMenuItem}
 133      */
 134     appendItem: function(label, handler, disabled)
 135     {
 136         var item = new WebInspector.ContextMenuItem(this._contextMenu, "item", label, disabled);
 137         this._pushItem(item);
 138         this._contextMenu._setHandler(item.id(), handler);
 139         return item;
 140     },
 141
 142     /**
 143      * @param {!Element} element
 144      * @return {!WebInspector.ContextMenuItem}
 145      */
 146     appendCustomItem: function(element)
 147     {
 148         var item = new WebInspector.ContextMenuItem(this._contextMenu, "item", "<custom>");
 149         item._customElement = element;
 150         this._pushItem(item);
 151         return item;
 152     },
 153
 154     /**
 155      * @param {string} actionId
 156      * @param {string=} label
 157      * @return {!WebInspector.ContextMenuItem}
 158      */
 159     appendAction: function(actionId, label)
 160     {
 161         if (!label)
 162             label = WebInspector.actionRegistry.actionTitle(actionId);
 163         var result = this.appendItem(label, WebInspector.actionRegistry.execute.bind(WebInspector.actionRegistry, actionId));
 164         var shortcut = WebInspector.shortcutRegistry.shortcutTitleForAction(actionId);
 165         if (shortcut)
 166             result.setShortcut(shortcut);
 167         return result;
 168     },
 169
 170     /**
 171      * @param {string} label
 172      * @param {boolean=} disabled
 173      * @return {!WebInspector.ContextSubMenuItem}
 174      */
 175     appendSubMenuItem: function(label, disabled)
 176     {
 177         var item = new WebInspector.ContextSubMenuItem(this._contextMenu, label, disabled);
 178         this._pushItem(item);
 179         return item;
 180     },
 181
 182     /**
 183      * @param {string} label
 184      * @param {function()} handler
 185      * @param {boolean=} checked
 186      * @param {boolean=} disabled
 187      * @return {!WebInspector.ContextMenuItem}
 188      */
 189     appendCheckboxItem: function(label, handler, checked, disabled)
 190     {
 191         var item = new WebInspector.ContextMenuItem(this._contextMenu, "checkbox", label, disabled, checked);
 192         this._pushItem(item);
 193         this._contextMenu._setHandler(item.id(), handler);
 194         return item;
 195     },
 196
 197     appendSeparator: function()
 198     {
 199         if (this._items.length)
 200             this._pendingSeparator = true;
 201     },
 202
 203     /**
 204      * @param {!WebInspector.ContextMenuItem} item
 205      */
 206     _pushItem: function(item)
 207     {
 208         if (this._pendingSeparator) {
 209             this._items.push(new WebInspector.ContextMenuItem(this._contextMenu, "separator"));
 210             delete this._pendingSeparator;
 211         }
 212         this._items.push(item);
 213     },
 214
 215     /**
 216      * @return {boolean}
 217      */
 218     isEmpty: function()
 219     {
 220         return !this._items.length;
 221     },
 222
 223     /**
 224      * @override
 225      * @return {!InspectorFrontendHostAPI.ContextMenuDescriptor}
 226      */
 227     _buildDescriptor: function()
 228     {
 229         var result = { type: "subMenu", label: this._label, enabled: !this._disabled, subItems: [] };
 230         for (var i = 0; i < this._items.length; ++i)
 231             result.subItems.push(this._items[i]._buildDescriptor());
 232         return result;
 233     },
 234
 235     __proto__: WebInspector.ContextMenuItem.prototype
 236 }
 237
 238 /**
 239  * @constructor
 240  * @extends {WebInspector.ContextSubMenuItem}
 241  * @param {!Event} event
 242  * @param {boolean=} useSoftMenu
 243  * @param {number=} x
 244  * @param {number=} y
 245  */
 246 WebInspector.ContextMenu = function(event, useSoftMenu, x, y)
 247 {
 248     WebInspector.ContextSubMenuItem.call(this, this, "");
 249     /** @type {!Array.<!Promise.<!Array.<!WebInspector.ContextMenu.Provider>>>} */
 250     this._pendingPromises = [];
 251     /** @type {!Array.<!Promise.<!Object>>} */
 252     this._pendingTargets = [];
 253     this._event = event;
 254     this._useSoftMenu = !!useSoftMenu;
 255     this._x = x === undefined ? event.x : x;
 256     this._y = y === undefined ? event.y : y;
 257     this._handlers = {};
 258     this._id = 0;
 259 }
 260
 261 WebInspector.ContextMenu.initialize = function()
 262 {
 263     InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.SetUseSoftMenu, setUseSoftMenu);
 264     /**
 265      * @param {!WebInspector.Event} event
 266      */
 267     function setUseSoftMenu(event)
 268     {
 269         WebInspector.ContextMenu._useSoftMenu = /** @type {boolean} */ (event.data);
 270     }
 271 }
 272
 273 /**
 274  * @param {!Document} doc
 275  */
 276 WebInspector.ContextMenu.installHandler = function(doc)
 277 {
 278     doc.body.addEventListener("contextmenu", handler, false);
 279
 280     /**
 281      * @param {!Event} event
 282      */
 283     function handler(event)
 284     {
 285         var contextMenu = new WebInspector.ContextMenu(event);
 286         contextMenu.appendApplicableItems(/** @type {!Object} */ (event.deepElementFromPoint()));
 287         contextMenu.show();
 288     }
 289 }
 290
 291 WebInspector.ContextMenu.prototype = {
 292     /**
 293      * @return {number}
 294      */
 295     _nextId: function()
 296     {
 297         return this._id++;
 298     },
 299
 300     show: function()
 301     {
 302         Promise.all(this._pendingPromises).then(populateAndShow.bind(this));
 303         WebInspector.ContextMenu._pendingMenu = this;
 304
 305         /**
 306          * @param {!Array.<!Array.<!WebInspector.ContextMenu.Provider>>} appendCallResults
 307          * @this {WebInspector.ContextMenu}
 308          */
 309         function populateAndShow(appendCallResults)
 310         {
 311             if (WebInspector.ContextMenu._pendingMenu !== this)
 312                 return;
 313             delete WebInspector.ContextMenu._pendingMenu;
 314
 315             for (var i = 0; i < appendCallResults.length; ++i) {
 316                 var providers = appendCallResults[i];
 317                 var target = this._pendingTargets[i];
 318
 319                 for (var j = 0; j < providers.length; ++j) {
 320                     var provider = /** @type {!WebInspector.ContextMenu.Provider} */ (providers[j]);
 321                     this.appendSeparator();
 322                     provider.appendApplicableItems(this._event, this, target);
 323                     this.appendSeparator();
 324                 }
 325             }
 326
 327             this._pendingPromises = [];
 328             this._pendingTargets = [];
 329             this._innerShow();
 330         }
 331
 332         this._event.consume(true);
 333     },
 334
 335     discard: function()
 336     {
 337         if (this._softMenu)
 338             this._softMenu.discard();
 339     },
 340
 341     _innerShow: function()
 342     {
 343         var menuObject = this._buildDescriptors();
 344
 345         WebInspector._contextMenu = this;
 346         if (this._useSoftMenu || WebInspector.ContextMenu._useSoftMenu || InspectorFrontendHost.isHostedMode()) {
 347             this._softMenu = new WebInspector.SoftContextMenu(menuObject, this._itemSelected.bind(this));
 348             this._softMenu.show(this._event.target.ownerDocument, this._x, this._y);
 349         } else {
 350             InspectorFrontendHost.showContextMenuAtPoint(this._x, this._y, menuObject, this._event.target.ownerDocument);
 351             InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.ContextMenuCleared, this._menuCleared, this);
 352             InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.ContextMenuItemSelected, this._onItemSelected, this);
 353         }
 354     },
 355
 356     /**
 357      * @param {number} id
 358      * @param {function(?)} handler
 359      */
 360     _setHandler: function(id, handler)
 361     {
 362         if (handler)
 363             this._handlers[id] = handler;
 364     },
 365
 366     /**
 367      * @return {!Array.<!InspectorFrontendHostAPI.ContextMenuDescriptor>}
 368      */
 369     _buildDescriptors: function()
 370     {
 371         var result = [];
 372         for (var i = 0; i < this._items.length; ++i)
 373             result.push(this._items[i]._buildDescriptor());
 374         return result;
 375     },
 376
 377     /**
 378      * @param {!WebInspector.Event} event
 379      */
 380     _onItemSelected: function(event)
 381     {
 382         this._itemSelected(/** @type {string} */ (event.data));
 383     },
 384
 385     /**
 386      * @param {string} id
 387      */
 388     _itemSelected: function(id)
 389     {
 390         if (this._handlers[id])
 391             this._handlers[id].call(this);
 392         this._menuCleared();
 393     },
 394
 395     _menuCleared: function()
 396     {
 397         InspectorFrontendHost.events.removeEventListener(InspectorFrontendHostAPI.Events.ContextMenuCleared, this._menuCleared, this);
 398         InspectorFrontendHost.events.removeEventListener(InspectorFrontendHostAPI.Events.ContextMenuItemSelected, this._onItemSelected, this);
 399     },
 400
 401     /**
 402      * @param {!Object} target
 403      */
 404     appendApplicableItems: function(target)
 405     {
 406         this._pendingPromises.push(self.runtime.instancesPromise(WebInspector.ContextMenu.Provider, target));
 407         this._pendingTargets.push(target);
 408     },
 409
 410     /**
 411      * @param {string} location
 412      */
 413     appendItemsAtLocation: function(location)
 414     {
 415         // Hard-coded named groups for elements to maintain generic order.
 416         var groupWeights = ["new", "open", "clipboard", "navigate", "footer"];
 417
 418         var groups = new Map();
 419         var extensions = self.runtime.extensions("context-menu-item");
 420         for (var extension of extensions) {
 421             var itemLocation = extension.descriptor()["location"] || "";
 422             if (itemLocation !== location && !itemLocation.startsWith(location + "/"))
 423                 continue;
 424
 425             var itemGroup = itemLocation.includes("/") ? itemLocation.substr(location.length + 1) : "misc";
 426             var group = groups.get(itemGroup);
 427             if (!group) {
 428                 group = [];
 429                 groups.set(itemGroup, group);
 430                 if (groupWeights.indexOf(itemGroup) === -1)
 431                     groupWeights.splice(4, 0, itemGroup);
 432             }
 433             group.push(extension);
 434         }
 435         for (var groupName of groupWeights) {
 436             var group = groups.get(groupName);
 437             if (!group)
 438                 continue;
 439             for (var extension of group)
 440                 this.appendAction(extension.descriptor()["actionId"]);
 441             this.appendSeparator();
 442         }
 443     },
 444
 445     __proto__: WebInspector.ContextSubMenuItem.prototype
 446 }
 447
 448 /**
 449  * @interface
 450  */
 451 WebInspector.ContextMenu.Provider = function() {
 452 }
 453
 454 WebInspector.ContextMenu.Provider.prototype = {
 455     /**
 456      * @param {!Event} event
 457      * @param {!WebInspector.ContextMenu} contextMenu
 458      * @param {!Object} target
 459      */
 460     appendApplicableItems: function(event, contextMenu, target) { }
 461 }