Converted Observatory cpu-profile-table element

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

Index: runtime/observatory/lib/src/elements/cpu_profile_table.html
diff --git a/runtime/observatory/lib/src/elements/cpu_profile_table.html b/runtime/observatory/lib/src/elements/cpu_profile_table.html
deleted file mode 100644
index b95c0bc71b3d61d9f923c43e209894c0a0c6c5ed..0000000000000000000000000000000000000000
--- a/runtime/observatory/lib/src/elements/cpu_profile_table.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<link rel="import" href="../../../../packages/polymer/polymer.html">
-
-<polymer-element name="cpu-profile-table">
-  <template>
-    <link rel="stylesheet" href="css/shared.css">
-    <nav-bar>
-      <top-nav-menu></top-nav-menu>
-      <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
-      <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
-      <nav-menu link="{{ makeLink('/profiler-table', isolate) }}" anchor="cpu profile (table)" last="{{ true }}"></nav-menu>
-      <nav-refresh callback="{{ refresh }}"></nav-refresh>
-      <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh>
-      <nav-notify notifications="{{ app.notifications }}"></nav-notify>
-    </nav-bar>
-    <style>
-      /* general */
-      .well {
-        background-color: #ECECEC;
-        padding: 0.2em;
-      }
-      .center {
-        align-items: center;
-        justify-content: center;
-      }
-
-      /* status messages */
-      .statusMessage {
-        font-size: 150%;
-        font-weight: bold;
-      }
-      .statusBox {
-        height: 100%;
-        padding: 1em;
-      }
-
-      /* tables */
-      .table {
-        border-collapse: collapse!important;
-        table-layout: fixed;
-        height: 100%;
-      }
-      .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;
-        min-width: 8em;
-      }
-      .clickable:hover {
-        text-decoration: underline;
-        cursor: pointer;
-      }
-      tr:hover:not(.focused) > td {
-        background-color: #FAFAFA;
-      }
-      .focused {
-        background-color: #F4C7C3;
-      }
-      .scroll {
-        overflow: scroll;
-      }
-      .outlined {
-        -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
-        -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
-        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
-        margin: 4px;
-      }
-      .centered {
-        margin-left: auto;
-        margin-right: auto;
-        justify-content: center;
-      }
-      .full-height {
-        height: 100%;
-      }
-      .mostly-full-height {
-        height: 80%;
-      }
-      .full-width {
-        width: 100%;
-      }
-      .focused-function-label {
-        flex: 0 1 auto;
-        margin-left: auto;
-        margin-right: auto;
-        justify-content: center;
-      }
-      .call-table {
-        flex: 1 1 auto;
-      }
-
-      .tree {
-        border-spacing: 0px;
-        width: 100%;
-        margin-bottom: 20px
-        vertical-align: middle;
-      }
-
-      .tree tbody tr {
-        animation: fadeIn 0.5s;
-        -moz-animation: fadeIn 0.5s;
-        -webkit-animation: fadeIn 0.5s;
-      }
-
-      .tree tbody tr:hover {
-        background-color: #FAFAFA;
-      }
-
-      .tree tr td:first-child,
-      .tree tr th:first-child {
-        width: 100%;
-      }
-
-      .tree thead > tr > th {
-        padding: 8px;
-        vertical-align: bottom;
-        text-align: left;
-        border-bottom: 1px solid #ddd;
-      }
-
-    </style>
-    <div id="sampleBufferControl"></div>
-    <br>
-    <hr>
-    <div id="main" class="flex-row centered">
-      <div class="flex-item-45-percent full-height outlined scroll">
-        <table id="main-table" class="flex-item-100-percent table">
-          <thead>
-          <tr>
-            <th on-click="{{changeSortProfile}}" class="clickable" title="Executing (%)">{{ profileTable.getColumnLabel(0) }}</th>
-            <th on-click="{{changeSortProfile}}" class="clickable" title="In stack (%)">{{ profileTable.getColumnLabel(1) }}</th>
-            <th on-click="{{changeSortProfile}}" class="clickable" title="Method">{{ profileTable.getColumnLabel(2) }}</th>
-          </tr>
-          </thead>
-          <tbody id="profile-table">
-          </tbody>
-        </table>
-      </div>
-      <div class="flex-item-45-percent full-height outlined">
-        <div class="flex-column full-height">
-          <div class="focused-function-label">
-            <template if="{{ focusedFunction != null }}">
-              <span>Focused on: </span>
-              <function-ref ref="{{ focusedFunction }}"></function-ref>
-            </template>
-            <template if="{{ focusedFunction == null }}">
-              <span>No focused function</span>
-            </template>
-          </div>
-          <hr>
-          <div class="call-table scroll">
-            <table class="full-width table">
-              <thead>
-              <tr>
-                <th on-click="{{changeSortCallers}}" class="clickable" title="Callers (%)">{{ profileCallersTable.getColumnLabel(0) }}</th>
-                <th on-click="{{changeSortCallers}}" class="clickable" title="Method">{{ profileCallersTable.getColumnLabel(1) }}</th>
-              </tr>
-              </thead>
-              <tbody id="callers-table">
-              </tbody>
-            </table>
-          </div>
-          <hr>
-          <div class="call-table scroll">
-            <table class="full-width table">
-              <thead>
-              <tr>
-                <th on-click="{{changeSortCallees}}" class="clickable" title="Callees (%)">{{ profileCalleesTable.getColumnLabel(0) }}</th>
-                <th on-click="{{changeSortCallees}}" class="clickable" title="Method">{{ profileCalleesTable.getColumnLabel(1) }}</th>
-              </tr>
-              </thead>
-              <tbody id="callees-table">
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    <br>
-    <div id="stackTraceTreeConfig"></div>
-    <br>
-    <div class="content-centered-big">
-      <div class="focused-function-label">
-        <template if="{{ focusedFunction != null }}">
-          <span>Filtered tree: </span>
-          <function-ref ref="{{ focusedFunction }}"></function-ref>
-        </template>
-        <template if="{{ focusedFunction == null }}">
-          <span>No focused function</span>
-        </template>
-      </div>
-    </div>
-    <br>
-    <br>
-    <div class="flex-row centered">
-      <div class="flex-item-90-percent outlined" style="margin: 16px; margin-left: 8px; margin-right: 8px">
-        <div id="cpuProfileTree"></div>
-      </div>
-    </div>
-  </template>
-</polymer-element>
-
-<script type="application/dart" src="cpu_profile.dart"></script>