[tools] Hide System-analyzer timeline-tracks

- Allow hiding individual timeline-tracks to clear up screen space.
- Auto-hide timeline-tracks when there are no entries

Bug: v8:10644
Change-Id: Ibde37242fa1fcb827ca176ee7576a23715c45bda
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2584954
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#71739}

tools/system-analyzer/index.css

@@ -230,4 +230,31 @@ button:hover {
 }
 .legend h3 {
   margin-top: 10px;
+}
+
+
+.panelCloserLabel {
+  float: left;
+  cursor: zoom-out;
+  margin: 0 10px 0 0;
+  transition: transform 0.2s ease-out;
+  user-select: none;
+}
+.panelCloserInput {
+  display: none;
+}
+.panel .panelCloserInput:checked ~ .panelCloserLabel,
+.panelCloserInput:checked ~ .panelCloserLabel {
+  cursor: zoom-in;
+  transform: rotate(-90deg);
+  display: inherit;
+}
+.panel .panelCloserInput:checked ~ h2 {
+  display: inherit;
+  border-radius: 7px;
+  margin-bottom: -20px;
+  padding-bottom: 10px;
+}
+.panelCloserInput:checked ~ * {
+  display: none;
 }

tools/system-analyzer/view/list-panel-template.html

@@ -31,6 +31,7 @@ found in the LICENSE file. -->
     cursor: -webkit-zoom-in;
     color: rgba(var(--border-color), 1);
   }
+
   .toggle::before {
     content: "▶";
   }
@@ -82,7 +83,10 @@ found in the LICENSE file. -->
     top: 40px;
   }
 </style>
+
 <div class="panel">
+  <input type="checkbox" id="closer" class="panelCloserInput">
+  <label class="panelCloserLabel" for="closer">▼</label>
   <h2 id="title"></h2>
   <div class="selection">
     <input type="radio" id="show-all" name="selectionType" value="all">

tools/system-analyzer/view/timeline-panel-template.html

@@ -16,7 +16,7 @@ found in the LICENSE file. -->
       border-radius: 0 0 0 7px;
       height: calc(100% - 34px);
       width: 30px;
-      background-color: rgba(var(--border-color),0.2);
+      background-color: var(--border-color);
     }
   </style>
 </head>

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

@@ -63,19 +63,30 @@ found in the LICENSE file. -->
     font-size: 10px;
   }
 
-  #title {
+  .title {
     position: relative;
     float: left;
     width: 20px;
     writing-mode: vertical-rl;
     text-orientation: mixed;
-    margin: 0 0 0 -10px;
+    margin: 20px 0 0 -10px;
     padding: 5px 5px 0px 5px;
     overflow: hidden;
     border-radius: 7px;
     font-weight: 400;
   }
 
+  .panelCloserInput:checked ~ h3 { 
+    display: inherit;
+    flex: 1;
+    writing-mode: unset;
+    text-orientation: unset;
+    background-color: var(--border-color);
+    border-radius: 0px;
+    padding: 5px;
+    margin: 0 -10px 0 20px;
+  }
+
   .timelineLegend {
     position: relative;
     float: right;
@@ -140,28 +151,55 @@ found in the LICENSE file. -->
     height: 100%;
     position: absolute;
   }
+
+
+  .content {
+    display: flex;
+    position: relative;
+  }
+  .panelCloserLabel {
+    position: absolute;
+    top: 5px;
+    left: 0px;
+  }
+  .title {
+    flex: initial;
+  }
+  #timeline {
+    flex: 1;
+  }
+  .legend {
+    flex: initial;
+  }
+
 </style>
 
-<h3 id="title"></h3>
-<div class="timelineLegend">
-  <table id="legendTable">
-    <thead>
-      <tr>
-        <td>Type</td>
-        <td>Count</td>
-        <td>Percent</td>
-      </tr>
-    </thead>
-    <tbody></tbody>
-  </table>
-</div>
-<div id="timeline">
-  <div id="selection">
-    <div id="leftHandle"></div>
-    <div id="selectionBackground"></div>
-    <div id="rightHandle"></div>
+<div class="content">
+  <input type="checkbox" id="closer" class="panelCloserInput">
+  <label class="panelCloserLabel" for="closer">▼</label>
+  <h3 class="title" id="title"></h3>
+
+  <div id="timeline">
+    <div id="selection">
+      <div id="leftHandle"></div>
+      <div id="selectionBackground"></div>
+      <div id="rightHandle"></div>
+    </div>
+    <div id="timelineLabel">Frequency</div>
+    <div id="timelineChunks"></div>
+    <canvas id="timelineCanvas"></canvas>
+  </div>
+
+  <div class="timelineLegend">
+    <table id="legendTable">
+      <thead>
+        <tr>
+          <td>Type</td>
+          <td>Count</td>
+          <td>Percent</td>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
   </div>
-  <div id="timelineLabel">Frequency</div>
-  <div id="timelineChunks"></div>
-  <canvas id="timelineCanvas"></canvas>
 </div>

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

@@ -51,6 +51,7 @@ DOM.defineCustomElement('view/timeline/timeline-track',
   set data(timeline) {
     this._timeline = timeline;
     this._legend.timeline = timeline;
+    this.$('.content').style.display = timeline.isEmpty() ? 'none' : 'relative';
     this._updateChunks();
   }