runtime/bin/vmservice/observatory/deployed/web/index_devtools.html - Issue 584293002: Begin implementing a debugger page in Observatory.

Unified Diff: runtime/bin/vmservice/observatory/deployed/web/index_devtools.html

Issue 584293002: Begin implementing a debugger page in Observatory. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart

Patch Set: gen js Created 6 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « runtime/bin/vmservice/observatory/deployed/web/index.html_bootstrap.dart.js ('k') | runtime/bin/vmservice/observatory/deployed/web/index_devtools.html_bootstrap.dart.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: runtime/bin/vmservice/observatory/deployed/web/index_devtools.html

diff --git a/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html b/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html

index cf2ff8d29dc927bcbecb1a8f10f7e7bf3755eec0..1eb2c59941a93a00d9505887cae4622ac2b7ef87 100644

--- a/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html

+++ b/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html

@@ -1,8 +1,8 @@

-<!DOCTYPE html><html><head><script src="packages/web_components/dart_support.js"></script>

+<!DOCTYPE html><html style="height: 100%"><head><script src="packages/web_components/dart_support.js"></script>

<title>Dart VM Observatory</title>

+ <script src="packages/web_components/platform.js"></script>

@@ -10,17 +10,7 @@

</head>

-<body><script src="packages/web_components/platform.js"></script>

-<!-- unminified for debugging:

-<link rel="import" href="src/js/polymer/layout.html">

-<script src="src/js/polymer/polymer.concat.js"></script>

--->

-<style shim-shadowdom="">

+<body style="height:100%"><div hidden=""><style shim-shadowdom="">

/*******************************

Flex Layout

*******************************/

@@ -297,11 +287,20 @@ html /deep/ [segment], html /deep/ segment {

border-radius: 5px 5px 5px 5px;

}

-</style><script src="packages/polymer/src/js/polymer/polymer.js"></script><script>

+</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 */

+</script>

+<!-- unminified for debugging:

+<link rel="import" href="src/js/polymer/layout.html">

+<script src="src/js/polymer/polymer.concat.js"></script>

+-->

+<script type="text/javascript" src="https://www.google.com/jsapi"></script><style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -558,56 +557,6 @@ hr {

<polymer-element name="curly-block">

<style>

@@ -651,12 +600,14 @@ hr {

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

</polymer-element>

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

</polymer-element>

@@ -664,8 +615,7 @@ hr {

</polymer-element>

<polymer-element name="object-ref" extends="service-ref">

- <template><style>

-/* Global styles */

+ <template><style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -928,10 +878,11 @@ hr {

</template>

</polymer-element>

<polymer-element name="instance-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -1294,6 +1245,8 @@ hr {

</polymer-element>

<polymer-element name="action-link">

<style>

@@ -1333,12 +1286,9 @@ hr {

<polymer-element name="nav-bar" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -1789,7 +1739,7 @@ hr {

<polymer-element name="isolate-nav-menu" extends="observatory-element">

<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="{{ '/debugger' + isolate.link }}" anchor="debugger"></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>

@@ -1932,10 +1882,12 @@ hr {

<polymer-element name="breakpoint-list" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -2217,9 +2169,9 @@ hr {

<polymer-element name="class-ref" extends="service-ref">

- <template><style>

-/* Global styles */

+ <template><style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -2481,10 +2433,10 @@ hr {

<polymer-element name="class-tree" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -2858,23 +2810,9 @@ hr {

<polymer-element name="error-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -3145,6 +3083,9 @@ hr {

</template>

</polymer-element>

<polymer-element name="eval-box" extends="observatory-element">

<style>

@@ -3232,6 +3173,7 @@ hr {

<polymer-element name="eval-link">

<style>

@@ -3263,10 +3205,10 @@ hr {

<polymer-element name="field-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -3541,9 +3483,9 @@ hr {

<polymer-element name="function-ref" extends="service-ref">

- <template><style>

-/* Global styles */

+ <template><style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -3810,9 +3752,10 @@ hr {

<polymer-element name="library-ref" extends="service-ref">

- <template><style>

-/* Global styles */

+ <template><style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -4078,15 +4021,15 @@ hr {

<polymer-element name="script-inset" extends="observatory-element">

<style>

.sourceInset {

- padding-left: 15%;

- padding-right: 15%;

}

.sourceBox {

- width: 100%;

background-color: #f5f5f5;

border: 1px solid #ccc;

padding: 10px;

@@ -4121,7 +4064,7 @@ hr {

</style>

- <div class="sourceBox" style="height:{{height}}">

+ <div class="sourceBox" style="max-height:{{height}}">

@@ -4231,10 +4174,10 @@ hr {

<polymer-element name="script-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -4493,10 +4436,11 @@ hr {

</polymer-element>

<polymer-element name="class-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -4931,10 +4875,10 @@ hr {

<polymer-element name="code-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -5209,10 +5153,10 @@ hr {

<polymer-element name="code-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -5630,10 +5574,32 @@ hr {

-<polymer-element name="error-view" extends="observatory-element">

+<!-- TODO(turnidge): Use core-icon once core_elements work properly in

+ devtools -->

+<polymer-element name="icon-expand-less" noscript="">

- <style>

-/* Global styles */

+ <svg width="24" height="24">

+ <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "></polygon>

+ </svg>

+ </template>

+</polymer-element>

+<polymer-element name="icon-expand-more" noscript="">

+ <template>

+ <svg width="24" height="24">

+ <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "></polygon>

+ </svg>

+ </template>

+</polymer-element>

+<polymer-element name="debugger-page" extends="observatory-element">

+ <template>

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -5887,31 +5853,59 @@ hr {

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>

+ <style>

+ .container {

+ height: 100%;

+ display: flex;

+ flex-direction: column;

+ justify-content: space-between;

+ }

+ nav-bar {

+ flex: 0 0 auto;

+ }

+ .stack {

+ flex: 0 0 auto;

+ overflow-y: auto;

+ }

+ core-splitter {

+ flex: 0 0 auto;

+ }

+ .console {

+ flex: 1 1 auto;

+ overflow-y: auto;

+ }

+ .commandline {

+ flex: 0 0 auto;

+ }

+ </style>

+ <div class="container">

+ <nav-bar>

+ <top-nav-menu last="{{ true }}"></top-nav-menu>

+ <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">

+ </isolate-nav-menu>

+ <nav-control></nav-control>

+ </nav-bar>

+ <div id="stack" class="stack">

+ <debugger-stack isolate="{{ isolate }}"></debugger-stack>

+ </div>

+ <!--

+ <core-splitter direction="up" allowOverflow=true></core-splitter>

+ <div class="console">

+ <debugger-console isolate="{{ isolate }}"></debugger-console>

+ </div>

+ <div class="commandline">

+ <debugger-input isolate="{{ isolate }}"></debugger-input>

+ </div>

+ -->

</div>

</template>

</polymer-element>

-<polymer-element name="field-view" extends="observatory-element">

+<polymer-element name="debugger-stack" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -6165,106 +6159,26 @@ hr {

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.type == 'Class' }}">

-

- <class-nav-menu cls="{{ field.owner }}"></class-nav-menu>

- </template>

- <template if="{{ field.owner.type == 'Library' }}">

- <library-nav-menu library="{{ field.owner }}"></library-nav-menu>

- </template>

- <nav-menu link="{{ field.link }}" anchor="{{ field.name }}" last="{{ true }}"></nav-menu>

- <nav-refresh callback="{{ refresh }}"></nav-refresh>

- <nav-control></nav-control>

- </nav-bar>

- <div class="content">

- <h1>

- <template if="{{ field.isStatic }}">static</template>

- <template if="{{ field.isFinal }}">final</template>

- <template if="{{ field.isConst }}">const</template>

- <template if="{{ (field.declaredType.name == 'dynamic' &&

- !field.isFinal && !field.isConst) }}">

- var

- </template>

- <template if="{{ (field.declaredType.name != 'dynamic') }}">

- {{ field.declaredType.name }}

- </template>

- {{ field.name }}

- </h1>

- <div class="memberList">

- <div class="memberItem">

- <div class="memberName">owner</div>

- <div class="memberValue">

- <template if="{{ field.owner.type == 'Class' }}">

- <class-ref ref="{{ field.owner }}"></class-ref>

- </template>

- <template if="{{ field.owner.type != 'Class' }}">

- <library-ref ref="{{ field.owner }}"></library-ref>

- </template>

- </div>

- <div class="memberItem">

- <div class="memberName">script</div>

- <div class="memberValue">

- <script-ref ref="{{ field.script }}"></script-ref>

- </div>

- <template if="{{ !field.isStatic }}">

- <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.guardClass == 'dynamic' }}">

- various

- </template>

- <template if="{{ field.guardClass == 'unknown' }}">

- none

- </template>

- <template if="{{ field.guardClass != 'unknown' &&

- field.guardClass != 'dynamic' }}">

- <class-ref ref="{{ field.guardClass }}"></class-ref>

- <template if="{{ field.guardNullable }}">

- — null observed

- </template>

- <template if="{{ !field.guardNullable }}">

- — null not observed

- </template>

- </div>

- </template>

- <template if="{{ field.value != null }}">

- <div class="memberItem">

- <div class="memberName">static value</div>

- <div class="memberValue">

- <any-service-ref ref="{{ field.value }}"></any-service-ref>

- </div>

+ <template if="{{ stack == null }}">

+ Loading stack frames

+ </template>

+ <template if="{{ stack != null }}">

+ <ul class="list-group">

+ <template repeat="{{ frame in stack['members'] }}">

+ <li class="list-group-item">

+ <debugger-frame frame="{{ frame }}" expand="{{ frame['depth'] == activeFrame }}">

+ </debugger-frame>

+ </li>

</template>

- </div>

- </template>

+ </ul>

+ </template>

</polymer-element>

-<polymer-element name="stack-frame" extends="observatory-element">

+<polymer-element name="debugger-frame" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -6518,40 +6432,98 @@ hr {

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">

- <any-service-ref ref="{{ v['value'] }}"></any-service-ref>

+ <style>

+ .frameOuter {

+ position: relative;

+ padding: 5px;

+ border: 1px solid white;

+ }

+ .frameOuter:hover {

+ border: 1px solid #e0e0e0;

+ }

+ .shadow {

+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),

+ 0 2px 5px 0 rgba(0, 0, 0, 0.26);

+ }

+ .frameSummaryText {

+ display: inline-block;

+ padding: 5px;

+ }

+ .frameId {

+ display: inline-block;

+ width: 60px;

+ }

+ .frameOuter .frameExpander {

+ position: absolute;

+ right: 5px;

+ top: 5px;

+ display: none;

+ }

+ .frameOuter:hover .frameExpander{

+ display: inline-block;

+ }

+ .frameContractor {

+ position: absolute;

+ right: 5px;

+ bottom: 5px;

+ display: inline-block;

+ }

+ </style>

+ <div id="frameOuter" class="frameOuter">

+ <a on-click="{{ toggleExpand }}">

+ <div class="frameSummary">

+ <div class="frameSummaryText">

+ <div class="frameId"><b>frame {{ frame['depth'] }}</b></div>

+ <function-ref ref="{{ frame['function'] }}"></function-ref>

+ ( <script-ref ref="{{ frame['script'] }}" pos="{{ frame['tokenPos'] }}">

+ </script-ref> )

+ </div>

+ <template if="{{ !expanded }}">

+ <div class="frameExpander">

+ <icon-expand-more></icon-expand-more>

+ </div>

+ </template>

+ </div>

+ </a>

+ <template if="{{expanded}}">

+ <div class="frameDetails">

+ <div class="flex-row">

+ <div class="flex-item-60-percent">

+ <script-inset height="{{ scriptHeight }}" script="{{ frame['function'].script }}" startpos="{{ frame['function'].tokenPos }}" endpos="{{ frame['function'].endTokenPos }}" currentpos="{{ frame['tokenPos'] }}">

+ </script-inset>

+ </div>

+ <div class="flex-item-40-percent">

+ <div style="padding:10px;" class="memberList">

+ <template repeat="{{ v in frame['vars'] }}">

+ <div class="memberItem">

+ <div class="memberName">{{ v['name']}}</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ v['value'] }}">

+ </any-service-ref>

+ </div>

</div>

- </div>

- </template>

+ </template>

+ </div>

</div>

- </curly-block>

- </div>

- <div class="flex-item-fixed-1-12">

- </div>

+ </div>

+

+ <div class="frameContractor">

+ <template if="{{expanded}}">

+ <a on-click="{{ toggleExpand }}">

+ <icon-expand-less></icon-expand-less>

+ </a>

+ </template>

+ </div>

+ </template>

</div>

</template>

</polymer-element>

-<polymer-element name="flag-list" extends="observatory-element">

+<polymer-element name="debugger-console" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -6805,44 +6777,22 @@ hr {

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>

+ <style>

+ .textBox {

+ position: absolute;

+ bottom: 0px;

+ width: 100%;

+ }

+ </style>

+ <div>

+ Debugging console is not yet implemented.<br>

</div>

</template>

</polymer-element>

-<polymer-element name="flag-item" extends="observatory-element">

+<polymer-element name="debugger-input" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -7096,12 +7046,13 @@ hr {

word-wrap: break-word;

}

</style>

- <span style="color:#aaa">// {{ flag['comment'] }}</span>

- <div style="padding: 3px 0">

- <b>{{ flag['name'] }}</b>

-  = 

- {{ flag['valueAsString'] }}

- </div>

+ <style>

+ .textBox {

+ font: 400 16px 'Montserrat', sans-serif;

+ width: 100%;

+ }

+ </style>

+ <input id="textBox" class="textBox" type="text" value="{{ text }}">

</template>

</polymer-element>

@@ -7111,15 +7062,9 @@ hr {

-<polymer-element name="function-view" extends="observatory-element">

+<polymer-element name="error-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -7374,111 +7319,22 @@ hr {

}

</style>

<nav-bar>

- <top-nav-menu></top-nav-menu>

- <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>

- <template if="{{ function.owningClass != null }}">

-

- <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>

+ <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>

- <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>

- <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>

- </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 class="memberItem">

- <div class="memberName">script</div>

- <div class="memberValue">

- <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }}">

- </script-ref>

- </div>

- <div class="memberItem"> </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>

- </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>

- </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>

- <hr>

- <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}">

- </script-inset>

- <br>

- </template>

-</polymer-element>

@@ -7486,10 +7342,10 @@ hr {

-<polymer-element name="heap-map" extends="observatory-element">

-<template>

- <style>

-/* Global styles */

+<polymer-element name="field-view" extends="observatory-element">

+ <template>

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -7743,36 +7599,87 @@ hr {

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">

-

- </div>

- <div class="flex-row">

- <canvas id="fragmentation" width="1px" height="1px"></canvas>

- </div>

-</template>

+ <nav-bar>

+ <top-nav-menu></top-nav-menu>

+ <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>

+ <template if="{{ field.owner.type == 'Class' }}">

+

+ <class-nav-menu cls="{{ field.owner }}"></class-nav-menu>

+ </template>

+ <template if="{{ field.owner.type == 'Library' }}">

+ <library-nav-menu library="{{ field.owner }}"></library-nav-menu>

+ </template>

+ <nav-menu link="{{ field.link }}" anchor="{{ field.name }}" last="{{ true }}"></nav-menu>

+ <nav-refresh callback="{{ refresh }}"></nav-refresh>

+ <nav-control></nav-control>

+ </nav-bar>

+ <div class="content">

+ <h1>

+ <template if="{{ field.isStatic }}">static</template>

+ <template if="{{ field.isFinal }}">final</template>

+ <template if="{{ field.isConst }}">const</template>

+ <template if="{{ (field.declaredType.name == 'dynamic' &&

+ !field.isFinal && !field.isConst) }}">

+ var

+ </template>

+ <template if="{{ (field.declaredType.name != 'dynamic') }}">

+ {{ field.declaredType.name }}

+ </template>

+ {{ field.name }}

+ </h1>

+ <div class="memberList">

+ <div class="memberItem">

+ <div class="memberName">owner</div>

+ <div class="memberValue">

+ <template if="{{ field.owner.type == 'Class' }}">

+ <class-ref ref="{{ field.owner }}"></class-ref>

+ </template>

+ <template if="{{ field.owner.type != 'Class' }}">

+ <library-ref ref="{{ field.owner }}"></library-ref>

+ </template>

+ </div>

+ <div class="memberItem">

+ <div class="memberName">script</div>

+ <div class="memberValue">

+ <script-ref ref="{{ field.script }}"></script-ref>

+ </div>

+ <template if="{{ !field.isStatic }}">

+ <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.guardClass == 'dynamic' }}">

+ various

+ </template>

+ <template if="{{ field.guardClass == 'unknown' }}">

+ none

+ </template>

+ <template if="{{ field.guardClass != 'unknown' &&

+ field.guardClass != 'dynamic' }}">

+ <class-ref ref="{{ field.guardClass }}"></class-ref>

+ <template if="{{ field.guardNullable }}">

+ — null observed

+ </template>

+ <template if="{{ !field.guardNullable }}">

+ — null not observed

+ </template>

+ </div>

+ </template>

+ <template if="{{ field.value != null }}">

+ <div class="memberItem">

+ <div class="memberName">static value</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ field.value }}"></any-service-ref>

+ </div>

+ </template>

+ </div>

+ </template>

</polymer-element>

@@ -7780,10 +7687,10 @@ hr {

-<polymer-element name="io-view" extends="observatory-element">

+<polymer-element name="flag-list" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -8037,66 +7944,43 @@ hr {

word-wrap: break-word;

}

</style>

<nav-bar>

- <top-nav-menu last="{{ true }}"></top-nav-menu>

+ <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">

- <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>

+ <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>

- <ul class="list-group">

- <li class="list-group-item">

- <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io/processes'))}}">Processes</a>

- </li>

- </ul>

+ <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>

</div>

- <br>

- <hr>

</template>

</polymer-element>

-<polymer-element name="io-ref" extends="service-ref">

+<polymer-element name="flag-item" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -8350,28 +8234,31 @@ hr {

word-wrap: break-word;

}

</style>

- <template if="{{ ref.type == 'Socket' }}">

- <io-socket-ref ref="{{ ref }}"></io-socket-ref>

- </template>

- <template if="{{ ref.type == 'HttpServerConnection' }}">

- <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection-ref>

- </template>

- <template if="{{ ref.type == 'HttpServer' }}">

- <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>

- </template>

- <template if="{{ ref.type == 'WebSocket' }}">

- <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>

- </template>

- <template if="{{ ref.type == 'Process' }}">

- <io-process-ref ref="{{ ref }}"></io-process-ref>

- </template>

+ <span style="color:#aaa">// {{ flag['comment'] }}</span>

+ <div style="padding: 3px 0">

+ <b>{{ flag['name'] }}</b>

+  = 

+ {{ flag['valueAsString'] }}

+ </div>

</template>

</polymer-element>

-<polymer-element name="io-http-server-list-view" extends="observatory-element">

+<polymer-element name="function-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -8625,45 +8512,134 @@ hr {

word-wrap: break-word;

}

</style>

<nav-bar>

- <top-nav-menu last="{{ true }}"></top-nav-menu>

+ <top-nav-menu></top-nav-menu>

+ <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>

+ <template if="{{ function.owningClass != null }}">

+

+ <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>

- <h1>HttpServers</h1>

- <br>

+ <h1>function {{ function.qualifiedName }}</h1>

- <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>

+ <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>

+ <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>

</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;

+ <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 class="memberItem">

+ <div class="memberName">script</div>

+ <div class="memberValue">

+ <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }}">

+ </script-ref>

+ </div>

+ <div class="memberItem"> </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>

+ </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>

+ </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>

+ <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 {

@@ -8906,14 +8882,47 @@ hr {

word-wrap: break-word;

}

</style>

- <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>

- </template>

+ <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">

+

+ </div>

+ <div class="flex-row">

+ <canvas id="fragmentation" width="1px" height="1px"></canvas>

+ </div>

+</template>

</polymer-element>

-<polymer-element name="io-http-server-view" extends="observatory-element">

+<polymer-element name="io-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -9171,57 +9180,61 @@ hr {

<nav-bar>

<top-nav-menu last="{{ true }}"></top-nav-menu>

<nav-refresh callback="{{ refresh }}"></nav-refresh>

+ <nav-control></nav-control>

</nav-bar>

- <h1>HttpServer</h1>

+ <h1>dart:io</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>

+ <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'))}}">Processes</a>

+ </li>

+ </ul>

</div>

<br>

<hr>

</template>

</polymer-element>

-<polymer-element name="io-http-server-connection-ref" extends="service-ref">

+<polymer-element name="io-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -9475,14 +9488,27 @@ hr {

word-wrap: break-word;

}

</style>

- <a _href="{{ url }}">{{ name }}</a>

+ <template if="{{ ref.type == 'Socket' }}">

+ <io-socket-ref ref="{{ ref }}"></io-socket-ref>

+ </template>

+ <template if="{{ ref.type == 'HttpServerConnection' }}">

+ <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection-ref>

+ </template>

+ <template if="{{ ref.type == 'HttpServer' }}">

+ <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>

+ </template>

+ <template if="{{ ref.type == 'WebSocket' }}">

+ <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>

+ </template>

+ <template if="{{ ref.type == 'Process' }}">

+ <io-process-ref ref="{{ ref }}"></io-process-ref>

+ </template>

</template>

</polymer-element>

-<polymer-element name="io-http-server-connection-view" extends="observatory-element">

+<polymer-element name="io-http-server-list-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -9743,34 +9769,26 @@ hr {

</nav-bar>

- <h1>HttpConnection</h1>

+ <h1>HttpServers</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>

+ <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-socket-ref" extends="service-ref">

+<polymer-element name="io-http-server-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -10028,10 +10046,9 @@ hr {

</template>

</polymer-element>

-<polymer-element name="io-socket-list-view" extends="observatory-element">

+<polymer-element name="io-http-server-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -10292,27 +10309,53 @@ hr {

</nav-bar>

- <h1>Sockets</h1>

+ <h1>HttpServer</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 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>

<br>

<hr>

</template>

</polymer-element>

-<polymer-element name="io-socket-view" extends="observatory-element">

+<polymer-element name="io-http-server-connection-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -10566,103 +10609,13 @@ hr {

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">

-

- <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>

- </template>

-

- <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>

- </template>

- </div>

- <br>

- <hr>

+ <a _href="{{ url }}">{{ name }}</a>

</template>

</polymer-element>

-<polymer-element name="io-web-socket-ref" extends="service-ref">

+<polymer-element name="io-http-server-connection-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -10916,14 +10869,40 @@ hr {

word-wrap: break-word;

}

</style>

- <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>

+ <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>

+ <br>

+ <hr>

</template>

</polymer-element>

-<polymer-element name="io-web-socket-list-view" extends="observatory-element">

+<polymer-element name="io-socket-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -11177,34 +11156,13 @@ hr {

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>

+ <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>

</template>

</polymer-element>

-<polymer-element name="io-web-socket-view" extends="observatory-element">

+<polymer-element name="io-socket-list-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -11465,26 +11423,26 @@ hr {

</nav-bar>

- <h1>WebSocket</h1>

+ <h1>Sockets</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>

+ <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-random-access-file-ref" extends="service-ref">

+<polymer-element name="io-socket-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -11738,44 +11696,132 @@ hr {

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;

+ <nav-bar>

+ <top-nav-menu last="{{ true }}"></top-nav-menu>

+ <nav-refresh callback="{{ refresh }}"></nav-refresh>

+ </nav-bar>

-.memberList {

+ <div class="content">

+

+ <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>

+ </template>

+

+ <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>

+ </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;

}

@@ -11999,34 +12045,13 @@ hr {

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>

+ <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>

</template>

</polymer-element>

-<polymer-element name="io-random-access-file-view" extends="observatory-element">

+<polymer-element name="io-web-socket-list-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -12287,34 +12312,26 @@ hr {

</nav-bar>

- <h1>Random Access File</h1>

+ <h1>WebSockets</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>

+ <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-process-list-view" extends="observatory-element">

+<polymer-element name="io-web-socket-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -12575,27 +12592,25 @@ hr {

</nav-bar>

- <h1>Processes</h1>

+ <h1>WebSocket</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 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>

<br>

<hr>

</template>

</polymer-element>

-<polymer-element name="io-process-ref" extends="service-ref">

+<polymer-element name="io-random-access-file-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -12849,19 +12864,13 @@ hr {

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>

+ <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>

</template>

</polymer-element>

-<polymer-element name="io-process-view" extends="observatory-element">

+<polymer-element name="io-random-access-file-list-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -13122,80 +13131,26 @@ hr {

</nav-bar>

- <h1>Process</h1>

+ <h1>Random Access Files</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>

- </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>

- </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>

+ <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>

- </div>

+ </ul>

+ </div>

+ <br>

+ <hr>

+ </template>

+</polymer-element>

- <br>

- <h2>Environment</h2>

- <div class="well">

- <div class="monospace break-wrap">

- <template repeat="{{ variable in process['environment'] }}">

- {{ variable }}

- <br>

- </template>

- </div>

- <br>

- <hr>

- </template>

-</polymer-element>

-<polymer-element name="isolate-ref" extends="service-ref">

-<template><style>

-/* Global styles */

+<polymer-element name="io-random-access-file-view" extends="observatory-element">

+ <template>

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -13449,22 +13404,40 @@ hr {

word-wrap: break-word;

}

</style>

- <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>

-</template>

-</polymer-element>

+ <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>

+ <br>

+ <hr>

+ </template>

+</polymer-element>

-<polymer-element name="isolate-summary" extends="observatory-element">

+<polymer-element name="io-process-list-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -13718,115 +13691,33 @@ hr {

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 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 over"></action-link>

- <action-link callback="{{ stepOut }}" label="step 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>

-</polymer-element>

+ <nav-bar>

+ <top-nav-menu last="{{ true }}"></top-nav-menu>

+ <nav-refresh callback="{{ refresh }}"></nav-refresh>

+ </nav-bar>

-<polymer-element name="isolate-location" extends="observatory-element">

- <template>

- <template if="{{ isolate.pauseEvent != null }}">

- <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}">

- at isolate start

- </template>

+ <div class="content">

+ <h1>Processes</h1>

- <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}">

- at isolate exit

- </template>

+ <br>

- <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

+ <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>

- at

- <function-ref ref="{{ isolate.topFrame['function'] }}">

- </function-ref>

- (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)

- </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>

+ </ul>

+ </div>

+ <br>

+ <hr>

</template>

</polymer-element>

-<polymer-element name="isolate-shared-summary" extends="observatory-element">

+<polymer-element name="io-process-ref" extends="service-ref">

- <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 */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -14080,107 +13971,18 @@ hr {

word-wrap: break-word;

}

</style>

- <template if="{{ isolate.error != null }}">

- <div class="content-centered">

- <pre class="errorBox">{{ isolate.error.message }}</pre>

- <br>

- </div>

+ <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>

- <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 class="memberItem">

- <div class="memberName">old heap</div>

- <div class="memberValue">

- {{ isolate.oldSpace.used | formatSize }}

- of

- {{ isolate.oldSpace.capacity | formatSize }}

- </div>

- <br>

- <div class="memberItem">

- <div class="memberValue">

- See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree' + isolate.link) }}">class hierarchy</a>

- </div>

- <div class="memberItem">

- <div class="memberValue">

- See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('stacktrace')) }}">stack trace</a>

- </div>

- <div class="memberItem">

- <div class="memberValue">

- See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('profile')) }}">cpu profile</a>

- </div>

- <div class="memberItem">

- <div class="memberValue">

- See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('allocationprofile')) }}">allocation profile</a>

- </div>

- <div class="memberItem">

- <div class="memberValue">

- See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('heapmap')) }}">heap map</a>

- </div>

- <div class="memberItem">

- <div class="memberValue">

- See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('metrics')) }}">metrics</a>

- </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>

- </template>

- -->

- </div>

- <div class="flex-item-10-percent">

- </div>

</template>

</polymer-element>

-<polymer-element name="isolate-counter-chart" extends="observatory-element">

+<polymer-element name="io-process-view" extends="observatory-element">

- <div id="counterPieChart" style="height: 200px"></div>

- </template>

-</polymer-element>

-<polymer-element name="isolate-view" extends="observatory-element">

- <template>

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -14434,130 +14236,78 @@ hr {

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>

+ <top-nav-menu last="{{ true }}"></top-nav-menu>

<nav-refresh callback="{{ refresh }}"></nav-refresh>

- <nav-control></nav-control>

</nav-bar>

- <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>

- <br>

+ <h1>Process</h1>

- <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 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 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 class="memberItem">

- <div class="memberName">isolate id</div>

- <div class="memberValue">{{ isolate.mainPort }}</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>

- <div class="flex-item-50-percent">

+ </template>

+ <template if="{{ process['stderr'] != null }}">

+ <div class="memberName">stderr</div>

- See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('debug/breakpoints')) }}">breakpoints</a>

+ <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref>

</div>

- </div>

+ </template>

</div>

- </div>

- <hr>

+ <br>

- <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>

+ <h2>Environment</h2>

+ <div class="well">

+ <div class="monospace break-wrap">

+ <template repeat="{{ variable in process['environment'] }}">

+ {{ variable }}

+ <br>

</template>

</div>

- </curly-block>

- </div>

- <hr>

- <div class="content">

- <div id="tagProfileChart" class="miniProfileChart" style="height: 600px"></div>

+ </div>

</div>

+ <br>

<hr>

- <div class="content">

- <eval-box callback="{{ eval }}"></eval-box>

- </div>

- <br><br><br><br>

</template>

</polymer-element>

@@ -14565,27 +14315,8 @@ hr {

-<polymer-element name="inbound-reference" extends="service-ref">

- <template>

- <style>

-/* Global styles */

+<polymer-element name="isolate-ref" extends="service-ref">

+<template><style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -14839,24 +14570,8 @@ hr {

word-wrap: break-word;

}

</style>

- <div>

- from <any-service-ref ref="{{ source }}"></any-service-ref>

- <template if="{{ slotIsArrayIndex }}">via [{{ slot }}]</template>

- <template if="{{ slotIsField }}">via <field-ref ref="{{ slot }}"></field-ref></template>

- <curly-block callback="{{ expander() }}">

- <div class="memberList">

- <div class="memberItem">

- <div class="memberName">

- <template repeat="{{ reference in inboundReferences] }}">

- <inbound-reference ref="{{ reference }}"></inbound-reference>

- </template>

- </div>

- </curly-block>

- </div>

- </template>

+ <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>

+</template>

</polymer-element>

@@ -14868,13 +14583,9 @@ hr {

-<polymer-element name="object-common" extends="observatory-element">

+<polymer-element name="isolate-summary" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -15128,102 +14839,114 @@ hr {

word-wrap: break-word;

}

</style>

- <div class="memberList">

+ <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 class="memberItem">

- <div class="memberName">class</div>

- <div class="memberValue">

- <class-ref ref="{{ object.clazz }}"></class-ref>

- </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>

- <template if="{{ object.size != null }}">

- <div class="memberItem" title="Space for this object in memory">

- <div class="memberName">size</div>

- <div class="memberValue">{{ object.size | formatSize }}</div>

- </div>

- </template>

+ <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>

- <template if="{{ object.size == null }}">

- <div class="memberItem" title="Space for this object in memory">

- <div class="memberName">size</div>

- <div class="memberValue">0</div>

- </div>

- </template>

+ </template>

+</polymer-element>

- <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">

- <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>

+<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>

- <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">

- <any-service-ref ref="{{ element['value'] }}"></any-service-ref>

- <template if="{{ element['parentField'] != null }}">

- in <field-ref ref="{{ element['parentField'] }}"></field-ref> of

- </template>

- <template if="{{ element['parentListIndex'] != null }}">

- in [{{ element['parentListIndex'] }}] of

- </template>

- </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>

- </div>

+ <action-link callback="{{ stepInto }}" label="step"></action-link>

+ <action-link callback="{{ stepOver }}" label="step over"></action-link>

+ <action-link callback="{{ stepOut }}" label="step out"></action-link>

+ </template>

- <div class="memberItem" title="Objects which directly reference this object">

- <div class="memberName">inbound references</div>

- <div class="memberValue">

- <template if="{{ inboundReferences == null }}">

- <eval-link callback="{{ fetchInboundReferences }}" label="[find]" expr="100">

- </eval-link>

- </template>

- <template if="{{ inboundReferences != null }}">

- <template repeat="{{ reference in inboundReferences['references'] }}">

- <inbound-reference ref="{{ reference }}"></inbound-reference>

- </template>

- </div>

+ <template if="{{ isolate.running }}">

+ <strong>running</strong>

+ <action-link callback="{{ pause }}" label="pause"></action-link>

+ </template>

- </div>

+ <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 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>

+</polymer-element>

-<polymer-element name="context-ref" extends="service-ref">

+<polymer-element name="isolate-shared-summary" extends="observatory-element">

<style>

-/* Global styles */

+ .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;

@@ -15477,35 +15200,107 @@ hr {

word-wrap: break-word;

}

</style>

- <span>

- <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>

- <curly-block callback="{{ expander() }}">

+ <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="memberName">parent</div>

+ <div class="memberName">new heap</div>

- <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref>

+ {{ isolate.newSpace.used | formatSize }}

+ of

+ {{ isolate.newSpace.capacity | formatSize }}

</div>

- <template repeat="{{ variable in ref.variables }}">

- <div class="memberItem">

- <div class="memberName">[{{ variable['index']}}]</div>

- <div class="memberValue">

- <any-service-ref ref="{{ variable['value'] }}"></any-service-ref>

- </div>

+ <div class="memberItem">

+ <div class="memberName">old heap</div>

+ <div class="memberValue">

+ {{ isolate.oldSpace.used | formatSize }}

+ of

+ {{ isolate.oldSpace.capacity | formatSize }}

</div>

- </template>

+ </div>

</div>

- </curly-block>

- </span>

+ <br>

+ <div class="memberItem">

+ <div class="memberValue">

+ See <a on-click="{{ goto }}" _href="{{ gotoLink('/debugger' + isolate.link) }}">debugger</a>

+ </div>

+ <div class="memberItem">

+ <div class="memberValue">

+ See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree' + isolate.link) }}">class hierarchy</a>

+ </div>

+ <div class="memberItem">

+ <div class="memberValue">

+ See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('profile')) }}">cpu profile</a>

+ </div>

+ <div class="memberItem">

+ <div class="memberValue">

+ See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('allocationprofile')) }}">allocation profile</a>

+ </div>

+ <div class="memberItem">

+ <div class="memberValue">

+ See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('heapmap')) }}">heap map</a>

+ </div>

+ <div class="memberItem">

+ <div class="memberValue">

+ See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('metrics')) }}">metrics</a>

+ </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>

+ </template>

+ -->

+ </div>

+ <div class="flex-item-10-percent">

+ </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="instance-view" extends="observatory-element">

+<polymer-element name="isolate-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -15759,175 +15554,130 @@ hr {

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="{{ instance.isolate }}"></isolate-nav-menu>

-

- <class-nav-menu cls="{{ instance.clazz }}"></class-nav-menu>

- <nav-menu link="." anchor="instance" last="{{ true }}"></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>

- <template if="{{ instance.isError }}">

- <error-view error_obj="{{ instance['error'] }}"></error-view>

- </template>

+ <div class="content">

+ <h1>isolate '{{ isolate.name }}'</h1>

+ </div>

- <template if="{{ !instance.isError }}">

- <div class="content">

- <template if="{{ instance.isAbstractType }}">

- <h1>type {{ instance.name }}</h1>

- </template>

- <template if="{{ !instance.isAbstractType }}">

- <h1>instance of {{ instance.clazz.name }}</h1>

- </template>

- <object-common object="{{ instance }}"></object-common>

+ <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>

+ <br>

- <div class="memberList">

- <div class="memberItem"> </div>

+ <template if="{{ isolate.topFrame != null }}">

+ <br>

+ <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ isolate.topFrame['tokenPos'] }}" height="200px">

+ </script-inset>

+ </template>

- <template if="{{ instance.valueAsString != null }}">

- <div class="memberItem">

- <div class="memberName">value</div>

- <div class="memberValue">{{ instance.valueAsString }}</div>

- </div>

- </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>

- <template if="{{ instance.isString }}">

- <div class="memberItem">

- <div class="memberName">valueAsLiteral</div>

- <div class="memberValue"> {{ asStringLiteral(instance.valueAsString, instance.valueAsStringIsTruncated) }}</div>

- </div>

- </template>

+ <br>

- <template if="{{ instance.isMirrorReference }}">

- <div class="memberItem">

- <div class="memberName">referent</div>

- <div class="memberValue">

- <any-service-ref ref="{{ instance.referent }}">

- </any-service-ref>

- </div>

- </template>

+ <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>

- <template if="{{ instance.typeClass != null }}">

- <div class="memberItem">

- <div class="memberName">type class</div>

- <div class="memberValue">

- <class-ref ref="{{ instance.typeClass }}">

- </class-ref>

- </div>

- </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>

- <template if="{{ instance.isClosure }}">

- <div class="memberItem">

- <div class="memberName">closure function</div>

- <div class="memberValue">

- <function-ref ref="{{ instance.closureFunc }}">

- </function-ref>

- </div>

- </template>

- <template if="{{ instance.isClosure }}">

+ <div class="content-centered">

+ <div class="flex-row">

+ <div class="flex-item-50-percent">

+ <div class="memberList">

- <div class="memberName">closure context</div>

+ <div class="memberName">root library</div>

- <any-service-ref ref="{{ instance.closureCtxt }}">

- </any-service-ref>

+ <library-ref ref="{{ isolate.rootLib }}"></library-ref>

</div>

- </template>

- <template if="{{ instance.isWeakProperty }}">

- <div class="memberName">key</div>

- <div class="memberValue">

- <any-service-ref ref="{{ instance.key }}">

- </any-service-ref>

- </div>

+ <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="memberName">value</div>

- <div class="memberValue">

- <any-service-ref ref="{{ instance.value }}">

- </any-service-ref>

- </div>

+ <div class="memberName">isolate id</div>

+ <div class="memberValue">{{ isolate.mainPort }}</div>

</div>

- </template>

+ </div>

+ <div class="flex-item-50-percent">

- <div class="memberName">toString()</div>

- <eval-link callback="{{ eval }}" expr="toString()"></eval-link>

+ See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink('debug/breakpoints')) }}">breakpoints</a>

</div>

+ </div>

- <hr>

- <div class="content">

- <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.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">

- <any-service-ref ref="{{ field.value }}"></any-service-ref>

- </div>

- </template>

- </div>

- </curly-block><br><br>

- </template>

+ <hr>

- <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">

- <any-service-ref ref="{{ element['value'] }}"></any-service-ref>

- </div>

- </template>

+ <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>

- </curly-block><br><br>

- </template>

- </div>

+ </template>

+ </div>

+ </curly-block>

+ </div>

- <hr>

+ <hr>

- <div class="content">

- <eval-box callback="{{ eval }}"></eval-box>

- </div>

+ <div class="content">

+ <div id="tagProfileChart" class="miniProfileChart" style="height: 600px"></div>

+ </div>

- <br><br><br><br>

+ <hr>

- </template>

+ <div class="content">

+ <eval-box callback="{{ eval }}"></eval-box>

+ </div>

+ <br><br><br><br>

</template>

</polymer-element>

@@ -15935,16 +15685,6 @@ hr {

-<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>

@@ -15957,10 +15697,9 @@ hr {

-<polymer-element name="library-view" extends="observatory-element">

+<polymer-element name="inbound-reference" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -16214,143 +15953,45 @@ hr {

word-wrap: break-word;

}

</style>

+ <div>

+ from <any-service-ref ref="{{ source }}"></any-service-ref>

+ <template if="{{ slotIsArrayIndex }}">via [{{ slot }}]</template>

+ <template if="{{ slotIsField }}">via <field-ref ref="{{ slot }}"></field-ref></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="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>

- <nav-refresh callback="{{ refresh }}"></nav-refresh>

- <nav-control></nav-control>

- </nav-bar>

- <div class="content">

- <h1>

-

- 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 }}">

+ <curly-block callback="{{ expander() }}">

+ <div class="memberList">

- <div class="memberName">vm name</div>

- <div class="memberValue">{{ library.vmName }}</div>

+ <div class="memberName">

+ <template repeat="{{ reference in inboundReferences] }}">

+ <inbound-reference ref="{{ reference }}"></inbound-reference>

+ </template>

+ </div>

</div>

- </template>

- </div>

+ </div>

+ </curly-block>

</div>

+ </template>

+</polymer-element>

- <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>

- </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>

- </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>

- </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 }}">

- <any-service-ref ref="{{ field.value }}"></any-service-ref>

- </template>

- </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>

- </template>

- </div>

- </curly-block><br>

- <br>

- </template>

- </div>

- <hr>

- <div class="content">

- <eval-box callback="{{ eval }}"></eval-box>

- </div>

- <br><br><br><br>

- </template>

-</polymer-element>

-<polymer-element name="metrics-page" extends="observatory-element">

+<polymer-element name="object-common" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -16604,67 +16245,102 @@ hr {

word-wrap: break-word;

}

</style>

- <style>

- ul li:hover:not(.selected) {

- background-color: #FFF3E3;

- }

- .selected {

- background-color: #0489c3;

- }

- .graph {

- min-height: 600px;

- }

- </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="flex-row">

- <div class="flex-item-20-percent">

- <ul>

- <template repeat="{{ metric in isolate.dartMetrics.values }}">

- <template if="{{ metric == selectedMetric }}">

- <li class="selected">

- {{ metric.name }}

- </li>

- </template>

- <template if="{{ metric != selectedMetric }}">

- <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">

- {{ metric.name }}

- </li>

- </template>

+ <div class="memberList">

+ <div class="memberItem">

+ <div class="memberName">class</div>

+ <div class="memberValue">

+ <class-ref ref="{{ object.clazz }}"></class-ref>

+ </div>

+ <template if="{{ object.size != null }}">

+ <div class="memberItem" title="Space for this object in memory">

+ <div class="memberName">size</div>

+ <div class="memberValue">{{ object.size | formatSize }}</div>

+ </div>

+ </template>

+ <template if="{{ object.size == null }}">

+ <div class="memberItem" title="Space for this object in memory">

+ <div class="memberName">size</div>

+ <div class="memberValue">0</div>

+ </div>

+ </template>

+ <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">

+ <div class="memberName">retained size</div>

+ <div class="memberValue">

+ <template if="{{ retainedBytes == null }}">

+ <eval-link callback="{{ retainedSize }}" label="[calculate]">

+ </eval-link>

</template>

- <template repeat="{{ metric in isolate.vmMetrics.values }}">

- <template if="{{ metric == selectedMetric }}">

- <li class="selected">

- {{ metric.name }}

- </li>

+ <template if="{{ retainedBytes != null }}">

+ {{ retainedBytes | formatSize }}

+ </template>

+ </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">

+ <any-service-ref ref="{{ element['value'] }}"></any-service-ref>

+ <template if="{{ element['parentField'] != null }}">

+ in <field-ref ref="{{ element['parentField'] }}"></field-ref> of

+ </template>

+ <template if="{{ element['parentListIndex'] != null }}">

+ in [{{ element['parentListIndex'] }}] of

+ </template>

+ </div>

</template>

- <template if="{{ metric != selectedMetric }}">

- <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">

- {{ metric.name }}

- </li>

+ <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>

- </ul>

+ </div>

</div>

- <div class="flex-item-80-percent">

- <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">

- </metrics-graph>

- <div>

- <metric-details page="{{ page }}" metric="{{ selectedMetric }}">

- </metric-details>

+ <div class="memberItem" title="Objects which directly reference this object">

+ <div class="memberName">inbound references</div>

+ <div class="memberValue">

+ <template if="{{ inboundReferences == null }}">

+ <eval-link callback="{{ fetchInboundReferences }}" label="[find]" expr="100">

+ </eval-link>

+ </template>

+ <template if="{{ inboundReferences != null }}">

+ <template repeat="{{ reference in inboundReferences['references'] }}">

+ <inbound-reference ref="{{ reference }}"></inbound-reference>

+ </template>

</div>

- </div>

+ </div>

</template>

</polymer-element>

-<polymer-element name="metric-details" extends="observatory-element">

+<polymer-element name="context-ref" extends="service-ref">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -16918,66 +16594,36 @@ hr {

word-wrap: break-word;

}

</style>

- <div class="content-centered">

- <div class="memberList">

- <div class="memberItem">

- <div class="memberName">name</div>

- <div class="memberValue">{{ metric.name }}</div>

- </div>

- <div class="memberItem">

- <div class="memberName">description</div>

- <div class="memberValue">{{ metric.description }}</div>

- </div>

- <div class="memberItem">

- <div class="memberName">current value</div>

- <div class="memberValue">{{ metric.value }}</div>

- </div>

- <template if="{{ (metric != null) && (metric.min != null) }}">

- <div class="memberItem">

- <div class="memberName">minimum</div>

- <div class="memberValue">{{ metric.min }}</div>

- </div>

- </template>

- <template if="{{ (metric != null) && (metric.max != null) }}">

+ <span>

+ <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>

+ <curly-block callback="{{ expander() }}">

+ <div class="memberList">

- <div class="memberName">maximum</div>

- <div class="memberValue">{{ metric.max }}</div>

- </div>

- </template>

- <div class="memberItem">

- <div class="memberName">refresh rate</div>

- <div class="memberValue">

- <select id="refreshrate" on-change="{{ refreshRateChange }}">

- <!-- These must be kept in sync with POLL_PERIODS in MetricsPage

- in object.dart -->

- <option value="8000">Every eight seconds</option>

- <option value="4000">Every four seconds</option>

- <option value="2000">Every two seconds</option>

- <option value="1000">Once a second</option>

- <option value="100">Ten times per second</option>

- <option value="0" selected="selected">Never</option>

- </select>

- </div>

- <div class="memberItem">

- <div class="memberName">sample buffer size</div>

- <div class="memberValue">

- <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">

- <option value="10">10</option>

- <option value="100" selected="selected">100</option>

- <option value="1000">1000</option>

- </select>

+ <div class="memberName">parent</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref>

+ </div>

</div>

+ <template repeat="{{ variable in ref.variables }}">

+ <div class="memberItem">

+ <div class="memberName">[{{ variable['index']}}]</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ variable['value'] }}"></any-service-ref>

+ </div>

+ </template>

</div>

- </div>

+ </curly-block>

+ </span>

</template>

</polymer-element>

-<polymer-element name="metrics-graph" extends="observatory-element">

+<polymer-element name="instance-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -17231,13 +16877,189 @@ hr {

word-wrap: break-word;

}

</style>

- <style>

- .graph {

- min-height: 600px;

- }

- </style>

- <div id="graph" class="graph">

- </div>

+ <nav-bar>

+ <top-nav-menu></top-nav-menu>

+ <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>

+

+ <class-nav-menu cls="{{ instance.clazz }}"></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.isError }}">

+ <error-view error_obj="{{ instance['error'] }}"></error-view>

+ </template>

+ <template if="{{ !instance.isError }}">

+ <div class="content">

+ <template if="{{ instance.isAbstractType }}">

+ <h1>type {{ instance.name }}</h1>

+ </template>

+ <template if="{{ !instance.isAbstractType }}">

+ <h1>instance of {{ instance.clazz.name }}</h1>

+ </template>

+ <object-common object="{{ instance }}"></object-common>

+ <div class="memberList">

+ <div class="memberItem"> </div>

+ <template if="{{ instance.valueAsString != null }}">

+ <div class="memberItem">

+ <div class="memberName">value</div>

+ <div class="memberValue">{{ instance.valueAsString }}</div>

+ </div>

+ </template>

+ <template if="{{ instance.isString }}">

+ <div class="memberItem">

+ <div class="memberName">valueAsLiteral</div>

+ <div class="memberValue"> {{ asStringLiteral(instance.valueAsString, instance.valueAsStringIsTruncated) }}</div>

+ </div>

+ </template>

+ <template if="{{ instance.isMirrorReference }}">

+ <div class="memberItem">

+ <div class="memberName">referent</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ instance.referent }}">

+ </any-service-ref>

+ </div>

+ </template>

+ <template if="{{ instance.typeClass != null }}">

+ <div class="memberItem">

+ <div class="memberName">type class</div>

+ <div class="memberValue">

+ <class-ref ref="{{ instance.typeClass }}">

+ </class-ref>

+ </div>

+ </template>

+ <template if="{{ instance.isClosure }}">

+ <div class="memberItem">

+ <div class="memberName">closure function</div>

+ <div class="memberValue">

+ <function-ref ref="{{ instance.closureFunc }}">

+ </function-ref>

+ </div>

+ </template>

+ <template if="{{ instance.isClosure }}">

+ <div class="memberItem">

+ <div class="memberName">closure context</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ instance.closureCtxt }}">

+ </any-service-ref>

+ </div>

+ </template>

+ <template if="{{ instance.isWeakProperty }}">

+ <div class="memberItem">

+ <div class="memberName">key</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ instance.key }}">

+ </any-service-ref>

+ </div>

+ <div class="memberItem">

+ <div class="memberName">value</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ instance.value }}">

+ </any-service-ref>

+ </div>

+ </template>

+ <div class="memberItem">

+ <div class="memberName">toString()</div>

+ <div class="memberValue">

+ <eval-link callback="{{ eval }}" expr="toString()"></eval-link>

+ </div>

+ <hr>

+ <div class="content">

+ <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.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">

+ <any-service-ref ref="{{ field.value }}"></any-service-ref>

+ </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">

+ <any-service-ref ref="{{ element['value'] }}"></any-service-ref>

+ </div>

+ </template>

+ </div>

+ </curly-block><br><br>

+ </template>

+ </div>

+ <hr>

+ <div class="content">

+ <eval-box callback="{{ eval }}"></eval-box>

+ </div>

+ <br><br><br><br>

+ </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>

@@ -17254,10 +17076,11 @@ hr {

-<polymer-element name="object-view" extends="observatory-element">

+<polymer-element name="library-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -17511,46 +17334,133 @@ hr {

word-wrap: break-word;

}

</style>

<nav-bar>

<top-nav-menu></top-nav-menu>

- <isolate-nav-menu isolate="{{ object.isolate }}"></isolate-nav-menu>

- <nav-menu link="." anchor="object" last="{{ true }}"></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>

- <object-common object="{{ object }}"></object-common>

- </div>

- <hr>

- </template>

-</polymer-element>

+ <h1>

+

+ 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>

+ <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>

+ </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>

+ </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>

+ </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 }}">

+ <any-service-ref ref="{{ field.value }}"></any-service-ref>

+ </template>

+ </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>

+ </template>

+ </div>

+ </curly-block><br>

+ <br>

+ </template>

+ </div>

+ <hr>

+ <div class="content">

+ <eval-box callback="{{ eval }}"></eval-box>

+ </div>

+ <br><br><br><br>

+ </template>

+</polymer-element>

@@ -17558,10 +17468,9 @@ hr {

-<polymer-element name="context-view" extends="observatory-element">

+<polymer-element name="metrics-page" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -17815,71 +17724,66 @@ hr {

word-wrap: break-word;

}

</style>

+ <style>

+ ul li:hover:not(.selected) {

+ background-color: #FFF3E3;

+ }

+ .selected {

+ background-color: #0489c3;

+ }

+ .graph {

+ min-height: 600px;

+ }

+ </style>

<nav-bar>

- <top-nav-menu></top-nav-menu>

- <isolate-nav-menu isolate="{{ context.isolate }}"></isolate-nav-menu>

-

- <class-nav-menu cls="{{ context.clazz }}"></class-nav-menu>

- <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>

+ <top-nav-menu last="{{ true }}"></top-nav-menu>

<nav-refresh callback="{{ refresh }}"></nav-refresh>

<nav-control></nav-control>

</nav-bar>

- <template if="{{ !context.isError }}">

- <div class="content">

- <h1>instance of Context</h1>

- <object-common object="{{ context }}"></object-common>

- <div class="memberList">

- <div class="memberItem"> </div>

- <div class="memberItem">

- <div class="memberName">parent context</div>

- <div class="memberValue">

- <any-service-ref ref="{{ context.parentContext }}"></any-service-ref>

- </div>

+ <div class="flex-row">

+ <div class="flex-item-20-percent">

+ <ul>

+ <template repeat="{{ metric in isolate.dartMetrics.values }}">

+ <template if="{{ metric == selectedMetric }}">

+ <li class="selected">

+ {{ metric.name }}

+ </li>

+ </template>

+ <template if="{{ metric != selectedMetric }}">

+ <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">

+ {{ metric.name }}

+ </li>

+ </template>

+ <template repeat="{{ metric in isolate.vmMetrics.values }}">

+ <template if="{{ metric == selectedMetric }}">

+ <li class="selected">

+ {{ metric.name }}

+ </li>

+ </template>

+ <template if="{{ metric != selectedMetric }}">

+ <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">

+ {{ metric.name }}

+ </li>

+ </template>

+ </ul>

</div>

- <hr>

- <div class="content">

- <template if="{{ context.variables.isNotEmpty }}">

- variables ({{ context.variables.length }})

- <curly-block expand="{{ context.variables.length <= 8 }}">

- <div class="memberList">

- <template repeat="{{ variable in context.variables }}">

- <div class="memberItem">

- <div class="memberName">[{{ variable['index']}}]</div>

- <div class="memberValue">

- <any-service-ref ref="{{ variable['value'] }}"></any-service-ref>

- </div>

- </template>

- </div>

- </curly-block><br><br>

- </template>

+ <div class="flex-item-80-percent">

+ <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">

+ </metrics-graph>

+ <div>

+ <metric-details page="{{ page }}" metric="{{ selectedMetric }}">

+ </metric-details>

+ </div>

</div>

- <br><br><br><br>

- </template>

+ </div>

</template>

</polymer-element>

-<polymer-element name="heap-profile" extends="observatory-element">

-<template>

- <style>

-/* Global styles */

+<polymer-element name="metric-details" extends="observatory-element">

+ <template>

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -18133,271 +18037,959 @@ hr {

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>

- <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 class="memberItem">

- <div class="memberName">external</div>

- <div class="memberValue">

- {{ isolate.newSpace.external | formatSize }}

- </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 class="content-centered">

+ <div class="memberList">

+ <div class="memberItem">

+ <div class="memberName">name</div>

+ <div class="memberValue">{{ metric.name }}</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 class="memberItem">

- <div class="memberName">external</div>

- <div class="memberValue">

- {{ isolate.oldSpace.external | formatSize }}

- </div>

+ <div class="memberItem">

+ <div class="memberName">description</div>

+ <div class="memberValue">{{ metric.description }}</div>

+ </div>

+ <div class="memberItem">

+ <div class="memberName">current value</div>

+ <div class="memberValue">{{ metric.value }}</div>

+ </div>

+ <template if="{{ (metric != null) && (metric.min != null) }}">

- <div class="memberName">collections</div>

- <div class="memberValue">{{ formattedCollections(false) }}</div>

+ <div class="memberName">minimum</div>

+ <div class="memberValue">{{ metric.min }}</div>

</div>

+ </template>

+ <template if="{{ (metric != null) && (metric.max != null) }}">

- <div class="memberName">average collection time</div>

- <div class="memberValue">{{ formattedAverage(false) }}</div>

+ <div class="memberName">maximum</div>

+ <div class="memberValue">{{ metric.max }}</div>

</div>

- <div class="memberItem">

- <div class="memberName">cumulative collection time</div>

- <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</div>

+ </template>

+ <div class="memberItem">

+ <div class="memberName">refresh rate</div>

+ <div class="memberValue">

+ <select id="refreshrate" on-change="{{ refreshRateChange }}">

+ <!-- These must be kept in sync with POLL_PERIODS in MetricsPage

+ in object.dart -->

+ <option value="8000">Every eight seconds</option>

+ <option value="4000">Every four seconds</option>

+ <option value="2000">Every two seconds</option>

+ <option value="1000">Once a second</option>

+ <option value="100">Ten times per second</option>

+ <option value="0" selected="selected">Never</option>

+ </select>

</div>

- <div class="memberItem">

- <div class="memberName">average time between collections</div>

- <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div>

+ </div>

+ <div class="memberItem">

+ <div class="memberName">sample buffer size</div>

+ <div class="memberValue">

+ <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">

+ <option value="10">10</option>

+ <option value="100" selected="selected">100</option>

+ <option value="1000">1000</option>

+ </select>

</div>

- <div id="oldPieChart" style="height: 300px"></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>

- </div>

-</template>

+ </template>

</polymer-element>

+<polymer-element name="metrics-graph" 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;

+.memberSmall {

+ display: table-cell;

+ vertical-align: top;

+ padding: 3px 0 3px 1em;

+ font: 400 12px 'Montserrat', sans-serif;

-<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;

+.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>

+ .graph {

+ min-height: 600px;

}

</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 id="graph" class="graph">

</div>

</template>

</polymer-element>

-<polymer-element name="isolate-profile" extends="observatory-element">

- <template>

- <style>

-/* Global styles */

+<polymer-element name="object-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;

+.memberSmall {

+ display: table-cell;

+ vertical-align: top;

+ padding: 3px 0 3px 1em;

+ font: 400 12px '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="{{ object.isolate }}"></isolate-nav-menu>

+ <nav-menu link="." anchor="object" last="{{ true }}"></nav-menu>

+ <nav-refresh callback="{{ refresh }}"></nav-refresh>

+ <nav-control></nav-control>

+ </nav-bar>

+ <div class="content">

+ <object-common object="{{ object }}"></object-common>

+ </div>

+ <hr>

+ </template>

+</polymer-element>

+<polymer-element name="context-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;

+.memberSmall {

+ display: table-cell;

+ vertical-align: top;

+ padding: 3px 0 3px 1em;

+ font: 400 12px '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="{{ context.isolate }}"></isolate-nav-menu>

+

+ <class-nav-menu cls="{{ context.clazz }}"></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="{{ !context.isError }}">

+ <div class="content">

+ <h1>instance of Context</h1>

+ <object-common object="{{ context }}"></object-common>

+ <div class="memberList">

+ <div class="memberItem"> </div>

+ <div class="memberItem">

+ <div class="memberName">parent context</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ context.parentContext }}"></any-service-ref>

+ </div>

+ <hr>

+ <div class="content">

+ <template if="{{ context.variables.isNotEmpty }}">

+ variables ({{ context.variables.length }})

+ <curly-block expand="{{ context.variables.length <= 8 }}">

+ <div class="memberList">

+ <template repeat="{{ variable in context.variables }}">

+ <div class="memberItem">

+ <div class="memberName">[{{ variable['index']}}]</div>

+ <div class="memberValue">

+ <any-service-ref ref="{{ variable['value'] }}"></any-service-ref>

+ </div>

+ </template>

+ </div>

+ </curly-block><br><br>

+ </template>

+ </div>

+ <br><br><br><br>

+ </template>

+</polymer-element>

+<polymer-element name="heap-profile" extends="observatory-element">

+<template>

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -18651,195 +19243,272 @@ hr {

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;

- }

+ <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>

+ <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 class="memberItem">

+ <div class="memberName">external</div>

+ <div class="memberValue">

+ {{ isolate.newSpace.external | formatSize }}

+ </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 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 class="memberItem">

+ <div class="memberName">external</div>

+ <div class="memberValue">

+ {{ isolate.oldSpace.external | formatSize }}

+ </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 id="oldPieChart" style="height: 300px"></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>

+ </div>

+</template>

+</polymer-element>

- tr:hover > td {

- background-color: #FFF3E3;

- }

- .rowColor0 {

- background-color: #FFE9CC;

- }

- .rowColor1 {

- background-color: #FFDEB2;

- }

- .rowColor2 {

- background-color: #FFD399;

+<polymer-element name="sliding-checkbox">

+ <template>

+ <style>

+ .switch {

+ position: relative;

+ width: 121px;

+ -webkit-user-select: none;

+ -moz-user-select: none;

+ -ms-user-select: none;

}

- .rowColor3 {

- background-color: #FFC87F;

+ .hide {

+ display: none;

}

- .rowColor4 {

- background-color: #FFBD66;

+ .label {

+ display: block;

+ overflow: hidden;

+ cursor: pointer;

+ border: 2px solid #999999;

+ border-radius: 15px;

}

- .rowColor5 {

- background-color: #FFB24C;

+ .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;

}

- .rowColor6 {

- background-color: #FFA733;

+ .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;

}

- .rowColor7 {

- background-color: #FF9C19;

+ .content:before {

+ content: {{ checkedText }};

+ padding-left: 10px;

+ background-color: #0489C3;

}

- .rowColor8 {

- background-color: #FF9100;

+ .content:after {

+ content: {{ uncheckedText }};

+ padding-right: 10px;

+ background-color: #EEEEEE;

+ color: #999999;

+ text-align: right;

}

- .tooltip {

- display: block;

+ .dot {

+ width: 14px;

+ margin: 8px;

+ background: #FFFFFF;

+ border: 2px solid #999999;

+ border-radius: 15px;

position: absolute;

- visibility: hidden;

- opacity: 0;

- transition: visibility 0s linear 0.5s;

- transition: opacity .4s ease-in-out;

+ 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;

}

- 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;

+ :checked + .label .content {

+ margin-left: 0;

}

- .white {

- color: #ffffff;

+ :checked + .label .dot {

+ right: 0px;

}

</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 > VM</option>

- <option value="u">User</option>

- <option value="vu">VM > User</option>

- <option value="v">VM</option>

- <option value="hide">None</option>

- </select>

- </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>

- </td>

- </tr>

- </tbody>

- </table>

+ <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="script-view" extends="observatory-element">

-<template>

- <style>

-/* Global styles */

+<polymer-element name="isolate-profile" extends="observatory-element">

+ <template>

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -19067,57 +19736,212 @@ hr {

flex-basis: 60%;

}

-.flex-item-70-percent {

- flex-grow: 0;

- flex-shrink: 0;

- flex-basis: 70%;

+.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;

+ }

-.flex-item-80-percent {

- flex-grow: 0;

- flex-shrink: 0;

- flex-basis: 80%;

+ .tooltip {

+ display: block;

+ position: absolute;

+ visibility: hidden;

+ opacity: 0;

+ transition: visibility 0s linear 0.5s;

+ transition: opacity .4s ease-in-out;

+ }

-.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);

+ 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;

+ }

-.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>

+ .white {

+ color: #ffffff;

+ }

- <template if="{{ args['pos'] == null }}">

- <script-inset id="scriptInset" script="{{ script }}">

- <h1>script {{ script.name }}</h1>

- </script-inset>

+ </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 > VM</option>

+ <option value="u">User</option>

+ <option value="vu">VM > User</option>

+ <option value="v">VM</option>

+ <option value="hide">None</option>

+ </select>

+ </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>

+ </td>

+ </tr>

+ </tbody>

+ </table>

+ </div>

</template>

+</polymer-element>

- <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>

@@ -19125,10 +19949,10 @@ hr {

-<polymer-element name="stack-trace" extends="observatory-element">

- <template>

- <style>

-/* Global styles */

+<polymer-element name="script-view" extends="observatory-element">

+<template>

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -19382,28 +20206,30 @@ hr {

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>

+ <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>

@@ -19417,10 +20243,10 @@ hr {

<polymer-element name="vm-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -19731,6 +20557,7 @@ hr {

</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. -->

@@ -19738,8 +20565,7 @@ hr {

<polymer-element name="trace-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -20020,8 +20846,7 @@ hr {

<polymer-element name="map-viewer" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -20306,8 +21131,7 @@ hr {

<polymer-element name="list-viewer" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -20589,6 +21413,7 @@ hr {

</polymer-element>

<polymer-element name="observatory-application" extends="observatory-element">

</polymer-element>

@@ -20597,10 +21422,15 @@ hr {

<polymer-element name="service-exception-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -20874,10 +21704,10 @@ hr {

<polymer-element name="service-error-view" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -21147,6 +21977,8 @@ hr {

<polymer-element name="vm-connect-target" extends="observatory-element">

<style>

@@ -21159,8 +21991,7 @@ hr {

background: #ff0000;

}

</style>

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -21430,8 +22261,7 @@ hr {

<polymer-element name="vm-connect" extends="observatory-element">

- <style>

-/* Global styles */

+ <style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -21750,9 +22580,9 @@ hr {

<polymer-element name="vm-ref" extends="service-ref">

- <template><style>

-/* Global styles */

+ <template><style>/* Global styles */

* {

margin: 0;

padding: 0;

@@ -22012,6 +22842,9 @@ hr {

+</div>

<observatory-application devtools="true"></observatory-application>