DevTools: Improve event listener context menus

This CL adds context menu items to each listener to reveal its source
code, remove it, or toggle whether it is passive or blocking (when
applicable). This improves the accessibility of the event listeners view
in the Elements panel as well as the global listeners view in the
Sources panel, as previously the passive toggle and delete buttons were
available only on hover.

Previously reviewed at
https://chromium-review.googlesource.com/c/chromium/src/+/1665298, split
into this CL as it impacts multiple parts of the UI.

Screenshot: https://gyazo.com/dc1b54b5e0ae1f9b67f89b0400a168a8
Bug: 963183
Change-Id: I497e96ee3eb5d58358f904dd7e9ac92b15840baf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1716462
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#704730}

third_party/blink/renderer/devtools/front_end/elements/elements_strings.grdp

@@ -270,9 +270,6 @@
   <message name="IDS_DEVTOOLS_f750c8807bc5f4a7bd259788114a4ebd" desc="Tooltip text that appears when hovering over the largeicon background color button in the Styles Sidebar Pane of the Elements panel">
     Add background-color
   </message>
-  <message name="IDS_DEVTOOLS_f80bc338b6146b566004a046f8137c85" desc="Text in Event Listeners Widget of the Elements panel">
-    Passive
-  </message>
   <message name="IDS_DEVTOOLS_f8d0f1896a9e4ad16d43caa28534df32" desc="Show all button text content in Styles Sidebar Pane of the Elements panel">
     Show All Properties (<ph name="PROPERTIES_LENGTH___COUNT">$1s<ex>3</ex></ph> more)
   </message>

third_party/blink/renderer/devtools/front_end/event_listeners/EventListenersView.js

@@ -303,7 +303,8 @@ EventListeners.ObjectEventListenerBar = class extends UI.TreeElement {
   _setTitle(object, linkifier) {
     const title = this.listItemElement.createChild('span', 'event-listener-details');
     const subtitle = this.listItemElement.createChild('span', 'event-listener-tree-subtitle');
-    subtitle.appendChild(linkifier.linkifyRawLocation(this._eventListener.location(), this._eventListener.sourceURL()));
+    const linkElement = linkifier.linkifyRawLocation(this._eventListener.location(), this._eventListener.sourceURL());
+    subtitle.appendChild(linkElement);
 
     this._valueTitle =
         ObjectUI.ObjectPropertiesSection.createValueElement(object, false /* wasThrown */, false /* showPreview */);
@@ -313,7 +314,10 @@ EventListeners.ObjectEventListenerBar = class extends UI.TreeElement {
       const deleteButton = title.createChild('span', 'event-listener-button');
       deleteButton.textContent = Common.UIString('Remove');
       deleteButton.title = Common.UIString('Delete event listener');
-      deleteButton.addEventListener('click', removeListener.bind(this), false);
+      deleteButton.addEventListener('click', event => {
+        this._removeListener();
+        event.consume();
+      }, false);
       title.appendChild(deleteButton);
     }
 
@@ -321,28 +325,34 @@ EventListeners.ObjectEventListenerBar = class extends UI.TreeElement {
       const passiveButton = title.createChild('span', 'event-listener-button');
       passiveButton.textContent = Common.UIString('Toggle Passive');
       passiveButton.title = Common.UIString('Toggle whether event listener is passive or blocking');
-      passiveButton.addEventListener('click', togglePassiveListener.bind(this), false);
+      passiveButton.addEventListener('click', event => {
+        this._togglePassiveListener();
+        event.consume();
+      }, false);
       title.appendChild(passiveButton);
     }
 
-    /**
-     * @param {!Event} event
-     * @this {EventListeners.ObjectEventListenerBar}
-     */
-    function removeListener(event) {
-      event.consume();
-      this._removeListenerBar();
-      this._eventListener.remove();
-    }
+    this.listItemElement.addEventListener('contextmenu', event => {
+      const menu = new UI.ContextMenu(event);
+      if (event.target !== linkElement) {
+        menu.appendApplicableItems(linkElement);
+      }
+      menu.defaultSection().appendItem(
+          ls`Delete event listener`, this._removeListener.bind(this), !this._eventListener.canRemove());
+      menu.defaultSection().appendCheckboxItem(
+          ls`Passive`, this._togglePassiveListener.bind(this), this._eventListener.passive(),
+          !this._eventListener.canTogglePassive());
+      menu.show();
+    });
+  }
 
-    /**
-     * @param {!Event} event
-     * @this {EventListeners.ObjectEventListenerBar}
-     */
-    function togglePassiveListener(event) {
-      event.consume();
-      this._eventListener.togglePassive().then(this._changeCallback());
-    }
+  _removeListener() {
+    this._removeListenerBar();
+    this._eventListener.remove();
+  }
+
+  _togglePassiveListener() {
+    this._eventListener.togglePassive().then(this._changeCallback());
   }
 
   _removeListenerBar() {

third_party/blink/renderer/devtools/front_end/langpacks/shared_strings.grdp

@@ -616,6 +616,9 @@
   <message name="IDS_DEVTOOLS_f53944c3a55bdb5ad65c6226e358a626" desc="Text to undock the DevTools">
     Undock into separate window
   </message>
+  <message name="IDS_DEVTOOLS_f80bc338b6146b566004a046f8137c85" desc="Text in Event Listeners Widget of the Elements panel">
+    Passive
+  </message>
   <message name="IDS_DEVTOOLS_f907e651164789346ae0a1e257c462d8" desc="Label for a group of JavaScript files">
     Script
   </message>