[tools][system-analyzer] Maximise space use

This CL maximises the space use in between panels and
fixes asymmetries in the Web app to make the UI panel
views more compact and increase accessibility of the
web app for different screen size.

Bug: v8:10644

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

tools/system-analyzer/index.css

-
 :root {
   --background-color: #000000;
   --surface-color: #121212;
-  --primary-color: #BB86FC;
-  --secondary-color: #03DAC6;
+  --primary-color: #bb86fc;
+  --secondary-color: #03dac6;
   --on-surface-color: #ffffff;
   --on-background-color: #f5f0f0;
   --on-primary-color: #000000;
   --on-secondary-color: #000000;
-  --default-color: #9B6EDC;
-  --error-color: #CF6679;
+  --default-color: #9b6edc;
+  --error-color: #cf6679;
   --map-background-color: #5e5454;
   --timeline-background-color: #1f1f1f;
   --red: #dc6eae;
   --green: #aedc6e;
-  --yellow: #EEFF41;
+  --yellow: #eeff41;
   --blue: #6e77dc;
   --orange: #dc9b6e;
   --violet: #d26edc;
 }
 
-
 [data-theme="light"] {
-  --background-color: #FFFFFF;
-  --surface-color: #FFFFFF;
-  --primary-color: #6200EE;
-  --secondary-color: #03DAC5;
+  --background-color: #ffffff;
+  --surface-color: #ffffff;
+  --primary-color: #6200ee;
+  --secondary-color: #03dac5;
   --on-surface-color: #000000;
   --on-background-color: #000000;
-  --on-primary-color: #FFFFFF;
+  --on-primary-color: #ffffff;
   --on-secondary-color: #000000;
-  --default-color: #3700B3;
-  --error-color: #B00020;
+  --default-color: #3700b3;
+  --error-color: #b00020;
   --map-background-color: #5e5454;
-  --timeline-background-color: #EEEEEE;
-  --red: #B71C1C;
+  --timeline-background-color: #fdfcfc;
+  --red: #b71c1c;
   --green: #7db300;
-  --yellow: #FFFF00;
+  --yellow: #ffff00;
   --blue: #0024b3;
-  --orange: #EF6C00;
+  --orange: #ef6c00;
   --violet: #8f00b3;
 }
 
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 14px;
   color: var(--on-background-color);
-  margin-left: 5%;
-  margin-right: 5%;
+  margin-left: 2.5%;
+  margin-right: 2.5%;
   background-color: var(--background-color);
   letter-spacing: 0.5px;
 }
-h2, h4 {
-  background-color: var(--primary-color);
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+h2,
+h4 {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   transition: 0.3s;
-  color: var(--on-primary-color);
-  padding: 15px 25px;
+  color: var(--on-surface-color);
+  padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
@@ -74,14 +72,13 @@ dd {
   margin: 0;
 }
 .panel {
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   transition: 0.3s;
   background-color: var(--surface-color);
   color: var(--on-surface-color);
-  padding: 30px 30px 30px 30px ;
+  padding: 10px 10px 10px 10px;
   margin: auto;
   overflow-x: scroll;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 .colorbox {
   width: 10px;
@@ -89,7 +86,7 @@ dd {
   border: 1px var(--background-color) solid;
 }
 
-.primary{
+.primary {
   background-color: var(--default-color);
 }
 
@@ -111,7 +108,7 @@ dd {
 }
 
 .orange {
-  background-color:var(--orange);
+  background-color: var(--orange);
 }
 
 .violet {
@@ -130,4 +127,4 @@ a:link {
   color: var(--secondary-color);
   background-color: transparent;
   text-decoration: none;
-}
\ No newline at end of file
+}

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

@@ -6,63 +6,75 @@ found in the LICENSE file. -->
   <link href="./index.css" rel="stylesheet">
 </head>
 <style>
-#timeline {
-  position: relative;
-  height: 300px;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  user-select: none;
-  background-color: var(--timeline-background-color);
-  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-}
-#timelineLabel {
-  transform: rotate(90deg);
-  transform-origin: left bottom 0;
-  position: absolute;
-  left: 0;
-  width: 250px;
-  text-align: center;
-  font-size: 10px;
-  opacity: 0.5;
-}
-#timelineChunks {
-  height: 250px;
-  position: absolute;
-  margin-right: 100px;
-}
-#timelineCanvas {
-  height: 250px;
-  position: relative;
-  overflow: visible;
-  pointer-events: none;
-}
-.chunk {
-  width: 6px;
-  border: 0px var(--timeline-background-color) solid;
-  border-width: 0 2px 0 2px;
-  position: absolute;
-  background-size: 100% 100%;
-  image-rendering: pixelated;
-  bottom: 0px;
-}
-.timestamp {
-  height: 250px;
-  width: 100px;
-  border-left: 1px var(--surface-color) dashed;
-  padding-left: 4px;
-  position: absolute;
-  pointer-events: none;
-  font-size: 10px;
-  opacity: 0.5;
-}
-#timelineLegend {
-  position: relative;
-  float: right;
-  text-align: center;
-}
-.timeline {
-  background-color: var(--timeline-background-color);
-}
+  #timeline {
+    position: relative;
+    height: 300px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    user-select: none;
+    background-color: var(--timeline-background-color);
+  }
+
+  #timelineLabel {
+    transform: rotate(90deg);
+    transform-origin: left bottom 0;
+    position: absolute;
+    left: 0;
+    width: 250px;
+    text-align: center;
+    font-size: 10px;
+    opacity: 0.5;
+  }
+
+  #timelineChunks {
+    height: 250px;
+    position: absolute;
+    margin-right: 100px;
+  }
+
+  #timelineCanvas {
+    height: 250px;
+    position: relative;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .chunk {
+    width: 6px;
+    border: 0px var(--timeline-background-color) solid;
+    border-width: 0 2px 0 2px;
+    position: absolute;
+    background-size: 100% 100%;
+    image-rendering: pixelated;
+    bottom: 0px;
+  }
+
+  .timestamp {
+    height: 250px;
+    width: 100px;
+    border-left: 1px var(--surface-color) dashed;
+    padding-left: 4px;
+    position: absolute;
+    pointer-events: none;
+    font-size: 10px;
+    opacity: 0.5;
+  }
+
+  #timelineLegend {
+    position: relative;
+    float: right;
+    text-align: center;
+  }
+
+  .timeline {
+    background-color: var(--timeline-background-color);
+  }
+
+  #timelineLegendContent {
+    float: right;
+    padding: 20px;
+    width: 200px;
+  }
 </style>
 <div class="timeline">
   <div id="timelineLegend">
@@ -75,4 +87,4 @@ found in the LICENSE file. -->
     <div id="timelineChunks"></div>
     <canvas id="timelineCanvas"></canvas>
   </div>
-</div>
\ No newline at end of file
+</div>