<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="class_ref.html">

<polymer-element name="heap-map">
<template>
  <link rel="stylesheet" href="css/shared.css">
  <style>
    .hover {
      position: fixed;
      z-index: 999;
      height: 16px;
      width: 100%;
      background: #ffffff;
    }
    .spacer {
      height: 16px;
      background-color: red;
    }
    #fragmentation {
      width: 100%;
      height: 100%;
    }
  </style>
  <nav-bar pad="{{ false }}">
    <top-nav-menu></top-nav-menu>
    <vm-nav-menu vm="{{ fragmentation.isolate.vm }}"></vm-nav-menu>
    <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu>
    <nav-menu link="{{ makeLink('/heap-map', fragmentation.isolate) }}" anchor="heap map" last="{{ true }}"></nav-menu>
    <nav-refresh callback="{{ refresh }}"></nav-refresh>
    <nav-notify notifications="{{ app.notifications }}"></nav-notify>
  </nav-bar>
  <div class="hover">
    <p style="text-align:center">{{ status }}</p>
  </div>
  <div class="spacer">
    <!-- Make sure no data is covered by hover bar initially -->
  </div>
  <div class="flex-row">
    <canvas id="fragmentation" width="1px" height="1px"></canvas>
  </div>
  <view-footer></view-footer>
</template>
</polymer-element>

<script type="application/dart" src="heap_map.dart"></script>