blob: 7edc4c9033393a0c2651f8fe0158b41e33e28186 [file] [log] [blame]
<!DOCTYPE html><html><head>
<title>Dart VM Observatory</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="bootstrap_css/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="index_devtools.html_bootstrap.dart.js"></script>
</head>
<body><polymer-element name="observatory-element">
</polymer-element>
<polymer-element name="nav-bar" extends="observatory-element">
<template>
<style>
nav ul {
display: inline-table;
position: relative;
list-style: none;
padding-left: 0;
margin-left: 0;
width: 100%;
z-index: 10;
font: 400 16px 'Montserrat', sans-serif;
color: white;
background-color: #0489c3;
}
nav ul:after {
content: ""; clear: both; display: block;
}
</style>
<nav>
<ul>
<content></content>
</ul>
</nav>
</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: 100%;
list-style: none;
padding: 0;
margin-left: 0;
width: auto;
z-index: 10;
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 href="{{ 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: 10;
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 href="{{ link }}">{{ anchor }}</a>
<ul><content></content></ul>
</li>
</template>
</polymer-element>
<polymer-element name="nav-refresh" extends="observatory-element">
<template>
<style>
.active {
color: #aaa;
cursor: wait;
}
.idle {
color: #000;
}
li {
float: right;
margin: 0;
}
li button {
margin: 3px;
padding: 8px;
}
</style>
<li>
<template if="{{ active }}">
<button class="active" on-click="{{ buttonClick }}">{{ label }}</button>
</template>
<template if="{{ !active }}">
<button class="idle" on-click="{{ buttonClick }}">{{ label }}</button>
</template>
</li>
</template>
</polymer-element>
<polymer-element name="top-nav-menu">
<template>
<nav-menu link="#" anchor="Observatory" last="{{ last }}">
<content></content>
</nav-menu>
</template>
</polymer-element>
<polymer-element name="isolate-nav-menu" extends="observatory-element">
<template>
<nav-menu link="#" anchor="{{ isolate.name }}" last="{{ last }}">
<nav-menu-item link="{{ isolate.relativeHashLink('stacktrace') }}" anchor="stack trace"></nav-menu-item>
<nav-menu-item link="{{ isolate.relativeHashLink('profile') }}" anchor="cpu profile"></nav-menu-item>
<nav-menu-item link="{{ isolate.relativeHashLink('allocationprofile') }}" anchor="heap profile"></nav-menu-item>
<nav-menu-item link="{{ isolate.relativeHashLink('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.hashLink }}" 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.hashLink }}" anchor="{{ cls.name }}" last="{{ last }}">
<content></content>
</nav-menu>
</template>
</polymer-element>
<polymer-element name="breakpoint-list" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu></top-nav-menu>
<isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu>
<nav-menu link="." anchor="breakpoints" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<template if="{{ msg['breakpoints'].isEmpty }}">
<div class="panel panel-warning">
<div class="panel-body">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="service-ref" extends="observatory-element">
</polymer-element><polymer-element name="class-ref" extends="service-ref">
<template>
<a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
</template>
</polymer-element>
<polymer-element name="error-view" extends="observatory-element">
<template>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-danger">
<div class="panel-heading">{{ error.kind }}</div>
<div class="panel-body">
<p>{{ error.message }}</p>
</div>
</div>
</div>
</div>
</template>
</polymer-element><polymer-element name="field-ref" extends="service-ref">
<template>
<div>
<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') }}">
<class-ref ref="{{ ref['declared_type'] }}"></class-ref>
</template>
<a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
</div>
</template> </polymer-element><polymer-element name="function-ref" extends="service-ref">
<template>
<a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
</template>
</polymer-element><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="instance-ref" extends="service-ref">
<template>
<style>
.member {
vertical-align: top;
padding: 1px 0 1px 1em;
}
</style>
<div>
<template if="{{ isUnexpected(ref.serviceType) }}">
unexpected reference type &lt;{{ ref.serviceType }}&gt;
</template>
<template if="{{ isError(ref.serviceType) }}">
<pre>{{ ref.message }}</pre>
</template>
<template if="{{ isNull(ref.serviceType) }}">
<div title="{{ hoverText }}">{{ ref['preview'] }}</div>
</template>
<template if="{{ (isString(ref.serviceType) ||
isBool(ref.serviceType) ||
isInt(ref.serviceType)) }}">
<a href="{{ url }}">{{ ref['preview'] }}</a>
</template>
<template if="{{ isClosure(ref.serviceType) }}">
<a href="{{ url }}">
{{ ref['closureFunc']['user_name'] }}
</a>
</template>
<template if="{{ isInstance(ref.serviceType) }}">
<a href="{{ url }}"><em>{{ ref['class']['user_name'] }}</em></a>
<curly-block callback="{{ expander() }}">
<table>
<tbody><tr template="" repeat="{{ field in ref['fields'] }}">
<td class="member">{{ field['decl']['user_name'] }}</td>
<td class="member">
<instance-ref ref="{{ field['value'] }}"></instance-ref>
</td>
</tr>
</tbody></table>
</curly-block>
</template>
<template if="{{ isList(ref.serviceType) }}">
<a href="{{ url }}"><em>{{ ref['class']['user_name'] }}</em> ({{ ref['length']}})</a>
<curly-block callback="{{ expander() }}">
<table>
<tbody><tr template="" repeat="{{ element in ref['elements'] }}">
<td class="member">[{{ element['index']}}]</td>
<td class="member">
<instance-ref ref="{{ element['value'] }}"></instance-ref>
</td>
</tr>
</tbody></table>
</curly-block>
</template>
</div>
</template>
</polymer-element>
<polymer-element name="library-ref" extends="service-ref">
<template>
<a href="{{ url }}">{{ name }}</a>
</template>
</polymer-element><polymer-element name="class-view" extends="observatory-element">
<template>
<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="{{ refresh }}"></nav-refresh>
</nav-bar>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-warning">
<div class="panel-heading">
class <strong>{{ cls.name }}</strong>
<template if="{{ cls['super']['type'] != 'Null' }}">
extends
<class-ref ref="{{ cls['super'] }}"></class-ref>
</template>
<p></p>
<library-ref ref="{{ cls['library'] }}"></library-ref>
</div>
<div class="panel-body">
<table class="table table-hover">
<tbody>
<tr>
<td>Abstract</td><td>{{ cls['abstract'] }}</td>
</tr>
<tr>
<td>Const</td><td>{{ cls['const'] }}</td>
</tr>
<tr>
<td>Finalized</td><td>{{ cls['const'] }}</td>
</tr>
<tr>
<td>Implemented</td><td>{{ cls['implemented'] }}</td>
</tr>
<tr>
<td>Patch</td><td>{{ cls['patch'] }}</td>
</tr>
<tr>
<td>VM Name</td><td>{{ cls['name'] }}</td>
</tr>
</tbody>
</table>
<template if="{{ cls['error'] == null }}">
<blockquote><strong>Fields</strong></blockquote>
<table class="table table-hover">
<tbody>
<tr template="" repeat="{{ field in cls['fields'] }}">
<td><field-ref ref="{{ field }}"></field-ref></td>
<td><instance-ref ref="{{ field['value'] }}"></instance-ref></td>
</tr>
</tbody>
</table>
<blockquote><strong>Functions</strong></blockquote>
<table class="table table-hover">
<thead>
<tr>
<th>User Name</th>
<th>VM Name</th>
</tr>
</thead>
<tbody>
<tr template="" repeat="{{ function in cls['functions'] }}">
<td><function-ref ref="{{ function }}"></function-ref></td>
<td><function-ref ref="{{ function }}" internal=""></function-ref></td>
</tr>
</tbody>
</table>
</template>
<template if="{{ cls['error'] != null }}">
<error-view error_obj="{{ cls['error'] }}"></error-view>
</template>
</div>
</div>
</div>
</div>
</template>
</polymer-element>
<polymer-element name="code-ref" extends="service-ref">
<template>
<a href="{{ url }}">{{ name }}</a>
</template>
</polymer-element><polymer-element name="code-view" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu></top-nav-menu>
<isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu>
<nav-menu link="." anchor="{{ code.name }}" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<style>
.content {
padding-left: 10%;
font: 400 14px 'Montserrat', sans-serif;
}
h1 {
font: 400 18px 'Montserrat', sans-serif;
}
.member, .memberHeader {
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;
}
</style>
<div class="content">
<h1>Code for {{ code.name }}</h1>
<table>
<tbody><tr>
<td class="memberHeader">kind</td>
<td class="member">{{code.kind}}</td>
</tr>
<tr>
<td class="memberHeader">function</td>
<td class="member">
<function-ref ref="{{code.function}}">
</function-ref>
</td>
</tr>
<tr>
<td class="memberHeader">Inclusive</td>
<td class="member">{{ code.formattedInclusiveTicks }}</td>
</tr>
<tr>
<td class="memberHeader">Exclusive</td>
<td class="member">{{ code.formattedExclusiveTicks }}</td>
</tr>
</tbody></table>
</div>
<hr>
<div class="content">
<template if="{{ code.hasDisassembly }}">
<div class="row">
<div class="col-md-2 memberHeader">Inclusive</div>
<div class="col-md-2 memberHeader">Exclusive</div>
<div class="col-md-2 memberHeader">Address</div>
<div class="col-md-6 memberHeader">Disassembly</div>
</div>
</template>
<template repeat="{{ instruction in code.instructions }}">
<div class="row">
<div class="col-md-2 monospace">{{ instruction.formattedInclusive(code) }}</div>
<div class="col-md-2 monospace">{{ instruction.formattedExclusive(code) }}</div>
<div class="col-md-2 monospace">{{ instruction.formattedAddress() }}</div>
<div class="col-md-6 monospace">{{ instruction.human }}</div>
</div>
</template>
</div>
</template>
</polymer-element>
<polymer-element name="collapsible-content" extends="observatory-element">
<template>
<div class="well row">
<a on-click="toggleDisplay" class="btn muted unselectable">
Raw message... <i class="{{ iconClass }}"></i>
</a>
<div style="display: {{ displayValue }}" class="well">
<content></content>
</div>
</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: #e1f5fe
}
.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 isolate="{{ isolate }}" ref="{{ result['value'] }}">
</instance-ref>
</template>
</td>
</tr>
</tbody></table>
</template>
</template>
</polymer-element>
<polymer-element name="field-view" extends="observatory-element">
<template>
<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="." anchor="{{ field['user_name'] }}" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-warning">
<div class="panel-heading">
<template if="{{ field['static'] }}">static</template>
<template if="{{ field['final'] }}">final</template>
<template if="{{ field['const'] }}">const</template>
{{ field['user_name'] }} ({{ field['name'] }})
<class-ref ref="{{ field['owner'] }}"></class-ref>
</div>
<div class="panel-body">
<template if="{{ field['guard_class'] == 'dynamic'}}">
<div class="alert alert-danger">
Field has been assigned multiple types. If a field is only ever
assigned a single type, performance may improve.
</div>
</template>
<template if="{{ (field['guard_class'] != 'dynamic') &amp;&amp; (field['guard_class'] != 'unknown') }}">
<div class="alert alert-success">Field has monomorphic type</div>
<template if="{{ (field['guard_class'] != 'dynamic') &amp;&amp;
field['guard_nullable'] }}">
<div class="alert alert-info">
Field has been assigned null. If a field is never assigned null,
performance may improve.
</div>
</template>
<blockquote>
<class-ref ref="{{ field['guard_class'] }}"></class-ref>
</blockquote>
</template>
</div>
</div>
</div>
</div>
</template>
</polymer-element>
<polymer-element name="function-view" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu></top-nav-menu>
<isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
<template if="{{ function['owner']['type'] == '@Class' }}">
<!-- TODO(turnidge): Add library nav menu here. -->
<class-nav-menu cls="{{ function['owner'] }}"></class-nav-menu>
</template>
<template if="{{ function['owner']['type'] == '@Library' }}">
<library-nav-menu library="{{ function['owner'] }}"></library-nav-menu>
</template>
<nav-menu link="." anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-warning">
<div class="panel-heading">
{{ function['user_name'] }} ({{ function['name'] }})
<class-ref ref="{{ function['class'] }}"></class-ref>
</div>
<div class="panel-body">
<div>
<code-ref ref="{{ function['code'] }}"></code-ref>
<code-ref ref="{{ function['unoptimized_code'] }}"></code-ref>
</div>
<table class="table table-hover">
<tbody>
<tr>
<td>static</td><td>{{ function['is_static'] }}</td>
</tr>
<tr>
<td>Const</td><td>{{ function['is_const'] }}</td>
</tr>
<tr>
<td>Optimizable</td><td>{{ function['is_optimizable'] }}</td>
</tr>
<tr>
<td>Inlinable</td><td>{{ function['is_inlinable'] }}</td>
</tr>
<tr>
<td>Kind</td><td>{{ function['kind'] }}</td>
</tr>
<tr>
<td>Usage Count</td><td>{{ function['usage_counter'] }}</td>
</tr>
<tr>
<td>Optimized Call Site Count</td><td>{{ function['optimized_call_site_count'] }}</td>
</tr>
<tr>
<td>Deoptimizations</td><td>{{ function['deoptimizations'] }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
</polymer-element>
<polymer-element name="script-ref" extends="service-ref">
<template>
<a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
</template>
</polymer-element>
<polymer-element name="isolate-summary" extends="observatory-element">
<template>
<div class="row">
<div class="col-md-1">
<img src="img/isolate_icon.png" class="img-polaroid">
</div>
<div class="col-md-1">{{ isolate.vmName }}</div>
<!-- TODO(turnidge): Use function-ref when it can take isolate param -->
<div class="col-md-4">
<div class="row">
<template if="{{ isolate.entry['id'] != null }}">
<a href="{{ isolate.hashLink(isolate.entry['id']) }}">
{{ isolate.name }}
</a>
</template>
<template if="{{ isolate.entry['id'] == null }}">
{{ isolate.name }}
</template>
</div>
<div class="row">
<small>
(<a href="{{ isolate.rootLib.hashLink }}">library</a>)
(<a href="{{ isolate.relativeHashLink('debug/breakpoints') }}">breakpoints</a>)
(<a href="{{ isolate.relativeHashLink('profile') }}">profile</a>)
</small>
</div>
</div>
<div class="col-md-2">
<div class="row">
<div class="col-md-3">{{ isolate.timers['total'] | formatTime }}</div>
<div class="col-md-1"></div>
<div class="col-md-3"><p class="text-muted">total</p></div>
</div>
<div class="row">
<div class="col-md-3">{{ isolate.timers['dart'] | formatTime }}</div>
<div class="col-md-1"></div>
<div class="col-md-3"><p class="text-muted">dart</p></div>
</div>
<div class="row">
<div class="col-md-3">{{ isolate.timers['compile'] | formatTime }}</div>
<div class="col-md-1"></div>
<div class="col-md-3"><p class="text-muted">compile</p></div>
</div>
<div class="row">
<div class="col-md-3">{{ isolate.timers['gc'] | formatTime }}</div>
<div class="col-md-1"></div>
<div class="col-md-3"><p class="text-muted">gc</p></div>
</div>
<div class="row">
<div class="col-md-3">{{ isolate.timers['init'] | formatTime }}</div>
<div class="col-md-1"></div>
<div class="col-md-3"><p class="text-muted">init</p></div>
</div>
</div>
<div class="col-md-2">
<a href="{{ isolate.relativeHashLink('allocationprofile') }}">
{{ isolate.newHeapUsed | formatSize }}/{{ isolate.oldHeapUsed | formatSize }}
</a>
</div>
<div class="col-md-2">
<template if="{{ isolate.topFrame == null }}">
idle
</template>
<template if="{{ isolate.topFrame != null }}">
run
</template>
( <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack trace</a> )
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<template if="{{ isolate.topFrame != null }}">
<function-ref ref="{{ isolate.topFrame['function'] }}"></function-ref>
(<script-ref ref="{{ isolate.topFrame['script'] }}" line="{{ isolate.topFrame['line'] }}"></script-ref>)
<br>
<pre>{{ isolate.topFrame['line'] }} &nbsp; {{ isolate.topFrame['lineString'] }}</pre>
</template>
</div>
<div class="col-md-3">
</div>
</div>
</template>
</polymer-element>
<polymer-element name="isolate-list" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu last="{{ true }}"></top-nav-menu>
<!-- TODO(turnidge): Why doesn't "this.refresh" work? -->
<nav-refresh callback="{{ refresh } }}"></nav-refresh>
</nav-bar>
<ul class="list-group">
<template repeat="{{ isolate in isolates.isolates.values }}">
<li class="list-group-item">
<isolate-summary isolate="{{ isolate }}"></isolate-summary>
</li>
</template>
</ul>
</template>
</polymer-element>
<polymer-element name="instance-view" extends="observatory-element">
<template>
<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-bar>
<style>
.content {
padding-left: 10%;
font: 400 14px 'Montserrat', sans-serif;
}
h1 {
font: 400 18px 'Montserrat', sans-serif;
}
.member {
vertical-align: top;
padding: 3px 0 3px 1em;
font: 400 14px 'Montserrat', sans-serif;
}
.memberBold {
vertical-align: top;
padding: 3px 0 3px 1em;
font: 400 14px 'Montserrat', sans-serif;
}
</style>
<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. -->
<h1>instance of {{ instance['class']['user_name'] }}</h1>
<table>
<tbody><tr>
<td class="memberBold">class</td>
<td class="member">
<class-ref ref="{{ instance['class'] }}">
</class-ref>
</td>
</tr>
<tr template="" if="{{ instance['preview'] != null }}">
<td class="memberBold">preview</td>
<td class="member">{{ instance['preview'] }}</td>
</tr>
<tr>
<td class="memberBold">size</td>
<td class="member">{{ instance['size'] | formatSize }}</td>
</tr>
</tbody></table>
</div>
<hr>
<div class="content">
<template if="{{ instance['fields'].isNotEmpty }}">
fields ({{ instance['fields'].length }})
<curly-block>
<table>
<tbody><tr template="" repeat="{{ field in instance['fields'] }}">
<td class="member">
<field-ref ref="{{ field['decl'] }}"></field-ref>
</td>
<td class="member">
<instance-ref ref="{{ field['value'] }}"></instance-ref>
</td>
</tr>
</tbody></table>
</curly-block>
</template>
<template if="{{ instance['nativeFields'].isNotEmpty }}">
native fields ({{ instance['nativeFields'].length }})
<curly-block>
<table>
<tbody><tr template="" repeat="{{ field in instance['nativeFields'] }}">
<td class="member">[{{ field['index']}}]</td>
<td class="member">[{{ field['value']}}]</td>
</tr>
</tbody></table>
</curly-block>
</template>
<template if="{{ instance['elements'].isNotEmpty }}">
elements ({{ instance['elements'].length }})
<curly-block>
<table>
<tbody><tr template="" repeat="{{ element in instance['elements'] }}">
<td class="member">[{{ element['index']}}]</td>
<td class="member">
<instance-ref ref="{{ element['value'] }}">
</instance-ref>
</td>
</tr>
</tbody></table>
</curly-block>
</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>
<template bind="" if="{{ valueType == 'Primitive' }}">
<span>{{primitiveString}}</span>
</template>
<template bind="" if="{{ valueType == 'List' }}">
<table class="table table-condensed table-bordered">
<caption class="text-left">List, {{list.length}}</caption>
<tbody>
<tr template="" repeat="{{item in list)}}">
<th>{{counter}}</th>
<td><json-view json="{{item}}"></json-view></td>
</tr>
</tbody>
</table>
</template>
<template if="{{ valueType == 'Map' }}">
<table class="table table-condensed table-bordered">
<caption class="text-left">Map, {{keys.length}}</caption>
<tbody>
<tr template="" repeat="{{key in keys}}">
<th>{{key}}</th>
<td><json-view json="{{value(key)}}"></json-view></td>
</tr>
</tbody>
</table>
</template>
</template>
</polymer-element>
<polymer-element name="library-view" extends="observatory-element">
<template>
<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="{{ refresh }}"></nav-refresh>
</nav-bar>
<div class="alert alert-info">Scripts</div>
<table class="table table-hover">
<tbody>
<tr template="" repeat="{{ script in library['scripts']}}">
<td>
{{ script.kind }}
</td>
<td>
<script-ref ref="{{ script }}"></script-ref>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">Imported Libraries</div>
<table class="table table-hover">
<tbody>
<tr template="" repeat="{{ lib in library['libraries'] }}">
<td>
<library-ref ref="{{ lib }}"></library-ref>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">Variables</div>
<table class="table table-hover">
<tbody>
<tr template="" repeat="{{ variable in library['variables'] }}">
<td><field-ref ref="{{ variable }}"></field-ref></td>
<td><instance-ref ref="{{ variable['value'] }}"></instance-ref></td>
</tr>
</tbody>
</table>
<div class="alert alert-info">Functions</div>
<table class="table table-hover">
<tbody>
<tr template="" repeat="{{ func in library['functions'] }}">
<td>
<function-ref ref="{{ func }}"></function-ref>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">Classes</div>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Internal Name</th>
</tr>
</thead>
<tbody>
<tr template="" repeat="{{ cls in library['classes'] }}">
<td>
<class-ref ref="{{ cls }}"></class-ref>
</td>
<td>
<class-ref ref="{{ cls }}" internal=""></class-ref>
</td>
</tr>
</tbody>
</table>
</template>
</polymer-element>
<polymer-element name="isolate-profile" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu></top-nav-menu>
<isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
<nav-menu link="." anchor="cpu profile" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<div class="row">
<div class="col-md-12">
<span>Top</span>
<select selectedindex="{{methodCountSelected}}" value="{{methodCounts[methodCountSelected]}}">
<option template="" repeat="{{count in methodCounts}}">{{count}}</option>
</select>
<span>exclusive methods</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Refreshed at {{ refreshTime }} with {{ sampleCount }} samples.</p>
</div>
</div>
<table id="tableTree" class="table table-hover">
<thead>
<tr>
<th>Method</th>
<th>Exclusive</th>
<th>Caller</th>
</tr>
</thead>
<tbody>
<tr template="" repeat="{{row in tree.rows }}" style="{{}}">
<td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}">
<code-ref ref="{{ row.code }}"></code-ref>
</td>
<td class="{{ coloring(row) }}">{{row.columns[0]}}</td>
<td class="{{ coloring(row) }}">{{row.columns[1]}}</td>
</tr>
</tbody>
</table>
</template>
</polymer-element>
<polymer-element name="heap-profile" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu></top-nav-menu>
<isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
<nav-menu link="." anchor="heap profile" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<button type="button" on-click="{{resetAccumulator}}">Reset Accumulator</button>
<div class="row">
<div id="newPieChart" class="col-md-4" style="height: 400px">
</div>
<div id="newStatus" class="col-md-2">
<table class="table">
<tbody>
<tr>
<td>Collections</td>
<td>{{ formattedCollections(true) }}</td>
</tr>
<tr>
<td>Average Collection Time</td>
<td>{{ formattedAverage(true) }}</td>
</tr>
<tr>
<td>Cumulative Collection Time</td>
<td>{{ formattedTotalCollectionTime(true) }}</td>
</tr>
</tbody>
</table>
</div>
<div id="oldPieChart" class="col-md-4" style="height: 400px">
</div>
<div id="oldStatus" class="col-md-2">
<table class="table">
<tbody>
<tr>
<td>Collections</td>
<td>{{ formattedCollections(false) }}</td>
</tr>
<tr>
<td>Average Collection Time</td>
<td>{{ formattedAverage(false) }}</td>
</tr>
<tr>
<td>Cumulative Collection Time</td>
<td>{{ formattedTotalCollectionTime(false) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<p class="col-md-2">Aggregate heap table</p>
</div>
<div class="row">
<div id="simpleTable" class="col-md-12" style="height: 800px"></div>
</div>
<div class="row">
<p class="col-md-2">Individual heap table</p>
</div>
<div class="row">
<div id="table" class="col-md-12" style="height: 800px"></div>
</div>
</template>
</polymer-element>
<polymer-element name="script-view" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu></top-nav-menu>
<isolate-nav-menu isolate="{{ script.isolate }}">
</isolate-nav-menu>
<library-nav-menu library="{{ script.library }}"></library-nav-menu>
<nav-menu link="." anchor="{{ script.name }}" last="{{ true }}">
<li>
<input type="checkbox" checked="{{ showCoverage }}">
<label>Show Coverage Data</label>
</li>
</nav-menu>
<nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
<nav-refresh callback="{{ refresh }}">
</nav-refresh>
</nav-bar>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel-heading">Script source for: {{ script.name }}</div>
<div class="panel-body">
<table style="width:100%">
<tbody>
<tr template="" repeat="{{ line in script.lines }}">
<td style="{{ hitsStyle(line) }}"> </td>
<td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
<td width="99%" style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: pre;">{{line.text}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
</polymer-element>
<polymer-element name="stack-frame" extends="observatory-element">
<template>
<style>
.member {
vertical-align: top;
padding: 0 0 0 1em;
}
</style>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1">
#{{ frame['depth'] }}
</div>
<div class="col-md-9">
<function-ref ref="{{ frame['function'] }}"></function-ref>
( <script-ref ref="{{ frame['script'] }}" line="{{ frame['line'] }}">
</script-ref> )
<curly-block>
<table>
<tbody><tr template="" repeat="{{ v in frame['vars'] }}">
<td class="member">{{ v['name']}}</td>
<td class="member">
<instance-ref ref="{{ v['value'] }}"></instance-ref>
</td>
</tr>
</tbody></table>
</curly-block>
</div>
<div class="col-md-1"></div>
</div>
</template>
</polymer-element>
<polymer-element name="stack-trace" extends="observatory-element">
<template>
<nav-bar>
<top-nav-menu></top-nav-menu>
<isolate-nav-menu isolate="{{ trace.isolate }}"></isolate-nav-menu>
<nav-menu link="." anchor="stack trace" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<template if="{{ trace['members'].isEmpty }}">
<div class="col-md-1"></div>
<div class="col-md-11">
<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="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="response-viewer" extends="observatory-element">
<template>
<service-view object="{{ app.response }}"></service-view>
</template>
</polymer-element><polymer-element name="observatory-application" extends="observatory-element">
<template>
<response-viewer app="{{ app }}"></response-viewer>
</template>
</polymer-element>
<observatory-application devtools="true"></observatory-application>
</body></html>