<!DOCTYPE HTML>
<html>
<head i18n-values="dir:textdirection;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8"/>
<title>Android System Trace</title>
<style>
  html,
  body {
    height: 100%;
  }

  body {
    -webkit-flex-direction: column;
    display: -webkit-flex;
    margin: 0;
    padding: 0;
  }

  body > tr-ui-timeline-view {
    -webkit-flex: 1 1 auto;
    min-height: 0;
  }
  body > tr-ui-timeline-view:focus {
    outline: none;
  }
</style>
{{SYSTRACE_TRACE_VIEWER_HTML}}
</head>
<body>
  <tr-ui-timeline-view>
    <track-view-container id='track_view_container'></track-view-container>
  </tr-ui-timeline-view>

  <script>
  'use strict';
  var timelineViewEl;

  function onLoad() {
    timelineViewEl = document.querySelector('tr-ui-timeline-view');
    timelineViewEl.globalMode = true;

    var traceDataEls = document.body.querySelectorAll('.trace-data');
    var traces = [];
    for (var i = 0; i < traceDataEls.length; i++) {
      var traceText = traceDataEls[i].textContent;
      // Remove the leading newline.
      traceText = traceText.substring(1);
      traces.push(traceText);
    }

    var m = new tr.Model();
    var p = m.importTracesWithProgressDialog(traces, true);
    p.then(
      function() {
        timelineViewEl.model = m;
        timelineViewEl.updateDocumentFavicon();
        timelineViewEl.globalMode = true;
        timelineViewEl.viewTitle = 'Android System Trace';
      },
      function(err) {
        var overlay = new tr.ui.b.Overlay();
        overlay.textContent = tr.b.normalizeException(err).message;
        overlay.title = 'Import error';
        overlay.visible = true;
      });
  }
  window.addEventListener('load', onLoad);
  </script>