[system-analyzer] Highlight clickable items

This CL highlights the items with clickable functionality.
It is implemented based on the received feedback from the
V8 Mobile Team.

Bug: v8:10644

Change-Id: I0489327681d485eedde59594d36083efdc216575
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2370626Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#69537}

tools/system-analyzer/ic-panel.mjs

@@ -121,7 +121,9 @@ defineCustomElement('ic-panel', (templateText) =>
         //TODO(zcankara) Create one bound method and use it everywhere
         if (entry.property === "map") {
           tr.addEventListener('click', e => this.handleMapClick(e));
+          tr.classList.add('clickable');
         } else if (entry.property == "filePosition") {
+          tr.classList.add('clickable');
           tr.addEventListener('click',
             e => this.handleFilePositionClick(e));
         }

tools/system-analyzer/index.css

@@ -132,6 +132,14 @@ button {
 .failure {
   background-color: var(--error-color);
 }
+
+.clickable:hover,
+.clickable:active {
+  background-color: var(--primary-color);
+  color: var(--on-primary-color);
+  cursor: pointer;
+}
+
 a:link {
   color: var(--secondary-color);
   background-color: transparent;

tools/system-analyzer/stats-panel.mjs

@@ -91,6 +91,7 @@ defineCustomElement(
           } else {
             row.appendChild(this.td(""));
           }
+          row.classList.add('clickable');
           row.onclick = (e) => {
             // lazily compute the stats
             let node = e.target.parentNode;
@@ -119,6 +120,7 @@ defineCustomElement(
           .forEach(([name, maps]) => {
             let row = this.tr();
             row.maps = maps;
+            row.classList.add('clickable');
             row.addEventListener("click", (e) =>
               this.dispatchEvent(
                 new SelectionEvent(

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

@@ -103,6 +103,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this.removeAllChildren(timelineLegendContent);
       let row = this.tr();
       row.entries = this.data.all;
+      row.classList.add('clickable');
       row.addEventListener('dblclick', e => this.handleEntryTypeDblClick(e));
       row.appendChild(this.td(""));
       let td = this.td("All");
@@ -114,6 +115,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       uniqueTypes.forEach((entries, type) => {
         let row = this.tr();
         row.entries = entries;
+        row.classList.add('clickable');
         row.addEventListener('dblclick', e => this.handleEntryTypeDblClick(e));
         let color = typeToColor(type);
         if (color !== null) {