DevTools: Fixes overflowing name in event listeners

Bug: 843923
Change-Id: I5f186e003edcf7170359aa6e5906b98a61160269
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1781586Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697595}

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

@@ -286,7 +286,7 @@ EventListeners.ObjectEventListenerBar = class extends UI.TreeElement {
    * @param {!Components.Linkifier} linkifier
    */
   _setTitle(object, linkifier) {
-    const title = this.listItemElement.createChild('span');
+    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()));
 

third_party/blink/renderer/devtools/front_end/event_listeners/eventListenersView.css

@@ -7,8 +7,9 @@
 .tree-outline-disclosure li {
     padding: 2px 0 0 5px;
     overflow: hidden;
-    display: list-item;
+    display: flex;
     min-height: 17px;
+    align-items: baseline;
 }
 
 .tree-outline-disclosure > li {
@@ -32,9 +33,19 @@
     color: rgb(136, 19, 145);
 }
 
+.tree-outline-disclosure .object-value-node {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.event-listener-details {
+    display: flex;
+}
+
 .event-listener-tree-subtitle {
     float: right;
     margin-left: 5px;
+    flex-shrink: 0;
 }
 
 .event-listener-button {
@@ -43,12 +54,15 @@
     border-radius: 3px;
     border: 1px solid #c3c3c3;
     margin-left: 10px;
-    display: none;
+    display: block;
     cursor: pointer;
+    opacity: 0.8;
+    flex-shrink: 0;
 }
 
 .event-listener-button:hover {
     background-color: #e0e0e0;
+    opacity: 1;
 }
 
 .tree-outline-disclosure li:hover .event-listener-button {