Converted Observatory heap-profile element

runtime/observatory/lib/src/elements/heap_profile.html

Index: runtime/observatory/lib/src/elements/heap_profile.html
diff --git a/runtime/observatory/lib/src/elements/heap_profile.html b/runtime/observatory/lib/src/elements/heap_profile.html
deleted file mode 100644
index ece54462744bfb3aa2578c1c8a42413cfe2f5053..0000000000000000000000000000000000000000
--- a/runtime/observatory/lib/src/elements/heap_profile.html
+++ /dev/null
@@ -1,209 +0,0 @@
-<link rel="import" href="../../../../packages/polymer/polymer.html">
-
-<polymer-element name="heap-profile">
-<template>
-  <link rel="stylesheet" href="css/shared.css">
-  <style>
-    .table {
-      border-collapse: collapse!important;
-      margin-bottom: 20px
-      table-layout: fixed;
-    }
-    .table td:nth-of-type(1) {
-      width: 30%;
-    }
-    .th, .td {
-      padding: 8px;
-      vertical-align: top;
-    }
-    .table thead > tr > th {
-      vertical-align: bottom;
-      text-align: left;
-      border-bottom:2px solid #ddd;
-    }
-    .spacer {
-      width: 16px;
-    }
-    .left-border-spacer {
-      width: 16px;
-      border-left: 1px solid;
-    }
-    .clickable {
-      color: #0489c3;
-      text-decoration: none;
-      cursor: pointer;
-    }
-    .clickable:hover {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-    #classtable tr:hover > td {
-      background-color: #F4C7C3;
-    }
-    .nav-option {
-      color: white;
-      float: right;
-      margin: 3px;
-      padding: 8px;
-    }
-  </style>
-  <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantum_theme.css">
-  <style>
-.chart-wrapper {
-}
-
-.chart-host-wrapper {
-height: 200px;
-}
-.chart-legend-host {
-max-height: 200px;
-overflow-x: auto;
-overflow-y: auto;
-}
-  </style>
-  <nav-bar>
-    <top-nav-menu></top-nav-menu>
-    <vm-nav-menu vm="{{ profile.isolate.vm }}"></vm-nav-menu>
-    <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
-    <nav-menu link="{{ makeLink('/allocation-profiler', profile.isolate) }}" anchor="allocation profile" last="{{ true }}"></nav-menu>
-    <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></nav-refresh>
-    <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
-    <nav-refresh callback="{{ refresh }}"></nav-refresh>
-    <div class="nav-option">
-      <input type="checkbox" checked="{{ autoRefresh }}">Auto-refresh on GC
-    </div>
-    <nav-notify notifications="{{ app.notifications }}"></nav-notify>
-  </nav-bar>
-  <div class="content">
-    <h1>Allocation Profile</h1>
-    <br>
-    <div class="memberList">
-      <div class="memberItem">
-        <div class="memberName">last forced GC at</div>
-        <div class="memberValue">{{ lastServiceGC }}</div>
-      </div>
-      <div class="memberItem">
-        <div class="memberName">last accumulator reset at</div>
-        <div class="memberValue">{{ lastAccumulatorReset }}</div>
-      </div>
-    </div>
-  </div>
-  <hr>
-  <div class="content-centered-big">
-    <div class="flex-row">
-      <div id="newSpace" class="flex-item-50-percent">
-        <h2>New Generation</h2>
-        <br>
-        <div class="memberList">
-          <div class="memberItem">
-            <div class="memberName">used</div>
-            <div class="memberValue">
-              {{ isolate.newSpace.used | formatSize }}
-              of
-              {{ isolate.newSpace.capacity | formatSize }}
-            </div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">external</div>
-            <div class="memberValue">
-              {{ isolate.newSpace.external | formatSize }}
-            </div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">collections</div>
-            <div class="memberValue">{{ formattedCollections(true) }}</div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">average collection time</div>
-            <div class="memberValue">{{ formattedAverage(true) }}</div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">cumulative collection time</div>
-            <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">average time between collections</div>
-            <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div>
-          </div>
-        </div>
-        <br>
-        <div class="chart-wrapper" id="new-pie-chart">
-          <div class="chart-host-wrapper">
-              <div class="chart-legend-host"></div>
-              <div class="chart-host"></div>
-          </div>
-        </div>
-      </div>
-      <div id="oldSpace" class="flex-item-50-percent">
-        <h2>Old Generation</h2>
-        <br>
-        <div class="memberList">
-          <div class="memberItem">
-            <div class="memberName">used</div>
-            <div class="memberValue">
-              {{ isolate.oldSpace.used | formatSize }}
-              of
-              {{ isolate.oldSpace.capacity | formatSize }}
-            </div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">external</div>
-            <div class="memberValue">
-              {{ isolate.oldSpace.external | formatSize }}
-            </div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">collections</div>
-            <div class="memberValue">{{ formattedCollections(false) }}</div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">average collection time</div>
-            <div class="memberValue">{{ formattedAverage(false) }}</div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">cumulative collection time</div>
-            <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">average time between collections</div>
-            <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div>
-          </div>
-        </div>
-        <br>
-        <div class="chart-wrapper" id="old-pie-chart">
-          <div class="chart-host-wrapper">
-              <div class="chart-host"></div>
-              <div class="chart-legend-host"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <br>
-  <hr>
-  <div class="content-centered-big">
-    <table id="classtable" class="flex-item-100-percent table">
-      <thead id="classTableHead">
-        <tr>
-          <th on-click="{{changeSort}}" class="clickable" title="Class">{{ classTable.getColumnLabel(0) }}</th>
-          <th class="spacer"></th>
-          <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th>
-          <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th>
-          <th on-click="{{changeSort}}" class="clickable" title="New Current Size">{{ classTable.getColumnLabel(4) }}</th>
-          <th on-click="{{changeSort}}" class="clickable" title="New Current Instances">{{ classTable.getColumnLabel(5) }}</th>
-          <th class="spacer"></th>
-          <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th>
-          <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th>
-          <th on-click="{{changeSort}}" class="clickable" title="Old Current Size">{{ classTable.getColumnLabel(9) }}</th>
-          <th on-click="{{changeSort}}" class="clickable" title="Old Current Instances">{{ classTable.getColumnLabel(10) }}</th>
-        </tr>
-      </thead>
-      <tbody id="classTableBody">
-      </tbody>
-    </table>
-    <view-footer></view-footer>
-  </div>
-</template>
-</polymer-element>
-
-<script type="application/dart" src="heap_profile.dart"></script>