<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>Dart VM Observatory</title>
  
  
</head>
<body><script src="packages/web_components/platform.js"></script>


<!-- unminfied for debugging:
<link rel="import" href="src/js/polymer/layout.html">
<script src="src/js/polymer/polymer.concat.js"></script>
-->


<style shim-shadowdom="">
/*******************************
          Flex Layout
*******************************/

html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}

html /deep/ [layout][horizontal] {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

html /deep/ [layout][horizontal][reverse] {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

html /deep/ [layout][vertical] {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

html /deep/ [layout][vertical][reverse] {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

html /deep/ [layout][wrap] {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

html /deep/ [layout][wrap-reverse] {
  -ms-flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

html /deep/ [flex] {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

html /deep/ [flex][auto] {
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

html /deep/ [flex][none] {
  -ms-flex: none;
  -webkit-flex: none;
  flex: none;
}

html /deep/ [flex][one] {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

html /deep/ [flex][two] {
  -ms-flex: 2;
  -webkit-flex: 2;
  flex: 2;
}

html /deep/ [flex][three] {
  -ms-flex: 3;
  -webkit-flex: 3;
  flex: 3;
}

html /deep/ [flex][four] {
  -ms-flex: 4;
  -webkit-flex: 4;
  flex: 4;
}

html /deep/ [flex][five] {
  -ms-flex: 5;
  -webkit-flex: 5;
  flex: 5;
}

html /deep/ [flex][six] {
  -ms-flex: 6;
  -webkit-flex: 6;
  flex: 6;
}

html /deep/ [flex][seven] {
  -ms-flex: 7;
  -webkit-flex: 7;
  flex: 7;
}

html /deep/ [flex][eight] {
  -ms-flex: 8;
  -webkit-flex: 8;
  flex: 8;
}

html /deep/ [flex][nine] {
  -ms-flex: 9;
  -webkit-flex: 9;
  flex: 9;
}

html /deep/ [flex][ten] {
  -ms-flex: 10;
  -webkit-flex: 10;
  flex: 10;
}

html /deep/ [flex][eleven] {
  -ms-flex: 11;
  -webkit-flex: 11;
  flex: 11;
}

html /deep/ [flex][twelve] {
  -ms-flex: 12;
  -webkit-flex: 12;
  flex: 12;
}

/* alignment in cross axis */

html /deep/ [layout][start] {
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

html /deep/ [layout][center] {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

html /deep/ [layout][end] {
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

/* alignment in main axis */

html /deep/ [layout][start-justified] {
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

html /deep/ [layout][center-justified] {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

html /deep/ [layout][end-justified] {
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

html /deep/ [layout][around-justified] {
  -ms-flex-pack: around;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

html /deep/ [layout][justified] {
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* self alignment */

html /deep/ [self-start] {
  -ms-align-self: flex-start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

html /deep/ [self-center] {
  -ms-align-self: center;
  -webkit-align-self: center;
  align-self: center;
}

html /deep/ [self-end] {
  -ms-align-self: flex-end;
  -webkit-align-self: flex-end;
  align-self: flex-end;
}

html /deep/ [self-stretch] {
  -ms-align-self: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
}

/*******************************
          Other Layout
*******************************/

html /deep/ [block] {
  display: block;
}

/* ie support for hidden */
html /deep/ [hidden] {
  display: none !important;
}

html /deep/ [relative] {
  position: relative;
}

html /deep/ [fit] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body[fullbleed] {
  margin: 0;
  height: 100vh;
}

/*******************************
            Other
*******************************/

html /deep/ [segment], html /deep/ segment {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1em 0.5em;
  padding: 1em;
  background-color: white;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 5px 5px;
}

</style><script src="packages/polymer/src/js/polymer/polymer.js"></script><script>
// TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
// script tag is necessary to work around a bug in Chrome 36.
</script><script type="text/javascript" src="https://www.google.com/jsapi"></script><style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>


<polymer-element name="curly-block">
  <template>
    <style>
      .idle {
        display: inline-block;
        color: #0489c3;
        cursor: pointer;
      }
      .busy {
        display: inline-block;
        color: white;
        cursor: wait;
      }
    </style>
    <template if="{{ expanded }}">
      <template if="{{ busy }}">
        {<div class="busy">&nbsp;&nbsp;⊟&nbsp;&nbsp;</div>
        <br>
        <content></content>
        }
      </template>
      <template if="{{ !busy }}">
        {<a on-click="{{ toggleExpand }}"><div class="idle">&nbsp;&nbsp;⊟&nbsp;&nbsp;</div></a>
        <br>
        <content></content>
        }
      </template>
    </template>

    <template if="{{ !expanded }}">
      <template if="{{ busy }}">
        {<div class="busy">&nbsp;&nbsp;⊞&nbsp;&nbsp;</div>}
      </template>
      <template if="{{ !busy }}">
        {<a on-click="{{ toggleExpand }}"><div class="idle">&nbsp;&nbsp;⊞&nbsp;&nbsp;</div></a>}
      </template>
    </template>
  </template>
</polymer-element>


<polymer-element name="observatory-element">
</polymer-element>


<polymer-element name="service-ref" extends="observatory-element">
</polymer-element>

<polymer-element name="instance-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <style>
      .errorBox {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 10px;
        font-family: consolas, courier, monospace;
        font-size: 1em;
        line-height: 1.2em;
        white-space: pre;
      }
    </style>
    <span>
      <template if="{{ isError(ref.serviceType) }}">
        <pre class="errorBox">{{ ref.message }}</pre>
      </template>

      <template if="{{ isUnexpected(ref.serviceType) }}">
        unexpected reference type &lt;{{ ref.serviceType }}&gt;
      </template>

      <template if="{{ isNull(ref.serviceType) }}">
        <div title="{{ hoverText }}">{{ ref['valueAsString'] }}</div>
      </template>

      <template if="{{ (isString(ref.serviceType) ||
                        isBool(ref.serviceType) ||
                        isInt(ref.serviceType)) ||
                        isDouble(ref.serviceType)) }}">
        <a on-click="{{ goto }}" href="{{ url }}">{{ ref['valueAsString'] }}</a>
      </template>

      <template if="{{ (isType(ref.serviceType)) }}">
        <a on-click="{{ goto }}" href="{{ url }}">{{ ref['user_name'] }}</a>
      </template>

      <template if="{{ isInstance(ref.serviceType) &amp;&amp;
                       ref['closureFunc'] != null}}">
        <a on-click="{{ goto }}" href="{{ url }}">
          <!-- TODO(turnidge): Switch this to fully-qualified function -->
          {{ ref['closureFunc'].name }}
        </a>
      </template>

      <template if="{{ isInstance(ref.serviceType) &amp;&amp;
                       ref['closureFunc'] == null}}">
        <a on-click="{{ goto }}" href="{{ url }}"><em>{{ ref['class'].name }}</em></a>
        <curly-block callback="{{ expander() }}">
          <div class="memberList">
            <template repeat="{{ field in ref['fields'] }}">
              <div class="memberItem">
                <div class="memberName">
                  {{ field['decl']['user_name'] }}
                </div>
                <div class="memberValue">
                  <instance-ref ref="{{ field['value'] }}"></instance-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block>
      </template>

      <template if="{{ isList(ref.serviceType) }}">
        <a on-click="{{ goto }}" href="{{ url }}"><em>{{ ref['class'].name }}</em> ({{ ref['length']}})</a>
        <curly-block callback="{{ expander() }}">
          <div class="memberList">
            <template repeat="{{ element in ref['elements'] }}">
              <div class="memberItem">
                <div class="memberName">[{{ element['index']}}]</div>
                <div class="memberValue">
                  <instance-ref ref="{{ element['value'] }}"></instance-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block>
      </template>
    </span>
  </template>
</polymer-element>

<polymer-element name="action-link">
  <template>
    <style>
      .idle {
        color: #0489c3;
        cursor: pointer;
        text-decoration: none;
      }
      .idle:hover {
        text-decoration: underline;
      }
      .busy {
        color: #aaa;
        cursor: wait;
        text-decoration: none;
      }
    </style>

    <template if="{{ busy }}">
      <span class="busy">[{{ label }}]</span>
    </template>
    <template if="{{ !busy }}">
      <template if="{{ color == null }}">
        <span class="idle"><a on-click="{{ doAction }}">[{{ label }}]</a></span>
      </template>
      <template if="{{ color != null }}">
        <span class="idle" style="color:{{ color }}"><a on-click="{{ doAction }}">[{{ label }}]</a></span>
      </template>
    </template>
  </template>
</polymer-element>


<polymer-element name="nav-bar" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <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 events="{{ app.notifications }}"></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="nav-control" extends="observatory-element">
  <template>
    <style>
      .black {
        color: #000;
      }
      li {
        float: right;
        margin: 0;
      }
      button {
        margin: 3px;
        padding: 8px;
      }
    </style>
    <!-- Disable until issues with history in Dartium are fixed
    <li>
      <button class="black" on-click="{{ back }}">&#9664;</button>
      <button class="black" on-click="{{ forward }}">&#9654;</button>
    </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 different VM"></nav-menu-item>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="isolate-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last="{{ last }}">
      <nav-menu-item link="{{ isolate.relativeLink('stacktrace') }}" anchor="stack trace"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('profile') }}" anchor="cpu profile"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" anchor="allocation profile"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" anchor="heap map"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" anchor="breakpoints"></nav-menu-item>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="library-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ library.link }}" 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="{{ cls.link }}" 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="{{ event in events }}">
          <nav-notify-item events="{{ events }}" event="{{ event }}">
          </nav-notify-item>
        </template>
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="nav-notify-item" extends="observatory-element">
  <template>
    <style>
      .item {
        position: relative;
        padding: 16px;
        margin-top: 10px;
        margin-right: 10px;
        padding-right: 25px;
        width: 200px;
        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;
      }

      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);
      }
    </style>
    <template if="{{ event.eventType == 'IsolateInterrupted' ||
                     event.eventType == 'BreakpointReached' ||
                     event.eventType == 'ExceptionThrown' }}">
      <div class="item">
        Isolate
        <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
        is paused
        <template if="{{ event.breakpoint != null }}">
          at breakpoint
        </template>
        <template if="{{ event.eventType == 'ExceptionThrown' }}">
          at exception
        </template>

        <br><br>
        <action-link callback="{{ resume }}" label="resume" color="white">
        </action-link>
        <action-link callback="{{ stepInto }}" label="step" color="white">
        </action-link>
        <action-link callback="{{ stepOver }}" label="step&nbsp;over" color="white"></action-link>
        <action-link callback="{{ stepOut }}" label="step&nbsp;out" color="white"></action-link>
        <a class="boxclose" on-click="{{ closeItem }}">×</a>
      </div>
    </template>
  </template>
</polymer-element>


<polymer-element name="breakpoint-list" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ gotoLink(msg.isolate.relativeLink('debug/breakpoints')) }}" anchor="breakpoints" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>
    <template if="{{ msg['breakpoints'].isEmpty }}">
      <div>
        <div>No breakpoints</div>
      </div>
    </template>
    <template if="{{ msg['breakpoints'].isNotEmpty }}">
      <ul class="list-group">
      <template repeat="{{ bpt in msg['breakpoints'] }}">
        <li class="list-group-item">
          {{ bpt }}
        </li>
      </template>
      </ul>
    </template>
  </template>
</polymer-element>


<polymer-element name="class-ref" extends="service-ref">
  <template><style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style><a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></template>
</polymer-element>


<polymer-element name="class-tree" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <style>
      .table {
        border-collapse: collapse!important;
        width: 100%;
        margin-bottom: 20px
      }
      .table thead > tr > th,
      .table tbody > tr > th,
      .table tfoot > tr > th,
      .table thead > tr > td,
      .table tbody > tr > td,
      .table tfoot > tr > td {
        padding: 8px;
        vertical-align: top;
      }
      .table thead > tr > th {
        vertical-align: bottom;
        text-align: left;
        border-bottom:2px solid #ddd;
      }

      tr:hover > td {
        background-color: #FFF3E3;
      }
      .rowColor0 {
        background-color: #FFE9CC;
      }
      .rowColor1 {
        background-color: #FFDEB2;
      }
      .rowColor2 {
        background-color: #FFD399;
      }
      .rowColor3 {
        background-color: #FFC87F;
      }
      .rowColor4 {
        background-color: #FFBD66;
      }
      .rowColor5 {
        background-color: #FFB24C;
      }
      .rowColor6 {
        background-color: #FFA733;
      }
      .rowColor7 {
        background-color: #FF9C19;
      }
      .rowColor8 {
        background-color: #FF9100;
      }

      .tooltip {
        display: block;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
      }

      tr:hover .tooltip {
        display: block;
        position: absolute;
        top: 100%;
        right: 100%;
        visibility: visible;
        z-index: 999;
        width: 400px;
        color: #ffffff;
        background-color: #0489c3;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
        opacity: 1;
      }

      .white {
        color: #ffffff;
      }
    </style>
    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-control></nav-control>
    </nav-bar>
    <div class="content-centered">
      <h1>Class Hierarchy</h1>
      <table id="tableTree" class="table">
        <thead>
          <tr>
            <th>Class</th>
          </tr>
        </thead>
        <tbody>
          <tr template="" repeat="{{row in tree.rows }}">
            <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}">
              <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
              <class-ref ref="{{ row.cls }}"></class-ref>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
</polymer-element>


<polymer-element name="eval-box" extends="observatory-element">
  <template>
    <style>
      .textbox {
        width: 80ex;
        font: 400 16px 'Montserrat', sans-serif;
      }
      .bigtextbox {
        font: 400 16px 'Montserrat', sans-serif;
      }
      .button {
        font: 400 16px 'Montserrat', sans-serif;
      }
      .radios {
        display: inline;
      }
      .radios label{
        padding-left: 15px;
      }
      .historyExpr, .historyValue {
        vertical-align: text-top;
        font: 400 14px 'Montserrat', sans-serif;
      }
      .historyExpr a {
        display: block;
        color: black;
        text-decoration: none;
        padding: 6px 6px;
        cursor: pointer;
        white-space: pre-line;
      }
      .historyExpr a:hover {
        background-color: #fff3e3;
      }
      .historyValue {
        display: block;
        padding: 6px 6px;
      }
    </style>
    <form>
      <template if="{{ lineMode == '1-line' }}">
        <input class="textbox" type="text" value="{{ text }}">
      </template>
      <template if="{{ lineMode == 'N-line' }}">
        <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></textarea>
      </template>

      <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}">
      <div class="radios" on-change="{{ updateLineMode }}">
        <label for="1-line">1-line
          <input type="radio" name="lineMode" value="1-line" checked="">
        </label>
        <label for="N-line">N-line
          <input type="radio" name="lineMode" value="N-line">
        </label>
      </div>
    </form>

    <br>
    <template if="{{ results.isNotEmpty }}">
      <table>
        <tbody><tr template="" repeat="{{ result in results }}">
          <td class="historyExpr">
            <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
          </td>
          <td class="historyValue">
            <template if="{{ result['value'] == null }}">
              <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
            </template>
            <template if="{{ result['value'] != null }}">
              <instance-ref ref="{{ result['value'] }}"></instance-ref>
            </template>
          </td>
        </tr>
      </tbody></table>
    </template>
  </template>
</polymer-element>


<polymer-element name="eval-link">
  <template>
    <style>
      .idle {
        color: #0489c3;
        cursor: pointer;
      }
      .busy {
        color: #aaa;
        cursor: wait;
      }
    </style>

    <template if="{{ busy }}">
      <span class="busy">{{ label }}</span>
    </template>
    <template if="{{ !busy }}">
      <span class="idle"><a on-click="{{ evalNow }}">{{ label }}</a></span>
    </template>
    <template if="{{ result != null }}">
      = <instance-ref ref="{{ result }}"></instance-ref>
    </template>
  </template>
</polymer-element>


<polymer-element name="field-ref" extends="service-ref">
  <template>
  <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <div>
      <template if="{{ ref['static'] }}">static</template>
      <template if="{{ ref['final'] }}">final</template>
      <template if="{{ ref['const'] }}">const</template>
      <template if="{{ (ref['declared_type']['name'] == 'dynamic' &amp;&amp;
                        !ref['final'] &amp;&amp; !ref['const']) }}">
        var
      </template>
      <template if="{{ (ref['declared_type']['name'] != 'dynamic') }}">
        <instance-ref ref="{{ ref['declared_type'] }}"></instance-ref>
      </template>
      <a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
    </div>
  </template>
</polymer-element>


<polymer-element name="function-ref" extends="service-ref">
  <template><style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style><!-- These comments are here to allow newlines.
     --><template if="{{ ref.isDart }}"><!--
       --><template if="{{ qualified &amp;&amp; ref.parent == null &amp;&amp; ref.owningClass != null }}"><!--
       --><class-ref ref="{{ ref.owningClass] }}"></class-ref>.</template><!--
     --><template if="{{ qualified &amp;&amp; ref.parent != null }}"><!--
       --><function-ref ref="{{ ref.parent }}" qualified="{{ true }}">
          </function-ref>.<!--
     --></template><a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a><!--
  --></template><template if="{{ !ref.isDart }}"><span> {{ name }}</span></template></template>
</polymer-element>


<polymer-element name="library-ref" extends="service-ref">
  <template><style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <template if="{{ nameIsEmpty }}">
      <a on-click="{{ goto }}" href="{{ url }}">unnamed</a>
    </template>
    <template if="{{ !nameIsEmpty }}">
      <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
    </template>
  </template>
</polymer-element>


<polymer-element name="script-inset" extends="observatory-element">
  <template>
    <style>
      .sourceInset {
        padding-left: 15%;
        padding-right: 15%;
      }
      .sourceBox {
        width: 100%;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 10px;
        overflow-y: auto;
      }
      .sourceTable {
        display: table;
      }
      .sourceRow {
        display: table-row;
      }
      .sourceItem, .sourceItemCurrent {
        display: table-cell;
        vertical-align: top;
        font: 400 14px consolas, courier, monospace;
        line-height: 125%;
        white-space: pre;
      }
      .sourceItemCurrent {
        background-color: #6cf;
      }
      .hitsNone, .hitsNotExecuted, .hitsExecuted {
        min-width: 32px;
        text-align: right;
      }
      .hitsNotExecuted {
        background-color: #e66;
      }
      .hitsExecuted {
        background-color: #6d6;
      }
    </style>
    <div class="sourceInset">
      <content></content>
      <div class="sourceBox" style="height:{{height}}">
        <div class="sourceTable">
          <template if="{{ linesReady }}">
            <template repeat="{{ line in lines }}">
              <div class="sourceRow" id="{{ makeLineId(line.line) }}">
                <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>

                <div class="sourceItem">&nbsp;</div>

                <template if="{{ line.hits == null ||
                              line.hits < 0 }}">
                  <div class="hitsNone">{{ line.line }}</div>
                </template>
                <template if="{{ line.hits == 0 }}">
                  <div class="hitsNotExecuted">{{ line.line }}</div>
                </template>
                <template if="{{ line.hits > 0 }}">
                  <div class="hitsExecuted">{{ line.line }}</div>
                </template>

                <div class="sourceItem">&nbsp;</div>

                <template if="{{ line.line == currentLine }}">
                  <div class="sourceItemCurrent">{{line.text}}</div>
                </template>
                <template if="{{ line.line != currentLine }}">
                  <div class="sourceItem">{{line.text}}</div>
                </template>
              </div>
            </template>
          </template>

          <template if="{{ !linesReady }}">
            <div class="sourceRow">
              <div class="sourceItem">loading...</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="breakpoint-toggle" extends="observatory-element">
  <template>
    <style>
      .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpoint, .resolvedBreakpoint  {
        display: table-cell;
        vertical-align: top;
        font: 400 14px consolas, courier, monospace;
        min-width: 1em;
        text-align: center;
        cursor: pointer;
      }
      .possibleBreakpoint {
        color: #e0e0e0;
      }
      .possibleBreakpoint:hover {
        color: white;
        background-color: #777;
      }
      .busyBreakpoint {
        color: white;
        background-color: black;
        cursor: wait;
      }
      .unresolvedBreakpoint {
        color: white;
        background-color: #cac;
      }
      .resolvedBreakpoint {
        color: white;
        background-color: #e66;
      }
    </style>

    <template if="{{ line.possibleBpt &amp;&amp; busy}}">
      <div class="busyBreakpoint">B</div>
    </template>

    <template if="{{ line.bpt == null &amp;&amp; !line.possibleBpt }}">
      <div class="emptyBreakpoint">&nbsp;</div>
    </template>

    <template if="{{ line.bpt == null &amp;&amp; line.possibleBpt &amp;&amp; !busy}}">
      <div class="possibleBreakpoint">
        <a on-click="{{ toggleBreakpoint }}">B</a>
      </div>
    </template>

    <template if="{{ line.bpt != null &amp;&amp; !line.bpt['resolved'] &amp;&amp; !busy}}">
      <div class="unresolvedBreakpoint">
        <a on-click="{{ toggleBreakpoint }}">B</a>
      </div>
    </template>

    <template if="{{ line.bpt != null &amp;&amp; line.bpt['resolved'] &amp;&amp; !busy}}">
      <div class="resolvedBreakpoint">
        <a on-click="{{ toggleBreakpoint }}">B</a>
      </div>
    </template>

  </template>
</polymer-element>


<polymer-element name="script-ref" extends="service-ref">
<template>
  <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
  <a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
</template>
</polymer-element>


<polymer-element name="class-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu>
      <library-nav-menu library="{{ cls.library }}"></library-nav-menu>
      <class-nav-menu cls="{{ cls }}" last="{{ true }}"></class-nav-menu>
      <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>
        <template if="{{ cls.isAbstract }}">
          abstract
        </template>
        <template if="{{ cls.isPatch }}">
          patch
        </template>
        class {{ cls.name }}
      </h1>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">library</div>
          <div class="memberValue">
            <library-ref ref="{{ cls.library }}"></library-ref>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberName">script</div>
          <div class="memberValue">
            <script-ref ref="{{ cls.script }}" pos="{{ cls.tokenPos }}">
            </script-ref>
          </div>
        </div>

        <div class="memberItem">&nbsp;</div>

        <template if="{{ cls.superClass != null }}">
          <div class="memberItem">
            <div class="memberName">extends</div>
            <div class="memberValue">
              <class-ref ref="{{ cls.superClass }}"></class-ref>
            </div>
          </div>
        </template>
        <template if="{{ cls.subClasses.length > 0 }}">
          <div class="memberItem">
            <div class="memberName">extended by</div>
            <div class="memberValue">
              <template repeat="{{ subclass in cls.subClasses }}">
                <class-ref ref="{{ subclass }}"></class-ref>
              </template>
            </div>
          </div>
        </template>

        <div class="memberItem">&nbsp;</div>

        <template if="{{ cls.interfaces.length > 0 }}">
          <div class="memberItem">
            <div class="memberName">implements</div>
            <div class="memberValue">
              <template repeat="{{ interface in cls.interfaces }}">
                <class-ref ref="{{ interface }}"></class-ref>
              </template>
            </div>
          </div>
        </template>
        <template if="{{ cls.name != cls.vmName }}">
          <div class="memberItem">
            <div class="memberName">vm name</div>
            <div class="memberValue">{{ cls.vmName }}</div>
          </div>
        </template>
      </div>
    </div>

    <template if="{{ cls.error != null }}">
      <!-- TODO(turnidge): Don't use instance-ref for error display here -->
      <instance-ref ref="{{ cls.error }}"></instance-ref>
    </template>

    <hr>

    <div class="content">
      <template if="{{ cls.fields.isNotEmpty }}">
        fields ({{ cls.fields.length }})
        <curly-block expand="{{ cls.fields.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ field in cls.fields }}">
              <div class="memberItem">
                <div class="memberName">
                  <field-ref ref="{{ field }}"></field-ref>
                </div>
                <div class="memberValue">
                  <template if="{{ field['value'] != null }}">
                    <instance-ref ref="{{ field['value'] }}"></instance-ref>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br><br>
      </template>

      <template if="{{ cls.functions.isNotEmpty }}">
        functions ({{ cls.functions.length }})
        <curly-block expand="{{ cls.functions.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ function in cls.functions }}">
              <div class="memberItem">
                <div class="memberValue">
                  <function-ref ref="{{ function }}" qualified="{{ false }}">
                  </function-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br><br>
      </template>
      
      <template if="{{ !cls.hasNoAllocations }}">
        instances
          <div class="memberItem">
            <div class="memberName">currently allocated</div>
            <div class="memberValue">
              count {{ cls.newSpace.current.instances + cls.oldSpace.current.instances }}
              (shallow size {{ cls.newSpace.current.bytes + cls.oldSpace.current.bytes | formatSize }})
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">strongly reachable</div>
            <div class="memberValue">
              <template if="{{ instances == null }}">
                <eval-link callback="{{ reachable }}" label="[find]" expr="100">
                </eval-link>
              </template>
              <template if="{{ instances != null }}">
                sample
                <instance-ref ref="{{ instances['sample'] }}"></instance-ref>
                <template if="{{ instances['totalCount'] > instances['sampleCount'] }}">
                  <eval-link callback="{{ reachable }}" label="[more]" expr="{{ instances['sampleCount'] * 2 }}">
                  </eval-link>
                </template>
                of total {{ instances['totalCount'] }}
              </template>
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">retained size</div>
            <div class="memberValue">
              <template if="{{ retainedBytes == null }}">
                <eval-link callback="{{ retainedSize }}" label="[calculate]">
                </eval-link>
              </template>
              <template if="{{ retainedBytes != null }}">
                {{ retainedBytes | formatSize }}
              </template>
            </div>
          </div>
        </template>
    </div>

    <hr>

    <div class="content">
      <eval-box callback="{{ eval }}"></eval-box>
    </div>

    <hr>
    <script-inset script="{{ cls.script }}" startpos="{{ cls.tokenPos }}" endpos="{{ cls.endTokenPos }}">
    </script-inset>

    <br><br><br><br>
    <br><br><br><br>
  </template>
</polymer-element>


<polymer-element name="code-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <template if="{{ code.isDartCode }}">
        <template if="{{ code.isOptimized }}">
          <a on-click="{{ goto }}" href="{{ url }}">*{{ name }}</a>
        </template>
        <template if="{{ !code.isOptimized }}">
          <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
        </template>
    </template>
    <template if="{{ !code.isDartCode }}">
      <span>{{ name }}</span>
    </template>
  </template>
</polymer-element>


<polymer-element name="code-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <style>
      div.flex-row:hover {
        background-color: #FFF3E3;
      }

      .highlight {
        background-color: #FFF3E3;
      }

      .tooltip {
        display: block;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
      }

      .flex-row:hover .tooltip {
        display: block;
        position: absolute;
        top: 100%;
        visibility: visible;
        z-index: 999;
        width: auto;
        min-width: 400px;
        color: #ffffff;
        background-color: #FFF3E3;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
        opacity: 1;
      }

      .descriptor-address {
        color: #0489c3;
      }

      .snippet {
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
      }

    </style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ code.link }}" anchor="{{ code.name }}" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>
    <div class="content">
      <template if="{{ code.isDartCode &amp;&amp; code.isOptimized }}">
        <h1>Optimized code for {{ code.name }}</h1>
      </template>
      <template if="{{ !(code.isDartCode &amp;&amp; code.isOptimized) }}">
        <h1>Code for {{ code.name }}</h1>
      </template>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Kind</div>
          <div class="memberValue">{{code.kind}}</div>
        </div>
        <template if="{{ code.isDartCode }}">
          <div class="memberItem">
            <div class="memberName">Optimized</div>
            <div class="memberValue">{{code.isOptimized}}</div>
          </div>
        </template>
        <div class="memberItem">
          <div class="memberName">Function</div>
          <div class="memberValue">
            <function-ref ref="{{code.function}}">
            </function-ref>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberName">Inclusive</div>
          <div class="memberValue">{{ code.formattedInclusiveTicks }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Exclusive</div>
          <div class="memberValue">{{ code.formattedExclusiveTicks }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Constant object pool</div>
          <div class="memberValue">
            <instance-ref ref="{{ code.objectPool }}"></instance-ref>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="content">
      <template if="{{ code.hasDisassembly }}">
        <div class="flex-row">
            <div class="flex-item-fixed-2-12 memberHeader">Inclusive</div>
            <div class="flex-item-fixed-2-12 memberHeader">Exclusive</div>
            <div class="flex-item-fixed-2-12 memberHeader">Address</div>
            <div class="flex-item-fixed-6-12 memberHeader">Disassembly</div>
        </div>
      </template>
      <template repeat="{{ instruction in code.instructions }}">
        <div class="flex-row" on-mouseover="{{ mouseOver }}" on-mouseout="{{ mouseOut }}" data-jump-target="{{ instruction.jumpTarget.address }}" id="addr-{{ instruction.address }}" style="position: relative">
          <template if="{{ instruction.isComment }}">
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedInclusive(code) }}</div>
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedExclusive(code) }}</div>
            <div class="flex-item-fixed-8-12 monospace">{{ instruction.human }}</div>
          </template>
          <template if="{{ !instruction.isComment }}">
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedInclusive(code) }}</div>
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedExclusive(code) }}</div>
            <template if="{{ instruction.hasDescriptors }}">
              <div class="flex-item-fixed-2-12 monospace descriptor-address">
                <div class="tooltip">
                  <template repeat="{{ descriptor in instruction.descriptors }}">
                    <div class="memberList">
                      <div class="memberItem">
                       <div class="memberName">Kind</div>
                       <div class="memberValue">{{ descriptor.kind }}</div>
                      </div>
                      <div class="memberItem">
                       <div class="memberName">Deoptimization ID</div>
                       <div class="memberValue">{{ descriptor.formattedDeoptId() }}</div>
                      </div>
                      <template if="{{ descriptor.script != null }}">
                        <div class="memberItem">
                         <div class="memberName">Script</div>
                         <div class="memberValue"><script-ref ref="{{ descriptor.script }}" pos="{{ descriptor.tokenPos }}"></script-ref></div>
                        </div>
                      </template>
                    </div>
                    <template if="{{ descriptor.script != null }}">
                      <div class="snippet monospace">
                        <span>{{ descriptor.formattedLine }}</span>
                      </div>
                    </template>
                  </template>
                </div>
                {{ instruction.formattedAddress() }}
              </div>
            </template>
            <template if="{{ !instruction.hasDescriptors }}">
              <div class="flex-item-fixed-2-12 monospace">
                {{ instruction.formattedAddress() }}
              </div>
            </template>
            <div class="flex-item-fixed-6-12 monospace">
              {{ instruction.human }}
            </div>
          </template>
        </div>
      </template>
    </div>
  </template>
</polymer-element>


<polymer-element name="error-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-control></nav-control>
    </nav-bar>
    <div class="content-centered">
      <h1>{{ error.kind }}</h1>
      <br>
      <div class="well">{{ error.message }}</div>
    </div>
  </template>
</polymer-element>


<polymer-element name="field-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>
      <template if="{{ field['owner'].serviceType == 'Class' }}">
        <!-- TODO(turnidge): Add library nav menu here. -->
        <class-nav-menu cls="{{ field['owner'] }}"></class-nav-menu>
      </template>
      <template if="{{ field['owner'].serviceType == 'Library' }}">
        <library-nav-menu library="{{ field['owner'] }}"></library-nav-menu>
      </template>
      <nav-menu link="{{ field.link }}" anchor="{{ field['user_name'] }}" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>
        <template if="{{ field['static'] }}">static</template>
        <template if="{{ field['final'] }}">final</template>
        <template if="{{ field['const'] }}">const</template>
        <template if="{{ (field['declared_type']['name'] == 'dynamic' &amp;&amp;
                         !field['final'] &amp;&amp; !field['const']) }}">
          var
        </template>
        <template if="{{ (field['declared_type']['user_name'] != 'dynamic') }}">
          {{ field['declared_type']['user_name'] }}
        </template>
        {{ field['user_name'] }}
      </h1>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">owner</div>
          <div class="memberValue">
            <template if="{{ field['owner'].serviceType == 'Class' }}">
              <class-ref ref="{{ field['owner'] }}"></class-ref>
            </template>
            <template if="{{ field['owner'].serviceType != 'Class' }}">
              <library-ref ref="{{ field['owner'] }}"></library-ref>
            </template>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberName">script</div>
          <div class="memberValue">
            <script-ref ref="{{ field['script'] }}"></script-ref>
          </div>
        </div>
        <template if="{{ !field['static'] }}">
          <div class="memberItem" title="The types observed for this field at runtime.  Fields that are observed to have a single type at runtime or to never be null may allow for additional optimization.">
            <div class="memberName">observed types</div>
            <div class="memberValue">
              <template if="{{ field['guard_class'] == 'dynamic' }}">
                various
              </template>
              <template if="{{ field['guard_class'] == 'unknown' }}">
                none
              </template>
              <template if="{{ field['guard_class'] != 'unknown' &amp;&amp;
                            field['guard_class'] != 'dynamic' }}">
                <class-ref ref="{{ field['guard_class'] }}"></class-ref>
                <template if="{{ field['guard_nullable'] }}">
                  — null observed
                </template>
                <template if="{{ !field['guard_nullable'] }}">
                  — null not observed
                </template>
              </template>
            </div>
          </div>
        </template>
        <template if="{{ field['value'] != null }}">
          <div class="memberItem">
            <div class="memberName">static value</div>
            <div class="memberValue">
              <instance-ref ref="{{ field['value'] }}"></instance-ref>
            </div>
          </div>
        </template>
      </div>
    </div>
  </template>
</polymer-element>


<polymer-element name="stack-frame" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <div class="flex-row">
      <div class="flex-item-fixed-1-12">
      </div>
      <div class="flex-item-fixed-1-12">
        #{{ frame['depth'] }}
      </div>
      <div class="flex-item-fixed-9-12">
        <function-ref ref="{{ frame['function'] }}"></function-ref>
          ( <script-ref ref="{{ frame['script'] }}" pos="{{ frame['tokenPos'] }}">
          </script-ref> )

          <curly-block>
            <div class="memberList">
              <template repeat="{{ v in frame['vars'] }}">
                <div class="memberItem">
                  <div class="memberName">{{ v['name']}}</div>
                  <div class="memberValue">
                    <instance-ref ref="{{ v['value'] }}"></instance-ref>
                  </div>
                </div>
              </template>
            </div>
          </curly-block>
      </div>
      <div class="flex-item-fixed-1-12">
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="flag-list" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content-centered">
      <template if="{{ flagList['modifiedFlags'].isNotEmpty }}">
        <h1>Modified Flags</h1>
        <br>
        <template repeat="{{ flag in flagList['modifiedFlags'] }}">
          <flag-item flag="{{ flag }}"></flag-item>
          <br>
        </template>
        <hr>
      </template>

      <h1>Unmodified Flags</h1>
      <br>
      <template if="{{ flagList['unmodifiedFlags'].isEmpty }}">
        <em>None</em>
      </template>
      <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}">
        <template repeat="{{ flag in flagList['unmodifiedFlags'] }}">
          <flag-item flag="{{ flag }}"></flag-item>
          <br>
        </template>
      </template>
    </div>

  </template>
</polymer-element>

<polymer-element name="flag-item" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <span style="color:#aaa">// {{ flag['comment'] }}</span>
    <div style="padding: 3px 0">
      <b>{{ flag['name'] }}</b>
      &nbsp;=&nbsp;
      {{ flag['valueAsString'] }}
    </div>
  </template>
</polymer-element>


<polymer-element name="function-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
      <template if="{{ function.owningClass != null }}">
        <!-- TODO(turnidge): Add library nav menu here. -->
        <class-nav-menu cls="{{ function.owningClass }}"></class-nav-menu>
      </template>
      <template if="{{ function.owningLibrary != null }}">
        <library-nav-menu library="{{ function.owningLibrary }}"></library-nav-menu>
      </template>
      <nav-menu link="{{ function.link }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>function {{ function.qualifiedName }}</h1>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">kind</div>
          <div class="memberValue">
            <template if="{{ function.isStatic }}">static</template>
            <template if="{{ function.isConst }}">const</template>
            {{ function.kind.toString() }}
          </div>
        </div>
        <template if="{{ function.parent != null }}">
          <div class="memberItem">
            <div class="memberName">parent function</div>
            <div class="memberValue">
              <function-ref ref="{{ function.parent }}"></function-ref>
            </div>
          </div>
        </template>
        <div class="memberItem">
          <div class="memberName">owner</div>
          <div class="memberValue">
            <template if="{{ function.owningClass != null }}">
              <class-ref ref="{{ function.owningClass }}"></class-ref>
            </template>
            <template if="{{ function.owningLibrary != null }}">
              <library-ref ref="{{ function.owningLibrary }}"></library-ref>
            </template>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberName">script</div>
          <div class="memberValue">
            <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }}">
            </script-ref>
          </div>
        </div>

        <div class="memberItem">&nbsp;</div>

        <template if="{{ function.code != null }}">
          <div class="memberItem">
            <div class="memberName">optimized code</div>
            <div class="memberValue">
              <code-ref ref="{{ function.code }}"></code-ref>
            </div>
          </div>
        </template>
        <template if="{{ function.unoptimizedCode != null }}">
          <div class="memberItem">
            <div class="memberName">unoptimized code</div>
            <div class="memberValue">
              <code-ref ref="{{ function.unoptimizedCode }}"></code-ref>
            </div>
              <div class="memberValue">
                <span title="This count is used to determine when a function will be optimized.  It is a combination of call counts and other factors.">
                  (usage count: {{ function.usageCounter }})
                </span>
             </div>
           </div>
         </template>
         <div class="memberItem">
           <div class="memberName">deoptimizations</div>
           <div class="memberValue">{{ function.deoptimizations }}</div>
         </div>
         <div class="memberItem">
           <div class="memberName">optimizable</div>
           <div class="memberValue">{{ function.isOptimizable }}</div>
         </div>
         <div class="memberItem">
           <div class="memberName">inlinable</div>
           <div class="memberValue">{{ function.isInlinable }}</div>
         </div>
         <template if="{{ function.name != function.vmName }}">
           <div class="memberItem">
             <div class="memberName">vm name</div>
             <div class="memberValue">{{ function.vmName }}</div>
           </div>
         </template>
       </div>
    </div>

    <hr>
    <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}">
    </script-inset>

    <br>
  </template>
</polymer-element>


<polymer-element name="heap-map" extends="observatory-element">
<template>
  <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
  <style>
    .hover {
      position: fixed;
      z-index: 999;
      height: 16px;
      width: 100%;
      background: #ffffff;
    }
    .spacer {
      height: 16px;
      background-color: red;
    }
  </style>
  <nav-bar pad="{{ false }}">
    <top-nav-menu></top-nav-menu>
    <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu>
    <nav-menu link="{{ fragmentation.isolate.relativeLink('heapmap') }}" anchor="heap map" last="{{ true }}"></nav-menu>
    <nav-refresh callback="{{ refresh }}"></nav-refresh>
    <nav-control></nav-control>
  </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>
</template>
</polymer-element>


<polymer-element name="io-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>dart:io</h1>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/http/servers'))}}">HTTP Servers</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/sockets'))}}">Sockets</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/websockets'))}}">WebSockets</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/file/randomaccessfiles'))}}">Random Access Files</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/processes'))}}">Processess</a>
        </li>
      </ul>

    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <template if="{{ ref.serviceType == 'Socket' }}">
      <io-socket-ref ref="{{ ref }}"></io-socket-ref>
    </template>
    <template if="{{ ref.serviceType == 'HttpServerConnection' }}">
      <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection-ref>
    </template>
    <template if="{{ ref.serviceType == 'HttpServer' }}">
      <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
    </template>
    <template if="{{ ref.serviceType == 'WebSocket' }}">
      <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>
    </template>
    <template if="{{ ref.serviceType == 'Process' }}">
      <io-process-ref ref="{{ ref }}"></io-process-ref>
    </template>
  </template>
</polymer-element>

<polymer-element name="io-http-server-list-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>HttpServers</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ httpServer in list['members'] }}">
          <li class="list-group-item">
            <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-http-server-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-http-server-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>HttpServer</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Socket</div>
          <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] }}"></io-socket-ref></div>
        </div>
        <div class="memberItem">
          <div class="memberName">Address</div>
          <div class="memberValue">{{ httpServer['address'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Port</div>
          <div class="memberValue">{{ httpServer['port'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Active connections</div>
          <ul class="list-group">
            <template repeat="{{ connection in httpServer['active'] }}">
              <li class="list-group-item">
                <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref>
              </li>
            </template>
          </ul>
        </div>
        <div class="memberItem">
          <div class="memberName">Idle connections</div>
          <ul class="list-group">
            <template repeat="{{ connection in httpServer['idle'] }}">
              <li class="list-group-item">
                <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-http-server-connection-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <a href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-http-server-connection-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>HttpConnection</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Socket</div>
          <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] }}"></io-socket-ref></div>
        </div>
        <div class="memberItem">
          <div class="memberName">State</div>
          <div class="memberValue">{{ connection['state'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Server</div>
          <div class="memberValue"><io-http-server-ref ref="{{ connection['server'] }}"></io-http-server-ref></div>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-socket-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-socket-list-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Sockets</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ socket in list['members'] }}">
          <li class="list-group-item">
            <io-socket-ref ref="{{ socket }}"></io-socket-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-socket-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <!-- Pipe Socket -->
      <template if="{{ socket.isPipe }}">
        <h1>Pipe Socket</h1>
        <div class="memberList">
          <template if="{{ socket.socketOwner != null }}">
            <div class="memberItem">
              <div class="memberName">Owner</div>
              <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></io-ref></div>
            </div>
          </template>
          <div class="memberItem">
            <div class="memberName">File descriptor</div>
            <div class="memberValue">{{ socket.fd }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Read Closed</div>
            <div class="memberValue">{{ socket.readClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Write Closed</div>
            <div class="memberValue">{{ socket.writeClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Closing</div>
            <div class="memberValue">{{ socket.closing }}</div>
          </div>
        </div>
      </template>
      <!-- Network Socket -->
      <template if="{{ !socket.isPipe }}">
        <h1>Network Socket</h1>
        <div class="memberList">
          <template if="{{ socket.socketOwner != null }}">
            <div class="memberItem">
              <div class="memberName">Owner</div>
              <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></io-ref></div>
            </div>
          </template>
          <div class="memberItem">
            <div class="memberName">Local Address</div>
            <div class="memberValue">{{ socket.localAddress }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Local Port</div>
            <div class="memberValue">{{ socket.localPort }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Remote Address</div>
            <div class="memberValue">{{ socket.remoteAddress }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Remote Port</div>
            <div class="memberValue">{{ socket.remotePort }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">File descriptor</div>
            <div class="memberValue">{{ socket.fd }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Read Closed</div>
            <div class="memberValue">{{ socket.readClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Write Closed</div>
            <div class="memberValue">{{ socket.writeClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Closing</div>
            <div class="memberValue">{{ socket.closing }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Listening</div>
            <div class="memberValue">{{ socket.listening }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Protocol</div>
            <div class="memberValue">{{ socket.protocol }}</div>
          </div>
        </div>
      </template>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-web-socket-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-web-socket-list-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>WebSockets</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ webSocket in list['members'] }}">
          <li class="list-group-item">
            <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-web-socket-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>WebSocket</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Socket</div>
          <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }}"></io-socket-ref></div>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-random-access-file-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-random-access-file-list-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Random Access Files</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ file in list['members'] }}">
          <li class="list-group-item">
            <io-random-access-file-ref ref="{{ file }}"></io-random-access-file-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-random-access-file-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Random Access File</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Path</div>
          <div class="memberValue">{{ file['name'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Pending Operation</div>
          <div class="memberValue">{{ file['asyncDispatched'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">File Descriptor</div>
          <div class="memberValue">{{ file['fd'] }}</div>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-process-list-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Processes</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ process in list['members'] }}">
          <li class="list-group-item">
            <io-process-ref ref="{{ process }}"></io-process-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-process-ref" extends="service-ref">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <template if="{{ small }}">
      <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
    </template>
    <template if="{{ !small }}">
      <a on-click="{{ goto }}" href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
    </template>
  </template>
</polymer-element>

<polymer-element name="io-process-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Process</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Path</div>
          <div class="memberValue">{{ process['name'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Pid</div>
          <div class="memberValue">{{ process['pid'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Arguments</div>
          <div class="memberValue">{{ process['arguments'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Started</div>
          <div class="memberValue">{{ process['started'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Working Directory</div>
          <div class="memberValue">{{ process['workingDirectory'] }}</div>
        </div>
        <template if="{{ process['stdin'] != null }}">
          <div class="memberItem">
            <div class="memberName">stdin</div>
            <div class="memberValue">
              <io-socket-ref ref="{{ process['stdin'] }}"></io-socket-ref>
            </div>
          </div>
        </template>
        <template if="{{ process['stdout'] != null }}">
          <div class="memberItem">
            <div class="memberName">stdout</div>
            <div class="memberValue">
              <io-socket-ref ref="{{ process['stdout'] }}"></io-socket-ref>
            </div>
          </div>
        </template>
        <template if="{{ process['stderr'] != null }}">
          <div class="memberItem">
            <div class="memberName">stderr</div>
            <div class="memberValue">
              <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref>
            </div>
          </div>
        </template>
      </div>

      <br>

      <h2>Environment</h2>
      <div class="well">
        <div class="monospace break-wrap">
          <template repeat="{{ variable in process['environment'] }}">
            {{ variable }}
            <br>
          </template>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>


<polymer-element name="isolate-ref" extends="service-ref">
<template><style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
  <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a>
</template>
</polymer-element>


<polymer-element name="isolate-summary" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <div class="flex-row">
      <div class="flex-item-10-percent">
        <img src="packages/observatory/src/elements/img/isolate_icon.png">
      </div>
      <div class="flex-item-10-percent">
        <isolate-ref ref="{{ isolate }}"></isolate-ref>
      </div>
      <div class="flex-item-30-percent">
        <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
      </div>
      <div class="flex-item-40-percent">
        <isolate-location isolate="{{ isolate }}"></isolate-location>
      </div>
      <div class="flex-item-10-percent">
      </div>
    </div>

    <div class="flex-row">
      <div class="flex-item-20-percent"></div>
      <div class="flex-item-60-percent">
        <hr>
      </div>
      <div class="flex-item-20-percent"></div>
    </div>

    <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>

  </template>
</polymer-element>

<polymer-element name="isolate-run-state" extends="observatory-element">
  <template>
    <template if="{{ isolate.pauseEvent != null }}">
      <strong>paused</strong>
      <action-link callback="{{ resume }}" label="resume"></action-link>

      <action-link callback="{{ stepInto }}" label="step"></action-link>
      <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-link>
      <action-link callback="{{ stepOut }}" label="step&nbsp;out"></action-link>
    </template>

    <template if="{{ isolate.running }}">
      <strong>running</strong>
      <action-link callback="{{ pause }}" label="pause"></action-link>
    </template>

    <template if="{{ isolate.idle }}">
      <strong>idle</strong>
      <action-link callback="{{ pause }}" label="pause"></action-link>
    </template>

    <template if="{{ isolate.loading }}">
      <strong>loading...</strong>
    </template>
  </template>
</polymer-element>

<polymer-element name="isolate-location" extends="observatory-element">
  <template>
    <template if="{{ isolate.pauseEvent != null }}">
      <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}">
        at isolate start
      </template>

      <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}">
        at isolate exit
      </template>

      <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
                       isolate.pauseEvent.eventType == 'BreakpointReached' ||
                       isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
        <template if="{{ isolate.pauseEvent.breakpoint != null }}">
          by breakpoint
        </template>
        <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
          by exception
        </template>
        at
        <function-ref ref="{{ isolate.topFrame['function'] }}">
        </function-ref>
        (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
      </template>
    </template>

    <template if="{{ isolate.running }}">
      at
      <function-ref ref="{{ isolate.topFrame['function'] }}">
      </function-ref>
      (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
    </template>

  </template>
</polymer-element>

<polymer-element name="isolate-shared-summary" extends="observatory-element">
  <template>
    <style>
      .errorBox {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 10px;
        font-family: consolas, courier, monospace;
        font-size: 1em;
        line-height: 1.2em;
        white-space: pre;
      }
    </style>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <template if="{{ isolate.error != null }}">
      <div class="content-centered">
        <pre class="errorBox">{{ isolate.error.message }}</pre>
        <br>
      </div>
    </template>
    <div class="flex-row">
      <div class="flex-item-10-percent">
      </div>
      <div class="flex-item-40-percent">
        <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart>
      </div>
      <div class="flex-item-40-percent">
        <div class="memberList">
          <div class="memberItem">
            <div class="memberName">new heap</div>
            <div class="memberValue">
              {{ isolate.newSpace.used | formatSize }}
              of
              {{ isolate.newSpace.capacity | formatSize }}
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">old heap</div>
            <div class="memberValue">
              {{ isolate.oldSpace.used | formatSize }}
              of
              {{ isolate.oldSpace.capacity | formatSize }}
            </div>
          </div>
        </div>
        <br>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" href="{{ gotoLink('/class-tree' + isolate.link) }}">class hierarchy</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('stacktrace')) }}">stack trace</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('profile')) }}">cpu profile</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('allocationprofile')) }}">allocation profile</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('heapmap')) }}">heap map</a>
          </div>
        </div>
        <!-- Temporarily disabled until UI for dart:io is acceptable.
        <template if="{{ isolate.ioEnabled }}">
          <div class="memberItem">
            <div class="memberValue">
              See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('io')) }}">dart:io</a>
            </div>
          </div>
        </template>
        -->
      </div>
      <div class="flex-item-10-percent">
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="isolate-counter-chart" extends="observatory-element">
  <template>
    <div id="counterPieChart" style="height: 200px"></div>
  </template>
</polymer-element>


<polymer-element name="isolate-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <style>
      .sourceInset {
        padding-left: 15%;
        padding-right: 15%;
      }
      .miniProfileChart {
        width: 80%;
      }
    </style>

    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
      </isolate-nav-menu>
      <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>isolate '{{ isolate.name }}'</h1>
    </div>

    <br>
    <div class="flex-row">
      <div class="flex-item-10-percent">
      </div>
      <div class="flex-item-30-percent">
        <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
      </div>
      <div class="flex-item-50-percent">
        <isolate-location isolate="{{ isolate }}"></isolate-location>
      </div>
      <div class="flex-item-10-percent">
      </div>
    </div>
    <br>

    <template if="{{ isolate.topFrame != null }}">
      <br>
      <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ isolate.topFrame['tokenPos'] }}" height="200px">
      </script-inset>
    </template>

    <div class="flex-row">
      <div class="flex-item-20-percent"></div>
      <div class="flex-item-60-percent"><hr></div>
      <div class="flex-item-20-percent"></div>
    </div>

    <br>

    <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>

    <div class="flex-row">
      <div class="flex-item-20-percent"></div>
      <div class="flex-item-60-percent"><hr></div>
      <div class="flex-item-20-percent"></div>
    </div>

    <div class="content-centered">
      <div class="flex-row">
        <div class="flex-item-50-percent">
          <div class="memberList">
            <div class="memberItem">
              <div class="memberName">root library</div>
              <div class="memberValue">
                <library-ref ref="{{ isolate.rootLib }}"></library-ref>
              </div>
            </div>
            <div class="memberItem">
              <template if="{{ isolate.entry != null }}">
                <div class="memberName">entry</div>
                <div class="memberValue">
                  <function-ref ref="{{ isolate.entry }}"></function-ref>
                </div>
              </template>
            </div>
            <div class="memberItem">
              <div class="memberName">isolate id</div>
              <div class="memberValue">{{ isolate.mainPort }}</div>
            </div>
          </div>
        </div>
        <div class="flex-item-50-percent">
          <div class="memberItem">
            <div class="memberValue">
              See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('debug/breakpoints')) }}">breakpoints</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <hr>

    <div class="content">
      libraries ({{ isolate.libraries.length }})
      <curly-block expand="{{ isolate.libraries.length <= 8 }}">
        <div class="memberList">
          <template repeat="{{ lib in isolate.libraries }}">
            <div class="memberItem">
              <div class="memberName">
                <library-ref ref="{{ lib }}"></library-ref>
              </div>
            </div>
          </template>
        </div>
      </curly-block>
    </div>

    <hr>

    <div class="content">
      <div id="tagProfileChart" class="miniProfileChart" style="height: 600px"></div>
    </div>

    <hr>

    <div class="content">
      <eval-box callback="{{ eval }}"></eval-box>
    </div>
    <br><br><br><br>
    <br><br><br><br>
  </template>
</polymer-element>


<polymer-element name="instance-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
      <!-- TODO(turnidge): Add library nav menu here. -->
      <class-nav-menu cls="{{ instance['class'] }}"></class-nav-menu>
      <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <template if="{{ instance['error'] != null }}">
      <error-view error_obj="{{ instance['error'] }}"></error-view>
    </template>

    <template if="{{ instance['error'] == null }}">
      <div class="content">
        <!-- TODO(turnidge): Handle null instances. -->
        <template if="{{ isType(instance.serviceType) }}">
          <h1>type {{ instance['user_name'] }}</h1>
        </template>
        <template if="{{ !isType(instance.serviceType) }}">
          <h1>instance of {{ instance['class']['user_name'] }}</h1>
        </template>
        <div class="memberList">
          <div class="memberItem">
            <div class="memberName">class</div>
            <div class="memberValue">
              <class-ref ref="{{ instance['class'] }}">
              </class-ref>
            </div>
          </div>
          <template if="{{ instance['valueAsString'] != null }}">
            <div class="memberItem">
              <div class="memberName">value</div>
              <div class="memberValue">{{ instance['valueAsString'] }}</div>
            </div>
          </template>
          <div class="memberItem">
            <div class="memberName">size</div>
            <div class="memberValue">{{ instance['size'] | formatSize }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">retained size</div>
            <div class="memberValue">
              <template if="{{ retainedBytes == null }}">
                <eval-link callback="{{ retainedSize }}" label="[calculate]">
                </eval-link>
              </template>
              <template if="{{ retainedBytes != null }}">
                {{ retainedBytes | formatSize }}
              </template>
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">retaining path</div>
            <div class="memberValue">
              <template if="{{ path == null }}">
                <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
                </eval-link>
              </template>
              <template if="{{ path != null }}">
                <template repeat="{{ element in path['elements'] }}">
                <div class="memberItem">
                  <div class="memberName">[{{ element['index']}}]</div>
                  <div class="memberValue">
                    <instance-ref ref="{{ element['value'] }}"></instance-ref>
                    <template if="{{ element['parentField'] != null }}">
                      in <field-ref ref="{{ element['parentField'] }}"></field-ref>
                    </template>
                    <template if="{{ element['parentListIndex'] != null }}">
                      at list index {{ element['parentListIndex'] }} of
                    </template>
                  </div>
                  </div>
                </template>
                <template if="{{ path['length'] > path['elements'].length }}">
                  showing {{ path['elements'].length }} of {{ path['length'] }}
                  <eval-link callback="{{ retainingPath }}" label="[find more]" expr="{{ path['elements'].length * 2 }}">
                  </eval-link>
                </template>
              </template>
            </div>
          </div>
          <template if="{{ instance['type_class'] != null }}">
            <div class="memberItem">
              <div class="memberName">type class</div>
              <div class="memberValue">
                <class-ref ref="{{ instance['type_class'] }}">
                </class-ref>
              </div>
            </div>
          </template>
          <template if="{{ instance['closureFunc'] != null }}">
            <div class="memberItem">
              <div class="memberName">closure function</div>
              <div class="memberValue">
                <function-ref ref="{{ instance['closureFunc'] }}">
                </function-ref>
              </div>
            </div>
          </template>

          <div class="memberItem">&nbsp;</div>

          <div class="memberItem">
            <div class="memberName">toString()</div>
            <div class="memberValue">
              <eval-link callback="{{ eval }}" expr="toString()"></eval-link>
            </div>
          </div>
        </div>
      </div>

      <hr>

      <div class="content">
        <template if="{{ instance['fields'].isNotEmpty }}">
          fields ({{ instance['fields'].length }})
          <curly-block expand="{{ instance['fields'].length <= 8 }}">
            <div class="memberList">
              <template repeat="{{ field in instance['fields'] }}">
                <div class="memberItem">
                  <div class="memberName">
                    <field-ref ref="{{ field['decl'] }}"></field-ref>
                  </div>
                  <div class="memberValue">
                    <instance-ref ref="{{ field['value'] }}"></instance-ref>
                  </div>
                </div>
              </template>
            </div>
          </curly-block><br><br>
        </template>

        <template if="{{ instance['nativeFields'].isNotEmpty }}">
          native fields ({{ instance['nativeFields'].length }})
          <curly-block expand="{{ instance['nativeFields'].length <= 8 }}">
            <div class="memberList">
              <template repeat="{{ field in instance['nativeFields'] }}">
                <div class="memberItem">
                  <div class="memberName">[{{ field['index']}}]</div>
                  <div class="memberValue">[{{ field['value']}}]</div>
                </div>
              </template>
            </div>
          </curly-block><br><br>
        </template>

        <template if="{{ instance['elements'].isNotEmpty }}">
          elements ({{ instance['elements'].length }})
          <curly-block expand="{{ instance['elements'].length <= 8 }}">
            <div class="memberList">
              <template repeat="{{ element in instance['elements'] }}">
                <div class="memberItem">
                  <div class="memberName">[{{ element['index']}}]</div>
                  <div class="memberValue">
                    <instance-ref ref="{{ element['value'] }}">
                    </instance-ref>
                  </div>
                </div>
              </template>
            </div>
          </curly-block><br><br>
        </template>
      </div>

      <hr>

      <div class="content">
        <eval-box callback="{{ eval }}"></eval-box>
      </div>
      <br><br><br><br>
      <br><br><br><br>

    </template>
  </template>
</polymer-element>


<polymer-element name="json-view" extends="observatory-element">
  <template>
    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
    </nav-bar>
      <pre>{{ mapAsString }}</pre>
  </template>
</polymer-element>


<polymer-element name="library-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
      <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav-menu>
      <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>
        <!-- TODO(turnidge): Handle unnamed libraries -->
        library {{ library.name }}
      </h1>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">url</div>
          <div class="memberValue">{{ library.url }}</div>
        </div>
        <template if="{{ library.name != library.vmName }}">
          <div class="memberItem">
            <div class="memberName">vm name</div>
            <div class="memberValue">{{ library.vmName }}</div>
          </div>
        </template>
      </div>
    </div>

    <hr>

    <div class="content">
      <template if="{{ library.imports.isNotEmpty }}">
        imports ({{ library.imports.length }})
        <curly-block expand="{{ library.imports.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ imp in library.imports }}">
              <div class="memberItem">
                <div class="memberValue">
                  <library-ref ref="{{ imp }}"></library-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br>
        <br>
      </template>

      <template if="{{ library.scripts.isNotEmpty }}">
        scripts ({{ library.scripts.length }})
        <curly-block expand="{{ library.scripts.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ script in library.scripts }}">
              <div class="memberItem">
                <div class="memberValue">
                  <script-ref ref="{{ script }}"></script-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br>
        <br>
      </template>

      <template if="{{ library.classes.isNotEmpty }}">
        classes ({{ library.classes.length }})
        <curly-block expand="{{ library.classes.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ cls in library.classes }}">
              <div class="memberItem">
                <div class="memberValue">
                  <class-ref ref="{{ cls }}"></class-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br>
        <br>
      </template>

      <template if="{{ library.variables.isNotEmpty }}">
        variables ({{ library.variables.length }})
        <curly-block expand="{{ library.variables.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ field in library.variables }}">
              <div class="memberItem">
                <div class="memberName">
                  <field-ref ref="{{ field }}"></field-ref>
                </div>
                <div class="memberValue">
                  <template if="{{ field['value'] != null }}">
                    <instance-ref ref="{{ field['value'] }}"></instance-ref>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br>
        <br>
      </template>

      <template if="{{ library.functions.isNotEmpty }}">
        functions ({{ library.functions.length }})
        <curly-block expand="{{ library.functions.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ function in library.functions }}">
              <div class="memberItem">
                <div class="memberValue">
                  <function-ref ref="{{ function }}"></function-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br>
        <br>
      </template>
    </div>

    <hr>

    <div class="content">
      <eval-box callback="{{ eval }}"></eval-box>
    </div>
    <br><br><br><br>
    <br><br><br><br>
  </template>
</polymer-element>


<polymer-element name="heap-profile" extends="observatory-element">
<template>
  <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
  <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;
    }
  </style>
  <nav-bar>
    <top-nav-menu></top-nav-menu>
    <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
    <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" 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>
    <nav-control></nav-control>
  </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>
        <div id="newPieChart" style="height: 300px"></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>
        <div id="oldPieChart" style="height: 300px"></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>
    <br><br><br>
    <br><br><br>
  </div>
</template>
</polymer-element>


<polymer-element name="sliding-checkbox">
  <template>
    <style>
      .switch {
        position: relative;
        width: 121px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
      }
      .hide {
        display: none;
      }
      .label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #999999;
        border-radius: 15px;
      }
      .content {
        width: 200%;
        margin-left: -100%;
        -moz-transition: margin 0.3s ease-in 0s;
        -webkit-transition: margin 0.3s ease-in 0s;
        -o-transition: margin 0.3s ease-in 0s;
        transition: margin 0.3s ease-in 0s;
      }
      .content:before, .content:after {
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        color: white;
        font: 400 14px 'Montserrat', sans-serif;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .content:before {
        content: {{ checkedText }};
        padding-left: 10px;
        background-color: #0489C3;
      }
      .content:after {
        content: {{ uncheckedText }};
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
      }
      .dot {
        width: 14px;
        margin: 8px;
        background: #FFFFFF;
        border: 2px solid #999999;
        border-radius: 15px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 87px;
        -moz-transition: all 0.3s ease-in 0s;
        -webkit-transition: all 0.3s ease-in 0s;
        -o-transition: all 0.3s ease-in 0s;
        transition: all 0.3s ease-in 0s;
      }
      :checked + .label .content {
        margin-left: 0;
      }
      :checked + .label .dot {
        right: 0px;
      }
    </style>
    <div class="switch">
      <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}">
      <label class="label" for="slide-switch">
        <div class="content"></div>
        <div class="dot"></div>
      </label>
    </div>
  </template>
</polymer-element>

<polymer-element name="isolate-profile" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>
    <style>
      .table {
        border-collapse: collapse!important;
        width: 100%;
        margin-bottom: 20px
      }
      .table thead > tr > th,
      .table tbody > tr > th,
      .table tfoot > tr > th,
      .table thead > tr > td,
      .table tbody > tr > td,
      .table tfoot > tr > td {
        padding: 8px;
        vertical-align: top;
      }
      .table thead > tr > th {
        vertical-align: bottom;
        text-align: left;
        border-bottom:2px solid #ddd;
      }

      tr:hover > td {
        background-color: #FFF3E3;
      }
      .rowColor0 {
        background-color: #FFE9CC;
      }
      .rowColor1 {
        background-color: #FFDEB2;
      }
      .rowColor2 {
        background-color: #FFD399;
      }
      .rowColor3 {
        background-color: #FFC87F;
      }
      .rowColor4 {
        background-color: #FFBD66;
      }
      .rowColor5 {
        background-color: #FFB24C;
      }
      .rowColor6 {
        background-color: #FFA733;
      }
      .rowColor7 {
        background-color: #FF9C19;
      }
      .rowColor8 {
        background-color: #FF9100;
      }

      .tooltip {
        display: block;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
      }

      tr:hover .tooltip {
        display: block;
        position: absolute;
        top: 100%;
        right: 100%;
        visibility: visible;
        z-index: 999;
        width: 400px;
        color: #ffffff;
        background-color: #0489c3;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
        opacity: 1;
      }

      .white {
        color: #ffffff;
      }

    </style>
    <div class="content">
      <h1>Sampled CPU profile</h1>
      <div class="memberList">
        <div class="memberItem">
         <div class="memberName">Timestamp</div>
         <div class="memberValue">{{ refreshTime }}</div>
        </div>
        <div class="memberItem">
         <div class="memberName">Time span</div>
         <div class="memberValue">{{ timeSpan }}</div>
        </div>
        <div class="memberItem">
         <div class="memberName">Sample count</div>
         <div class="memberValue">{{ sampleCount }}</div>
        </div>
        <div class="memberItem">
         <div class="memberName">Sample rate</div>
         <div class="memberValue">{{ sampleRate }} Hz</div>
        </div>
        <div class="memberItem">
         <div class="memberName">Sample depth</div>
         <div class="memberValue">{{ sampleDepth }} stack frames</div>
        </div>
        <div class="memberItem">
         <div class="memberName">Display cutoff</div>
         <div class="memberValue">{{ displayCutoff }}</div>
        </div>
        <div class="memberItem">
         <div class="memberName">Tags</div>
         <div class="memberValue">
          <select value="{{tagSelector}}">
            <option value="uv">User &gt; VM</option>
            <option value="u">User</option>
            <option value="vu">VM &gt; User</option>
            <option value="v">VM</option>
            <option value="hide">None</option>
          </select>
         </div>
        </div>
      </div>
      <hr>
      <table id="tableTree" class="table">
        <thead>
          <tr>
            <th>Method</th>
            <th>Self</th>
          </tr>
        </thead>
        <tbody>
          <tr template="" repeat="{{row in tree.rows }}" style="{{}}">
            <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}">
              <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
              <div style="position: relative;display: inline">
                {{row.columns[0]}}
              </div>
              <code-ref ref="{{ row.code }}"></code-ref>
            </td>
            <td class="{{ coloring(row) }}" style="position: relative">
              {{row.columns[1]}}
              <div class="tooltip">
                <div class="memberList">
                  <div class="memberItem">
                   <div class="memberName white">Kind</div>
                   <div class="memberValue white">{{ row.tipKind }}</div>
                  </div>
                  <div class="memberItem">
                   <div class="memberName white">Percent of Parent</div>
                   <div class="memberValue white">{{ row.tipParent }}</div>
                  </div>
                  <div class="memberItem">
                   <div class="memberName white">Sample Count</div>
                   <div class="memberValue white">{{ row.tipTicks }} ({{ row.tipExclusive }})</div>
                  </div>
                  <div class="memberItem">
                   <div class="memberName white">Approximate Execution Time</div>
                   <div class="memberValue white">{{ row.tipTime }}</div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
</polymer-element>


<polymer-element name="script-view" extends="observatory-element">
<template>
  <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
  <nav-bar>
    <top-nav-menu></top-nav-menu>
    <isolate-nav-menu isolate="{{ script.isolate }}">
    </isolate-nav-menu>
    <nav-menu link="{{ script.owningLibrary.link }}" anchor="{{ script.owningLibrary.name }}"></nav-menu>
    <nav-menu link="{{ script.link }}" anchor="{{ script.name }}" last="{{ true }}"></nav-menu>
    <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
    <nav-refresh callback="{{ refresh }}"></nav-refresh>
    <nav-control></nav-control>
  </nav-bar>

  <template if="{{ args['pos'] == null }}">
    <script-inset id="scriptInset" script="{{ script }}">
      <h1>script {{ script.name }}</h1>
    </script-inset>
  </template>

  <template if="{{ args['pos'] != null }}">
    <script-inset id="scriptInset" script="{{ script }}" currentpos="{{ args['pos'] | parseInt }}">
      <h1>script {{ script.name }}</h1>
    </script-inset>
  </template>

</template>
</polymer-element>


<polymer-element name="stack-trace" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ trace.isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ trace.isolate.relativeLink('stacktrace') }}" anchor="stack trace" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>
    <template if="{{ trace['members'].isEmpty }}">
      <div class="content">
        <em>No stack</em>
      </div>
    </template>
    <template if="{{ trace['members'].isNotEmpty }}">
      <ul class="list-group">
        <template repeat="{{ frame in trace['members'] }}">
          <li class="list-group-item">
            <stack-frame frame="{{ frame }}"></stack-frame>
          </li>
        </template>
      </ul>
    </template>
  </template>
</polymer-element>


<polymer-element name="vm-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>VM</h1>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">version</div>
          <div class="memberValue">{{ vm.version }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">uptime</div>
          <div class="memberValue">{{ vm.uptime | formatTime }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">type checks enabled</div>
          <div class="memberValue">{{ vm.typeChecksEnabled }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">asserts enabled</div>
          <div class="memberValue">{{ vm.assertsEnabled }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">pid</div>
          <div class="memberValue">{{ vm.pid }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">refreshed at</div>
          <div class="memberValue">{{ vm.lastUpdate }}</div>
        </div>
        <br>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" href="{{ gotoLink('/flags') }}">flags</a>
          </div>
        </div>
      </div>
    </div>

    <br>
    <hr>

    <ul class="list-group">
      <template repeat="{{ isolate in vm.isolates }}">
      	<li class="list-group-item">
          <isolate-summary isolate="{{ isolate }}"></isolate-summary>
        </li>
        <hr>
      </template>
    </ul>
  </template>
</polymer-element>

<polymer-element name="service-view" extends="observatory-element">
  <!-- This element explicitly manages the child elements to avoid setting
       an observable property on the old element to an invalid type. -->
</polymer-element>

<polymer-element name="observatory-application" extends="observatory-element">
  <!-- This element explicitly manages its child elements -->
</polymer-element>


<polymer-element name="service-exception-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-control></nav-control>
    </nav-bar>
    <div class="content-centered">
      <h1>{{ exception.kind }}</h1>
      <br>
      <div class="well">{{ exception.message }}</div>
      <template if="{{ exception.response != '' }}">
        <div class="well">{{ exception.response }}</div>
      </template>
    </div>
  </template>
</polymer-element>


<polymer-element name="service-error-view" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-control></nav-control>
    </nav-bar>
    <div class="content-centered">
      <h1>{{ error.kind }}</h1>
      <br>
      <div class="well">{{ error.message }}</div>
    </div>
  </template>
</polymer-element>


<polymer-element name="vm-connect-target" extends="observatory-element">
  <template>
    <style>
      .delete-button {
        padding: 4px;
        background: transparent;
        border: none !important;
      }
      .delete-button:hover {
        background: #ff0000;
      }
    </style>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <span>
      <template if="{{ isCurrentTarget }}">
        <a on-click="{{ connectToVm }}" href="{{ gotoLink('/vm') }}">{{ target.name }} (Connected)</a>
      </template>
      <template if="{{ !isCurrentTarget }}">
        <a on-click="{{ connectToVm }}" href="{{ gotoLink('/vm') }}">{{ target.name }}</a>
      </template>
      <template if="{{ !isChromeTarget }}">
        <button class="delete-button" on-click="{{ deleteVm }}">✖ Remove</button>
      </template>
    </span>
  </template>
</polymer-element>

<polymer-element name="vm-connect" extends="observatory-element">
  <template>
    <style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <style>
      .textbox {
        width: 20em;
        font: 400 16px 'Montserrat', sans-serif;
      }
    </style>

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content-centered">
      <h1>Connect to a Dart VM</h1>
      <br>
      <hr>
      <div class="flex-row">
        <div class="flex-item-40-percent">
          <h2><img style="height: 48px" src="packages/observatory/src/elements/img/dart_icon.png">Standalone</h2>
          <br>
          <ul>
            <template repeat="{{ target in app.targets.history }}">
              <template if="{{ target.standalone }}">
                <li><vm-connect-target target="{{ target }}"></vm-connect-target></li>
              </template>
            </template>
          </ul>
          <hr>
          <form autocomplete="on">
            <input class="textbox" placeholder="localhost:8181" type="text" value="{{ standaloneVmAddress }}">
            <input class="button" type="submit" value="Connect" on-click="{{ connectStandalone }}">
          </form>
          <br>
          <pre class="well">Run Standalone with: '--observe'</pre>
          <hr>
        </div>

        <div class="flex-item-20-percent"></div>
        <div class="flex-item-40-percent">
          <h2><img style="height: 48px" src="packages/observatory/src/elements/img/chromium_icon.png">Chromium</h2>
          <br>
          <ul>
            <template repeat="{{ target in chromeTargets }}">
              <li><vm-connect-target target="{{ target }}"></vm-connect-target></li>
            </template>
          </ul>
          <hr>
          <form autocomplete="on">
            <input class="textbox" placeholder="localhost:9222" type="text" value="{{ chromiumAddress }}">
            <input class="button" type="submit" value="Get Tabs" on-click="{{ getTabs }}">
          </form>
          <br>
          <pre class="well">Run Chromium with:
'--remote-debugging-port=9222'</pre>
          <hr>
        </div>
      </div>
    </div>
  </template>
</polymer-element>


<polymer-element name="vm-ref" extends="service-ref">
  <template><style>
/* Global styles */
* {
  margin: 0;
  padding: 0;
  font: 400 14px 'Montserrat', sans-serif;
  color: #333;
  box-sizing: border-box;
}

.content {
  padding-left: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered {
  padding-left: 10%;
  padding-right: 10%;
  font: 400 14px 'Montserrat', sans-serif;
}

.content-centered-big {
  padding-left: 5%;
  padding-right: 5%;
  font: 400 14px 'Montserrat', sans-serif;
}

h1 {
  font: 400 18px 'Montserrat', sans-serif;
}

.memberList {
  display: table;
}

.memberItem {
  display: table-row;
}

.memberName, .memberValue {
  display: table-cell;
  vertical-align: top;
  padding: 3px 0 3px 1em;
  font: 400 14px 'Montserrat', sans-serif;
}

.monospace {
  font-family: consolas, courier, monospace;
  font-size: 1em;
  line-height: 1.2em;
  white-space: nowrap;
}

a {
  color: #0489c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  color: inherit;
  font-style: italic;
}

b {
  color: inherit;
  font-weight: bold;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  box-sizing: content-box;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
}

.list-group-item:first-child {
  /* rounded top corners */
  border-top-right-radius:4px;
  border-top-left-radius:4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  /* rounded bottom corners */
  border-bottom-right-radius: 4px;
  border-bottom-left-radius:4px;
}

/* Flex row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Flex column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-fit {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-no-shrink {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.flex-item-fill {
  flex-grow: 0;
  flex-shrink: 1;  /* shrink when pressured */
  flex-basis: 100%;  /* try and take 100% */
}

.flex-item-fixed-1-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 8.3%;
}

.flex-item-fixed-2-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16.6%;
}

.flex-item-fixed-4-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
}

.flex-item-fixed-6-12, .flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-fixed-8-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 66.6666%;
}

.flex-item-fixed-9-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}


.flex-item-fixed-12-12 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

.flex-item-10-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%;
}

.flex-item-15-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 15%;
}

.flex-item-20-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%;
}

.flex-item-30-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 30%;
}

.flex-item-40-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
}

.flex-item-50-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.flex-item-60-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
}

.flex-item-70-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70%;
}

.flex-item-80-percent {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.break-wrap {
  word-wrap: break-word;
}
</style>
    <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a>
  </template>
</polymer-element>


  <observatory-application></observatory-application>

<script src="index.html_bootstrap.dart.js" async=""></script></body></html>