Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(634)

Unified Diff: runtime/bin/vmservice/client/deployed/web/index.html

Issue 299143007: Show flags in Observatory. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: gen js + code review Created 6 years, 7 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 | « no previous file | runtime/bin/vmservice/client/deployed/web/index.html._data » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: runtime/bin/vmservice/client/deployed/web/index.html
diff --git a/runtime/bin/vmservice/client/deployed/web/index.html b/runtime/bin/vmservice/client/deployed/web/index.html
index 7a7bc020ae9f2ea1a58495da9519ef65910b08ff..758168da0c33734edab47deb82828401b090909b 100644
--- a/runtime/bin/vmservice/client/deployed/web/index.html
+++ b/runtime/bin/vmservice/client/deployed/web/index.html
@@ -121,7 +121,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -334,6 +339,7 @@ hr {
+
@@ -447,7 +453,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -789,7 +800,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -1220,7 +1236,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -1478,7 +1499,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -1840,7 +1866,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -2091,7 +2122,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -2335,7 +2371,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -2580,7 +2621,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -2817,7 +2863,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -3188,7 +3239,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -3439,7 +3495,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -3847,7 +3908,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -4098,7 +4164,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -4357,59 +4428,13 @@ hr {
+
-
-
-<polymer-element name="script-inset" extends="observatory-element">
- <template>
- <style>
- .sourceInset {
- padding-left: 15%;
- padding-right: 15%;
- }
- .grayBox {
- width: 100%;
- background-color: #f5f5f5;
- border: 1px solid #ccc;
- padding: 10px;
- }
- </style>
- <div class="sourceInset">
- <content></content>
- <div class="grayBox">
- <template if="{{ coverage == true }}">
- <table>
- <tbody>
- <tr template="" repeat="{{ line in lines }}">
- <td style="{{ hitStyle(line) }}"><span> </span></td>
- <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
- <td>&nbsp;</td>
- <td width="99%" style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: pre;">{{line.text}}</td>
- </tr>
- </tbody>
- </table>
- </template>
- <template if="{{ coverage == false }}">
- <table>
- <tbody>
- <tr template="" repeat="{{ line in lines }}">
- <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
- <td>&nbsp;</td>
- <td width="99%" style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: pre;">{{line.text}}</td>
- </tr>
- </tbody>
- </table>
- </template>
- </div>
- </div>
- </template>
-
-</polymer-element>
-<polymer-element name="function-view" extends="observatory-element">
+<polymer-element name="stack-frame" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -4469,7 +4494,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -4642,118 +4672,39 @@ hr {
word-wrap: break-word;
}
</style>
- <nav-bar>
- <top-nav-menu></top-nav-menu>
- <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
- <template if="{{ function['owner'].serviceType == 'Class' }}">
- <!-- TODO(turnidge): Add library nav menu here. -->
- <class-nav-menu cls="{{ function['owner'] }}"></class-nav-menu>
- </template>
- <template if="{{ function['owner'].serviceType == 'Library' }}">
- <library-nav-menu library="{{ function['owner'] }}"></library-nav-menu>
- </template>
- <nav-menu link="{{ function.hashLink }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- </nav-bar>
-
- <div class="content">
- <h1>function {{ qualifiedName }}</h1>
-
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">kind</div>
- <div class="memberValue">
- <template if="{{ function['is_static'] }}">static</template>
- <template if="{{ function['is_const'] }}">const</template>
- {{ kind }}
- </div>
- </div>
- <template if="{{ function['parent'] != null }}">
- <div class="memberItem">
- <div class="memberName">parent function</div>
- <div class="memberValue">
- <function-ref ref="{{ function['parent'] }}"></function-ref>
- </div>
- </div>
- </template>
- <div class="memberItem">
- <div class="memberName">owner</div>
- <div class="memberValue">
- <template if="{{ function['owner'].serviceType == 'Class' }}">
- <class-ref ref="{{ function['owner'] }}"></class-ref>
- </template>
- <template if="{{ function['owner'].serviceType != 'Class' }}">
- <library-ref ref="{{ function['owner'] }}"></library-ref>
- </template>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberName">script</div>
- <div class="memberValue">
- <script-ref ref="{{ function['script'] }}" pos="{{ function['tokenPos'] }}">
- </script-ref>
- </div>
- </div>
-
- <div class="memberItem">&nbsp;</div>
+ <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> )
- <template if="{{ function['code'] != null }}">
- <div class="memberItem">
- <div class="memberName">optimized code</div>
- <div class="memberValue">
- <code-ref ref="{{ function['code'] }}"></code-ref>
- </div>
- </div>
- </template>
- <template if="{{ function['unoptimized_code'] != null }}">
- <div class="memberItem">
- <div class="memberName">unoptimized code</div>
- <div class="memberValue">
- <code-ref ref="{{ function['unoptimized_code'] }}"></code-ref>
+ <curly-block>
+ <div class="memberList">
+ <template repeat="{{ v in frame['vars'] }}">
+ <div class="memberItem">
+ <div class="memberName">{{ v['name']}}</div>
+ <div class="memberValue">
+ <instance-ref ref="{{ v['value'] }}"></instance-ref>
+ </div>
+ </div>
+ </template>
</div>
- <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['usage_counter'] }})
- </span>
- </div>
- </div>
- </template>
- <div class="memberItem">
- <div class="memberName">deoptimizations</div>
- <div class="memberValue">{{ function['deoptimizations'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">optimizable</div>
- <div class="memberValue">{{ function['is_optimizable'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">inlinable</div>
- <div class="memberValue">{{ function['is_inlinable'] }}</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>
+ </curly-block>
+ </div>
+ <div class="flex-item-fixed-1-12">
+ </div>
</div>
-
- <hr>
- <script-inset script="{{ function['script'] }}" pos="{{ function['tokenPos'] }}" endpos="{{ function['endTokenPos'] }}">
- </script-inset>
-
- <br>
</template>
</polymer-element>
-
-
-
-
-<polymer-element name="heap-map" extends="observatory-element">
-<template>
- <style>
+<polymer-element name="flag-list" extends="observatory-element">
+ <template>
+ <style>
/* Global styles */
* {
margin: 0;
@@ -4811,7 +4762,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -4984,42 +4940,40 @@ 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.relativeHashLink('heapmap') }}" anchor="heap map" last="{{ true }}"></nav-menu>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- </nav-bar>
- <div class="hover">
- <p style="text-align:center">{{ status }}</p>
- </div>
- <div class="spacer">
- <!-- Make sure no data is covered by hover bar initially -->
- </div>
- <div class="flex-row">
- <canvas id="fragmentation" width="1px" height="1px"></canvas>
- </div>
-</template>
+ <nav-bar>
+ <top-nav-menu></top-nav-menu>
+ <nav-menu link="{{ flagList.isolate.relativeHashLink('flags') }}" anchor="flags" last="{{ true }}"></nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </nav-bar>
+
+ <div class="content-centered">
+ <template if="{{ flagList['modifiedFlags'].isNotEmpty }}">
+ <h1>Modified Flags</h1>
+ <br>
+ <template repeat="{{ flag in flagList['modifiedFlags'] }}">
+ <flag-item flag="{{ flag }}"></flag-item>
+ <br>
+ </template>
+ <hr>
+ </template>
+
+ <h1>Unmodified Flags</h1>
+ <br>
+ <template if="{{ flagList['unmodifiedFlags'].isEmpty }}">
+ <em>None</em>
+ </template>
+ <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}">
+ <template repeat="{{ flag in flagList['unmodifiedFlags'] }}">
+ <flag-item flag="{{ flag }}"></flag-item>
+ <br>
+ </template>
+ </template>
+ </div>
+ </template>
</polymer-element>
-
-
-
-<polymer-element name="io-view" extends="observatory-element">
+<polymer-element name="flag-item" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -5079,7 +5033,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -5252,62 +5211,73 @@ hr {
word-wrap: break-word;
}
</style>
+ <span style="color:#aaa">// {{ flag['comment'] }}</span>
+ <div style="padding: 3px 0">
+ <b>{{ flag['name'] }}</b>
+ &nbsp;=&nbsp;
+ {{ flag['valueAsString'] }}
+ </div>
+ </template>
+</polymer-element>
- <nav-bar>
- <top-nav-menu last="{{ true }}"></top-nav-menu>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- </nav-bar>
-
- <div class="content">
- <h1>dart:io</h1>
-
- <br>
-
- <ul class="list-group">
- <li class="list-group-item">
- <a href="{{io.isolate.relativeHashLink('io/http/servers')}}">HTTP Servers</a>
- </li>
- </ul>
-
- <br>
-
- <ul class="list-group">
- <li class="list-group-item">
- <a href="{{io.isolate.relativeHashLink('io/sockets')}}">Sockets</a>
- </li>
- </ul>
-
- <br>
-
- <ul class="list-group">
- <li class="list-group-item">
- <a href="{{io.isolate.relativeHashLink('io/websockets')}}">WebSockets</a>
- </li>
- </ul>
-
- <br>
-
- <ul class="list-group">
- <li class="list-group-item">
- <a href="{{io.isolate.relativeHashLink('io/file/randomaccessfiles')}}">Random Access Files</a>
- </li>
- </ul>
- <br>
- <ul class="list-group">
- <li class="list-group-item">
- <a href="{{io.isolate.relativeHashLink('io/processes')}}">Processess</a>
- </li>
- </ul>
+
+
+
+
+
+
+
+
+
+<polymer-element name="script-inset" extends="observatory-element">
+ <template>
+ <style>
+ .sourceInset {
+ padding-left: 15%;
+ padding-right: 15%;
+ }
+ .grayBox {
+ width: 100%;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ padding: 10px;
+ }
+ </style>
+ <div class="sourceInset">
+ <content></content>
+ <div class="grayBox">
+ <template if="{{ coverage == true }}">
+ <table>
+ <tbody>
+ <tr template="" repeat="{{ line in lines }}">
+ <td style="{{ hitStyle(line) }}"><span> </span></td>
+ <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
+ <td>&nbsp;</td>
+ <td width="99%" style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: pre;">{{line.text}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </template>
+ <template if="{{ coverage == false }}">
+ <table>
+ <tbody>
+ <tr template="" repeat="{{ line in lines }}">
+ <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
+ <td>&nbsp;</td>
+ <td width="99%" style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: pre;">{{line.text}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </template>
+ </div>
</div>
- <br>
- <hr>
</template>
+
</polymer-element>
-
-<polymer-element name="io-http-server-list-view" extends="observatory-element">
+<polymer-element name="function-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -5367,7 +5337,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -5540,33 +5515,118 @@ 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['owner'].serviceType == 'Class' }}">
+ <!-- TODO(turnidge): Add library nav menu here. -->
+ <class-nav-menu cls="{{ function['owner'] }}"></class-nav-menu>
+ </template>
+ <template if="{{ function['owner'].serviceType == 'Library' }}">
+ <library-nav-menu library="{{ function['owner'] }}"></library-nav-menu>
+ </template>
+ <nav-menu link="{{ function.hashLink }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<div class="content">
- <h1>HttpServers</h1>
+ <h1>function {{ qualifiedName }}</h1>
- <br>
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">kind</div>
+ <div class="memberValue">
+ <template if="{{ function['is_static'] }}">static</template>
+ <template if="{{ function['is_const'] }}">const</template>
+ {{ kind }}
+ </div>
+ </div>
+ <template if="{{ function['parent'] != null }}">
+ <div class="memberItem">
+ <div class="memberName">parent function</div>
+ <div class="memberValue">
+ <function-ref ref="{{ function['parent'] }}"></function-ref>
+ </div>
+ </div>
+ </template>
+ <div class="memberItem">
+ <div class="memberName">owner</div>
+ <div class="memberValue">
+ <template if="{{ function['owner'].serviceType == 'Class' }}">
+ <class-ref ref="{{ function['owner'] }}"></class-ref>
+ </template>
+ <template if="{{ function['owner'].serviceType != 'Class' }}">
+ <library-ref ref="{{ function['owner'] }}"></library-ref>
+ </template>
+ </div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">script</div>
+ <div class="memberValue">
+ <script-ref ref="{{ function['script'] }}" pos="{{ function['tokenPos'] }}">
+ </script-ref>
+ </div>
+ </div>
- <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="memberItem">&nbsp;</div>
+
+ <template if="{{ function['code'] != null }}">
+ <div class="memberItem">
+ <div class="memberName">optimized code</div>
+ <div class="memberValue">
+ <code-ref ref="{{ function['code'] }}"></code-ref>
+ </div>
+ </div>
</template>
- </ul>
+ <template if="{{ function['unoptimized_code'] != null }}">
+ <div class="memberItem">
+ <div class="memberName">unoptimized code</div>
+ <div class="memberValue">
+ <code-ref ref="{{ function['unoptimized_code'] }}"></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['usage_counter'] }})
+ </span>
+ </div>
+ </div>
+ </template>
+ <div class="memberItem">
+ <div class="memberName">deoptimizations</div>
+ <div class="memberValue">{{ function['deoptimizations'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">optimizable</div>
+ <div class="memberValue">{{ function['is_optimizable'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">inlinable</div>
+ <div class="memberValue">{{ function['is_inlinable'] }}</div>
+ </div>
+ <template if="{{ function.name != function.vmName }}">
+ <div class="memberItem">
+ <div class="memberName">vm name</div>
+ <div class="memberValue">{{ function.vmName }}</div>
+ </div>
+ </template>
+ </div>
</div>
- <br>
+
<hr>
+ <script-inset script="{{ function['script'] }}" pos="{{ function['tokenPos'] }}" endpos="{{ function['endTokenPos'] }}">
+ </script-inset>
+
+ <br>
</template>
+
</polymer-element>
-<polymer-element name="io-http-server-ref" extends="service-ref">
- <template>
- <style>
+
+
+
+<polymer-element name="heap-map" extends="observatory-element">
+<template>
+ <style>
/* Global styles */
* {
margin: 0;
@@ -5624,7 +5684,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -5797,11 +5862,42 @@ hr {
word-wrap: break-word;
}
</style>
- <a href="{{ url }}">{{ name }}</a>
- </template>
-</polymer-element>
-
-<polymer-element name="io-http-server-view" extends="observatory-element">
+ <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.relativeHashLink('heapmap') }}" anchor="heap map" last="{{ true }}"></nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </nav-bar>
+ <div class="hover">
+ <p style="text-align:center">{{ status }}</p>
+ </div>
+ <div class="spacer">
+ <!-- Make sure no data is covered by hover bar initially -->
+ </div>
+ <div class="flex-row">
+ <canvas id="fragmentation" width="1px" height="1px"></canvas>
+ </div>
+</template>
+
+</polymer-element>
+
+
+
+
+<polymer-element name="io-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -5861,7 +5957,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -6041,39 +6142,55 @@ hr {
</nav-bar>
<div class="content">
- <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>
- <div class="memberValue">{{ httpServer['active'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Idle connections</div>
- <div class="memberValue">{{ httpServer['idle'] }}</div>
- </div>
- </div>
+ <ul class="list-group">
+ <li class="list-group-item">
+ <a href="{{io.isolate.relativeHashLink('io/http/servers')}}">HTTP Servers</a>
+ </li>
+ </ul>
+
+ <br>
+
+ <ul class="list-group">
+ <li class="list-group-item">
+ <a href="{{io.isolate.relativeHashLink('io/sockets')}}">Sockets</a>
+ </li>
+ </ul>
+
+ <br>
+
+ <ul class="list-group">
+ <li class="list-group-item">
+ <a href="{{io.isolate.relativeHashLink('io/websockets')}}">WebSockets</a>
+ </li>
+ </ul>
+
+ <br>
+
+ <ul class="list-group">
+ <li class="list-group-item">
+ <a href="{{io.isolate.relativeHashLink('io/file/randomaccessfiles')}}">Random Access Files</a>
+ </li>
+ </ul>
+
+ <br>
+
+ <ul class="list-group">
+ <li class="list-group-item">
+ <a href="{{io.isolate.relativeHashLink('io/processes')}}">Processess</a>
+ </li>
+ </ul>
+
</div>
<br>
<hr>
</template>
</polymer-element>
-<polymer-element name="io-socket-ref" extends="service-ref">
+<polymer-element name="io-ref" extends="service-ref">
<template>
<style>
/* Global styles */
@@ -6133,7 +6250,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -6306,11 +6428,19 @@ hr {
word-wrap: break-word;
}
</style>
- <a href="{{ url }}">{{ name }}</a>
+ <template if="{{ ref.serviceType == 'Socket' }}">
+ <io-socket-ref ref="{{ ref }}"></io-socket-ref>
+ </template>
+ <template if="{{ ref.serviceType == 'HttpServer' }}">
+ <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
+ </template>
+ <template if="{{ ref.serviceType == 'WebSocket' }}">
+ <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>
+ </template>
</template>
</polymer-element>
-<polymer-element name="io-socket-list-view" extends="observatory-element">
+<polymer-element name="io-http-server-list-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -6370,7 +6500,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -6550,14 +6685,14 @@ hr {
</nav-bar>
<div class="content">
- <h1>Sockets</h1>
+ <h1>HttpServers</h1>
<br>
<ul class="list-group">
- <template repeat="{{ socket in list['members'] }}">
+ <template repeat="{{ httpServer in list['members'] }}">
<li class="list-group-item">
- <io-socket-ref ref="{{ socket }}"></io-socket-ref>
+ <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
</li>
</template>
</ul>
@@ -6567,7 +6702,7 @@ hr {
</template>
</polymer-element>
-<polymer-element name="io-socket-view" extends="observatory-element">
+<polymer-element name="io-http-server-ref" extends="service-ref">
<template>
<style>
/* Global styles */
@@ -6627,7 +6762,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -6800,38 +6940,11 @@ 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>Socket</h1>
-
- <br>
-
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">Address</div>
- <div class="memberValue">{{ socket['address'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Port</div>
- <div class="memberValue">{{ socket['port'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">File descriptor</div>
- <div class="memberValue">{{ socket['fd'] }}</div>
- </div>
- </div>
- </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-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -6891,7 +7004,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -7064,11 +7182,46 @@ hr {
word-wrap: break-word;
}
</style>
- <a 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>HttpServer</h1>
+
+ <br>
+
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">Socket</div>
+ <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] }}"></io-socket-ref></div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Address</div>
+ <div class="memberValue">{{ httpServer['address'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Port</div>
+ <div class="memberValue">{{ httpServer['port'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Active connections</div>
+ <div class="memberValue">{{ httpServer['active'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Idle connections</div>
+ <div class="memberValue">{{ httpServer['idle'] }}</div>
+ </div>
+ </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">
<template>
<style>
/* Global styles */
@@ -7128,7 +7281,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -7301,31 +7459,11 @@ 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 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">
<template>
<style>
/* Global styles */
@@ -7385,7 +7523,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -7565,23 +7708,24 @@ hr {
</nav-bar>
<div class="content">
- <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>
- </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">
<template>
<style>
/* Global styles */
@@ -7641,7 +7785,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -7814,15 +7963,48 @@ hr {
word-wrap: break-word;
}
</style>
- <a href="{{ url }}">{{ name }}</a>
- </template>
-</polymer-element>
-<polymer-element name="io-random-access-file-list-view" extends="observatory-element">
- <template>
- <style>
-/* Global styles */
-* {
+ <nav-bar>
+ <top-nav-menu last="{{ true }}"></top-nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </nav-bar>
+
+ <div class="content">
+ <h1>Socket</h1>
+
+ <br>
+
+ <div class="memberList">
+ <template if="{{ socket['owner'] != null }}">
+ <div class="memberItem">
+ <div class="memberName">Owner</div>
+ <div class="memberValue"><io-ref ref="{{ socket['owner'] }}"></io-ref></div>
+ </div>
+ </template>
+ <div class="memberItem">
+ <div class="memberName">Address</div>
+ <div class="memberValue">{{ socket['address'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Port</div>
+ <div class="memberValue">{{ socket['port'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">File descriptor</div>
+ <div class="memberValue">{{ socket['fd'] }}</div>
+ </div>
+ </div>
+ </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;
@@ -7878,7 +8060,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -8051,31 +8238,11 @@ 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 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">
<template>
<style>
/* Global styles */
@@ -8135,7 +8302,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -8315,31 +8487,24 @@ hr {
</nav-bar>
<div class="content">
- <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>
- </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">
<template>
<style>
/* Global styles */
@@ -8399,7 +8564,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -8579,24 +8749,23 @@ hr {
</nav-bar>
<div class="content">
- <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>
</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">
<template>
<style>
/* Global styles */
@@ -8656,7 +8825,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -8829,16 +9003,11 @@ hr {
word-wrap: break-word;
}
</style>
- <template if="{{ small }}">
- <a href="{{ url }}">{{ name }}</a>
- </template>
- <template if="{{ !small }}">
- <a href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
- </template>
+ <a 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">
<template>
<style>
/* Global styles */
@@ -8898,7 +9067,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -9078,55 +9252,26 @@ hr {
</nav-bar>
<div class="content">
- <h1>Process</h1>
-
- <br>
-
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">Path</div>
- <div class="memberValue">{{ process['name'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Pid</div>
- <div class="memberValue">{{ process['pid'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Arguments</div>
- <div class="memberValue">{{ process['arguments'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Started</div>
- <div class="memberValue">{{ process['started'] }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Working Directory</div>
- <div class="memberValue">{{ process['workingDirectory'] }}</div>
- </div>
- </div>
+ <h1>Random Access Files</h1>
<br>
- <h2>Environment</h2>
- <div class="well">
- <div class="monospace break-wrap">
- <template repeat="{{ variable in process['environment'] }}">
- {{ variable }}
- <br>
- </template>
- </div>
- </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>
+ </ul>
</div>
<br>
<hr>
</template>
</polymer-element>
-
-
-
-<polymer-element name="isolate-ref" extends="service-ref">
-<template><style>
+<polymer-element name="io-random-access-file-view" extends="observatory-element">
+ <template>
+ <style>
/* Global styles */
* {
margin: 0;
@@ -9184,7 +9329,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -9357,18 +9507,38 @@ hr {
word-wrap: break-word;
}
</style>
- <a href="{{ url }}">{{ ref.name }}</a>
-</template>
+ <nav-bar>
+ <top-nav-menu last="{{ true }}"></top-nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </nav-bar>
+
+ <div class="content">
+ <h1>Random Access File</h1>
+
+ <br>
+
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">Path</div>
+ <div class="memberValue">{{ file['name'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Pending Operation</div>
+ <div class="memberValue">{{ file['asyncDispatched'] }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">File Descriptor</div>
+ <div class="memberValue">{{ file['fd'] }}</div>
+ </div>
+ </div>
+ </div>
+ <br>
+ <hr>
+ </template>
</polymer-element>
-
-
-
-
-
-
-<polymer-element name="isolate-summary" extends="observatory-element">
+<polymer-element name="io-process-list-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -9428,7 +9598,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -9601,105 +9776,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-20-percent">
- <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
- </div>
- <div class="flex-item-50-percent">
- <isolate-location isolate="{{ isolate }}"></isolate-location>
- </div>
- <div class="flex-item-10-percent">
- </div>
- </div>
- <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>
+ <nav-bar>
+ <top-nav-menu last="{{ true }}"></top-nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </nav-bar>
- <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
+ <div class="content">
+ <h1>Processes</h1>
- </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>
- </template>
-
- <template if="{{ isolate.running }}">
- <strong>running</strong>
- <action-link callback="{{ pause }}" label="pause"></action-link>
- </template>
-
- <template if="{{ isolate.idle }}">
- <strong>idle</strong>
- </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' }}">
- 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.pauseEvent['eventType'] == 'BreakpointReached' }}">
- at breakpoint {{ isolate.pauseEvent['breakpoint']['id'] }}
- <function-ref ref="{{ isolate.topFrame['function'] }}">
- </function-ref>
- (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
- </template>
- </template>
-
- <template if="{{ isolate.running }}">
- at
- <function-ref ref="{{ isolate.topFrame['function'] }}">
- </function-ref>
- (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
- </template>
+ <br>
+ <ul class="list-group">
+ <template repeat="{{ process in list['members'] }}">
+ <li class="list-group-item">
+ <io-process-ref ref="{{ process }}"></io-process-ref>
+ </li>
+ </template>
+ </ul>
+ </div>
+ <br>
+ <hr>
</template>
</polymer-element>
-<polymer-element name="isolate-shared-summary" extends="observatory-element">
+<polymer-element name="io-process-ref" extends="service-ref">
<template>
<style>
- .errorBox {
- background-color: #f5f5f5;
- border: 1px solid #ccc;
- padding: 10px;
- font-family: consolas, courier, monospace;
- font-size: 1em;
- line-height: 1.2em;
- white-space: pre;
- }
- </style>
- <style>
/* Global styles */
* {
margin: 0;
@@ -9757,7 +9860,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -9930,91 +10038,16 @@ 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 href="{{ url }}">{{ name }}</a>
+ </template>
+ <template if="{{ !small }}">
+ <a 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.newHeapUsed | formatSize }}
- of
- {{ isolate.newHeapCapacity | formatSize }}
- </div>
- </div>
- <div class="memberItem">
- <div class="memberName">old heap</div>
- <div class="memberValue">
- {{ isolate.oldHeapUsed | formatSize }}
- of
- {{ isolate.oldHeapCapacity | formatSize }}
- </div>
- </div>
- </div>
- <br>
- <div class="memberItem">
- <div class="memberValue">
- See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack trace</a>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberValue">
- See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile</a>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberValue">
- See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">allocation profile</a>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberValue">
- See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a>
- </div>
- </div>
- <template if="{{ isolate.ioEnabled }}">
- <div class="memberItem">
- <div class="memberValue">
- See <a href="{{ isolate.relativeHashLink('io') }}">dart:io</a>
- </div>
- </div>
- </template>
- </div>
- <div class="flex-item-10-percent">
- </div>
- </div>
- </template>
-</polymer-element>
-
-<polymer-element name="isolate-counter-chart" extends="observatory-element">
- <template>
- <div id="counterPieChart" style="height: 200px"></div>
</template>
</polymer-element>
-
-
-
-
-
-
-
-
-
-
-
-
-<polymer-element name="isolate-view" extends="observatory-element">
+<polymer-element name="io-process-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -10074,7 +10107,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -10247,144 +10285,62 @@ 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>
+ <top-nav-menu last="{{ true }}"></top-nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</nav-bar>
<div class="content">
- <h1>isolate '{{ isolate.name }}'</h1>
- </div>
+ <h1>Process</h1>
- <br>
- <div class="flex-row">
- <div class="flex-item-10-percent">
- </div>
- <div class="flex-item-20-percent">
- <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
- </div>
- <div class="flex-item-60-percent">
- <isolate-location isolate="{{ isolate }}"></isolate-location>
- </div>
- <div class="flex-item-10-percent">
+ <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>
</div>
- </div>
- <br>
- <template if="{{ isolate.topFrame != null }}">
<br>
- <script-inset script="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}">
- </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>
+ <h2>Environment</h2>
+ <div class="well">
+ <div class="monospace break-wrap">
+ <template repeat="{{ variable in process['environment'] }}">
+ {{ variable }}
+ <br>
+ </template>
+ </div>
+ </div>
</div>
-
<br>
+ <hr>
+ </template>
+</polymer-element>
- <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
- <div class="flex-row">
- <div class="flex-item-20-percent"></div>
- <div class="flex-item-60-percent"><hr></div>
- <div class="flex-item-20-percent"></div>
- </div>
- <div class="content-centered">
- <div class="flex-row">
- <div class="flex-item-50-percent">
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">root library</div>
- <div class="memberValue">
- <library-ref ref="{{ isolate.rootLib }}"></library-ref>
- </div>
- </div>
- <div class="memberItem">
- <template if="{{ isolate.entry != null }}">
- <div class="memberName">entry</div>
- <div class="memberValue">
- <function-ref ref="{{ isolate.entry }}"></function-ref>
- </div>
- </template>
- </div>
- <div class="memberItem">
- <div class="memberName">isolate id</div>
- <div class="memberValue">{{ isolate.mainPort }}</div>
- </div>
- </div>
- </div>
- <div class="flex-item-50-percent">
- <div class="memberItem">
- <div class="memberValue">
- See <a href="{{ isolate.relativeHashLink('debug/breakpoints') }}">breakpoints</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <hr>
-
- <div class="content">
- libraries ({{ isolate.libraries.length }})
- <curly-block expand="{{ isolate.libraries.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ lib in isolate.libraries }}">
- <div class="memberItem">
- <div class="memberName">
- <library-ref ref="{{ lib }}"></library-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block>
- </div>
-
- <hr>
-
- <div class="content">
- <div id="tagProfileChart" class="miniProfileChart" style="height: 600px"></div>
- </div>
-
- <hr>
-
- <div class="content">
- <eval-box callback="{{ eval }}"></eval-box>
- </div>
- <br><br><br><br>
- <br><br><br><br>
- </template>
-
-</polymer-element>
-
-
-
-
-
-
-
-
-
-<polymer-element name="instance-view" extends="observatory-element">
- <template>
- <style>
+<polymer-element name="isolate-ref" extends="service-ref">
+<template><style>
/* Global styles */
* {
margin: 0;
@@ -10442,7 +10398,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -10615,182 +10576,9 @@ hr {
word-wrap: break-word;
}
</style>
- <nav-bar>
- <top-nav-menu></top-nav-menu>
- <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
- <!-- TODO(turnidge): Add library nav menu here. -->
- <class-nav-menu cls="{{ instance['class'] }}"></class-nav-menu>
- <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- </nav-bar>
-
- <template if="{{ instance['error'] != null }}">
- <error-view error_obj="{{ instance['error'] }}"></error-view>
- </template>
-
- <template if="{{ instance['error'] == null }}">
- <div class="content">
- <!-- TODO(turnidge): Handle null instances. -->
- <template if="{{ isType(instance.serviceType) }}">
- <h1>type {{ instance['user_name'] }}</h1>
- </template>
- <template if="{{ !isType(instance.serviceType) }}">
- <h1>instance of {{ instance['class']['user_name'] }}</h1>
- </template>
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">class</div>
- <div class="memberValue">
- <class-ref ref="{{ instance['class'] }}">
- </class-ref>
- </div>
- </div>
- <template if="{{ instance['valueAsString'] != null }}">
- <div class="memberItem">
- <div class="memberName">value</div>
- <div class="memberValue">{{ instance['valueAsString'] }}</div>
- </div>
- </template>
- <div class="memberItem">
- <div class="memberName">size</div>
- <div class="memberValue">{{ instance['size'] | formatSize }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">retained size</div>
- <div class="memberValue">
- <eval-link callback="{{ retainedSize }}" label="[calculate]">
- </eval-link>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberName">retaining path</div>
- <div class="memberValue">
- <template if="{{ path == null }}">
- <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
- </eval-link>
- </template>
- <template if="{{ path != null }}">
- <template repeat="{{ element in path['elements'] }}">
- <div class="memberItem">
- <div class="memberName">[{{ element['index']}}]</div>
- <div class="memberValue">
- <instance-ref ref="{{ element['value'] }}"></instance-ref>
- </div>
- </div>
- </template>
- <template if="{{ path['length'] > path['elements'].length }}">
- showing {{ path['elements'].length }} of {{ path['length'] }}
- <eval-link callback="{{ retainingPath }}" label="[find more]" expr="{{ path['elements'].length * 2 }}">
- </eval-link>
- </template>
- </template>
- </div>
- </div>
- <template if="{{ instance['type_class'] != null }}">
- <div class="memberItem">
- <div class="memberName">type class</div>
- <div class="memberValue">
- <class-ref ref="{{ instance['type_class'] }}">
- </class-ref>
- </div>
- </div>
- </template>
- <template if="{{ instance['closureFunc'] != null }}">
- <div class="memberItem">
- <div class="memberName">closure function</div>
- <div class="memberValue">
- <function-ref ref="{{ instance['closureFunc'] }}">
- </function-ref>
- </div>
- </div>
- </template>
-
- <div class="memberItem">&nbsp;</div>
-
- <div class="memberItem">
- <div class="memberName">toString()</div>
- <div class="memberValue">
- <eval-link callback="{{ eval }}" expr="toString()"></eval-link>
- </div>
- </div>
- </div>
- </div>
-
- <hr>
-
- <div class="content">
- <template if="{{ instance['fields'].isNotEmpty }}">
- fields ({{ instance['fields'].length }})
- <curly-block expand="{{ instance['fields'].length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ field in instance['fields'] }}">
- <div class="memberItem">
- <div class="memberName">
- <field-ref ref="{{ field['decl'] }}"></field-ref>
- </div>
- <div class="memberValue">
- <instance-ref ref="{{ field['value'] }}"></instance-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br><br>
- </template>
-
- <template if="{{ instance['nativeFields'].isNotEmpty }}">
- native fields ({{ instance['nativeFields'].length }})
- <curly-block expand="{{ instance['nativeFields'].length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ field in instance['nativeFields'] }}">
- <div class="memberItem">
- <div class="memberName">[{{ field['index']}}]</div>
- <div class="memberValue">[{{ field['value']}}]</div>
- </div>
- </template>
- </div>
- </curly-block><br><br>
- </template>
-
- <template if="{{ instance['elements'].isNotEmpty }}">
- elements ({{ instance['elements'].length }})
- <curly-block expand="{{ instance['elements'].length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ element in instance['elements'] }}">
- <div class="memberItem">
- <div class="memberName">[{{ element['index']}}]</div>
- <div class="memberValue">
- <instance-ref ref="{{ element['value'] }}">
- </instance-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br><br>
- </template>
- </div>
-
- <hr>
-
- <div class="content">
- <eval-box callback="{{ eval }}"></eval-box>
- </div>
- <br><br><br><br>
- <br><br><br><br>
-
- </template>
- </template>
-
-</polymer-element>
-
+ <a href="{{ url }}">{{ ref.name }}</a>
+</template>
-<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>
@@ -10799,11 +10587,7 @@ hr {
-
-
-
-
-<polymer-element name="library-view" extends="observatory-element">
+<polymer-element name="isolate-summary" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -10863,7 +10647,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -11036,161 +10825,105 @@ hr {
word-wrap: break-word;
}
</style>
-
- <nav-bar>
- <top-nav-menu></top-nav-menu>
- <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
- <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav-menu>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- </nav-bar>
-
- <div class="content">
- <h1>
- <!-- TODO(turnidge): Handle unnamed libraries -->
- library {{ library.name }}
- </h1>
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">url</div>
- <div class="memberValue">{{ library.url }}</div>
- </div>
- <template if="{{ library.name != library.vmName }}">
- <div class="memberItem">
- <div class="memberName">vm name</div>
- <div class="memberValue">{{ library.vmName }}</div>
- </div>
- </template>
+ <div 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-20-percent">
+ <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
+ </div>
+ <div class="flex-item-50-percent">
+ <isolate-location isolate="{{ isolate }}"></isolate-location>
+ </div>
+ <div class="flex-item-10-percent">
</div>
</div>
- <hr>
-
- <div class="content">
- <template if="{{ library.imports.isNotEmpty }}">
- imports ({{ library.imports.length }})
- <curly-block expand="{{ library.imports.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ imp in library.imports }}">
- <div class="memberItem">
- <div class="memberValue">
- <library-ref ref="{{ imp }}"></library-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br>
- <br>
- </template>
+ <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="{{ library.scripts.isNotEmpty }}">
- scripts ({{ library.scripts.length }})
- <curly-block expand="{{ library.scripts.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ script in library.scripts }}">
- <div class="memberItem">
- <div class="memberValue">
- <script-ref ref="{{ script }}"></script-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br>
- <br>
- </template>
+ <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
- <template if="{{ library.classes.isNotEmpty }}">
- classes ({{ library.classes.length }})
- <curly-block expand="{{ library.classes.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ cls in library.classes }}">
- <div class="memberItem">
- <div class="memberValue">
- <class-ref ref="{{ cls }}"></class-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br>
- <br>
- </template>
+ </template>
+</polymer-element>
- <template if="{{ library.variables.isNotEmpty }}">
- variables ({{ library.variables.length }})
- <curly-block expand="{{ library.variables.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ field in library.variables }}">
- <div class="memberItem">
- <div class="memberName">
- <field-ref ref="{{ field }}"></field-ref>
- </div>
- <div class="memberValue">
- <template if="{{ field['value'] != null }}">
- <instance-ref ref="{{ field['value'] }}"></instance-ref>
- </template>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br>
- <br>
- </template>
+<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>
+ </template>
- <template if="{{ library.functions.isNotEmpty }}">
- functions ({{ library.functions.length }})
- <curly-block expand="{{ library.functions.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ function in library.functions }}">
- <div class="memberItem">
- <div class="memberValue">
- <function-ref ref="{{ function }}"></function-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br>
- <br>
- </template>
- </div>
+ <template if="{{ isolate.running }}">
+ <strong>running</strong>
+ <action-link callback="{{ pause }}" label="pause"></action-link>
+ </template>
- <hr>
+ <template if="{{ isolate.idle }}">
+ <strong>idle</strong>
+ </template>
- <div class="content">
- <eval-box callback="{{ eval }}"></eval-box>
- </div>
- <br><br><br><br>
- <br><br><br><br>
+ <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' }}">
+ 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.pauseEvent['eventType'] == 'BreakpointReached' }}">
+ at breakpoint {{ isolate.pauseEvent['breakpoint']['id'] }}
+ <function-ref ref="{{ isolate.topFrame['function'] }}">
+ </function-ref>
+ (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
+ </template>
+ </template>
-
-
+ <template if="{{ isolate.running }}">
+ at
+ <function-ref ref="{{ isolate.topFrame['function'] }}">
+ </function-ref>
+ (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
+ </template>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ </template>
+</polymer-element>
-
-
-
-<polymer-element name="heap-profile" extends="observatory-element">
-<template>
- <style>
+<polymer-element name="isolate-shared-summary" extends="observatory-element">
+ <template>
+ <style>
+ .errorBox {
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ padding: 10px;
+ font-family: consolas, courier, monospace;
+ font-size: 1em;
+ line-height: 1.2em;
+ white-space: pre;
+ }
+ </style>
+ <style>
/* Global styles */
* {
margin: 0;
@@ -11248,7 +10981,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -11421,209 +11159,91 @@ hr {
word-wrap: break-word;
}
</style>
- <style>
- .table {
- border-collapse: collapse!important;
- width: 100%;
- 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;
- }
- .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.relativeHashLink('allocationprofile') }}" anchor="heap 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-bar>
-
- <div class="flex-row">
- <div id="newPieChart" class="flex-item-fixed-4-12" style="height: 400px">
- </div>
- <div id="newStatus" class="flex-item-fixed-2-12">
- <div class="memberList">
+ <template if="{{ isolate.error != null }}">
+ <div class="content-centered">
+ <pre class="errorBox">{{ isolate.error.message }}</pre>
+ <br>
+ </div>
+ </template>
+ <div class="flex-row">
+ <div class="flex-item-10-percent">
+ </div>
+ <div class="flex-item-40-percent">
+ <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart>
+ </div>
+ <div class="flex-item-40-percent">
+ <div class="memberList">
<div class="memberItem">
- <div class="memberName">Collections</div>
- <div class="memberValue">{{ formattedCollections(true) }}</div>
+ <div class="memberName">new heap</div>
+ <div class="memberValue">
+ {{ isolate.newHeapUsed | formatSize }}
+ of
+ {{ isolate.newHeapCapacity | formatSize }}
+ </div>
</div>
<div class="memberItem">
- <div class="memberName">Average Collection Time</div>
- <div class="memberValue">{{ formattedAverage(true) }}</div>
+ <div class="memberName">old heap</div>
+ <div class="memberValue">
+ {{ isolate.oldHeapUsed | formatSize }}
+ of
+ {{ isolate.oldHeapCapacity | formatSize }}
+ </div>
</div>
- <div class="memberItem">
- <div class="memberName">Cumulative Collection Time</div>
- <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</div>
+ </div>
+ <br>
+ <div class="memberItem">
+ <div class="memberValue">
+ See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack trace</a>
</div>
- </div>
- </div>
- <div id="oldPieChart" class="flex-item-fixed-4-12" style="height: 400px">
- </div>
- <div id="oldStatus" class="flex-item-fixed-2-12">
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">Collections</div>
- <div class="memberValue">{{ formattedCollections(false) }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberValue">
+ See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile</a>
</div>
- <div class="memberItem">
- <div class="memberName">Average Collection Time</div>
- <div class="memberValue">{{ formattedAverage(false) }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberValue">
+ See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">allocation profile</a>
</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberValue">
+ See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a>
+ </div>
+ </div>
+ <template if="{{ isolate.ioEnabled }}">
<div class="memberItem">
- <div class="memberName">Cumulative Collection Time</div>
- <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</div>
+ <div class="memberValue">
+ See <a href="{{ isolate.relativeHashLink('io') }}">dart:io</a>
+ </div>
</div>
+ </template>
+ </div>
+ <div class="flex-item-10-percent">
</div>
</div>
- </div>
- <div class="flex-row">
- <table id="classtable" class="flex-item-fixed-12-12 table">
- <thead>
- <tr>
- <th on-click="{{changeSort}}" class="clickable" title="Class">{{ classTable.getColumnLabel(0) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(1) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(2) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="New Current Size">{{ classTable.getColumnLabel(3) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="New Current Instances">{{ classTable.getColumnLabel(4) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(5) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(6) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="Old Current Size">{{ classTable.getColumnLabel(7) }}</th>
- <th on-click="{{changeSort}}" class="clickable" title="Old Current Instances">{{ classTable.getColumnLabel(8) }}</th>
- </tr>
- </thead>
- <tbody>
- <tr template="" repeat="{{row in classTable.sortedRows }}">
- <td><class-ref ref="{{ classTable.getValue(row, 0) }}"></class-ref></td>
- <td title="{{ classTable.getValue(row, 1) }}">{{ classTable.getFormattedValue(row, 1) }}</td>
- <td title="{{ classTable.getValue(row, 2) }}">{{ classTable.getFormattedValue(row, 2) }}</td>
- <td title="{{ classTable.getValue(row, 3) }}">{{ classTable.getFormattedValue(row, 3) }}</td>
- <td title="{{ classTable.getValue(row, 4) }}">{{ classTable.getFormattedValue(row, 4) }}</td>
- <td title="{{ classTable.getValue(row, 5) }}">{{ classTable.getFormattedValue(row, 5) }}</td>
- <td title="{{ classTable.getValue(row, 6) }}">{{ classTable.getFormattedValue(row, 6) }}</td>
- <td title="{{ classTable.getValue(row, 7) }}">{{ classTable.getFormattedValue(row, 7) }}</td>
- <td title="{{ classTable.getValue(row, 8) }}">{{ classTable.getFormattedValue(row, 8) }}</td>
- </tr>
- </tbody>
- </table>
- </div>
-</template>
+ </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="sliding-checkbox">
- <template>
- <style>
- .switch {
- position: relative;
- width: 121px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- }
- .hide {
- display: none;
- }
- .label {
- display: block;
- overflow: hidden;
- cursor: pointer;
- border: 2px solid #999999;
- border-radius: 15px;
- }
- .content {
- width: 200%;
- margin-left: -100%;
- -moz-transition: margin 0.3s ease-in 0s;
- -webkit-transition: margin 0.3s ease-in 0s;
- -o-transition: margin 0.3s ease-in 0s;
- transition: margin 0.3s ease-in 0s;
- }
- .content:before, .content:after {
- float: left;
- width: 50%;
- height: 30px;
- padding: 0;
- line-height: 30px;
- color: white;
- font: 400 14px 'Montserrat', sans-serif;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
- .content:before {
- content: {{ checkedText }};
- padding-left: 10px;
- background-color: #0489C3;
- }
- .content:after {
- content: {{ uncheckedText }};
- padding-right: 10px;
- background-color: #EEEEEE;
- color: #999999;
- text-align: right;
- }
- .dot {
- width: 14px;
- margin: 8px;
- background: #FFFFFF;
- border: 2px solid #999999;
- border-radius: 15px;
- position: absolute;
- top: 0;
- bottom: 0;
- right: 87px;
- -moz-transition: all 0.3s ease-in 0s;
- -webkit-transition: all 0.3s ease-in 0s;
- -o-transition: all 0.3s ease-in 0s;
- transition: all 0.3s ease-in 0s;
- }
- :checked + .label .content {
- margin-left: 0;
- }
- :checked + .label .dot {
- right: 0px;
- }
- </style>
- <div class="switch">
- <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}">
- <label class="label" for="slide-switch">
- <div class="content"></div>
- <div class="dot"></div>
- </label>
- </div>
- </template>
-</polymer-element>
-<polymer-element name="isolate-profile" extends="observatory-element">
+
+
+
+
+<polymer-element name="isolate-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -11683,7 +11303,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -11856,191 +11481,1400 @@ 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="{{ profile.isolate }}"></isolate-nav-menu>
- <nav-menu link="{{ profile.isolate.relativeHashLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
+ <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
+ </isolate-nav-menu>
<nav-refresh callback="{{ refresh }}"></nav-refresh>
</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;
+ <div class="content">
+ <h1>isolate '{{ isolate.name }}'</h1>
+ </div>
+
+ <br>
+ <div class="flex-row">
+ <div class="flex-item-10-percent">
+ </div>
+ <div class="flex-item-20-percent">
+ <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
+ </div>
+ <div class="flex-item-60-percent">
+ <isolate-location isolate="{{ isolate }}"></isolate-location>
+ </div>
+ <div class="flex-item-10-percent">
+ </div>
+ </div>
+ <br>
+
+ <template if="{{ isolate.topFrame != null }}">
+ <br>
+ <script-inset script="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}">
+ </script-inset>
+ </template>
+
+ <div class="flex-row">
+ <div class="flex-item-20-percent"></div>
+ <div class="flex-item-60-percent"><hr></div>
+ <div class="flex-item-20-percent"></div>
+ </div>
+
+ <br>
+
+ <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
+
+ <div class="flex-row">
+ <div class="flex-item-20-percent"></div>
+ <div class="flex-item-60-percent"><hr></div>
+ <div class="flex-item-20-percent"></div>
+ </div>
+
+ <div class="content-centered">
+ <div class="flex-row">
+ <div class="flex-item-50-percent">
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">root library</div>
+ <div class="memberValue">
+ <library-ref ref="{{ isolate.rootLib }}"></library-ref>
+ </div>
+ </div>
+ <div class="memberItem">
+ <template if="{{ isolate.entry != null }}">
+ <div class="memberName">entry</div>
+ <div class="memberValue">
+ <function-ref ref="{{ isolate.entry }}"></function-ref>
+ </div>
+ </template>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">isolate id</div>
+ <div class="memberValue">{{ isolate.mainPort }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="flex-item-50-percent">
+ <div class="memberItem">
+ <div class="memberValue">
+ See <a href="{{ isolate.relativeHashLink('debug/breakpoints') }}">breakpoints</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ libraries ({{ isolate.libraries.length }})
+ <curly-block expand="{{ isolate.libraries.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ lib in isolate.libraries }}">
+ <div class="memberItem">
+ <div class="memberName">
+ <library-ref ref="{{ lib }}"></library-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <div id="tagProfileChart" class="miniProfileChart" style="height: 600px"></div>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <eval-box callback="{{ eval }}"></eval-box>
+ </div>
+ <br><br><br><br>
+ <br><br><br><br>
+ </template>
+
+</polymer-element>
+
+
+
+
+
+
+
+
+
+
+<polymer-element name="instance-view" extends="observatory-element">
+ <template>
+ <style>
+/* Global styles */
+* {
+ margin: 0;
+ padding: 0;
+ font: 400 14px 'Montserrat', sans-serif;
+ color: #333;
+ box-sizing: border-box;
+}
+
+.content {
+ padding-left: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+ padding-left: 10%;
+ padding-right: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+ font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+ display: table;
+}
+
+.memberItem {
+ display: table-row;
+}
+
+.memberName, .memberValue {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.monospace {
+ font-family: consolas, courier, monospace;
+ font-size: 1em;
+ line-height: 1.2em;
+ white-space: nowrap;
+}
+
+a {
+ color: #0489c3;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+em {
+ color: inherit;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
+}
+
+hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ height: 0;
+ box-sizing: content-box;
+}
+
+.list-group {
+ padding-left: 0;
+ margin-bottom: 20px;
+}
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: #fff;
+}
+
+.list-group-item:first-child {
+ /* rounded top corners */
+ border-top-right-radius:4px;
+ border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+ margin-bottom: 0;
+ /* rounded bottom corners */
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-item-fit {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+
+.flex-item-fill {
+ flex-grow: 0;
+ flex-shrink: 1; /* shrink when pressured */
+ flex-basis: 100%; /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 40%;
+}
+
+.flex-item-60-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 80%;
+}
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+ word-wrap: break-word;
+}
+</style>
+ <nav-bar>
+ <top-nav-menu></top-nav-menu>
+ <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
+ <!-- TODO(turnidge): Add library nav menu here. -->
+ <class-nav-menu cls="{{ instance['class'] }}"></class-nav-menu>
+ <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </nav-bar>
+
+ <template if="{{ instance['error'] != null }}">
+ <error-view error_obj="{{ instance['error'] }}"></error-view>
+ </template>
+
+ <template if="{{ instance['error'] == null }}">
+ <div class="content">
+ <!-- TODO(turnidge): Handle null instances. -->
+ <template if="{{ isType(instance.serviceType) }}">
+ <h1>type {{ instance['user_name'] }}</h1>
+ </template>
+ <template if="{{ !isType(instance.serviceType) }}">
+ <h1>instance of {{ instance['class']['user_name'] }}</h1>
+ </template>
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">class</div>
+ <div class="memberValue">
+ <class-ref ref="{{ instance['class'] }}">
+ </class-ref>
+ </div>
+ </div>
+ <template if="{{ instance['valueAsString'] != null }}">
+ <div class="memberItem">
+ <div class="memberName">value</div>
+ <div class="memberValue">{{ instance['valueAsString'] }}</div>
+ </div>
+ </template>
+ <div class="memberItem">
+ <div class="memberName">size</div>
+ <div class="memberValue">{{ instance['size'] | formatSize }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">retained size</div>
+ <div class="memberValue">
+ <eval-link callback="{{ retainedSize }}" label="[calculate]">
+ </eval-link>
+ </div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">retaining path</div>
+ <div class="memberValue">
+ <template if="{{ path == null }}">
+ <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
+ </eval-link>
+ </template>
+ <template if="{{ path != null }}">
+ <template repeat="{{ element in path['elements'] }}">
+ <div class="memberItem">
+ <div class="memberName">[{{ element['index']}}]</div>
+ <div class="memberValue">
+ <instance-ref ref="{{ element['value'] }}"></instance-ref>
+ </div>
+ </div>
+ </template>
+ <template if="{{ path['length'] > path['elements'].length }}">
+ showing {{ path['elements'].length }} of {{ path['length'] }}
+ <eval-link callback="{{ retainingPath }}" label="[find more]" expr="{{ path['elements'].length * 2 }}">
+ </eval-link>
+ </template>
+ </template>
+ </div>
+ </div>
+ <template if="{{ instance['type_class'] != null }}">
+ <div class="memberItem">
+ <div class="memberName">type class</div>
+ <div class="memberValue">
+ <class-ref ref="{{ instance['type_class'] }}">
+ </class-ref>
+ </div>
+ </div>
+ </template>
+ <template if="{{ instance['closureFunc'] != null }}">
+ <div class="memberItem">
+ <div class="memberName">closure function</div>
+ <div class="memberValue">
+ <function-ref ref="{{ instance['closureFunc'] }}">
+ </function-ref>
+ </div>
+ </div>
+ </template>
+
+ <div class="memberItem">&nbsp;</div>
+
+ <div class="memberItem">
+ <div class="memberName">toString()</div>
+ <div class="memberValue">
+ <eval-link callback="{{ eval }}" expr="toString()"></eval-link>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <template if="{{ instance['fields'].isNotEmpty }}">
+ fields ({{ instance['fields'].length }})
+ <curly-block expand="{{ instance['fields'].length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ field in instance['fields'] }}">
+ <div class="memberItem">
+ <div class="memberName">
+ <field-ref ref="{{ field['decl'] }}"></field-ref>
+ </div>
+ <div class="memberValue">
+ <instance-ref ref="{{ field['value'] }}"></instance-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br><br>
+ </template>
+
+ <template if="{{ instance['nativeFields'].isNotEmpty }}">
+ native fields ({{ instance['nativeFields'].length }})
+ <curly-block expand="{{ instance['nativeFields'].length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ field in instance['nativeFields'] }}">
+ <div class="memberItem">
+ <div class="memberName">[{{ field['index']}}]</div>
+ <div class="memberValue">[{{ field['value']}}]</div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br><br>
+ </template>
+
+ <template if="{{ instance['elements'].isNotEmpty }}">
+ elements ({{ instance['elements'].length }})
+ <curly-block expand="{{ instance['elements'].length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ element in instance['elements'] }}">
+ <div class="memberItem">
+ <div class="memberName">[{{ element['index']}}]</div>
+ <div class="memberValue">
+ <instance-ref ref="{{ element['value'] }}">
+ </instance-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br><br>
+ </template>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <eval-box callback="{{ eval }}"></eval-box>
+ </div>
+ <br><br><br><br>
+ <br><br><br><br>
+
+ </template>
+ </template>
+
+</polymer-element>
+
+
+<polymer-element name="json-view" extends="observatory-element">
+ <template>
+ <nav-bar>
+ <top-nav-menu last="{{ true }}"></top-nav-menu>
+ </nav-bar>
+ <pre>{{ mapAsString }}</pre>
+ </template>
+
+</polymer-element>
+
+
+
+
+
+
+
+
+
+
+
+<polymer-element name="library-view" extends="observatory-element">
+ <template>
+ <style>
+/* Global styles */
+* {
+ margin: 0;
+ padding: 0;
+ font: 400 14px 'Montserrat', sans-serif;
+ color: #333;
+ box-sizing: border-box;
+}
+
+.content {
+ padding-left: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+ padding-left: 10%;
+ padding-right: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+ font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+ display: table;
+}
+
+.memberItem {
+ display: table-row;
+}
+
+.memberName, .memberValue {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.monospace {
+ font-family: consolas, courier, monospace;
+ font-size: 1em;
+ line-height: 1.2em;
+ white-space: nowrap;
+}
+
+a {
+ color: #0489c3;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+em {
+ color: inherit;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
+}
+
+hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ height: 0;
+ box-sizing: content-box;
+}
+
+.list-group {
+ padding-left: 0;
+ margin-bottom: 20px;
+}
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: #fff;
+}
+
+.list-group-item:first-child {
+ /* rounded top corners */
+ border-top-right-radius:4px;
+ border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+ margin-bottom: 0;
+ /* rounded bottom corners */
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-item-fit {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+
+.flex-item-fill {
+ flex-grow: 0;
+ flex-shrink: 1; /* shrink when pressured */
+ flex-basis: 100%; /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 40%;
+}
+
+.flex-item-60-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 80%;
+}
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+ word-wrap: break-word;
+}
+</style>
+
+ <nav-bar>
+ <top-nav-menu></top-nav-menu>
+ <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
+ <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </nav-bar>
+
+ <div class="content">
+ <h1>
+ <!-- TODO(turnidge): Handle unnamed libraries -->
+ library {{ library.name }}
+ </h1>
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">url</div>
+ <div class="memberValue">{{ library.url }}</div>
+ </div>
+ <template if="{{ library.name != library.vmName }}">
+ <div class="memberItem">
+ <div class="memberName">vm name</div>
+ <div class="memberValue">{{ library.vmName }}</div>
+ </div>
+ </template>
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <template if="{{ library.imports.isNotEmpty }}">
+ imports ({{ library.imports.length }})
+ <curly-block expand="{{ library.imports.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ imp in library.imports }}">
+ <div class="memberItem">
+ <div class="memberValue">
+ <library-ref ref="{{ imp }}"></library-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+
+ <template if="{{ library.scripts.isNotEmpty }}">
+ scripts ({{ library.scripts.length }})
+ <curly-block expand="{{ library.scripts.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ script in library.scripts }}">
+ <div class="memberItem">
+ <div class="memberValue">
+ <script-ref ref="{{ script }}"></script-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+
+ <template if="{{ library.classes.isNotEmpty }}">
+ classes ({{ library.classes.length }})
+ <curly-block expand="{{ library.classes.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ cls in library.classes }}">
+ <div class="memberItem">
+ <div class="memberValue">
+ <class-ref ref="{{ cls }}"></class-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+
+ <template if="{{ library.variables.isNotEmpty }}">
+ variables ({{ library.variables.length }})
+ <curly-block expand="{{ library.variables.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ field in library.variables }}">
+ <div class="memberItem">
+ <div class="memberName">
+ <field-ref ref="{{ field }}"></field-ref>
+ </div>
+ <div class="memberValue">
+ <template if="{{ field['value'] != null }}">
+ <instance-ref ref="{{ field['value'] }}"></instance-ref>
+ </template>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+
+ <template if="{{ library.functions.isNotEmpty }}">
+ functions ({{ library.functions.length }})
+ <curly-block expand="{{ library.functions.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ function in library.functions }}">
+ <div class="memberItem">
+ <div class="memberValue">
+ <function-ref ref="{{ function }}"></function-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <eval-box callback="{{ eval }}"></eval-box>
+ </div>
+ <br><br><br><br>
+ <br><br><br><br>
+ </template>
+
+</polymer-element>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<polymer-element name="heap-profile" extends="observatory-element">
+<template>
+ <style>
+/* Global styles */
+* {
+ margin: 0;
+ padding: 0;
+ font: 400 14px 'Montserrat', sans-serif;
+ color: #333;
+ box-sizing: border-box;
+}
+
+.content {
+ padding-left: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+ padding-left: 10%;
+ padding-right: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+ font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+ display: table;
+}
+
+.memberItem {
+ display: table-row;
+}
+
+.memberName, .memberValue {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.monospace {
+ font-family: consolas, courier, monospace;
+ font-size: 1em;
+ line-height: 1.2em;
+ white-space: nowrap;
+}
+
+a {
+ color: #0489c3;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+em {
+ color: inherit;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
+}
+
+hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ height: 0;
+ box-sizing: content-box;
+}
+
+.list-group {
+ padding-left: 0;
+ margin-bottom: 20px;
+}
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: #fff;
+}
+
+.list-group-item:first-child {
+ /* rounded top corners */
+ border-top-right-radius:4px;
+ border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+ margin-bottom: 0;
+ /* rounded bottom corners */
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-item-fit {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+
+.flex-item-fill {
+ flex-grow: 0;
+ flex-shrink: 1; /* shrink when pressured */
+ flex-basis: 100%; /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 40%;
+}
+
+.flex-item-60-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 80%;
+}
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+ word-wrap: break-word;
+}
+</style>
+ <style>
+ .table {
+ border-collapse: collapse!important;
+ width: 100%;
+ margin-bottom: 20px
+ table-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;
+ }
+ .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.relativeHashLink('allocationprofile') }}" anchor="heap 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-bar>
+
+ <div class="flex-row">
+ <div id="newPieChart" class="flex-item-fixed-4-12" style="height: 400px">
+ </div>
+ <div id="newStatus" class="flex-item-fixed-2-12">
+ <div class="memberList">
+ <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>
+ </div>
+ <div id="oldPieChart" class="flex-item-fixed-4-12" style="height: 400px">
+ </div>
+ <div id="oldStatus" class="flex-item-fixed-2-12">
+ <div class="memberList">
+ <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>
+ </div>
+ </div>
+ <div class="flex-row">
+ <table id="classtable" class="flex-item-fixed-12-12 table">
+ <thead>
+ <tr>
+ <th on-click="{{changeSort}}" class="clickable" title="Class">{{ classTable.getColumnLabel(0) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(1) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(2) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="New Current Size">{{ classTable.getColumnLabel(3) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="New Current Instances">{{ classTable.getColumnLabel(4) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(5) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(6) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="Old Current Size">{{ classTable.getColumnLabel(7) }}</th>
+ <th on-click="{{changeSort}}" class="clickable" title="Old Current Instances">{{ classTable.getColumnLabel(8) }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr template="" repeat="{{row in classTable.sortedRows }}">
+ <td><class-ref ref="{{ classTable.getValue(row, 0) }}"></class-ref></td>
+ <td title="{{ classTable.getValue(row, 1) }}">{{ classTable.getFormattedValue(row, 1) }}</td>
+ <td title="{{ classTable.getValue(row, 2) }}">{{ classTable.getFormattedValue(row, 2) }}</td>
+ <td title="{{ classTable.getValue(row, 3) }}">{{ classTable.getFormattedValue(row, 3) }}</td>
+ <td title="{{ classTable.getValue(row, 4) }}">{{ classTable.getFormattedValue(row, 4) }}</td>
+ <td title="{{ classTable.getValue(row, 5) }}">{{ classTable.getFormattedValue(row, 5) }}</td>
+ <td title="{{ classTable.getValue(row, 6) }}">{{ classTable.getFormattedValue(row, 6) }}</td>
+ <td title="{{ classTable.getValue(row, 7) }}">{{ classTable.getFormattedValue(row, 7) }}</td>
+ <td title="{{ classTable.getValue(row, 8) }}">{{ classTable.getFormattedValue(row, 8) }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</template>
+
+</polymer-element>
+
+
+
+
+
+
+<polymer-element name="sliding-checkbox">
+ <template>
+ <style>
+ .switch {
+ position: relative;
+ width: 121px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
}
- .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 &gt; VM</option>
- <option value="u">User</option>
- <option value="vu">VM &gt; User</option>
- <option value="v">VM</option>
- <option value="hide">None</option>
- </select>
- </div>
- </div>
- </div>
- <hr>
- <table id="tableTree" class="table">
- <thead>
- <tr>
- <th>Method</th>
- <th>Self</th>
- </tr>
- </thead>
- <tbody>
- <tr template="" repeat="{{row in tree.rows }}" style="{{}}">
- <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}">
- <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
- <div style="position: relative;display: inline">
- {{row.columns[0]}}
- </div>
- <code-ref ref="{{ row.code }}"></code-ref>
- </td>
- <td class="{{ coloring(row) }}" style="position: relative">
- {{row.columns[1]}}
- <div class="tooltip">
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName white">Kind</div>
- <div class="memberValue white">{{ row.tipKind }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName white">Percent of Parent</div>
- <div class="memberValue white">{{ row.tipParent }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName white">Sample Count</div>
- <div class="memberValue white">{{ row.tipTicks }} ({{ row.tipExclusive }})</div>
- </div>
- <div class="memberItem">
- <div class="memberName white">Approximate Execution Time</div>
- <div class="memberValue white">{{ row.tipTime }}</div>
- </div>
- </div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
+ <div 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>
+<polymer-element name="isolate-profile" extends="observatory-element">
+ <template>
+ <style>
/* Global styles */
* {
margin: 0;
@@ -12098,7 +12932,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -12267,44 +13106,195 @@ hr {
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}
-.break-wrap {
- word-wrap: break-word;
-}
-</style>
- <nav-bar>
- <top-nav-menu></top-nav-menu>
- <isolate-nav-menu isolate="{{ script.isolate }}">
- </isolate-nav-menu>
- <nav-menu link="." anchor="{{ script.name }}" last="{{ true }}">
- <li>
- <input type="checkbox" checked="{{ showCoverage }}">
- <label>Show Coverage Data</label>
- </li>
- </nav-menu>
- <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
- <nav-refresh callback="{{ refresh }}">
- </nav-refresh>
- </nav-bar>
+.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.relativeHashLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ </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;
+ }
- <script-inset id="scriptInset" script="{{ script }}" pos="{{ script.firstTokenPos }}" endpos="{{ script.lastTokenPos }}">
- <h1>script {{ script.name }}</h1>
- </script-inset>
-</template>
+ .tooltip {
+ display: block;
+ position: absolute;
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 0s linear 0.5s;
+ transition: opacity .4s ease-in-out;
+ }
-</polymer-element>
+ tr:hover .tooltip {
+ display: block;
+ position: absolute;
+ top: 100%;
+ right: 100%;
+ visibility: visible;
+ z-index: 999;
+ width: 400px;
+ color: #ffffff;
+ background-color: #0489c3;
+ border-top-right-radius: 8px;
+ border-top-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ border-bottom-left-radius: 8px;
+ transition: visibility 0s linear 0.5s;
+ transition: opacity .4s ease-in-out;
+ opacity: 1;
+ }
-
-
-
+ .white {
+ color: #ffffff;
+ }
+ </style>
+ <div class="content">
+ <h1>Sampled CPU profile</h1>
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">Timestamp</div>
+ <div class="memberValue">{{ refreshTime }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Time span</div>
+ <div class="memberValue">{{ timeSpan }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Sample count</div>
+ <div class="memberValue">{{ sampleCount }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Sample rate</div>
+ <div class="memberValue">{{ sampleRate }} Hz</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Sample depth</div>
+ <div class="memberValue">{{ sampleDepth }} stack frames</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Display cutoff</div>
+ <div class="memberValue">{{ displayCutoff }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Tags</div>
+ <div class="memberValue">
+ <select value="{{tagSelector}}">
+ <option value="uv">User &gt; VM</option>
+ <option value="u">User</option>
+ <option value="vu">VM &gt; User</option>
+ <option value="v">VM</option>
+ <option value="hide">None</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <table id="tableTree" class="table">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th>Self</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr template="" repeat="{{row in tree.rows }}" style="{{}}">
+ <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}">
+ <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
+ <div style="position: relative;display: inline">
+ {{row.columns[0]}}
+ </div>
+ <code-ref ref="{{ row.code }}"></code-ref>
+ </td>
+ <td class="{{ coloring(row) }}" style="position: relative">
+ {{row.columns[1]}}
+ <div class="tooltip">
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName white">Kind</div>
+ <div class="memberValue white">{{ row.tipKind }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName white">Percent of Parent</div>
+ <div class="memberValue white">{{ row.tipParent }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName white">Sample Count</div>
+ <div class="memberValue white">{{ row.tipTicks }} ({{ row.tipExclusive }})</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName white">Approximate Execution Time</div>
+ <div class="memberValue white">{{ row.tipTime }}</div>
+ </div>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </template>
+</polymer-element>
+
-
-<polymer-element name="stack-frame" extends="observatory-element">
- <template>
- <style>
+<polymer-element name="script-view" extends="observatory-element">
+<template>
+ <style>
/* Global styles */
* {
margin: 0;
@@ -12362,7 +13352,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -12535,36 +13530,31 @@ 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> )
+ <nav-bar>
+ <top-nav-menu></top-nav-menu>
+ <isolate-nav-menu isolate="{{ script.isolate }}">
+ </isolate-nav-menu>
+ <nav-menu link="." anchor="{{ script.name }}" last="{{ true }}">
+ <li>
+ <input type="checkbox" checked="{{ showCoverage }}">
+ <label>Show Coverage Data</label>
+ </li>
+ </nav-menu>
+ <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
+ <nav-refresh callback="{{ refresh }}">
+ </nav-refresh>
+ </nav-bar>
+
+ <script-inset id="scriptInset" script="{{ script }}" pos="{{ script.firstTokenPos }}" endpos="{{ script.lastTokenPos }}">
+ <h1>script {{ script.name }}</h1>
+ </script-inset>
+</template>
- <curly-block>
- <div class="memberList">
- <template repeat="{{ v in frame['vars'] }}">
- <div class="memberItem">
- <div class="memberName">{{ v['name']}}</div>
- <div class="memberValue">
- <instance-ref ref="{{ v['value'] }}"></instance-ref>
- </div>
- </div>
- </template>
- </div>
- </curly-block>
- </div>
- <div class="flex-item-fixed-1-12">
- </div>
- </div>
- </template>
-
</polymer-element>
+
+
+
+
<polymer-element name="stack-trace" extends="observatory-element">
<template>
<style>
@@ -12625,7 +13615,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -12890,7 +13885,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -13088,6 +14088,12 @@ hr {
<div class="memberName">asserts enabled</div>
<div class="memberValue">{{ vm.assertsEnabled }}</div>
</div>
+ <br>
+ <div class="memberItem">
+ <div class="memberValue">
+ See <a href="#/flags">flags</a>
+ </div>
+ </div>
</div>
</div>
@@ -13184,7 +14190,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -13434,7 +14445,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
@@ -13679,7 +14695,12 @@ a:hover {
em {
color: inherit;
- font-style:italic;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
}
hr {
« no previous file with comments | « no previous file | runtime/bin/vmservice/client/deployed/web/index.html._data » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698