[milo] Only show timeline for LUCI builds.

As part of the build.proto refactor, the timeline code will be increasingly
specific to build.proto.  To avoid maintaining two codepaths for timeline rendering,
we only want to support one, which is to show the timeline for LUCI builds only.

Also:
split tabs related CSS from timeline.css out to tabs.css

Change-Id: Ia3bd84e52a10c3972846c90a4917a394ffcab362
Reviewed-on: https://chromium-review.googlesource.com/c/1377050
Commit-Queue: Ryan Tseng <hinoka@chromium.org>
Reviewed-by: Nodir Turakulov <nodir@chromium.org>
diff --git a/milo/frontend/appengine/static/common/css/tabs.css b/milo/frontend/appengine/static/common/css/tabs.css
new file mode 100644
index 0000000..5ffd599
--- /dev/null
+++ b/milo/frontend/appengine/static/common/css/tabs.css
@@ -0,0 +1,81 @@
+/*
+  Make sure jquery UI components don't override the font as specified
+  for body.interface. If jquery UI components proliferate to other
+  pages you may want to move this directly into default.css.
+*/
+.ui-widget {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+/* Turns off the tab widget's border. */
+#tabs.ui-widget-content {
+  border: 0px;
+}
+/*
+  TODO(dburger): these status styles could come from default.css but are
+  apparently overridden by styles from .vis-item. This could likely be
+  fixed by tweaking the style in default.css to get higher specificity.
+
+  In the following the second selector with the "a" tag
+  takes care of a specificity problem where jquery's
+  .ui-widget-content a {color: #333;} ends up winning for a tags nested in
+  a div with one of the following classes as is done on the "Results"
+  time list that gets the .ui-widget-content from being inside jquery
+  tabs on the timeline page.
+*/
+.status-Expired, .status-Expired a {
+  color: #FFFFFF;
+  background-color: #ac39ac;
+  border-color: #ACA0B3;
+}
+
+.status-Exception, .status-Exception a {
+  color: #FFFFFF;
+  background-color: #c6c;
+  border-color: #ACA0B3;
+}
+
+.status-InfraFailure, .status-InfraFailure a {
+  color: #FFFFFF;
+  background-color: #c6c;
+  border-color: #ACA0B3;
+}
+
+.status-Warning, .status-Warning a {
+  color: #FFFFFF;
+  background-color: #fa3;
+  border-color: #C29D46;
+}
+
+.status-NotRun, .status-NotRun a {
+  color: #000;
+  background-color: #ccc;
+  border-color: #ccc;
+}
+
+.status-Running, .status-Running a {
+  color: #000;
+  background-color: #fd3;
+  border-color: #C5C56D;
+}
+
+.status-Failure, .status-Cancelled {
+  color: #000;
+  background-color: #e88;
+  border-color: #A77272;
+  border-style: solid;
+}
+
+.status-Failure a, .status-Cancelled a {
+  color: #000;
+  background-color: #e88;
+  border-color: #A77272;
+}
+
+.status-Success, .status-Success a {
+  color: #000;
+  background-color: #8d4;
+  border-color: #4F8530;
+}
+
diff --git a/milo/frontend/appengine/static/common/css/timeline.css b/milo/frontend/appengine/static/common/css/timeline.css
index 86beb61..e1bc909 100644
--- a/milo/frontend/appengine/static/common/css/timeline.css
+++ b/milo/frontend/appengine/static/common/css/timeline.css
@@ -1,18 +1,3 @@
-/*
-  Make sure jquery UI components don't override the font as specified
-  for body.interface. If jquery UI components proliferate to other
-  pages you may want to move this directly into default.css.
-*/
-.ui-widget {
-  font-family: Verdana, sans-serif;
-  font-size: 10px;
-}
-
-/* Turns off the tab widget's border. */
-#tabs.ui-widget-content {
-  border: 0px;
-}
-
 /* Makes the group title take up the full width. */
 .vis-labelset .vis-label .vis-inner {
   display: block;
@@ -33,67 +18,6 @@
 }
 
 /*
-  TODO(dburger): these status styles could come from default.css but are
-  apparently overridden by styles from .vis-item. This could likely be
-  fixed by tweaking the style in default.css to get higher specificity.
-
-  In the following the second selector with the "a" tag
-  takes care of a specificity problem where jquery's
-  .ui-widget-content a {color: #333;} ends up winning for a tags nested in
-  a div with one of the following classes as is done on the "Results"
-  time list that gets the .ui-widget-content from being inside jquery
-  tabs on the timeline page.
-*/
-.status-Expired, .status-Expired a {
-  color: #FFFFFF;
-  background-color: #ac39ac;
-  border-color: #ACA0B3;
-}
-
-.status-Exception, .status-Exception a {
-  color: #FFFFFF;
-  background-color: #c6c;
-  border-color: #ACA0B3;
-}
-
-.status-InfraFailure, .status-InfraFailure a {
-  color: #FFFFFF;
-  background-color: #c6c;
-  border-color: #ACA0B3;
-}
-
-.status-Warning, .status-Warning a {
-  color: #FFFFFF;
-  background-color: #fa3;
-  border-color: #C29D46;
-}
-
-.status-NotRun, .status-NotRun a {
-  color: #000;
-  background-color: #ccc;
-  border-color: #ccc;
-}
-
-.status-Running, .status-Running a {
-  color: #000;
-  background-color: #fd3;
-  border-color: #C5C56D;
-}
-
-.status-Failure, .status-Cancelled, .status-Failure a, .status-Cancelled a {
- color: #000;
-  background-color: #e88;
-  border-color: #A77272;
-  border-style: solid;
-}
-
-.status-Success, .status-Success a {
-  color: #000;
-  background-color: #8d4;
-  border-color: #4F8530;
-}
-
-/*
   Positioned absolutely so that the timeline renders directly over it
   and does not jump when we remove this from the page.
 */
diff --git a/milo/frontend/appengine/templates/pages/build_legacy.html b/milo/frontend/appengine/templates/pages/build_legacy.html
index 4f27c04..976e5b2 100644
--- a/milo/frontend/appengine/templates/pages/build_legacy.html
+++ b/milo/frontend/appengine/templates/pages/build_legacy.html
@@ -17,11 +17,14 @@
 {{end}}
 
 {{define "head"}}
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse({{ .TimelineJSON }});
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+{{if .TimelineJSON}}
+  <link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
+  <script>
+    const timelineData = JSON.parse({{ .TimelineJSON }});
+  </script>
+{{end}}
 {{end}}
 
 {{define "interval"}}
@@ -122,12 +125,16 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        {{ if .TimelineJSON }}
+          <li><a href="#timeline-tab">Timeline</a></li>
+        {{ end }}
       </ul>
       <div id="results-tab">{{ template "results" . }}</div>
       <div id="properties-tab">{{ template "properties" . }}</div>
       <div id="changes-tab">{{ template "changes" . }}</div>
-      <div id="timeline-tab">{{ template "timeline" . }}</div>
+      {{ if .TimelineJSON }}
+        <div id="timeline-tab">{{ template "timeline" . }}</div>
+      {{ end }}
     </div>
   </div>
 {{end}}
diff --git a/milo/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html b/milo/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html
index c0c888e..cd64941 100644
--- a/milo/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html
+++ b/milo/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/green-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -60,7 +58,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -1500,11 +1498,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/buildbot.build-Debug_page-_chromium_presubmit_426944.html b/milo/frontend/expectations/buildbot.build-Debug_page-_chromium_presubmit_426944.html
index 2fa9ce6..0442838 100644
--- a/milo/frontend/expectations/buildbot.build-Debug_page-_chromium_presubmit_426944.html
+++ b/milo/frontend/expectations/buildbot.build-Debug_page-_chromium_presubmit_426944.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/green-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -66,7 +64,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -811,11 +809,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/buildbot.build-Debug_page-_gerritCL_1234.html b/milo/frontend/expectations/buildbot.build-Debug_page-_gerritCL_1234.html
index 50e438b..b5dc209 100644
--- a/milo/frontend/expectations/buildbot.build-Debug_page-_gerritCL_1234.html
+++ b/milo/frontend/expectations/buildbot.build-Debug_page-_gerritCL_1234.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/red-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -60,7 +58,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -244,11 +242,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html b/milo/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html
index 50b59dc..980fdad 100644
--- a/milo/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html
+++ b/milo/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/red-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -60,7 +58,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -221,11 +219,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html b/milo/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html
index 9714588..f8ec513 100644
--- a/milo/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html
+++ b/milo/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/red-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -60,7 +58,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -1324,11 +1322,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-Basic_successful_build.html b/milo/frontend/expectations/swarming.build-Basic_successful_build.html
index 6614c6f..332a6bd 100644
--- a/milo/frontend/expectations/swarming.build-Basic_successful_build.html
+++ b/milo/frontend/expectations/swarming.build-Basic_successful_build.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/green-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -128,11 +126,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-canceled.html b/milo/frontend/expectations/swarming.build-build-canceled.html
index 7a1a79a..3fdeb75 100644
--- a/milo/frontend/expectations/swarming.build-build-canceled.html
+++ b/milo/frontend/expectations/swarming.build-build-canceled.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/red-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -66,7 +64,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -321,11 +319,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-exception.html b/milo/frontend/expectations/swarming.build-build-exception.html
index 493d4b1..e688d04 100644
--- a/milo/frontend/expectations/swarming.build-build-exception.html
+++ b/milo/frontend/expectations/swarming.build-build-exception.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/red-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -371,11 +369,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-expired.html b/milo/frontend/expectations/swarming.build-build-expired.html
index cdfa9fd..1b4f7ca 100644
--- a/milo/frontend/expectations/swarming.build-build-expired.html
+++ b/milo/frontend/expectations/swarming.build-build-expired.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/darkpurple-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -66,7 +64,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -183,11 +181,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-finished-logdog-expired-stream.html b/milo/frontend/expectations/swarming.build-build-finished-logdog-expired-stream.html
index 28d69f4..fb965d1 100644
--- a/milo/frontend/expectations/swarming.build-build-finished-logdog-expired-stream.html
+++ b/milo/frontend/expectations/swarming.build-build-finished-logdog-expired-stream.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/purple-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -223,11 +221,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-gerrit.html b/milo/frontend/expectations/swarming.build-build-gerrit.html
index eed3857..01ec436 100644
--- a/milo/frontend/expectations/swarming.build-build-gerrit.html
+++ b/milo/frontend/expectations/swarming.build-build-gerrit.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/yellow-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -243,11 +241,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-internal.html b/milo/frontend/expectations/swarming.build-build-internal.html
index 8fed29f..3da8281 100644
--- a/milo/frontend/expectations/swarming.build-build-internal.html
+++ b/milo/frontend/expectations/swarming.build-build-internal.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/yellow-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -243,11 +241,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-link.html b/milo/frontend/expectations/swarming.build-build-link.html
index 6c81da9..1ee8a71 100644
--- a/milo/frontend/expectations/swarming.build-build-link.html
+++ b/milo/frontend/expectations/swarming.build-build-link.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/yellow-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -219,11 +217,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-nested.html b/milo/frontend/expectations/swarming.build-build-nested.html
index 1d21f4f..2fb3712 100644
--- a/milo/frontend/expectations/swarming.build-build-nested.html
+++ b/milo/frontend/expectations/swarming.build-build-nested.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/yellow-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -599,11 +597,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-patch-failure.html b/milo/frontend/expectations/swarming.build-build-patch-failure.html
index c43a8b1..0f1cda3 100644
--- a/milo/frontend/expectations/swarming.build-build-patch-failure.html
+++ b/milo/frontend/expectations/swarming.build-build-patch-failure.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/red-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -418,11 +416,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-pending-logdog.html b/milo/frontend/expectations/swarming.build-build-pending-logdog.html
index 3f1027b..2eb5042 100644
--- a/milo/frontend/expectations/swarming.build-build-pending-logdog.html
+++ b/milo/frontend/expectations/swarming.build-build-pending-logdog.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/gray-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -172,11 +170,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-pending.html b/milo/frontend/expectations/swarming.build-build-pending.html
index 70e5d88..8f20189 100644
--- a/milo/frontend/expectations/swarming.build-build-pending.html
+++ b/milo/frontend/expectations/swarming.build-build-pending.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/gray-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -148,11 +146,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html b/milo/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html
index b273012..ff03ed0 100644
--- a/milo/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html
+++ b/milo/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/gray-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -213,11 +211,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-running-logdog.html b/milo/frontend/expectations/swarming.build-build-running-logdog.html
index d92dc09..30afaa7 100644
--- a/milo/frontend/expectations/swarming.build-build-running-logdog.html
+++ b/milo/frontend/expectations/swarming.build-build-running-logdog.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/yellow-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -327,11 +325,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-running.html b/milo/frontend/expectations/swarming.build-build-running.html
index 3f5b8e9..08256d2 100644
--- a/milo/frontend/expectations/swarming.build-build-running.html
+++ b/milo/frontend/expectations/swarming.build-build-running.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/yellow-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -301,11 +299,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-timeout.html b/milo/frontend/expectations/swarming.build-build-timeout.html
index 0c2a60e..9bdc8c4 100644
--- a/milo/frontend/expectations/swarming.build-build-timeout.html
+++ b/milo/frontend/expectations/swarming.build-build-timeout.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/purple-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -66,7 +64,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -327,11 +325,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/expectations/swarming.build-build-unicode.html b/milo/frontend/expectations/swarming.build-build-unicode.html
index 0e6643a..9e2940f 100644
--- a/milo/frontend/expectations/swarming.build-build-unicode.html
+++ b/milo/frontend/expectations/swarming.build-build-unicode.html
@@ -25,11 +25,9 @@
 <link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/yellow-32.png">
 
 
-<link rel="stylesheet" href="/static/common/css/timeline.css" type="text/css">
 <script src="/static/common/js/build.js"></script>
-<script>
-  const timelineData = JSON.parse( null );
-</script>
+<link rel="stylesheet" href="/static/common/css/tabs.css" type="text/css">
+
 
 
 <body class="interface">
@@ -58,7 +56,7 @@
         <li><a href="#results-tab">Results</a></li>
         <li><a href="#properties-tab">Properties</a></li>
         <li><a href="#changes-tab">Changes</a></li>
-        <li><a href="#timeline-tab">Timeline</a></li>
+        
       </ul>
       <div id="results-tab">
   <div id="results">
@@ -301,11 +299,7 @@
     
   </div>
 </div>
-      <div id="timeline-tab">
-  <div id="timeline">
-    <div id="timeline-rendering">Rendering...</div>
-  </div>
-</div>
+      
     </div>
   </div>
 
diff --git a/milo/frontend/view_build.go b/milo/frontend/view_build.go
index 8bfc2b0..942abd2 100644
--- a/milo/frontend/view_build.go
+++ b/milo/frontend/view_build.go
@@ -31,7 +31,7 @@
 	// TODO(nodir): after switching to API v2, check that project, bucket
 	// and builder in parameters indeed match the returned build. This is
 	// relevant when the build is loaded by id.
-	return renderBuildLegacy(c, build, err)
+	return renderBuildLegacy(c, build, true, err)
 }
 
 // redirectLUCIBuild redirects to a canonical build URL
diff --git a/milo/frontend/view_build_legacy.go b/milo/frontend/view_build_legacy.go
index 5156258..5572252 100644
--- a/milo/frontend/view_build_legacy.go
+++ b/milo/frontend/view_build_legacy.go
@@ -59,7 +59,7 @@
 		return nil
 	default:
 		build, err := buildbot.GetBuild(c.Context, id)
-		return renderBuildLegacy(c, build, err)
+		return renderBuildLegacy(c, build, false, err)
 	}
 }
 
@@ -68,7 +68,7 @@
 		c.Context,
 		c.Request.FormValue("server"),
 		c.Params.ByName("id"))
-	return renderBuildLegacy(c, build, err)
+	return renderBuildLegacy(c, build, false, err)
 }
 
 func handleRawPresentationBuild(c *router.Context) error {
@@ -77,7 +77,7 @@
 		c.Params.ByName("logdog_host"),
 		types.ProjectName(c.Params.ByName("project")),
 		types.StreamPath(strings.Trim(c.Params.ByName("path"), "/")))
-	return renderBuildLegacy(c, build, err)
+	return renderBuildLegacy(c, build, false, err)
 }
 
 func getStepDisplayPrefCookie(c *router.Context) ui.StepDisplayPref {
@@ -94,7 +94,7 @@
 
 // renderBuildLegacy is a shortcut for rendering build or returning err if it is not
 // nil. Also calls build.Fix().
-func renderBuildLegacy(c *router.Context, build *ui.MiloBuildLegacy, err error) error {
+func renderBuildLegacy(c *router.Context, build *ui.MiloBuildLegacy, renderTimeline bool, err error) error {
 	if err != nil {
 		return err
 	}
@@ -102,9 +102,11 @@
 	build.StepDisplayPref = getStepDisplayPrefCookie(c)
 	build.Fix(c.Context)
 
-	timelineJSON, err := timelineData(build)
-	if err != nil {
-		return err
+	timelineJSON := ""
+	if renderTimeline {
+		if timelineJSON, err = timelineData(build); err != nil {
+			return err
+		}
 	}
 
 	templates.MustRender(c.Context, c.Writer, "pages/build_legacy.html", templates.Args{