| 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> </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> </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"> </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>
|
| + =
|
| + {{ 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> </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> </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"> </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"> </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"> </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 > VM</option>
|
| - <option value="u">User</option>
|
| - <option value="vu">VM > User</option>
|
| - <option value="v">VM</option>
|
| - <option value="hide">None</option>
|
| - </select>
|
| - </div>
|
| - </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 > VM</option>
|
| + <option value="u">User</option>
|
| + <option value="vu">VM > User</option>
|
| + <option value="v">VM</option>
|
| + <option value="hide">None</option>
|
| + </select>
|
| + </div>
|
| + </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 {
|
|
|
Chromium Code Reviews
Issue 299143007:
Show flags in Observatory. (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart