[tools][system-analyzer] Allow hiding tooltips when clicking elsewhere

Drive-by-fix:
- Show tooltips in list-panel entries
- Use fixed kChunkWidth in timeline-track

Bug: v8:10644
Change-Id: I738f613c9a35726b9ab4a6c51f784638eade9335
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2867467
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Patrick Thier <pthier@chromium.org>
Cr-Commit-Position: refs/heads/master@{#74356}

tools/system-analyzer/index.css

@@ -68,7 +68,7 @@ section {
   border-radius: 8px;
   cursor: pointer;
 }
-::-webkit-scrollbar-thumb:hover { 
+::-webkit-scrollbar-thumb:hover {
   background-color: rgba(128, 128, 128, 0.8);
 }
 

tools/system-analyzer/view/helper.mjs

@@ -299,22 +299,25 @@ export class LazyTable {
     } else {
       table.replaceChild(DOM.tbody(), table.tBodies[0]);
     }
-    if (!table.tFoot) {
-      const td = table.appendChild(DOM.element('tfoot'))
-                     .appendChild(DOM.tr())
-                     .appendChild(DOM.td());
-      for (let count of [10, 100]) {
-        const button = DOM.element('button');
-        button.innerText = `+${count}`;
-        button.onclick = (e) => this._addMoreRows(count);
-        td.appendChild(button);
-      }
-      td.setAttribute('colspan', 100);
-    }
+    if (!table.tFoot) this._addFooter();
     table.tFoot.addEventListener('click', this._clickHandler);
     this._addMoreRows();
   }
 
+  _addFooter() {
+    const td = DOM.td();
+    td.setAttribute('colspan', 100);
+    for (let addCount of [10, 100, 250, 500]) {
+      const button = DOM.element('button');
+      button.innerText = `+${addCount}`;
+      button.onclick = (e) => this._addMoreRows(addCount);
+      td.appendChild(button);
+    }
+    this._table.appendChild(DOM.element('tfoot'))
+        .appendChild(DOM.tr())
+        .appendChild(td);
+  }
+
   _addMoreRows(count = undefined) {
     const fragment = new DocumentFragment();
     for (let row of this._chunkedRowData.next(count)) {

tools/system-analyzer/view/list-panel-template.html

@@ -30,11 +30,13 @@ found in the LICENSE file. -->
     text-align: left;
     cursor: -webkit-zoom-in;
     color: rgba(var(--border-color), 1);
+    user-select: none;
   }
 
   .toggle::before {
     content: "▶";
   }
+
   .open .toggle::before {
     content: "▼";
   }

tools/system-analyzer/view/list-panel.mjs

@@ -5,7 +5,7 @@
 import {Script, SourcePosition} from '../../profile.mjs';
 import {LogEntry} from '../log/log.mjs';
 
-import {FocusEvent} from './events.mjs';
+import {FocusEvent, ToolTipEvent} from './events.mjs';
 import {groupBy, LazyTable} from './helper.mjs';
 import {CollapsableElement, DOM} from './helper.mjs';
 
@@ -18,6 +18,7 @@ DOM.defineCustomElement('view/list-panel',
 
   _detailsClickHandler = this._handleDetailsClick.bind(this);
   _logEntryClickHandler = this._handleLogEntryClick.bind(this);
+  _logEntryMouseOverHandler = this._logEntryMouseOverHandler.bind(this);
 
   constructor() {
     super(templateText);
@@ -125,6 +126,12 @@ DOM.defineCustomElement('view/list-panel',
     this.dispatchEvent(new FocusEvent(group.key));
   }
 
+  _logEntryMouseOverHandler(e) {
+    const group = e.currentTarget.group;
+    this.dispatchEvent(
+        new ToolTipEvent(group.key.toStringLong(), e.currentTarget));
+  }
+
   _handleDetailsClick(event) {
     event.stopPropagation();
     const tr = event.target.parentNode;
@@ -184,6 +191,7 @@ DOM.defineCustomElement('view/list-panel',
       const valueTd = tr.appendChild(DOM.td(`${group.key}`, 'key'));
       if (this._isClickable(group.key)) {
         tr.onclick = this._logEntryClickHandler;
+        tr.onmouseover = this._logEntryMouseOverHandler;
         valueTd.classList.add('clickable');
       }
       return tr;

tools/system-analyzer/view/timeline/timeline-track.mjs

@@ -180,7 +180,7 @@ DOM.defineCustomElement('view/timeline/timeline-track',
         node.ondblclick = this._chunkDoubleClickHandler;
       }
       const style = node.style;
-      style.left = `${((chunk.start - start) * this._timeToPixel) | 0}px`;
+      style.left = `${i * kChunkWidth}px`;
       style.height = `${height | 0}px`;
       style.backgroundImage = this._createBackgroundImage(chunk);
       node.chunk = chunk;

tools/system-analyzer/view/tool-tip-template.html

@@ -24,6 +24,7 @@ found in the LICENSE file. -->
   .textContent {
     font-family: monospace;
     white-space: pre;
+    overflow-wrap: anywhere;
     overflow-x: hidden;
     max-width: 500px;
   }

tools/system-analyzer/view/tool-tip.mjs

@@ -19,6 +19,7 @@ DOM.defineCustomElement(
             this.requestUpdate(true);
           }
         });
+        document.addEventListener('click', (e) => this.hide());
       }
 
       _update() {