Wrapping leaf nodes in non polymer elements

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

Index: runtime/observatory/lib/src/elements/nav_bar.html
diff --git a/runtime/observatory/lib/src/elements/nav_bar.html b/runtime/observatory/lib/src/elements/nav_bar.html
deleted file mode 100644
index c97b1d146be6bf465f2c794d4299c9a33b86d7e8..0000000000000000000000000000000000000000
--- a/runtime/observatory/lib/src/elements/nav_bar.html
+++ /dev/null
@@ -1,486 +0,0 @@
-<link rel="import" href="../../../../packages/polymer/polymer.html">
-<link rel="import" href="action_link.html">
-<link rel="import" href="observatory_element.html">
-
-<polymer-element name="nav-bar" extends="observatory-element">
-  <template>
-    <link rel="stylesheet" href="css/shared.css">
-    <style>
-      nav {
-        position: fixed;
-        width: 100%;
-        z-index: 1000;
-      }
-      nav ul {
-        display: inline-table;
-        position: relative;
-        list-style: none;
-        padding-left: 0;
-        margin-left: 0;
-        width: 100%;
-        z-index: 1000;
-        font: 400 16px 'Montserrat', sans-serif;
-        color: white;
-        background-color: #0489c3;
-      }
-      nav ul:after {
-        content: ""; clear: both; display: block;
-      }
-      .vertical-spacer {
-        height: 40px;
-        background-color: #0489c3;
-      }
-    </style>
-    <nav>
-      <ul>
-        <nav-notify notifications="{{ app.notifications }}"
-                    notifyOnPause="{{ notifyOnPause }}"></nav-notify>
-        <content></content>
-      </ul>
-    </nav>
-    <div class="vertical-spacer">
-    </div>
-    <template if="{{ pad }}">
-      <br>
-    </template>
-  </template>
-</polymer-element>
-
-<polymer-element name="nav-menu" extends="observatory-element">
-  <template>
-    <style>
-      .menu, .spacer {
-        float: left;
-      }
-      .menu a, .spacer {
-        display: block;
-        padding: 12px 8px;
-        color: White;
-        text-decoration: none;
-      }
-      .menu:hover {
-        background: #455;
-      }
-      .menu ul {
-        display: none;
-        position: absolute;
-        top: 98%;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        width: auto;
-        z-index: 1000;
-        font: 400 16px 'Montserrat', sans-serif;
-        color: white;
-        background: #567;
-      }
-      .menu ul:after {
-        content: ""; clear: both; display: block;
-      }
-      .menu:hover > ul {
-        display: block;
-      }
-    </style>
-
-    <li class="menu">
-      <a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a>
-      <ul><content></content></ul>
-    </li>
-    <template if="{{ !last }}">
-      <li class="spacer">&gt;</li>
-    </template>
-
-  </template>
-</polymer-element>
-
-<polymer-element name="nav-menu-item" extends="observatory-element">
-  <template>
-    <style>
-      li {
-        float: none;
-        border-top: 1px solid #677;
-        border-bottom: 1px solid #556; position: relative;
-      }
-      li:hover {
-        background: #455;
-      }
-      li ul {
-        display: none;
-        position: absolute;
-        top:0;
-        left: 100%;
-        list-style: none;
-        padding: 0;
-        margin-left: 0;
-        width: auto;
-        z-index: 1000;
-        font: 400 16px 'Montserrat', sans-serif;
-        color: white;
-        background: #567;
-      }
-      li ul:after {
-        content: ""; clear: both; display: block;
-      }
-      li:hover > ul {
-        display: block;
-      }
-      li a {
-        display: block;
-        padding: 12px 12px;
-        color: white;
-        text-decoration: none;
-      }
-    </style>
-    <li><a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a>
-      <ul><content></content></ul>
-    </li>
-  </template>
-</polymer-element>
-
-<polymer-element name="nav-refresh" extends="observatory-element">
-  <template>
-    <style>
-      .active {
-        color: #aaa;
-        cursor: wait;
-      }
-      .idle {
-        color: #000;
-      }
-      li {
-        float: right;
-        margin: 0;
-      }
-      li button {
-        margin: 3px;
-        padding: 8px;
-      }
-    </style>
-    <li>
-      <template if="{{ active }}">
-        <button class="active" on-click="{{ buttonClick }}">{{ label }}</button>
-      </template>
-      <template if="{{ !active }}">
-        <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button>
-      </template>
-    </li>
-  </template>
-</polymer-element>
-
-<polymer-element name="top-nav-menu">
-  <template>
-    <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
-      <nav-menu-item link="/vm-connect" anchor="Connect to a VM"></nav-menu-item>
-      <content></content>
-    </nav-menu>
-  </template>
-</polymer-element>
-
-<polymer-element name="vm-nav-menu">
-  <template>
-    <nav-menu link="/vm" anchor="{{ nameAndAddress(vm.name, vm.target) }}" last="{{ last }}">
-      <template repeat="{{ isolate in vm.isolates }}">
-        <nav-menu-item link="{{ makeLink('/inspect', isolate) }}"
-	               anchor="{{ isolate.name }}"></nav-menu-item>
-      </template>
-      <content></content>
-    </nav-menu>
-  </template>
-</polymer-element>
-
-<polymer-element name="isolate-nav-menu" extends="observatory-element">
-  <template>
-    <nav-menu link="{{ makeLink('/inspect', isolate) }}" anchor="{{ isolate.name }}" last="{{ last }}">
-      <nav-menu-item link="{{ makeLink('/debugger', isolate) }}"
-                     anchor="debugger"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/class-tree', isolate) }}"
-                     anchor="class hierarchy"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/profiler', isolate) }}"
-                     anchor="cpu profile"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/profiler-table', isolate) }}"
-                     anchor="cpu profile (table)"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/allocation-profiler', isolate) }}"
-                     anchor="allocation profile"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/heap-map', isolate) }}"
-                     anchor="heap map"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/metrics', isolate) }}"
-                     anchor="metrics"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/heap-snapshot', isolate) }}"
-                     anchor="heap snapshot"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/persistent-handles', isolate) }}"
-                     anchor="persistent handles"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/ports', isolate) }}"
-                     anchor="ports"></nav-menu-item>
-      <nav-menu-item link="{{ makeLink('/logging', isolate) }}"
-                     anchor="logging"></nav-menu-item>
-      <content></content>
-    </nav-menu>
-  </template>
-</polymer-element>
-
-<polymer-element name="library-nav-menu" extends="observatory-element">
-  <template>
-    <nav-menu link="{{ makeLink('/inspect', library) }}"
-              anchor="{{ library.name }}" last="{{ last }}">
-      <content></content>
-    </nav-menu>
-  </template>
-</polymer-element>
-
-<polymer-element name="class-nav-menu" extends="observatory-element">
-  <template>
-    <nav-menu link="{{ makeLink('/inspect', cls) }}"
-              anchor="{{ cls.name }}" last="{{ last }}">
-      <content></content>
-    </nav-menu>
-  </template>
-</polymer-element>
-
-<polymer-element name="nav-notify" extends="observatory-element">
-  <template>
-    <style>
-      .menu {
-        float: right;
-      }
-      .menu .list {
-        display: block;
-        position: absolute;
-        top: 98%;
-        right: 0;
-        margin: 0;
-        padding: 0;
-        width: auto;
-        z-index: 1000;
-        font: 400 12px 'Montserrat', sans-serif;
-        color: white;
-        background: none;
-      }
-    </style>
-
-    <div class="menu">
-      <div class="list">
-        <template repeat="{{ notification in notifications }}">
-          <template if="{{ notification.event != null }}">
-            <nav-notify-event notifications="{{ notifications }}"
-                              notification="{{ notification }}"
-                              event="{{ notification.event }}"
-                              notifyOnPause="{{ notifyOnPause }}">
-            </nav-notify-event>
-          </template>
-          <template if="{{ notification.exception != null }}">
-            <nav-notify-exception notifications="{{ notifications }}"
-                              notification="{{ notification }}"
-                              exception="{{ notification.exception }}"
-                              stacktrace="{{ notification.stacktrace }}">
-            </nav-notify-exception>
-          </template>
-        </template>
-      </div>
-    </div>
-  </template>
-</polymer-element>
-
-<polymer-element name="nav-notify-event" extends="observatory-element">
-  <template>
-    <style>
-      .item {
-        position: relative;
-        padding: 16px;
-        margin-top: 10px;
-        margin-right: 10px;
-        padding-right: 25px;
-        width: 250px;
-        color: #ddd;
-        background: rgba(0,0,0,.6);
-        border: solid 2px white;
-        box-shadow: 0 0 5px black;
-        border-radius: 5px;
-        animation: fadein 1s;
-      }
-
-      .wide-item {
-        width: 50vw;
-      }
-
-      @keyframes fadein {
-        from { opacity: 0; }
-        to   { opacity: 1; }
-      }
-
-      a.link {
-        color: white;
-        text-decoration: none;
-      }
-      a.link:hover {
-        text-decoration: underline;
-      }
-
-      a.boxclose {
-        position: absolute;
-        display: block;
-        top: 4px;
-        right: 4px;
-        height: 18px;
-        width: 18px;
-        line-height: 16px;
-        border-radius: 9px;
-        color: white;
-        font-size: 18px;
-        cursor: pointer;
-        text-align: center;
-      }
-      a.boxclose:hover {
-        background: rgba(255,255,255,0.5);
-      }
-      .error {
-        white-space: pre;
-      }
-    </style>
-    <template if="{{ event != null }}">
-      <template if="{{ notifyOnPause && event.isPauseEvent }}">
-        <div class="item">
-          Isolate
-          <a class="link" on-click="{{ goto }}"
-             _href="{{ gotoLink('/inspect', event.isolate) }}">{{ event.isolate.name }}</a>
-          is paused
-          <template if="{{ event.kind == 'PauseStart' }}">
-            at isolate start
-          </template>
-          <template if="{{ event.kind == 'PauseExit' }}">
-            at isolate exit
-          </template>
-          <template if="{{ event.breakpoint != null }}">
-            at breakpoint {{ event.breakpoint.number }}
-          </template>
-          <template if="{{ event.kind == 'PauseException' }}">
-            due to exception
-          </template>
-
-          <br><br>
-          [<a class="link" on-click="{{ goto }}"
-              _href="{{ gotoLink('/debugger', event.isolate) }}">debug</a>]
-
-          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-        </div>
-      </template>
-      <template if="{{ event.kind == 'ConnectionClosed' }}">
-        <div class="item">
-          Disconnected from VM: {{ event.reason }}
-          <br><br>
-          [<a class="link" on-click="{{ goto }}"
-              _href="{{ gotoLink('/vm-connect') }}">Connect to a VM</a>]
-          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-        </div>
-      </template>
-      <template if="{{ event.kind == 'Inspect' }}">
-        <div class="item">
-          Inspect <any-service-ref ref="{{ event.inspectee }}"></any-service-ref>
-          <br><br>
-          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-        </div>
-      </template>
-      <template if="{{ event.kind == 'IsolateReload' }}">
-        <div class="wide-item item">
-          Isolate reload
-          <template if="{{ event.reloadError != null }}">
-            failed:
-            <br>
-            <br>
-            <div class="indent error">{{ event.reloadError.message.toString() }}</div><br>
-          </template>
-          <template if="{{ event.reloadError == null }}">
-            succeeded
-          </template>
-          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-        </div>
-      </template>
-    </template>
-  </template>
-</polymer-element>
-
-
-<polymer-element name="nav-notify-exception" extends="observatory-element">
-  <template>
-    <style>
-      .item {
-        position: relative;
-        padding: 16px;
-        margin-top: 10px;
-        margin-right: 10px;
-        padding-right: 25px;
-        width: 500px;
-        color: #ddd;
-        background: rgba(0,0,0,.6);
-        border: solid 2px white;
-        box-shadow: 0 0 5px black;
-        border-radius: 5px;
-        animation: fadein 1s;
-      }
-
-      @keyframes fadein {
-        from { opacity: 0; }
-        to   { opacity: 1; }
-      }
-
-      a.link {
-        color: white;
-        text-decoration: none;
-      }
-      a.link:hover {
-        text-decoration: underline;
-      }
-      .indent {
-        margin-left:20px;
-      }
-
-      a.boxclose {
-        position: absolute;
-        display: block;
-        top: 4px;
-        right: 4px;
-        height: 18px;
-        width: 18px;
-        line-height: 16px;
-        border-radius: 9px;
-        color: white;
-        font-size: 18px;
-        cursor: pointer;
-        text-align: center;
-      }
-      a.boxclose:hover {
-        background: rgba(255,255,255,0.5);
-      }
-      .stacktrace {
-        white-space: pre
-      }
-    </style>
-    <template if="{{ isUnexpectedError }}">
-      <!-- TODO(turnidge): Add a file-a-bug link to this notification -->
-      <div class="item">
-        Unexpected exception:<br><br>
-        <div class="indent">{{ exception.toString() }}</div><br>
-        <template if="{{ stacktrace != null }}">
-          Stacktrace:<br><br>
-          <div class="indent stacktrace">{{ stacktrace.toString() }}</div>
-          <br>
-        </template>
-        [<a class="link" on-click="{{ goto }}"
-            _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>]
-        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-    </div>
-    </template>
-    <template if="{{ isNetworkError }}">
-      <div class="item">
-        The request cannot be completed because the VM is currently
-        disconnected.
-        <br><br>
-        [<a class="link" on-click="{{ goto }}"
-            _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>]
-        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-    </div>
-    </template>
-  </template>
-</polymer-element>
-
-
-<script type="application/dart" src="nav_bar.dart"></script>