From 4206dd799d9d93e1f8e845412b348751d6fbddd8 Mon Sep 17 00:00:00 2001
From: Zeynep Cankara <zcankara@google.com>
Date: Wed, 12 Aug 2020 06:38:31 +0100
Subject: [PATCH] [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/+/2351660
Reviewed-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               |  61 ++++-----
 .../timeline/timeline-track-template.html     | 128 ++++++++++--------
 2 files changed, 99 insertions(+), 90 deletions(-)

diff --git a/tools/system-analyzer/index.css b/tools/system-analyzer/index.css
index 88ed1dbd89..0e2e4a31b5 100644
--- a/tools/system-analyzer/index.css
+++ b/tools/system-analyzer/index.css
@@ -1,62 +1,60 @@
-
 :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
+}
diff --git a/tools/system-analyzer/timeline/timeline-track-template.html b/tools/system-analyzer/timeline/timeline-track-template.html
index 9dc60704c2..900d1550ae 100644
--- a/tools/system-analyzer/timeline/timeline-track-template.html
+++ b/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>