[tools][system-analyzer] Fix Layout and Remove Scrollbars

This CL changes min/max of panel sizes for a better user
experience. Additionally, removes the scroll bars while
keeping the scroll functionality to alleviate the
cluttered view.

Bug: v8:10644

Change-Id: Ib95ed79dd58dbcd6b1932eb366f9d2177407c853
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2356346Reviewed-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@{#69415}

tools/system-analyzer/index.html

@@ -102,12 +102,15 @@ found in the LICENSE file. -->
 
     #container.loaded {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+      align-content: center;
+      grid-template-columns: repeat(auto-fit, minmax(400px, 800px));
+      grid-template-rows: repeat(auto-fit, minmax(400px, 800px));
       grid-auto-flow: dense;
     }
 
     #container.loaded>#timeline-panel {
       grid-column: span 2;
+      overflow: scroll;
     }
   </style>
   <script type="module">

tools/system-analyzer/map-panel-template.html

@@ -2,12 +2,11 @@
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
 <style>
-@import "./index.css";
+  @import "./index.css";
 
-#searchBarInput {
-  width: 200px;
-  color: black;
-}
+  #searchBarInput {
+    width: 200px;
+  }
 </style>
 <stats-panel id="stats-panel"></stats-panel>
 <div class="panel">
@@ -15,10 +14,8 @@ found in the LICENSE file. -->
   <map-transitions id="map-transitions"></map-transitions>
   <h3>Search Map by Address</h3>
   <section id="searchBar"></section>
-  <input type="search" id="searchBarInput"
-    placeholder="Search maps by address.."></input>
+  <input type="search" id="searchBarInput" placeholder="Search maps by address.."></input>
   <button id="searchBarBtn">Search</button>
 
   <map-details id="map-details"></map-details>
 </div>
-

tools/system-analyzer/map-panel/map-details-template.html

@@ -8,8 +8,11 @@ found in the LICENSE file. -->
 <style>
   #mapDetails {
     overflow-x: scroll;
-    overflow-y: scroll;
-    height: 100px;
+  }
+
+  #mapDetails::-webkit-scrollbar {
+    width: 0;
+    background-color: transparent;
   }
 </style>
 <div class="panel">

tools/system-analyzer/map-panel/map-transitions-template.html

@@ -16,6 +16,11 @@ found in the LICENSE file. -->
     width: 100%;
   }
 
+  #transitionView::-webkit-scrollbar {
+    width: 0;
+    background-color: transparent;
+  }
+
   .map {
     width: 20px;
     height: 20px;

tools/system-analyzer/timeline/timeline-track-template.html

@@ -15,6 +15,11 @@ found in the LICENSE file. -->
     background-color: var(--timeline-background-color);
   }
 
+  #timeline::-webkit-scrollbar {
+    width: 0;
+    background-color: transparent;
+  }
+
   #timelineLabel {
     transform: rotate(90deg);
     transform-origin: left bottom 0;