<!DOCTYPE html>
<html>
  <head i18n-values="dir:textdirection;">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Kudu tracing</title>
  <template id="overlay-template">
  <style>
    overlay-mask {
      left: 0;
      padding: 8px;
      position: absolute;
      top: 0;
      z-index: 1000;
      font-family: sans-serif;
      -webkit-justify-content: center;
      background: rgba(0, 0, 0, 0.8);
      display: -webkit-flex;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
    }
    overlay-mask:focus {
      outline: none;
    }
    overlay-vertical-centering-container {
      -webkit-justify-content: center;
      -webkit-flex-direction: column;
      display: -webkit-flex;
    }
    overlay-frame {
      z-index: 1100;
      background: rgb(255, 255, 255);
      border: 1px solid #ccc;
      margin: 75px;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      min-height: 0;
    }
    title-bar {
      -webkit-align-items: center;
      -webkit-flex-direction: row;
      border-bottom: 1px solid #ccc;
      background-color: #ddd;
      display: -webkit-flex;
      padding: 5px;
      -webkit-flex: 0 0 auto;
    }
    title {
      display: inline;
      font-weight: bold;
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
    }
    close-button {
      -webkit-align-self: flex-end;
      border: 1px solid #eee;
      background-color: #999;
      font-size: 10pt;
      font-weight: bold;
      padding: 2px;
      text-align: center;
      width: 16px;
    }
    close-button:hover {
      background-color: #ddd;
      border-color: black;
      cursor: pointer;
    }
    overlay-content {
      display: -webkit-flex;
      -webkit-flex: 1 1 auto;
      -webkit-flex-direction: column;
      overflow-y: auto;
      padding: 10px;
      min-width: 300px;
      min-height: 0;
    }
    button-bar {
      -webkit-align-items: baseline;
      border-top: 1px solid #ccc;
      display: -webkit-flex;
      -webkit-flex: 0 0 auto;
      -webkit-flex-direction: row-reverse;
      padding: 4px;
    }
  </style>

  <overlay-mask>
    <overlay-vertical-centering-container>
      <overlay-frame>
        <title-bar>
          <title></title>
          <close-button>✕</close-button>
        </title-bar>
        <overlay-content>
          <content></content>
        </overlay-content>
        <button-bar></button-bar>
      </overlay-frame>
    </overlay-vertical-centering-container>
  </overlay-mask>
</template><style>
* /deep/ .labeled-checkbox {
  display: flex;
  white-space: nowrap;
}
</style><dom-module id="tr-ui-a-analysis-link">
  <template>
    <style>
    :host {
      display: inline;
      cursor: pointer;
      cursor: pointer;
      white-space: nowrap;
    }
    a {
      text-decoration: underline;
    }
    </style>
    <a href="{{href}}" on-click="onClicked_" on-mouseenter="onMouseEnter_" on-mouseleave="onMouseLeave_"><content></content></a>

  </template>
</dom-module><dom-module id="tr-ui-b-table">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      table {
        flex: 1 1 auto;
        align-self: stretch;
        border-collapse: separate;
        border-spacing: 0;
        border-width: 0;
        -webkit-user-select: initial;
      }

      tr > td {
        padding: 2px 4px 2px 4px;
        vertical-align: top;
      }

      table > tbody:focus {
        outline: none;
      }
      table > tbody:focus[selection-mode="row"] > tr[selected],
      table > tbody:focus[selection-mode="cell"] > tr > td[selected],
      table > tbody:focus > tr.empty-row > td {
        outline: 1px dotted #666666;
        outline-offset: -1px;
      }

      button.toggle-button {
        height: 15px;
        line-height: 60%;
        vertical-align: middle;
        width: 100%;
      }

      button > * {
        height: 15px;
        vertical-align: middle;
      }

      td.button-column {
        width: 30px;
      }

      table > thead > tr > td.sensitive:hover {
        background-color: #fcfcfc;
      }

      table > thead > tr > td {
        font-weight: bold;
        text-align: left;

        background-color: #eee;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #aaa;
      }

      table > tfoot {
        background-color: #eee;
        font-weight: bold;
      }

      /* Light row and cell highlight. */
      table > tbody[row-highlight-style="light"] > tr[selected],
      table > tbody[cell-highlight-style="light"] > tr > td[selected] {
        background-color: rgb(213, 236, 229);  /* light turquoise */
      }
      table > tbody[row-highlight-style="light"] >
          tr:not(.empty-row):not([selected]):hover,
      table > tbody[cell-highlight-style="light"] >
          tr:not(.empty-row):not([selected]) > td:hover {
        background-color: #f6f6f6;  /* light grey */
      }

      /* Dark row and cell highlight. */
      table > tbody[row-highlight-style="dark"] > tr[selected],
      table > tbody[cell-highlight-style="dark"] > tr > td[selected] {
        background-color: rgb(103, 199, 165);  /* turquoise */
      }
      table > tbody[row-highlight-style="dark"] >
          tr:not(.empty-row):not([selected]):hover,
      table > tbody[cell-highlight-style="dark"] >
          tr:not(.empty-row):not([selected]) > td:hover {
        background-color: #e6e6e6;  /* grey */
      }
      table > tbody[row-highlight-style="dark"] > tr:hover[selected],
      table > tbody[cell-highlight-style="dark"] > tr[selected] > td:hover {
        background-color: rgb(171, 217, 202);  /* semi-light turquoise */
      }

      table > colgroup > col[selected] {
        background-color: #e6e6e6;  /* grey */
      }

      table > tbody > tr.empty-row > td {
        color: #666;
        font-style: italic;
        text-align: center;
      }

      table > tbody.has-footer > tr:last-child > td {
        border-bottom: 1px solid #aaa;
      }

      table > tfoot > tr:first-child > td {
        border-top: 1px solid #ffffff;
      }

      :host([zebra]) table tbody tr:nth-child(even) {
        background-color: #f4f4f4;
      }

      expand-button {
        -webkit-user-select: none;
        display: inline-block;
        cursor: pointer;
        font-size: 9px;
        min-width: 8px;
        max-width: 8px;
      }

      .button-expanded {
        transform: rotate(90deg);
      }
    </style>
    <table>
      <colgroup id="cols">
      </colgroup>
      <thead id="head">
      </thead>
      <tbody id="body">
      </tbody>
      <tfoot id="foot">
      </tfoot>
    </table>
  </template>
</dom-module><dom-module id="tr-ui-b-table-header-cell">
  <template>
  <style>
    :host {
      -webkit-user-select: none;
      display: flex;
    }

    span {
      flex: 0 1 auto;
    }

    #side {
      -webkit-user-select: none;
      flex: 0 0 auto;
      padding-left: 2px;
      padding-right: 2px;
      vertical-align: top;
      font-size: 15px;
      font-family: sans-serif;
      line-height: 85%;
      margin-left: 5px;
    }

    #side.disabled {
      color: rgb(140, 140, 140);
    }

    #title:empty, #side:empty {
      display: none;
    }
  </style>

    <span id="title"></span>
    <span id="side"></span>
  </template>
</dom-module><dom-module id="tr-ui-a-alert-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-v-ui-scalar-context-controller">
  <template></template>
</dom-module><dom-module id="tr-v-ui-scalar-span">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      /* Limit the sparkline's negative z-index to the span only. */
      isolation: isolate;
    }

    #sparkline {
      width: 0%;
      position: absolute;
      bottom: 0;
      display: none;
      height: 100%;
      background-color: hsla(216, 100%, 94.5%, .75);
      border-color: hsl(216, 100%, 89%);
      box-sizing: border-box;
      z-index: -1;
    }
    #sparkline.positive {
      border-right-style: solid;
      /* The border width must be kept in sync with buildSparklineStyle_(). */
      border-right-width: 1px;
    }
    #sparkline:not(.positive) {
      border-left-style: solid;
      /* The border width must be kept in sync with buildSparklineStyle_(). */
      border-left-width: 1px;
    }
    #sparkline.better {
      background-color: hsla(115, 100%, 93%, .75);
      border-color: hsl(118, 60%, 80%);
    }
    #sparkline.worse {
      background-color: hsla(0, 100%, 88%, .75);
      border-color: hsl(0, 100%, 80%);
    }

    #content.right-align {
      text-align: right;
      position: relative;
      display: block;
    }
    #content.better {
      color: green;
    }
    #content.worse {
      color: red;
    }

    #significance svg {
      display: none;
      height: 1em;
      vertical-align: text-top;
      stroke-width: 4;
      fill: rgba(0, 0, 0, 0);
    }
    #significance #insignificant {
      stroke: black;
    }
    #significance #significantly_better {
      stroke: green;
    }
    #significance #significantly_worse {
      stroke: red;
    }

    #warning {
      display: none;
      margin-left: 4px;
      height: 1em;
      vertical-align: text-top;
      stroke-width: 0;
    }
    #warning path {
      fill: rgb(255, 185, 185);
    }
    #warning rect {
      fill: red;
    }
    </style>

    <span id="sparkline"></span>

    <span id="content"></span>

    <span id="significance">
      
      <svg id="insignificant" viewBox="0 0 128 128">
        <circle cx="64" cy="64" r="60"></circle>
        <circle cx="44" cy="44" r="4"></circle>
        <circle cx="84" cy="44" r="4"></circle>
        <line x1="36" x2="92" y1="80" y2="80"></line>
      </svg>

      
      <svg id="significantly_better" viewBox="0 0 128 128">
        <circle cx="64" cy="64" r="60"></circle>
        <circle cx="44" cy="44" r="4"></circle>
        <circle cx="84" cy="44" r="4"></circle>
        <path d="M 28 64 Q 64 128 100 64"></path>
      </svg>

      
      <svg id="significantly_worse" viewBox="0 0 128 128">
        <circle cx="64" cy="64" r="60"></circle>
        <circle cx="44" cy="44" r="4"></circle>
        <circle cx="84" cy="44" r="4"></circle>
        <path d="M 36 96 Q 64 48 92 96"></path>
      </svg>
    </span>

    <svg id="warning" viewBox="0 0 128 128">
      <path d="M 64 0 L 128 128 L 0 128 L 64 0"></path>
      <rect height="84" width="8" x="60" y="0"></rect>
      <rect height="24" width="8" x="60" y="100"></rect>
    </svg>
  </template>
</dom-module><dom-module id="tr-ui-b-tab-view">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #selection_description, #tabs {
        font-size: 12px;
      }

      #selection_description {
        display: inline-block;
        font-weight: bold;
        margin: 9px 0px 4px 20px;
      }

      #tabs {
        flex: 0 0 auto;
        border-top: 1px solid #8e8e8e;
        border-bottom: 1px solid #8e8e8e;
        background-color: #ececec;
        overflow: hidden;
        margin: 0;
      }

      #tabs input[type=radio] {
        display: none;
      }

      #tabs tab label {
        cursor: pointer;
        display: inline-block;
        border: 1px solid #ececec;
        margin: 5px 0px 0px 15px;
        padding: 3px 10px 3px 10px;
      }

      #tabs tab label span {
        font-weight: bold;
      }

      #tabs:focus input[type=radio]:checked ~ label {
        outline: dotted 1px #8e8e8e;
        outline-offset: -2px;
      }

      #tabs input[type=radio]:checked ~ label {
        background-color: white;
        border: 1px solid #8e8e8e;
        border-bottom: 1px solid white;
      }

      #subView {
        flex: 1 1 auto;
        overflow: auto;
      }
    </style>
    <div hidden="[[tabsHidden]]" id="tabs">
      <label id="selection_description">[[label_]]</label>
      <template is="dom-repeat" items="[[subViews_]]">
        <tab>
          <input checked$="[[isChecked_(item)]]" id$="[[computeRadioId_(item)]]" name="tabs" on-change="onTabChanged_" type="radio"/>
          <label for$="[[computeRadioId_(item)]]">
            <template if="[[item.tabIcon]]" is="dom-if">
              <span style$="[[item.tabIcon.style]]">[[item.tabIcon.text]]</span>
            </template>
            [[item.tabLabel]]
          </label>
        </tab>
      </template>
    </div>
    <div id="subView"></div>
    <content>
    </content>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-breakdown-view">
  <template>
    <tr-ui-b-tab-view id="tabs"></tr-ui-b-tab-view>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-breakdown-view-tab">
  <template>
    <tr-v-ui-scalar-context-controller></tr-v-ui-scalar-context-controller>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-path-view">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }
    </style>
    <tr-v-ui-scalar-context-controller></tr-v-ui-scalar-context-controller>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-b-drag-handle">
  <template>
    <style>
    :host {
      -webkit-user-select: none;
      box-sizing: border-box;
      display: block;
    }

    :host(.horizontal-drag-handle) {
      background-image: -webkit-gradient(linear,
                                         0 0, 0 100%,
                                         from(#E5E5E5),
                                         to(#D1D1D1));
      border-bottom: 1px solid #8e8e8e;
      border-top: 1px solid white;
      cursor: ns-resize;
      flex: 0 0 auto;
      height: 7px;
      position: relative;
    }

    :host(.vertical-drag-handle) {
      background-image: -webkit-gradient(linear,
                                         0 0, 100% 0,
                                         from(#E5E5E5),
                                         to(#D1D1D1));
      border-left: 1px solid white;
      border-right: 1px solid #8e8e8e;
      cursor: ew-resize;
      flex: 0 0 auto;
      position: relative;
      width: 7px;
    }
    </style>
    <div></div>
  </template>
</dom-module><dom-module id="tr-ui-b-info-bar">
  <template>
    <style>
    :host {
      align-items: center;
      flex: 0 0 auto;
      background-color: rgb(252, 235, 162);
      border-bottom: 1px solid #A3A3A3;
      border-left: 1px solid white;
      border-right: 1px solid #A3A3A3;
      border-top: 1px solid white;
      display: flex;
      height: 26px;
      padding: 0 3px 0 3px;
    }

    :host(.info-bar-hidden) {
      display: none;
    }

    #message { flex: 1 1 auto; }
    </style>

    <span id="message"></span>
    <span id="buttons"></span>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #header {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;
      }

      #label {
        flex: 1 1 auto;
        padding: 8px;
        font-size: 15px;
        font-weight: bold;
      }

      #view_mode_container {
        display: none;
        flex: 0 0 auto;
        padding: 5px;
        font-size: 15px;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #split_view {
        display: none;  /* Hide until memory allocator dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        flex-direction: row;
      }

      #path_view {
        width: 50%;
      }

      #breakdown_view {
        flex: 1 1 auto;
        width: 0;
      }

      #path_view, #breakdown_view {
        overflow-x: auto;  /* Show scrollbar if necessary. */
      }
    </style>
    <div id="header">
      <div id="label">Heap details</div>
      <div id="view_mode_container">
        <span>View mode:</span>
        
      </div>
    </div>
    <div id="contents">
      <tr-ui-b-info-bar class="info-bar-hidden" id="info_bar">
      </tr-ui-b-info-bar>

      <div id="info_text">No heap dump selected</div>

      <div id="split_view">
        <tr-ui-a-memory-dump-heap-details-path-view id="path_view">
        </tr-ui-a-memory-dump-heap-details-path-view>
        <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>
        <tr-ui-a-memory-dump-heap-details-breakdown-view id="breakdown_view">
        </tr-ui-a-memory-dump-heap-details-breakdown-view>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-allocator-details-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #label {
        flex: 0 0 auto;
        padding: 8px;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;

        font-size:  15px;
        font-weight: bold;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #table {
        display: none;  /* Hide until memory allocator dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }
    </style>
    <div id="label">Component details</div>
    <div id="contents">
      <div id="info_text">No memory allocator dump selected</div>
      <tr-ui-b-table id="table"></tr-ui-b-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-vm-regions-details-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #label {
        flex: 0 0 auto;
        padding: 8px;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;

        font-size:  15px;
        font-weight: bold;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #table {
        display: none;  /* Hide until memory dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }
    </style>
    <div id="label">Memory maps</div>
    <div id="contents">
      <div id="info_text">No memory maps selected</div>
      <tr-ui-b-table id="table"></tr-ui-b-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-b-color-legend">
  <template>
    <style>
    :host {
      display: inline-block;
    }

    #square {
      font-size: 150%;  /* Make the square bigger. */
      line-height: 0%;  /* Prevent the square from increasing legend height. */
    }
    </style>
    <span id="square"></span>
    <span id="label"></span>
  </template>
</dom-module><dom-module id="tr-ui-b-view-specific-brushing-state">
  <template></template>
</dom-module><dom-module id="tr-ui-a-memory-dump-overview-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #label {
        flex: 0 0 auto;
        padding: 8px;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;

        font-size:  15px;
        font-weight: bold;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
        overflow: auto;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #table {
        display: none;  /* Hide until memory dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }
    </style>
    <tr-ui-b-view-specific-brushing-state id="state" view-id="analysis.memory_dump_overview_pane">
    </tr-ui-b-view-specific-brushing-state>
    <div id="label">Overview</div>
    <div id="contents">
      <div id="info_text">No memory memory dumps selected</div>
      <tr-ui-b-table id="table"></tr-ui-b-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-header-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: row;
        align-items: center;

        background-color: #d0d0d0;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;
      }

      #label {
        flex: 1 1 auto;
        padding: 6px;
        font-size: 15px;
      }

      #aggregation_mode_container {
        display: none;
        flex: 0 0 auto;
        padding: 5px;
        font-size: 15px;
      }
    </style>
    
    <div id="label"></div>
    <div id="aggregation_mode_container">
      <span>Metric aggregation:</span>
      
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-stacked-pane-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }

    #pane_container > * {
      flex: 0 0 auto;
    }
    </style>
    <div id="pane_container">
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-container-memory-dump-sub-view">
  <template>
    <style>
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-counter-sample-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-event-summary-table">
  <template>
    <style>
    :host {
      display: flex;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
    
  </template>
</dom-module><dom-module id="tr-ui-a-selection-summary-table">
  <template>
    <style>
    :host {
      display: flex;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
    
  </template>
</dom-module><dom-module id="tr-ui-b-radio-picker">
  <template>
    <style>
    :host([vertical]) #container {
      flex-direction: column;
    }
    :host(:not[vertical]) #container {
      flex-direction: row;
    }
    #container {
      display: flex;
    }
    #container > div {
      padding-left: 1em;
      padding-bottom: 0.5em;
    }
    </style>
    <div id="container"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-event-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      overflow: auto;
    }
    #content {
      display: flex;
      flex-direction: column;
      flex: 0 1 auto;
      align-self: stretch;
    }
    #content > * {
      flex: 0 0 auto;
      align-self: stretch;
    }
    #histogramContainer {
      display: flex;
    }

    tr-ui-a-multi-event-summary-table {
      border-bottom: 1px solid #aaa;
    }

    tr-ui-a-selection-summary-table  {
      margin-top: 1.25em;
      border-top: 1px solid #aaa;
      background-color: #eee;
      font-weight: bold;
      margin-bottom: 1.25em;
      border-bottom: 1px solid #aaa;
    }
    </style>
    <div id="content">
      <tr-ui-a-multi-event-summary-table id="eventSummaryTable">
      </tr-ui-a-multi-event-summary-table>
      <tr-ui-a-selection-summary-table id="selectionSummaryTable">
      </tr-ui-a-selection-summary-table>
      <tr-ui-b-radio-picker id="radioPicker">
      </tr-ui-b-radio-picker>
      <div id="histogramContainer">
        <tr-v-ui-histogram-span id="histogramSpan">
        </tr-v-ui-histogram-span>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-related-events">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-async-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #container {
      display: flex;
      flex: 1 1 auto;
    }
    #events {
      margin-left: 8px;
      flex: 0 1 200px;
    }
    </style>
    <div id="container">
      <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
      <div id="events">
        <tr-ui-a-related-events id="relatedEvents"></tr-ui-a-related-events>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-cpu-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #content {
      flex: 1 1 auto;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-flow-event-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-instant-event-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-object-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="content"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-b-chart-legend-key">
  <template>
    <style>
      #checkbox {
        margin: 0;
        visibility: hidden;
        vertical-align: text-top;
      }
      #label, #link {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
      }
    </style>

    <input checked="" id="checkbox" type="checkbox"/>
    <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
    <label id="label"></label>
  </template>
</dom-module><style>
  * /deep/ .chart-base #title {
    font-size: 16pt;
  }

  * /deep/ .chart-base {
    -webkit-user-select: none;
    cursor: default;
  }

  * /deep/ .chart-base .axis path,
  * /deep/ .chart-base .axis line {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #000;
  }

  * /deep/ .chart-base .legend body {
    margin: 0;
  }
</style><template id="chart-base-template">
  <svg> 
    <g id="chart-area" xmlns="http://www.w3.org/2000/svg">
      <g class="x axis"></g>
      <g class="y axis"></g>
      <text id="title"></text>
    </g>
  </svg>
</template><style>
  * /deep/ .chart-base-2d.updating-brushing-state #brushes > * {
    fill: rgb(103, 199, 165)
  }

  * /deep/ .chart-base-2d #brushes {
    fill: rgb(213, 236, 229)
  }
</style><style>
* /deep/ .line-chart .line{fill:none;stroke-width:1.5px}* /deep/ .line-chart #brushes>rect{fill:rgb(192,192,192)}
</style><dom-module id="tr-ui-a-frame-power-usage-chart">
  <template>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-power-sample-summary-table">
  <template>
    <style>
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-power-sample-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #tables {
      display: flex;
      flex-direction: column;
      width: 50%;
    }
    #chart {
      width: 50%;
    }
    </style>
    <div id="tables">
      <tr-ui-a-power-sample-summary-table id="summaryTable">
      </tr-ui-a-power-sample-summary-table>
    </div>
    <tr-ui-a-frame-power-usage-chart id="chart">
    </tr-ui-a-frame-power-usage-chart>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-sample-sub-view">
  <template>
    <style>
    :host { display: block; }
    #control {
      background-color: #e6e6e6;
      background-image: -webkit-gradient(linear, 0 0, 0 100%,
                                         from(#E5E5E5), to(#D1D1D1));
      flex: 0 0 auto;
      overflow-x: auto;
    }
    #control::-webkit-scrollbar { height: 0px; }
    #control {
      font-size: 12px;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      margin: 1px;
      margin-right: 2px;
    }
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <div id="control">
      Sample View Option
    </div>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-thread-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #content {
      display: flex;
      flex: 1 1 auto;
    }
    #content > tr-ui-a-related-events {
      margin-left: 8px;
      flex: 0 1 200px;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-thread-time-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #content {
      flex: 1 1 auto;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-user-expectation-related-samples-table">
  <template>
    <style>
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-user-expectation-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex: 1 1 auto;
    }
    #events {
      margin-left: 8px;
      flex: 0 1 200px;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="realView"></tr-ui-a-multi-event-sub-view>
    <div id="events">
      <tr-ui-a-user-expectation-related-samples-table id="relatedSamples"></tr-ui-a-user-expectation-related-samples-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-generic-object-view">
  <template>
    <style>
    :host {
      display: block;
      font-family: monospace;
    }
    </style>
    <div id="content">
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-generic-object-view-with-label">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
  </template>
</dom-module><dom-module id="tr-ui-a-stack-frame">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-event-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-async-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display:flex;
      flex-direction: column;
    }
    </style>
    <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
    <div id="events">
      <tr-ui-a-related-events id="relatedEvents"></tr-ui-a-related-events>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-cpu-slice-sub-view">
  <template>
    <style>
    table {
      border-collapse: collapse;
      border-width: 0;
      margin-bottom: 25px;
      width: 100%;
    }

    table tr > td:first-child {
      padding-left: 2px;
    }

    table tr > td {
      padding: 2px 4px 2px 4px;
      vertical-align: text-top;
      width: 150px;
    }

    table td td {
      padding: 0 0 0 0;
      width: auto;
    }
    tr {
      vertical-align: top;
    }

    tr:nth-child(2n+0) {
      background-color: #e2e2e2;
    }
    </style>
    <table>
      <tbody><tr>
        <td>Running process:</td><td id="process-name"></td>
      </tr>
      <tr>
        <td>Running thread:</td><td id="thread-name"></td>
      </tr>
      <tr>
        <td>Start:</td>
        <td>
          <tr-v-ui-scalar-span id="start">
          </tr-v-ui-scalar-span>
        </td>
      </tr>
      <tr>
        <td>Duration:</td>
        <td>
          <tr-v-ui-scalar-span id="duration">
          </tr-v-ui-scalar-span>
        </td>
      </tr>
      <tr>
        <td>Active slices:</td><td id="running-thread"></td>
      </tr>
      <tr>
        <td>Args:</td>
        <td>
          <tr-ui-a-generic-object-view id="args">
          </tr-ui-a-generic-object-view>
        </td>
      </tr>
    </tbody></table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-flow-event-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
    <tr-ui-a-single-event-sub-view id="singleEventSubView">
    </tr-ui-a-single-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-single-frame-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #asv {
      flex: 0 0 auto;
      align-self: stretch;
    }
    </style>
    <tr-ui-a-alert-sub-view id="asv">
    </tr-ui-a-alert-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-single-instant-event-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-object-instance-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }

    #snapshots > * {
      display: block;
    }

    :host {
      overflow: auto;
      display: block;
    }

    * {
      -webkit-user-select: text;
    }

    .title {
      border-bottom: 1px solid rgb(128, 128, 128);
      font-size: 110%;
      font-weight: bold;
    }

    td, th {
      font-family: monospace;
      vertical-align: top;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-object-snapshot-sub-view">
  <template>
    <style>
    #args {
      white-space: pre;
    }

    :host {
      overflow: auto;
      display: flex;
    }

    ::content * {
      -webkit-user-select: text;
    }

    ::content .title {
      border-bottom: 1px solid rgb(128, 128, 128);
      font-size: 110%;
      font-weight: bold;
    }

    ::content td, th {
      font-family: monospace;
      vertical-align: top;
    }
    </style>
    <content></content>
  </template>
</dom-module><dom-module id="tr-ui-a-power-sample-table">
  <template>
    <style>
    :host {
      display: flex;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-power-sample-sub-view">
  <template>
    <style>
    :host { display: block; }
    </style>
    <tr-ui-a-power-sample-table id="samplesTable">
    </tr-ui-a-power-sample-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-sample-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="content"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-thread-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display: flex;
      flex-direction: column;
    }

    </style>
    <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
    <div id="events">
      <tr-ui-a-related-events id="relatedEvents">
      </tr-ui-a-related-events>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-thread-time-slice-sub-view">
  <template>
    <style>
    table {
      border-collapse: collapse;
      border-width: 0;
      margin-bottom: 25px;
      width: 100%;
    }

    table tr > td:first-child {
      padding-left: 2px;
    }

    table tr > td {
      padding: 2px 4px 2px 4px;
      vertical-align: text-top;
      width: 150px;
    }

    table td td {
      padding: 0 0 0 0;
      width: auto;
    }
    tr {
      vertical-align: top;
    }

    tr:nth-child(2n+0) {
      background-color: #e2e2e2;
    }
    </style>
    <table>
      <tbody><tr>
        <td>Running process:</td><td id="process-name"></td>
      </tr>
      <tr>
        <td>Running thread:</td><td id="thread-name"></td>
      </tr>
      <tr>
        <td>State:</td>
        <td><b><span id="state"></span></b></td>
      </tr>
      <tr>
        <td>Start:</td>
        <td>
          <tr-v-ui-scalar-span id="start">
          </tr-v-ui-scalar-span>
        </td>
      </tr>
      <tr>
        <td>Duration:</td>
        <td>
          <tr-v-ui-scalar-span id="duration">
          </tr-v-ui-scalar-span>
        </td>
      </tr>

      <tr>
        <td>On CPU:</td><td id="on-cpu"></td>
      </tr>

      <tr>
        <td>Running instead:</td><td id="running-instead"></td>
      </tr>

      <tr>
        <td>Args:</td><td id="args"></td>
      </tr>
    </tbody></table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-user-expectation-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display: flex;
      flex-direction: column;
    }
    </style>
    <tr-ui-a-single-event-sub-view id="realView"></tr-ui-a-single-event-sub-view>
    <div id="events">
      <tr-ui-a-user-expectation-related-samples-table id="relatedSamples"></tr-ui-a-user-expectation-related-samples-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-analysis-view">
  <template>
    <style>
      :host {
        background-color: white;
        display: flex;
        flex-direction: column;
        height: 275px;
        overflow: auto;
      }

      :host(.tall-mode) {
        height: 525px;
      }
    </style>
    <content></content>
  </template>
</dom-module><dom-module id="tr-ui-b-dropdown">
  <template>
    <style>
    :host {
      position: relative;
      display: flex;
    }
    #outer {
      display: flex;
      flex: 0 0 auto;
      padding: 1px 4px 1px 4px;
      -webkit-user-select: none;
      cursor: default;
    }

    #state {
      display: flex;
      flex: 0 0 auto;
      margin-left: 2px;
      margin-right: 0px;
      flex: 0 0 auto;
    }

    #icon {
      display: flex;
      flex: 0 0 auto;
      flex: 0 0 auto;
    }
    dialog {
      position: absolute;
      padding: 0;
      border: 0;
      margin: 0;
    }
    dialog::backdrop {
      background: rgba(0,0,0,.05);
    }

    #dialog-frame {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      padding: 6px;
      border: 1px solid black;
      -webkit-user-select: none;
      cursor: default;
    }
    </style>
    <tr-ui-b-toolbar-button id="outer" on-click="onOuterClick_" on-keydown="onOuterKeyDown_">
      <div id="icon">⚙</div>
      <div id="state">▾</div>
    </tr-ui-b-toolbar-button>
    <dialog id="dialog" on-cancel="onDialogCancel_" on-click="onDialogClick_">
      <div id="dialog-frame">
        <content></content>
      </div>
    </dialog>
  </template>
</dom-module><dom-module id="tv-ui-b-hotkey-controller">
  <template>
    <div></div>
  </template>
</dom-module><dom-module id="tr-ui-b-info-bar-group">
  <template>
    <style>
    :host {
      flex: 0 0 auto;
      flex-direction: column;
      display: flex;
    }
    </style>
    <div id="messages"></div>
  </template>
</dom-module><dom-module id="tr-ui-b-toolbar-button">
  <template>
    <style>
    :host {
      display: flex;
      background-color: #f8f8f8;
      border: 1px solid rgba(0, 0, 0, 0.5);
      color: rgba(0,0,0,0.8);
      justify-content: center;
      align-self: stretch;
      min-width: 23px;
    }

    :host(:hover) {
      background-color: rgba(255, 255, 255, 1.0);
      border-color: rgba(0, 0, 0, 0.8);
      box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
      color: rgba(0, 0, 0, 1);
    }

    #aligner {
      display: flex;
      flex: 0 0 auto;
      align-self: center;
    }
    </style>
    <div id="aligner">
      <content></content>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-b-mouse-mode-icon">
  <template>
    <style>
    :host {
      display: block;
      background-image: url(data:image/png;base64,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);
      width: 27px;
      height: 30px;
    }
    :host.active {
      cursor: auto;
    }
    </style>
  </template>
</dom-module><dom-module id="tr-ui-b-mouse-mode-selector">
  <template>
    <style>
    :host {

      -webkit-user-drag: element;
      -webkit-user-select: none;

      background: #DDD;
      border: 1px solid #BBB;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      left: calc(100% - 120px);
      position: absolute;
      top: 100px;
      user-select: none;
      width: 29px;
      z-index: 20;
    }

    .drag-handle {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAChCAYAAACbBNzvAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA3LzE2LzEzRNEKUwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAA9aSURBVHic7V1rTFvl//+UrgUmZWMpbLa6cLErwpYxkqLGkjAG88WSbmumGUllvlmAJctMRtybvlHrLXiJUekMIZuYSCL5gS+EuLIXGEGjqCsllCEW6xQECgzWG7S05/+C/zkp9LTn0gsL6ych9JzznOdzPj19Luf5PN/nCN59913ixRdfRFdXFxLx/2GDgCAIYmpqCoWFhUjE/4cNae+99x4AIFH/Hzak7nDqDu+wOyyw2WzEdl9EMpG23ReQbKQE73Q8coJ3bfcFWK1W/Pbbb/D7/UhLi/37DwaDEIvFKC8vR0lJSdjxbRVstVoxPDyMxx9/HAUFBcjMzIRAIOCdXzAYhNvtht1ux/DwMACEid5WwSMjI3jyySdRXFwMsVgMoVAYk2CCIJCZmYns7GyMjo5iZGQkPoKXl5exd+9e3hdGIhgMIj8/H5mZmRCJRIyCyQ5NJBAEgUAgAKFQiIKCAiwsLISl4VxoHA4H+vv74Xa7uZ4aBqFQiOzsbIhEIojFYojFYohEItq/8fFxXLlyBUtLSxHThOaxZ88eCIXC2AWPj48DAH799deYBaelpUEoFLL6++qrrwAAH3zwAav0YrGYthLkJHh6ehpzc3MAgPn5eUxPT8csWiAQMJbboaEhmM1mAIDFYsHQ0BDvPDkJtlgsYdt+v59LFrxw/fr1sG2Xy8UrL06C6+vrw7bFYjEvYi747rvvwrYlEgmvvDjV0g6HI+p2ohBP3qh32OFwoLe3l1VGvb29sNvtvC8kFCMjI9DpdKzS6nQ6mEwm1nnTPg/7/X6MjY1hcnKS/VX+P/bu3YuysjLk5uYypv36669x8uRJZGRkQCQSwev1oqOjAz09PZx5CwsLcenSJRw+fBh+vx+rq6swmUx46aWXNqWjvcMDAwO8xAIbnZKBgQFeNXhzczMvscBGp6S5uRk//vhj1HS0grVaLYqLi3kRy+Vy1NXVRe0RRcKNGzeg0Wh48apUKnR1daG6ujpqOtpKy+VyQa1Wo6SkBLdv38aFCxeoY5988gn1+fLly9TnL774ApWVlXjiiSfgdDqxtrbG+aJ9Ph/0ej3OnDkDvV6PW7duUceOHDlCfR4dHaU+v/DCC7h27RrUajWcTidWV1ejctAKJggCKysryMzMhE6nw+zsLO3Joft1Oh0ePHiApaUlduqi8BYVFaGvr48Vb19fHyfeqM2Sz+dj3QTEs4lKJC+njsfWJoptkxUrtjZRbJssOnASXFtbG3U7UXjrrbeibnMBJ8FZWVkoKysDABQUFCArK4s3MRcoFArqrlZXV0OhUPDOi5Ngn8+Hw4cPQyqV4tlnn4XP5+NNTIIgmH0An8+HV155BUqlEq+++ior3kAgQLuf84jH2toajh8/jvX1da6n0sLj8SAjI4MxHUEQ+PTTT1nlSRAEHjx4QHtsW8e0RCIR7HY79uzZE/GOcEUgEEAgEMDff/8NkUgUdnxbBR85cgRmsxkCgQD5+fkRh2XYIhAI4P79+5iamoLD4cCxY8fC0myr4KeeegoCgQBWqxVzc3NIS0uLedQyGAxi165dKC8vR1FRUVialHu405ESvNPxyAlOuYfJRMo9fFjdw3iBq3vIBDbu4bYK3uoextKtJEH2yWNyD8nyEG8wuYcffvgha3cxru6h3W5Hf39/QoyzaE6fyWRCQ0MDZ+MsLu7h8vIyent7sby8zIk8VkxNTUGn08Fms8UlP04Nn9/vR39/f9w8JLZwu91obGzk5CFFAq+Wfnh4mDKok4mWlha0trbGlAfvrs3k5CQGBgaSYoiHoqenB1evXk2OIb4VDocDJpMp6eXaYrGgsbGRV7mOufPq8XgwMDCQ9HI9NzeHq1evci7XvDseUqkUWq0W6enpCAaDcDqd8Hq9fLNjDaVSiRs3bkAikfDi5XSHxWIxampqAAALCwsYGhrC7Ows5ufnEypWIpHAYDAAACYmJnD9+nXevJwEnzp1CjKZDBUVFQCAsbGxpJTfjz76CFVVVWhqagIAdHR08G6XWQuuqanB7t274fV6UVpaiuzsbAAbTzyJhMFggEKhgNfrRX19PWQyGQDAaDTyyo+V4JqaGshkMsricLlcOH78OICNCWp8p0cwwWAwoKqqahPvG2+8AWDji+7u7uacJyvBMpksrKxkZWVR0yLGxsY4E7NBVVVVGK9CoaCmRXR0dHDOk5VguorB5/OhoqICYrE4YZ2PSLxXrlyBRCLhNcE1pufh1dVVXLx4EWlpaRGnJzCBjXtId87g4GBU3ri5h1uJ5+fnY8mCtXvIhTflHoYg5R4mEyn3MAl45KyWlOCdjkdOcMo9TCZS7mHKPeSGhLmH5LBOrAGXXN1DcliHrgdFgsk95CzYbrfDbDbD7/ejrKwstpmtNO5hJJhMJrS2tsLtdqOpqQlarTZi2mjuIWvBfr8fZrN50/iz2WzG9PQ0nn/+edonEzZgij10uVwwGo2bxp+NRiOGhobw+uuv005hjtk9JENz6AbbyWCuRESp2Ww2NDc30w62WywW6HQ6zoOIrO5wbm4uzp8/j5WVFXR2dm46VldXh3379mF5eTku86dDUVxcjK6uLthstrClqrq6unDo0CHOvKwE+/1+LC4uUqG0oZiYmIhaicQCkvfu3bthxwYGBnhVmpy6NnSD7kxxQvEA3Zo+fIsQJ8F040j379/nRcwFdF4037FwToLphkUXFxd5EXMB3chkUgQ7nc6wfT6fL+Gm+H///Re2z+Vy8TLFGSut/v5+RsPsm2++AbDR84pXLFNDQwPjelxnz54FsBFK+/nnn7PKl/EOa7VaVmHvYrE4au+HK27evMkq7F0ikeDmzZus82UU7HK5qG8yGs6ePct73gUdfD4f2tvbGdO1t7dzaocZBRMEAaFQSBnhdKipqYFQKORlm0TjzcvLo4xwOhgMBuTl5XHiZVVp+f1+yGQy2iDq4uJiyGSyhFRcfr8fVVVVtEHUGo0GVVVVnHlZ19JerxdqtRpSqZTaJ5VKoVarEzrdwev1Qq/XQ6lUUvuUSiX0ej0vXk7N0srKCjQaDbXmjUajwcrKCmfSULD5Oa6srKCtrQ0SiQQSiQRtbW2MvHFzD0MrsXhUUmzdw9BKjKmSiqt7SBBE3Conru4hOa8kWqBnyj3cgl0EQcQ0cMYWW3kIgkiKe7iVV2C1Won09PSYxLCB1+tFZmYmtb22tobt4E1LBimATaQAkiKWjveR85ZSgnc6Uu5hMpFyD1PuITekYg/ZxB52dXXFTMo2n1D38NSpU7zjDEP/yHzisnJpIsBm5dJ45rntgpONuITTJirctqWlJabjdGAUvNUEp0NouxcvtLa2MgZhmUwmzqKjCrbb7aw9HC5pmWAymVivb2kymTgFe0RslrbeNTa1rtlshkgkQn5+PusL2Iqtd42NdWM0GpGVlYWTJ08ypo14h/nGI8Uax8Q3XJbteREFV1ZW8iLmex6Ja9euJfS8iD9puVyOmpoa3L59G8DmVUq3glzNlAzoimVgvrq6GmlpadDr9QA2r1K6FeRqpmRAFxveiIK9Xi8VZ/jLL78whulUVFTELJbkJeMMjUYjI29TUxNrsQBDX5qMM4w0qE2iuLgYpaWlcXMPyThDphWMNRoN6uvrOfGyskvVanXUNGq1Oq5WKclL/qwjQa/Xc+Zl1dNi8nFi9ZeSyZvqS0erjbmAbT6kT7X1lQp8QeYTyasKE8w3aJJvPh6PBwRBYGZmJi68MzMzqdjDUDx67mEsFxwrUrGHSUCqWdrpSAne6dix7uFzzz1HW0s/FO7h/v37UVBQgMceeyxm99DlcsFut2NwcBACgSDsnTHb7h4ePHgQxcXFcTPTMjIyIJFIcOfOHfz+++8Pl2DSPSTftxQv93DXrl0oKirCnTt3wtIwFhq62aputxtms5maCR8pHROEQiEkEgntew/X1tbC3mu4tLSE9vZ2nD9/njZd6Pn79u3jHoo3OTmJsbExnDlzBsDGWLXdbqcNoent7YVCocChQ4dYh+VFij3s7u5GR0cH9YWaTCbcunVr0yMkmfbChQvQarXQarVUWF4wGER6ejp7wdPT0zCbzfB4PJv2R7NT/H4/rFYrJicnUVZWxnowPtTpGxoagtFoDAsIi2anuN1ufPnll+ju7salS5dw4sQJKk+64hH2FTgcDgwPD4eJZQu/3w+bzcZ5JSSLxYL333+fNvqNDdxuN3p6ehjPDxMsl8tjjkw5ceIENfOVLVQqFd58882YeA0GA7WiWiSECfb5fPjpp58AbKyBx/bCpVIp6urqAADff/895wf6tbU1fPbZZwCAjz/+mPHCSSiVSsr3eueddxh5aWtpMrwuJyeH9cuczp07R5UZvktO/fnnnwCAY8eOoa+vj9U5nZ2d1CsH2fhaUZulwcFB1kGNi4uLjK/gYwuDwcCJ9+2332add9RmyW63w+12Q6FQIC8vD5cvX8bCwgI19VcqlcJms8HhcGBycjJuSz6aTCbMzs5Cq9Xi6NGjGB0dxcTEBJxOJyQSCZRKJUZGRjAyMoL//e9/jBFsoaAVLJfLKZvD4XBQ37ZEItlUph0OB238gVwu5ySQhEqlopo+i8VCtbsymWxTmb579y6t46BSqRg5aAXX1tbi22+/DZvY5XQ6aQMuQyGVSlFbW8trgb6WlhY0NDRgYmJi0/6ZmRnGYVylUomWlhbGeGbaMuzxeKDRaKhVDdkgOzsblZWVOHfuHO82fH19HW1tbWhqamL9ul2ZTIbXXnsNnZ2drN7yFfFFjy6XC6WlpVCpVFhaWsK///5LVfnz8/PIy8sDAOzevRu5ubnIycmBx+OJKZ6YIAj4fD7U19ejsbERf/zxB4aHhykrdHx8HE8//TQAYP/+/VAqlVAoFJx4I1ZapGiyrBw4cAD37t2DXC7HgQMHAGx0QXNycrC+vh63VR5Cecnw3J6eHqhUKpSXlwPY6OI+88wzALiHxnN6PPz555/D9h08eJATIR/Qzd9gE/FKh9SYFlvI5XKqPMUCrlFuKpUKp0+fZkwXDAZp93MSLBaLUVJSgqNHjyIjIwNerzfmOR0ul4sx9lAikeD06dN4+eWXIZVKGXnj5h5evHgRXq8XHo+Hd9MTCpFIhHv37iEnJydqp/+HH36A1+uFy+VirKTi6h7Gug7tVpDuIUEQKCwsjOge/vPPP6zyCwQCWF5exl9//YX5+Xla93DbzTSbzQar1Yr19fW4uoclJSUp9xB4BJullOCdjkdO8P8BGCQ0hnF1DxUAAAAASUVORK5CYII=) 2px 3px no-repeat;
      background-repeat: no-repeat;
      border-bottom: 1px solid #BCBCBC;
      cursor: move;
      display: block;
      height: 13px;
      width: 27px;
    }

    .tool-button {
      background-position: center center;
      background-repeat: no-repeat;
      border-bottom: 1px solid #BCBCBC;
      border-top: 1px solid #F1F1F1;
      cursor: pointer;
    }

    .buttons > .tool-button:last-child {
      border-bottom: none;
    }

    </style>
    <div class="drag-handle"></div>
    <div class="buttons">
    </div>
  </template>
</dom-module><style>
.track-button{background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.1);color:rgba(0,0,0,0.2);font-size:10px;height:12px;text-align:center;width:12px}.track-button:hover{background-color:rgba(255,255,255,1.0);border:1px solid rgba(0,0,0,0.5);box-shadow:0 0 .05em rgba(0,0,0,0.4);color:rgba(0,0,0,1)}.track-close-button{left:2px;position:absolute;top:2px}.track-collapse-button{left:3px;position:absolute;top:2px}
</style><style>
.drawing-container{-webkit-box-flex:1;display:inline;overflow:auto;overflow-x:hidden;position:relative}.drawing-container-canvas{-webkit-box-flex:1;display:block;pointer-events:none;position:absolute;top:0}
</style><dom-module id="tr-ui-heading">
  <template>
    <style>
    :host {
      background-color: rgb(243, 245, 247);
      border-right: 1px solid #8e8e8e;
      display: block;
      height: 100%;
      margin: 0;
      padding: 0 5px 0 0;
    }

    heading {
      display: block;
      overflow-x: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #arrow {
      -webkit-flex: 0 0 auto;
      font-family: sans-serif;
      margin-left: 5px;
      margin-right: 5px;
      width: 8px;
    }

    #link, #heading_content {
      display: none;
    }
    </style>
    <heading id="heading" on-click="onHeadingDivClicked_">
      <span id="arrow"></span>
      <span id="heading_content"></span>
      <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
    </heading>
  </template>
</dom-module><style>
.letter-dot-track {
  height: 18px;
}
</style><style>
.chart-track {
  height: 30px;
  position: relative;
}
</style><style>
.cpu-usage-track {
  height: 90px;
}
</style><style>
.power-series-track {
  height: 90px;
}
</style><style>
.spacing-track{height:4px}
</style><style>
.rect-track{height:18px}
</style><style>
.object-instance-track{height:18px}
</style><style>
.thread-track{-webkit-box-orient:vertical;display:-webkit-box;position:relative}
</style><style>
.process-track-header{-webkit-flex:0 0 auto;background-image:-webkit-gradient(linear,0 0,100% 0,from(#E5E5E5),to(#D1D1D1));border-bottom:1px solid #8e8e8e;border-top:1px solid white;font-size:75%}.process-track-name:before{content:'\25B8';padding:0 5px}.process-track-base.expanded .process-track-name:before{content:'\25BE'}
</style><style>
.model-track {
  -webkit-box-flex: 1;
}
</style><style>
.ruler-track{height:12px}.ruler-track.tall-mode{height:30px}
</style><dom-module id="tr-ui-timeline-track-view">
  <template>
    <style>
    :host {
      -webkit-box-orient: vertical;
      display: -webkit-box;
      position: relative;
    }

    :host ::content * {
      -webkit-user-select: none;
      cursor: default;
    }

    #drag_box {
      background-color: rgba(0, 0, 255, 0.25);
      border: 1px solid rgb(0, 0, 96);
      font-size: 75%;
      position: fixed;
    }

    #hint_text {
      position: absolute;
      bottom: 6px;
      right: 6px;
      font-size: 8pt;
    }
    </style>
    <content></content>

    <div id="drag_box"></div>
    <div id="hint_text"></div>

    <tv-ui-b-hotkey-controller id="hotkey_controller">
    </tv-ui-b-hotkey-controller>
  </template>
</dom-module><dom-module id="tr-ui-find-control">
  <template>
    <style>
      :host {
        -webkit-user-select: none;
        display: -webkit-flex;
        position: relative;
      }
      input {
        -webkit-user-select: auto;
        background-color: #f8f8f8;
        border: 1px solid rgba(0, 0, 0, 0.5);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: 170px;
      }
      input:focus {
        background-color: white;
      }
      tr-ui-b-toolbar-button {
        border-left: none;
        margin: 0;
      }
      #hitCount {
        left: 0;
        opacity: 0.25;
        pointer-events: none;
        position: absolute;
        text-align: right;
        top: 2px;
        width: 167px;
        z-index: 1;
      }
      #spinner {
        visibility: hidden;
        width: 8px;
        height: 8px;
        left: 154px;
        pointer-events: none;
        position: absolute;
        top: 4px;
        z-index: 1;

        border: 2px solid transparent;
        border-bottom: 2px solid rgba(0, 0, 0, 0.5);
        border-right: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 50%;

        animation: spin 1s linear infinite;
      }
      @keyframes spin { 100% { transform: rotate(360deg); } }
    </style>

    <input id="filter" on-blur="filterBlur" on-focus="filterFocus" on-input="filterTextChanged" on-keydown="filterKeyDown" on-mouseup="filterMouseUp" type="text"/>
    <div id="spinner"></div>
    <tr-ui-b-toolbar-button on-click="findPrevious">
      ←
    </tr-ui-b-toolbar-button>
    <tr-ui-b-toolbar-button on-click="findNext">
      →
    </tr-ui-b-toolbar-button>
    <div id="hitCount">0 of 0</div>
  </template>
</dom-module><dom-module id="tr-ui-scripting-control">
  <template>
    <style>
      :host {
        flex: 1 1 auto;
      }
      .root {
        font-family: monospace;
        cursor: text;

        padding: 2px;
        margin: 2px;
        border: 1px solid rgba(0, 0, 0, 0.5);
        background: white;

        height: 100px;
        overflow-y: auto;

        transition-property: opacity, height, padding, margin;
        transition-duration: .2s;
        transition-timing-function: ease-out;
      }
      .hidden {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        height: 0px;
        opacity: 0;
      }
      .focused {
        outline: auto 5px -webkit-focus-ring-color;
      }
      #history {
        -webkit-user-select: text;
        color: #777;
      }
      #prompt {
        -webkit-user-select: text;
        -webkit-user-modify: read-write-plaintext-only;
        text-overflow: clip !important;
        text-decoration: none !important;
      }
      #prompt:focus {
        outline: none;
      }
      #prompt br {
        display: none;
      }
      #prompt ::before {
        content: ">";
        color: #468;
      }
    </style>

    <div class="root hidden" id="root" on-focus="onConsoleFocus" tabindex="0">
      <div id="history"></div>
      <div id="prompt" on-blur="onConsoleBlur" on-keydown="promptKeyDown" on-keypress="promptKeyPress"></div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-side-panel-container">
  <template>
    <style>
    :host {
      align-items: stretch;
      display: -webkit-flex;
      background-color: white;
    }

    :host([expanded]) > #side_panel_drag_handle,
    :host([expanded]) > active-panel-container {
      -webkit-flex: 1 1 auto;
      border-left: 1px solid black;
      display: -webkit-flex;
    }

    :host(:not([expanded])) > #side_panel_drag_handle,
    :host(:not([expanded])) > active-panel-container {
      display: none;
    }

    active-panel-container {
      display: flex;
    }

    tab-strip {
      -webkit-flex: 0 0 auto;
      -webkit-flex-direction: column;
      -webkit-user-select: none;
      background-color: rgb(236, 236, 236);
      border-left: 1px solid black;
      cursor: default;
      display: -webkit-flex;
      min-width: 18px; /* workaround for flexbox and writing-mode mixing bug */
      padding: 10px 0 10px 0;
      font-size: 12px;
    }

    tab-strip > tab-strip-label {
      -webkit-writing-mode: vertical-rl;
      display: inline;
      margin-right: 1px;
      min-height: 20px;
      padding: 15px 3px 15px 1px;
    }

    tab-strip >
        tab-strip-label:not([enabled]) {
      color: rgb(128, 128, 128);
    }

    tab-strip > tab-strip-label[selected] {
      background-color: white;
      border: 1px solid rgb(163, 163, 163);
      border-left: none;
      padding: 14px 2px 14px 1px;
    }

    #active_panel_container {
      overflow: auto;
    }
    </style>

    <tr-ui-b-drag-handle id="side_panel_drag_handle"></tr-ui-b-drag-handle>
    <active-panel-container id="active_panel_container">
    </active-panel-container>
    <tab-strip id="tab_strip"></tab-strip>
  </template>
</dom-module><dom-module id="tr-ui-timeline-view-help-overlay">
  <template>
    <style>
    :host {
      -webkit-flex: 1 1 auto;
      -webkit-flex-direction: row;
      display: -webkit-flex;
      width: 700px;
    }
    .column {
      width: 50%;
    }
    h2 {
      font-size: 1.2em;
      margin: 0;
      margin-top: 5px;
      text-align: center;
    }
    h3 {
      margin: 0;
      margin-left: 126px;
      margin-top: 10px;
    }
    .pair {
      -webkit-flex: 1 1 auto;
      -webkit-flex-direction: row;
      display: -webkit-flex;
    }
    .command {
      font-family: monospace;
      margin-right: 5px;
      text-align: right;
      width: 150px;
    }
    .action {
      font-size: 0.9em;
      text-align: left;
      width: 200px;
    }
    tr-ui-b-mouse-mode-icon {
      border: 1px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
      display: inline-block;
      margin-right: 1px;
      position: relative;
      top: 4px;
    }
    .mouse-mode-icon.pan-mode {
      background-position: -1px -11px;
    }
    .mouse-mode-icon.select-mode {
      background-position: -1px -41px;
    }
    .mouse-mode-icon.zoom-mode {
      background-position: -1px -71px;
    }
    .mouse-mode-icon.timing-mode {
      background-position: -1px -101px;
    }
    </style>
    <div class="column left">
      <h2>Navigation</h2>
      <div class="pair">
        <div class="command">w/s</div>
        <div class="action">Zoom in/out (+shift: faster)</div>
      </div>

      <div class="pair">
        <div class="command">a/d</div>
        <div class="action">Pan left/right (+shift: faster)</div>
      </div>

      <div class="pair">
        <div class="command">→/shift-TAB</div>
        <div class="action">Select previous event</div>
      </div>

      <div class="pair">
        <div class="command">←/TAB</div>
        <div class="action">Select next event</div>
      </div>

      <h2>Mouse Controls</h2>
      <div class="pair">
        <div class="command">click</div>
        <div class="action">Select event</div>
      </div>
      <div class="pair">
        <div class="command">alt-mousewheel</div>
        <div class="action">Zoom in/out</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="SELECTION"></tr-ui-b-mouse-mode-icon>
        Select mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Box select</div>
      </div>

      <div class="pair">
        <div class="command"><span class="mod"></span>-click/drag</div>
        <div class="action">Add events to the current selection</div>
      </div>

      <div class="pair">
        <div class="command">double click</div>
        <div class="action">Select all events with same title</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="PANSCAN"></tr-ui-b-mouse-mode-icon>
        Pan mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Pan the view</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="ZOOM"></tr-ui-b-mouse-mode-icon>
        Zoom mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Zoom in/out by dragging up/down</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="TIMING"></tr-ui-b-mouse-mode-icon>
        Timing mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Create or move markers</div>
      </div>

      <div class="pair">
        <div class="command">double click</div>
        <div class="action">Set marker range to slice</div>
      </div>
    </div>

    <div class="column right">
      <h2>General</h2>
      <div class="pair">
        <div class="command">1-4</div>
        <div class="action">Switch mouse mode</div>
      </div>

      <div class="pair">
        <div class="command">shift</div>
        <div class="action">Hold for temporary select</div>
      </div>

      <div class="pair">
        <div class="command">space</div>
        <div class="action">Hold for temporary pan</div>
      </div>

      <div class="pair">
        <div class="command">/</div>
        <div class="action">Search</div>
      </div>

      <div class="pair">
        <div class="command">enter</div>
        <div class="action">Step through search results</div>
      </div>

      <div class="pair">
        <div class="command">f</div>
        <div class="action">Zoom into selection</div>
      </div>

      <div class="pair">
        <div class="command">z/0</div>
        <div class="action">Reset zoom and pan</div>
      </div>

      <div class="pair">
        <div class="command">g/G</div>
        <div class="action">Toggle 60hz grid</div>
      </div>

      <div class="pair">
        <div class="command">v</div>
        <div class="action">Highlight VSync</div>
      </div>

      <div class="pair">
        <div class="command">h</div>
        <div class="action">Toggle low/high details</div>
      </div>

      <div class="pair">
        <div class="command">m</div>
        <div class="action">Mark current selection</div>
      </div>

      <div class="pair">
        <div class="command">p</div>
        <div class="action">Select power samples over current selection interval</div>
      </div>

      <div class="pair">
        <div class="command">`</div>
        <div class="action">Show or hide the scripting console</div>
      </div>

      <div class="pair">
        <div class="command">?</div>
        <div class="action">Show help</div>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-v-ui-array-of-numbers-span">
  <template>
  </template>
</dom-module><dom-module id="tr-v-ui-generic-table-view">
  <template>
    <style>
    :host {
    display: flex;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-timeline-view-metadata-overlay">
  <template>
    <style>
    :host {
      width: 700px;

      overflow: auto;
    }
    </style>
    <tr-v-ui-generic-table-view id="gtv"></tr-v-ui-generic-table-view>
  </template>
</dom-module><dom-module id="tr-ui-timeline-view">
  <template>
    <style>
    :host {
      flex-direction: column;
      cursor: default;
      display: flex;
      font-family: sans-serif;
      padding: 0;
    }

    #control {
      background-color: #e6e6e6;
      background-image: -webkit-gradient(linear, 0 0, 0 100%,
          from(#E5E5E5), to(#D1D1D1));
      flex: 0 0 auto;
      overflow-x: auto;
    }

    #control::-webkit-scrollbar { height: 0px; }

    #control > #bar {
      font-size: 12px;
      display: flex;
      flex-direction: row;
      margin: 1px;
    }

    #control > #bar > #title {
      display: flex;
      align-items: center;
      padding-left: 8px;
      padding-right: 8px;
      flex: 1 1 auto;
    }

    #control > #bar > #left_controls,
    #control > #bar > #right_controls {
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }

    #control > #bar > #left_controls > * { margin-right: 2px; }
    #control > #bar > #right_controls > * { margin-left: 2px; }
    #control > #collapsing_controls { display: flex; }

    middle-container {
      flex: 1 1 auto;
      flex-direction: row;
      border-bottom: 1px solid #8e8e8e;
      display: flex;
      min-height: 0;
    }

    middle-container ::content track-view-container {
      flex: 1 1 auto;
      display: flex;
      min-height: 0;
      min-width: 0;
      overflow-x: hidden;
    }

    middle-container ::content track-view-container > * { flex: 1 1 auto; }
    middle-container > x-timeline-view-side-panel-container { flex: 0 0 auto; }
    tr-ui-b-drag-handle { flex: 0 0 auto; }
    tr-ui-a-analysis-view { flex: 0 0 auto; }
    </style>

    <tv-ui-b-hotkey-controller id="hkc"></tv-ui-b-hotkey-controller>
    <div id="control">
      <div id="bar">
        <div id="left_controls"></div>
        <div id="title">^_^</div>
        <div id="right_controls">
          <tr-ui-b-toolbar-button id="view_metadata_button">
            M
          </tr-ui-b-toolbar-button>
          <tr-ui-b-dropdown id="view_options_dropdown"></tr-ui-b-dropdown>
          <tr-ui-find-control id="view_find_control"></tr-ui-find-control>
          <tr-ui-b-toolbar-button id="view_console_button">
            »
          </tr-ui-b-toolbar-button>
          <tr-ui-b-toolbar-button id="view_help_button">
            ?
          </tr-ui-b-toolbar-button>
        </div>
      </div>
      <div id="collapsing_controls"></div>
      <tr-ui-b-info-bar-group id="import-warnings">
      </tr-ui-b-info-bar-group>
    </div>
    <middle-container>
      <content></content>

      <tr-ui-side-panel-container id="side_panel_container">
      </tr-ui-side-panel-container>
    </middle-container>
    <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>
    <tr-ui-a-analysis-view id="analysis"></tr-ui-a-analysis-view>

    <tr-v-ui-preferred-display-unit id="display_unit">
    </tr-v-ui-preferred-display-unit>
  </template>
</dom-module><style>
* /deep/ .pie-chart .arc-text{font-size:8pt}* /deep/ .pie-chart .label{font-size:10pt}* /deep/ .pie-chart polyline{fill:none;stroke:black}
</style><dom-module id="tr-ui-e-s-time-summary-side-panel">
  <template>
    <style>
    :host {
      flex-direction: column;
      display: flex;
    }
    toolbar {
      flex: 0 0 auto;
      border-bottom: 1px solid black;
      display: flex;
    }
    result-area {
      flex: 1 1 auto;
      display: block;
      min-height: 0;
      overflow-y: auto;
    }
    </style>

    <toolbar id="toolbar"></toolbar>
    <result-area id="result_area"></result-area>
  </template>
</dom-module><template id="record-selection-dialog-template">
  <style>
  .categories-column-view {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    font-family: sans-serif;
    max-width: 640px;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    transition: max-height 1s ease, max-width 1s ease, opacity 1s ease;
    will-change: opacity;
  }

  .categories-column-view-hidden {
    max-height: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    display: none;
  }

  .categories-selection {
    display: -webkit-flex;
    -webkit-flex-direction: row;
  }

  .category-presets {
    padding: 4px;
  }

  .category-description {
    color: #aaa;
    font-size: small;
    max-height: 1em;
    opacity: 1;
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
    transition: max-height 1s ease, opacity 1s ease;
    will-change: opacity;
  }

  .category-description-hidden {
    max-height: 0;
    opacity: 0;
  }

  .default-enabled-categories,
  .default-disabled-categories {
    -webkit-flex: 1 1 auto;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    padding: 4px;
    width: 300px;
  }

  .default-enabled-categories > div,
  .default-disabled-categories > div {
    padding: 4px;
  }

  .tracing-modes {
    -webkit-flex: 1 0 auto;
    display: -webkit-flex;
    -webkit-flex-direction: reverse;
    padding: 4px;
    border-bottom: 2px solid #ddd;
    border-top: 2px solid #ddd;
  }

  .default-disabled-categories {
    border-left: 2px solid #ddd;
  }

  .warning-default-disabled-categories {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    color: #BD2E2E;
    width: 2.0ex;
    height: 2.0ex;
    border-radius: 2.0ex;
    border: 1px solid #BD2E2E;
  }

  .categories {
    font-size: 80%;
    padding: 10px;
    -webkit-flex: 1 1 auto;
  }

  .group-selectors {
    font-size: 80%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
    -webkit-flex: 0 0 auto;
  }

  .group-selectors button {
    padding: 1px;
  }

  .record-selection-dialog .labeled-option-group {
    -webkit-flex: 0 0 auto;
    -webkit-flex-direction: column;
    display: -webkit-flex;
  }

  .record-selection-dialog .labeled-option {
    border-top: 5px solid white;
    border-bottom: 5px solid white;
  }

  .record-selection-dialog .edit-categories {
    padding-left: 6px;
  }

  .record-selection-dialog .edit-categories:after {
    padding-left: 15px;
    font-size: 125%;
  }

  .record-selection-dialog .labeled-option-group:not(.categories-expanded)
      .edit-categories:after {
    content: '\25B8'; /* Right triangle */
  }

  .record-selection-dialog .labeled-option-group.categories-expanded
      .edit-categories:after {
    content: '\25BE'; /* Down triangle */
  }

  </style>

  <div class="record-selection-dialog">
    <tr-ui-b-info-bar-group></tr-ui-b-info-bar-group>
    <div class="category-presets">
    </div>
    <div class="category-description"></div>
    <div class="categories-column-view">
      <div class="tracing-modes"></div>
      <div class="categories-selection">
        <div class="default-enabled-categories">
          <div>Record Categories</div>
          <div class="group-selectors">
            Select
            <button class="all-btn">All</button>
            <button class="none-btn">None</button>
          </div>
          <div class="categories"></div>
        </div>
        <div class="default-disabled-categories">
          <div>Disabled by Default Categories
            <a class="warning-default-disabled-categories">!</a>
          </div>
          <div class="group-selectors">
            Select
            <button class="all-btn">All</button>
            <button class="none-btn">None</button>
          </div>
          <div class="categories"></div>
        </div>
      </div>
    </div>
  </div>
</template><style>
x-profiling-view {
  -webkit-flex-direction: column;
  display: -webkit-flex;
  padding: 0;
}

x-profiling-view .controls #save-button {
  margin-left: 64px !important;
}

x-profiling-view > tr-ui-timeline-view {
  -webkit-flex: 1 1 auto;
  min-height: 0;
}

.report-id-message {
  -webkit-user-select: text;
}

x-timeline-view-buttons {
  display: flex;
  align-items: center;
}
</style><template id="profiling-view-template">
  <tr-ui-b-info-bar-group></tr-ui-b-info-bar-group>
  <x-timeline-view-buttons>
    <button id="record-button">Record</button>
    <button id="save-button">Save</button>
    <button id="load-button">Load</button>
  </x-timeline-view-buttons>
  <tr-ui-timeline-view>
    <track-view-container id="track_view_container"></track-view-container>
  </tr-ui-timeline-view>
</template><style>
html,body{height:100%}body{-webkit-flex-direction:column;display:-webkit-flex;margin:0;padding:0}body>x-profiling-view{-webkit-flex:1 1 auto;min-height:0}body>x-profiling-view>x-timeline-view:focus{outline:0}
</style><script src="tracing.js"></script>
</head>
  <body>
  </body>
</html>