[tools][system-analyzer] Cleaner tooltips

- Always show the navigation buttons
- Format code with fixed-width font
- Limit the property-table height for more compact tooltips

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

tools/system-analyzer/index.css

@@ -228,6 +228,7 @@ button:hover,
 .mark:hover,
 .clickable:active,
 .mark:active {
+  border-radius: 3px;
   background-color: var(--primary-color);
   color: var(--on-primary-color);
   cursor: pointer;
@@ -250,11 +251,10 @@ button:hover,
   margin-top: 10px;
 }
 
-
 .panelCloserLabel {
   float: left;
   cursor: zoom-out;
-  margin: 0 10px 0 0;
+  margin: 0 5px 0 0;
   transition: transform 0.2s ease-out;
   user-select: none;
 }
@@ -275,4 +275,4 @@ button:hover,
 }
 .panelCloserInput:checked ~ * {
   display: none;
-}
+}

tools/system-analyzer/log/code.mjs

@@ -2,9 +2,25 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import {formatBytes} from '../helper.mjs';
-
 import {LogEntry} from './log.mjs';
 
+class CodeString {
+  constructor(string) {
+    if (typeof string !== 'string') {
+      throw new Error('Expected string');
+    }
+    this.string = string;
+  }
+
+  get isCode() {
+    return true;
+  }
+
+  toString() {
+    return this.string;
+  }
+}
+
 export class DeoptLogEntry extends LogEntry {
   constructor(
       type, time, entry, deoptReason, deoptLocation, scriptOffset,
@@ -117,6 +133,8 @@ export class CodeLogEntry extends LogEntry {
   get toolTipDict() {
     const dict = super.toolTipDict;
     dict.size = formatBytes(dict.size);
+    dict.source = new CodeString(dict.source);
+    dict.code = new CodeString(dict.code);
     return dict;
   }
 

tools/system-analyzer/view/property-link-table-template.html

@@ -6,34 +6,58 @@ found in the LICENSE file. -->
 </head>
 
 <style>
-.properties td {
-  vertical-align: top;
-}
-.properties > tbody > tr > td:nth-child(2n+1):after {
-  content: ':';
- }
-.properties > tbody > tr > td:nth-child(2n+1) {
-  padding-right: 3px;
-}
-
-.properties > tbody > tr > td:nth-child(2n+2) {
-  width: 100%;
-}
-
-.properties > tfoot {
-  text-align: right;
+h3 {
+  margin-block-start: 0em;
 }
 
 .properties {
+  overflow: auto;
+  max-height: 300px;
+}
+
+.properties table {
+  overflow: visible;
   min-width: 350px;
   border-collapse: collapse;
 }
 
-h3 {
-  margin-block-start: 0em;
+.properties table td {
+  vertical-align: top;
+}
+
+.properties table > tbody > tr > td:nth-child(2n+1):after {
+  content: ':';
+ }
+
+.properties table > tbody > tr > td:nth-child(2n+1) {
+  padding-right: 3px;
+}
+
+.properties table > tbody > tr > td:nth-child(2n+2) {
+  width: 100%;
+}
+
+.properties table select {
+  width: 100%;
+}
+
+.code {
+  font-family: monospace;
+}
+
+.footer {
+  margin-top: 10px;
+  text-align: right;
+  width: 100%;
+  display: flex;
+  align-content: space-between;
+}
+
+.footer button {
+  flex: 1 1 0;
 }
 </style>
 
 <div id="body">
   <div id="content"></div>
-</div>
+</div>

tools/system-analyzer/view/property-link-table.mjs

@@ -39,13 +39,16 @@ DOM.defineCustomElement('view/property-link-table',
 
   _update() {
     this._fragment = new DocumentFragment();
-    this._table = DOM.table('properties');
+    this._table = DOM.table();
     for (let key in this._propertyDict) {
       const value = this._propertyDict[key];
       this._addKeyValue(key, value);
     }
-    this._addFooter();
-    this._fragment.appendChild(this._table);
+
+    const tableDiv = DOM.div('properties');
+    tableDiv.appendChild(this._table);
+    this._fragment.appendChild(tableDiv);
+    this._createFooter();
 
     const newContent = DOM.div();
     newContent.appendChild(this._fragment);
@@ -70,12 +73,14 @@ DOM.defineCustomElement('view/property-link-table',
     if (Array.isArray(value)) {
       cell.appendChild(this._addArrayValue(value));
       return;
-    }
-    if (App.isClickable(value)) {
+    } else if (App.isClickable(value)) {
       cell.className = 'clickable';
       cell.onclick = this._showHandler;
       cell.data = value;
     }
+    if (value.isCode) {
+      cell.classList.add('code');
+    }
     new ExpandableText(cell, value.toString());
   }
 
@@ -102,21 +107,21 @@ DOM.defineCustomElement('view/property-link-table',
     this._fragment.appendChild(title);
   }
 
-  _addFooter() {
+  _createFooter() {
     if (this._object === undefined) return;
     if (!this._instanceLinkButtons) return;
-    const td = this._table.createTFoot().insertRow().insertCell();
-    td.colSpan = 2;
-    let showButton = td.appendChild(DOM.button('Show', this._showHandler));
+    const footer = DOM.div('footer');
+    let showButton = footer.appendChild(DOM.button('Show', this._showHandler));
     showButton.data = this._object;
     if (this._object.sourcePosition) {
-      let showSourcePositionButton = td.appendChild(
+      let showSourcePositionButton = footer.appendChild(
           DOM.button('Source Position', this._showSourcePositionHandler));
       showSourcePositionButton.data = this._object;
     }
-    let showRelatedButton =
-        td.appendChild(DOM.button('Show Related', this._showRelatedHandler));
+    let showRelatedButton = footer.appendChild(
+        DOM.button('Show Related', this._showRelatedHandler));
     showRelatedButton.data = this._object;
+    this._fragment.appendChild(footer);
   }
 
   _handleArrayValueSelect(event) {

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

@@ -29,7 +29,6 @@ found in the LICENSE file. -->
     max-width: 400px;
     min-height: 100px;
     max-height: 400px;
-    overflow: auto;
     box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
   }