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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 532063002: Teach the Observatory about Contexts. Factor out object graph information from the instance view. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « runtime/bin/vmservice/observatory/deployed/web/index.html_bootstrap.dart.js ('k') | runtime/bin/vmservice/observatory/deployed/web/index_devtools.html._data » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: runtime/bin/vmservice/observatory/deployed/web/index_devtools.html
diff --git a/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html b/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html
index e5bdbcbb86ade53209502290a528b0ba4bdae05d..23337b73756c309026359d4361e352e6cfe2ac02 100644
--- a/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html
+++ b/runtime/bin/vmservice/observatory/deployed/web/index_devtools.html
@@ -12,7 +12,7 @@
<body><script src="packages/web_components/platform.js"></script>
-<!-- unminfied for debugging:
+<!-- unminified for debugging:
<link rel="import" href="src/js/polymer/layout.html">
<script src="src/js/polymer/polymer.concat.js"></script>
-->
@@ -966,8 +966,8 @@ hr {
<div class="memberItem">
<div class="memberName">[{{ element['index']}}]</div>
<div class="memberValue">
- <any-service-ref ref="{{ element['value'] }}">
- </any-service-ref></div>
+ <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
+ </div>
</div>
</template>
</div>
@@ -2826,7 +2826,7 @@ hr {
<template>
<style>
.textbox {
- width: 80ex;
+ flex-grow: 1;
font: 400 16px 'Montserrat', sans-serif;
}
.bigtextbox {
@@ -2837,9 +2837,10 @@ hr {
}
.radios {
display: inline;
+ padding-right: 30px;
}
.radios label{
- padding-left: 15px;
+ padding-left: 10px;
}
.historyExpr, .historyValue {
vertical-align: text-top;
@@ -2861,7 +2862,7 @@ hr {
padding: 6px 6px;
}
</style>
- <form>
+ <form style="display:flex; flex-direction:row; align-items:flex-end">
<template if="{{ lineMode == '1-line' }}">
<input class="textbox" type="text" value="{{ text }}">
</template>
@@ -2871,11 +2872,13 @@ hr {
<input class="button" type="submit" value="Evaluate" on-click="{{ eval }}">
<div class="radios" on-change="{{ updateLineMode }}">
- <label for="1-line">1-line
+ <label for="1-line">
<input type="radio" name="lineMode" value="1-line" checked="">
+ 1-line
</label>
- <label for="N-line">N-line
+ <label for="N-line">
<input type="radio" name="lineMode" value="N-line">
+ N-line
</label>
</div>
</form>
@@ -4502,8 +4505,8 @@ hr {
</div>
<template if="{{ cls.error != null }}">
- <error-ref ref="{{ cls.error }}">
- </error-ref></template>
+ <error-ref ref="{{ cls.error }}"></error-ref>
+ </template>
<hr>
@@ -14254,6 +14257,8 @@ hr {
+
+
<polymer-element name="inbound-reference" extends="service-ref">
<template>
<style>
@@ -14532,7 +14537,18 @@ hr {
</polymer-element>
-<polymer-element name="instance-view" extends="observatory-element">
+
+
+
+
+
+
+
+
+
+
+
+<polymer-element name="object-common" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -14789,207 +14805,80 @@ 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.clazz }}"></class-nav-menu>
- <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- <nav-control></nav-control>
- </nav-bar>
+ <div class="memberList">
- <template if="{{ instance.isError }}">
- <error-view error_obj="{{ instance['error'] }}"></error-view>
- </template>
+ <div class="memberItem">
+ <div class="memberName">class</div>
+ <div class="memberValue">
+ <class-ref ref="{{ object.clazz }}"></class-ref>
+ </div>
+ </div>
- <template if="{{ !instance.isError }}">
- <div class="content">
- <template if="{{ instance.isType }}">
- <h1>type {{ instance.name }}</h1>
- </template>
- <template if="{{ !instance.isType }}">
- <h1>instance of {{ instance.clazz.name }}</h1>
- </template>
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">class</div>
- <div class="memberValue">
- <class-ref ref="{{ instance.clazz }}">
- </class-ref>
- </div>
- </div>
- <template if="{{ instance.valueAsString != null }}">
- <div class="memberItem">
- <div class="memberName">value</div>
- <div class="memberValue">{{ instance.valueAsString }}</div>
- </div>
+ <div class="memberItem" title="Space for this object in memory">
+ <div class="memberName">size</div>
+ <div class="memberValue">{{ object.size | formatSize }}</div>
+ </div>
+
+ <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">
+ <div class="memberName">retained size</div>
+ <div class="memberValue">
+ <template if="{{ retainedBytes == null }}">
+ <eval-link callback="{{ retainedSize }}" label="[calculate]">
+ </eval-link>
</template>
- <div class="memberItem" title="Space for this object in memory">
- <div class="memberName">size</div>
- <div class="memberValue">{{ instance.size | formatSize }}</div>
- </div>
- <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">
- <div class="memberName">retained size</div>
- <div class="memberValue">
- <template if="{{ retainedBytes == null }}">
- <eval-link callback="{{ retainedSize }}" label="[calculate]">
- </eval-link>
- </template>
- <template if="{{ retainedBytes != null }}">
- {{ retainedBytes | formatSize }}
- </template>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberName">retaining path</div>
- <div class="memberValue">
- <template if="{{ path == null }}">
- <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
- </eval-link>
- </template>
- <template if="{{ path != null }}">
- <template repeat="{{ element in path['elements'] }}">
- <div class="memberItem">
- <div class="memberName">[{{ element['index']}}]</div>
- <div class="memberValue">
- <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
- <template if="{{ element['parentField'] != null }}">
- in <field-ref ref="{{ element['parentField'] }}"></field-ref> of
- </template>
- <template if="{{ element['parentListIndex'] != null }}">
- in [{{ element['parentListIndex'] }}] of
- </template>
- </div>
- </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>
- <div class="memberItem" title="Objects which directly reference this object">
- <div class="memberName">inbound references</div>
- <div class="memberValue">
- <template if="{{ inboundReferences == null }}">
- <eval-link callback="{{ fetchInboundReferences }}" label="[find]" expr="100">
- </eval-link>
- </template>
- <template if="{{ inboundReferences != null }}">
- <template repeat="{{ reference in inboundReferences['references'] }}">
- <inbound-reference ref="{{ reference }}"></inbound-reference>
- </template>
- </template>
- </div>
- </div>
- <template if="{{ instance.typeClass != null }}">
- <div class="memberItem">
- <div class="memberName">type class</div>
- <div class="memberValue">
- <class-ref ref="{{ instance.typeClass }}">
- </class-ref>
- </div>
- </div>
+ <template if="{{ retainedBytes != null }}">
+ {{ retainedBytes | formatSize }}
</template>
- <template if="{{ instance.isClosure }}">
+ </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">closure function</div>
+ <div class="memberName">[{{ element['index']}}]</div>
<div class="memberValue">
- <function-ref ref="{{ instance.closureFunc }}">
- </function-ref>
+ <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
+ <template if="{{ element['parentField'] != null }}">
+ in <field-ref ref="{{ element['parentField'] }}"></field-ref> of
+ </template>
+ <template if="{{ element['parentListIndex'] != null }}">
+ in [{{ element['parentListIndex'] }}] of
+ </template>
</div>
- </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 class="memberItem">&nbsp;</div>
-
- <div class="memberItem">
- <div class="memberName">toString()</div>
- <div class="memberValue">
- <eval-link callback="{{ eval }}" expr="toString()"></eval-link>
- </div>
- </div>
</div>
</div>
- <hr>
-
- <div class="content">
- <template if="{{ instance.fields.isNotEmpty }}">
- fields ({{ instance.fields.length }})
- <curly-block expand="{{ instance.fields.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ field in instance.fields }}">
- <div class="memberItem">
- <div class="memberName">
- <field-ref ref="{{ field['decl'] }}"></field-ref>
- </div>
- <div class="memberValue">
- <any-service-ref ref="{{ field['value'] }}"></any-service-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">
- <any-service-ref ref="{{ element['value'] }}">
-
- </any-service-ref></div>
- </div>
- </template>
- </div>
- </curly-block><br><br>
- </template>
- </div>
-
- <hr>
-
- <div class="content">
- <eval-box callback="{{ eval }}"></eval-box>
+ <div class="memberItem" title="Objects which directly reference this object">
+ <div class="memberName">inbound references</div>
+ <div class="memberValue">
+ <template if="{{ inboundReferences == null }}">
+ <eval-link callback="{{ fetchInboundReferences }}" label="[find]" expr="100">
+ </eval-link>
+ </template>
+ <template if="{{ inboundReferences != null }}">
+ <template repeat="{{ reference in inboundReferences['references'] }}">
+ <inbound-reference ref="{{ reference }}"></inbound-reference>
+ </template>
+ </template>
+ </div>
</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>
+ </div>
</template>
</polymer-element>
@@ -14999,14 +14888,7 @@ hr {
-
-
-
-
-
-
-
-<polymer-element name="library-view" extends="observatory-element">
+<polymer-element name="context-ref" extends="service-ref">
<template>
<style>
/* Global styles */
@@ -15263,140 +15145,1157 @@ 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="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- <nav-control></nav-control>
- </nav-bar>
-
- <div class="content">
- <h1>
- <!-- TODO(turnidge): Handle unnamed libraries -->
- library {{ library.name }}
- </h1>
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">url</div>
- <div class="memberValue">{{ library.url }}</div>
- </div>
- <template if="{{ library.name != library.vmName }}">
+ <span>
+ <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>
+ <curly-block callback="{{ expander() }}">
+ <div class="memberList">
<div class="memberItem">
- <div class="memberName">vm name</div>
- <div class="memberValue">{{ library.vmName }}</div>
+ <div class="memberName">parent</div>
+ <div class="memberValue">
+ <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref>
+ </div>
</div>
- </template>
- </div>
- </div>
+ <template repeat="{{ variable in ref.variables }}">
+ <div class="memberItem">
+ <div class="memberName">[{{ variable['index']}}]</div>
+ <div class="memberValue">
+ <any-service-ref ref="{{ variable['value'] }}"></any-service-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block>
+ </span>
+ </template>
+</polymer-element>
- <hr>
- <div class="content">
- <template if="{{ library.imports.isNotEmpty }}">
- imports ({{ library.imports.length }})
- <curly-block expand="{{ library.imports.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ imp in library.imports }}">
- <div class="memberItem">
- <div class="memberValue">
- <library-ref ref="{{ imp }}"></library-ref>
- </div>
+<polymer-element name="instance-view" extends="observatory-element">
+ <template>
+ <style>
+/* Global styles */
+* {
+ margin: 0;
+ padding: 0;
+ font: 400 14px 'Montserrat', sans-serif;
+ color: #333;
+ box-sizing: border-box;
+}
+
+.content {
+ padding-left: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+ padding-left: 10%;
+ padding-right: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered-big {
+ padding-left: 5%;
+ padding-right: 5%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+ font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+ display: table;
+}
+
+.memberItem {
+ display: table-row;
+}
+
+.memberName, .memberValue {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.memberSmall {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 12px 'Montserrat', sans-serif;
+}
+
+.monospace {
+ font-family: consolas, courier, monospace;
+ font-size: 1em;
+ line-height: 1.2em;
+ white-space: nowrap;
+}
+
+a {
+ color: #0489c3;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+em {
+ color: inherit;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
+}
+
+hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ height: 0;
+ box-sizing: content-box;
+}
+
+.list-group {
+ padding-left: 0;
+ margin-bottom: 20px;
+}
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: #fff;
+}
+
+.list-group-item:first-child {
+ /* rounded top corners */
+ border-top-right-radius:4px;
+ border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+ margin-bottom: 0;
+ /* rounded bottom corners */
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-item-fit {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+
+.flex-item-fill {
+ flex-grow: 0;
+ flex-shrink: 1; /* shrink when pressured */
+ flex-basis: 100%; /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 40%;
+}
+
+.flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-60-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 80%;
+}
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+ word-wrap: break-word;
+}
+</style>
+ <nav-bar>
+ <top-nav-menu></top-nav-menu>
+ <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
+ <!-- TODO(turnidge): Add library nav menu here. -->
+ <class-nav-menu cls="{{ instance.clazz }}"></class-nav-menu>
+ <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ <nav-control></nav-control>
+ </nav-bar>
+
+ <template if="{{ instance.isError }}">
+ <error-view error_obj="{{ instance['error'] }}"></error-view>
+ </template>
+
+ <template if="{{ !instance.isError }}">
+ <div class="content">
+ <template if="{{ instance.isType }}">
+ <h1>type {{ instance.name }}</h1>
+ </template>
+ <template if="{{ !instance.isType }}">
+ <h1>instance of {{ instance.clazz.name }}</h1>
+ </template>
+
+ <object-common object="{{ instance }}"></object-common>
+
+ <div class="memberList">
+ <div class="memberItem">&nbsp;</div>
+
+ <template if="{{ instance.valueAsString != null }}">
+ <div class="memberItem">
+ <div class="memberName">value</div>
+ <div class="memberValue">{{ instance.valueAsString }}</div>
+ </div>
+ </template>
+
+ <template if="{{ instance.typeClass != null }}">
+ <div class="memberItem">
+ <div class="memberName">type class</div>
+ <div class="memberValue">
+ <class-ref ref="{{ instance.typeClass }}">
+ </class-ref>
+ </div>
+ </div>
+ </template>
+
+ <template if="{{ instance.isClosure }}">
+ <div class="memberItem">
+ <div class="memberName">closure function</div>
+ <div class="memberValue">
+ <function-ref ref="{{ instance.closureFunc }}">
+ </function-ref>
+ </div>
+ </div>
+ </template>
+ <template if="{{ instance.isClosure }}">
+ <div class="memberItem">
+ <div class="memberName">closure context</div>
+ <div class="memberValue">
+ <any-service-ref ref="{{ instance.closureCtxt }}">
+ </any-service-ref>
+ </div>
+ </div>
+ </template>
+
+ <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.nativeFields.isNotEmpty }}">
+ native fields ({{ instance.nativeFields.length }})
+ <curly-block expand="{{ instance.nativeFields.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ field in instance.nativeFields }}">
+ <div class="memberItem">
+ <div class="memberName">[{{ field['index']}}]</div>
+ <div class="memberValue">[{{ field['value']}}]</div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br><br>
+ </template>
+
+ <template if="{{ instance.fields.isNotEmpty }}">
+ fields ({{ instance.fields.length }})
+ <curly-block expand="{{ instance.fields.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ field in instance.fields }}">
+ <div class="memberItem">
+ <div class="memberName">
+ <field-ref ref="{{ field['decl'] }}"></field-ref>
+ </div>
+ <div class="memberValue">
+ <any-service-ref ref="{{ field['value'] }}"></any-service-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br><br>
+ </template>
+
+ <template if="{{ instance.elements.isNotEmpty }}">
+ elements ({{ instance.elements.length }})
+ <curly-block expand="{{ instance.elements.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ element in instance.elements }}">
+ <div class="memberItem">
+ <div class="memberName">[{{ element['index']}}]</div>
+ <div class="memberValue">
+ <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br><br>
+ </template>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <eval-box callback="{{ eval }}"></eval-box>
+ </div>
+
+ <br><br><br><br>
+ <br><br><br><br>
+
+ </template>
+ </template>
+</polymer-element>
+
+
+
+
+
+<polymer-element name="json-view" extends="observatory-element">
+ <template>
+ <nav-bar>
+ <top-nav-menu last="{{ true }}"></top-nav-menu>
+ </nav-bar>
+ <pre>{{ mapAsString }}</pre>
+ </template>
+</polymer-element>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<polymer-element name="library-view" extends="observatory-element">
+ <template>
+ <style>
+/* Global styles */
+* {
+ margin: 0;
+ padding: 0;
+ font: 400 14px 'Montserrat', sans-serif;
+ color: #333;
+ box-sizing: border-box;
+}
+
+.content {
+ padding-left: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+ padding-left: 10%;
+ padding-right: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered-big {
+ padding-left: 5%;
+ padding-right: 5%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+ font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+ display: table;
+}
+
+.memberItem {
+ display: table-row;
+}
+
+.memberName, .memberValue {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.memberSmall {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 12px 'Montserrat', sans-serif;
+}
+
+.monospace {
+ font-family: consolas, courier, monospace;
+ font-size: 1em;
+ line-height: 1.2em;
+ white-space: nowrap;
+}
+
+a {
+ color: #0489c3;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+em {
+ color: inherit;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
+}
+
+hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ height: 0;
+ box-sizing: content-box;
+}
+
+.list-group {
+ padding-left: 0;
+ margin-bottom: 20px;
+}
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: #fff;
+}
+
+.list-group-item:first-child {
+ /* rounded top corners */
+ border-top-right-radius:4px;
+ border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+ margin-bottom: 0;
+ /* rounded bottom corners */
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-item-fit {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+
+.flex-item-fill {
+ flex-grow: 0;
+ flex-shrink: 1; /* shrink when pressured */
+ flex-basis: 100%; /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 40%;
+}
+
+.flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-60-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 80%;
+}
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+ word-wrap: break-word;
+}
+</style>
+
+ <nav-bar>
+ <top-nav-menu></top-nav-menu>
+ <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
+ <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav-menu>
+ <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ <nav-control></nav-control>
+ </nav-bar>
+
+ <div class="content">
+ <h1>
+ <!-- TODO(turnidge): Handle unnamed libraries -->
+ library {{ library.name }}
+ </h1>
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">url</div>
+ <div class="memberValue">{{ library.url }}</div>
+ </div>
+ <template if="{{ library.name != library.vmName }}">
+ <div class="memberItem">
+ <div class="memberName">vm name</div>
+ <div class="memberValue">{{ library.vmName }}</div>
+ </div>
+ </template>
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="content">
+ <template if="{{ library.imports.isNotEmpty }}">
+ imports ({{ library.imports.length }})
+ <curly-block expand="{{ library.imports.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ imp in library.imports }}">
+ <div class="memberItem">
+ <div class="memberValue">
+ <library-ref ref="{{ imp }}"></library-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+
+ <template if="{{ library.scripts.isNotEmpty }}">
+ scripts ({{ library.scripts.length }})
+ <curly-block expand="{{ library.scripts.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ script in library.scripts }}">
+ <div class="memberItem">
+ <div class="memberValue">
+ <script-ref ref="{{ script }}"></script-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+
+ <template if="{{ library.classes.isNotEmpty }}">
+ classes ({{ library.classes.length }})
+ <curly-block expand="{{ library.classes.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ cls in library.classes }}">
+ <div class="memberItem">
+ <div class="memberValue">
+ <class-ref ref="{{ cls }}"></class-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br>
+ <br>
+ </template>
+
+ <template if="{{ library.variables.isNotEmpty }}">
+ variables ({{ library.variables.length }})
+ <curly-block expand="{{ library.variables.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ field in library.variables }}">
+ <div class="memberItem">
+ <div class="memberName">
+ <field-ref ref="{{ field }}"></field-ref>
+ </div>
+ <div class="memberValue">
+ <template if="{{ field['value'] != null }}">
+ <any-service-ref ref="{{ field['value'] }}"></any-service-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="metrics-page" extends="observatory-element">
+ <template>
+ <style>
+/* Global styles */
+* {
+ margin: 0;
+ padding: 0;
+ font: 400 14px 'Montserrat', sans-serif;
+ color: #333;
+ box-sizing: border-box;
+}
+
+.content {
+ padding-left: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+ padding-left: 10%;
+ padding-right: 10%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered-big {
+ padding-left: 5%;
+ padding-right: 5%;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+ font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+ display: table;
+}
+
+.memberItem {
+ display: table-row;
+}
+
+.memberName, .memberValue {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 14px 'Montserrat', sans-serif;
+}
+
+.memberSmall {
+ display: table-cell;
+ vertical-align: top;
+ padding: 3px 0 3px 1em;
+ font: 400 12px 'Montserrat', sans-serif;
+}
+
+.monospace {
+ font-family: consolas, courier, monospace;
+ font-size: 1em;
+ line-height: 1.2em;
+ white-space: nowrap;
+}
+
+a {
+ color: #0489c3;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+em {
+ color: inherit;
+ font-style: italic;
+}
+
+b {
+ color: inherit;
+ font-weight: bold;
+}
+
+hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ height: 0;
+ box-sizing: content-box;
+}
+
+.list-group {
+ padding-left: 0;
+ margin-bottom: 20px;
+}
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: #fff;
+}
+
+.list-group-item:first-child {
+ /* rounded top corners */
+ border-top-right-radius:4px;
+ border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+ margin-bottom: 0;
+ /* rounded bottom corners */
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
- <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>
+/* Flex column container */
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
- <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>
+.flex-item-fit {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+}
- <template if="{{ library.variables.isNotEmpty }}">
- variables ({{ library.variables.length }})
- <curly-block expand="{{ library.variables.length <= 8 }}">
- <div class="memberList">
- <template repeat="{{ field in library.variables }}">
- <div class="memberItem">
- <div class="memberName">
- <field-ref ref="{{ field }}"></field-ref>
- </div>
- <div class="memberValue">
- <template if="{{ field['value'] != null }}">
- <any-service-ref ref="{{ field['value'] }}"></any-service-ref>
- </template>
- </div>
- </div>
- </template>
- </div>
- </curly-block><br>
- <br>
- </template>
+.flex-item-no-shrink {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
- <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>
+.flex-item-fill {
+ flex-grow: 0;
+ flex-shrink: 1; /* shrink when pressured */
+ flex-basis: 100%; /* try and take 100% */
+}
- <hr>
+.flex-item-fixed-1-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 8.3%;
+}
- <div class="content">
- <eval-box callback="{{ eval }}"></eval-box>
+.flex-item-fixed-2-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 40%;
+}
+
+.flex-item-50-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+}
+
+.flex-item-60-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 80%;
+}
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+ word-wrap: break-word;
+}
+</style>
+ <style>
+ ul li:hover:not(.selected) {
+ background-color: #FFF3E3;
+ }
+ .selected {
+ background-color: #0489c3;
+ }
+ .graph {
+ min-height: 600px;
+ }
+ </style>
+ <nav-bar>
+ <top-nav-menu last="{{ true }}"></top-nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ <nav-control></nav-control>
+ </nav-bar>
+ <div class="flex-row">
+ <div class="flex-item-20-percent">
+ <ul>
+ <template repeat="{{ metric in isolate.dartMetrics.values }}">
+ <template if="{{ metric == selectedMetric }}">
+ <li class="selected">
+ {{ metric.name }}
+ </li>
+ </template>
+ <template if="{{ metric != selectedMetric }}">
+ <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
+ {{ metric.name }}
+ </li>
+ </template>
+ </template>
+ <template repeat="{{ metric in isolate.vmMetrics.values }}">
+ <template if="{{ metric == selectedMetric }}">
+ <li class="selected">
+ {{ metric.name }}
+ </li>
+ </template>
+ <template if="{{ metric != selectedMetric }}">
+ <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
+ {{ metric.name }}
+ </li>
+ </template>
+ </template>
+ </ul>
+ </div>
+ <div class="flex-item-80-percent">
+ <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
+ </metrics-graph>
+ <div>
+ <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
+ </metric-details>
+ </div>
+ </div>
</div>
- <br><br><br><br>
- <br><br><br><br>
</template>
</polymer-element>
-
-
-
-
-
-<polymer-element name="metrics-page" extends="observatory-element">
+<polymer-element name="metric-details" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -15653,64 +16552,63 @@ hr {
word-wrap: break-word;
}
</style>
- <style>
- ul li:hover:not(.selected) {
- background-color: #FFF3E3;
- }
- .selected {
- background-color: #0489c3;
- }
- .graph {
- min-height: 600px;
- }
- </style>
- <nav-bar>
- <top-nav-menu last="{{ true }}"></top-nav-menu>
- <nav-refresh callback="{{ refresh }}"></nav-refresh>
- <nav-control></nav-control>
- </nav-bar>
- <div class="flex-row">
- <div class="flex-item-20-percent">
- <ul>
- <template repeat="{{ metric in isolate.dartMetrics.values }}">
- <template if="{{ metric == selectedMetric }}">
- <li class="selected">
- {{ metric.name }}
- </li>
- </template>
- <template if="{{ metric != selectedMetric }}">
- <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
- {{ metric.name }}
- </li>
- </template>
- </template>
- <template repeat="{{ metric in isolate.vmMetrics.values }}">
- <template if="{{ metric == selectedMetric }}">
- <li class="selected">
- {{ metric.name }}
- </li>
- </template>
- <template if="{{ metric != selectedMetric }}">
- <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
- {{ metric.name }}
- </li>
- </template>
- </template>
- </ul>
- </div>
- <div class="flex-item-80-percent">
- <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
- </metrics-graph>
- <div>
- <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
- </metric-details>
+ <div class="content-centered">
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">name</div>
+ <div class="memberValue">{{ metric.name }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">description</div>
+ <div class="memberValue">{{ metric.description }}</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">current value</div>
+ <div class="memberValue">{{ metric.value }}</div>
+ </div>
+ <template if="{{ (metric != null) &amp;&amp; (metric.min != null) }}">
+ <div class="memberItem">
+ <div class="memberName">minimum</div>
+ <div class="memberValue">{{ metric.min }}</div>
+ </div>
+ </template>
+ <template if="{{ (metric != null) &amp;&amp; (metric.max != null) }}">
+ <div class="memberItem">
+ <div class="memberName">maximum</div>
+ <div class="memberValue">{{ metric.max }}</div>
+ </div>
+ </template>
+ <div class="memberItem">
+ <div class="memberName">refresh rate</div>
+ <div class="memberValue">
+ <select id="refreshrate" on-change="{{ refreshRateChange }}">
+ <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
+ in object.dart -->
+ <option value="8000">Every eight seconds</option>
+ <option value="4000">Every four seconds</option>
+ <option value="2000">Every two seconds</option>
+ <option value="1000">Once a second</option>
+ <option value="100">Ten times per second</option>
+ <option value="0" selected="selected">Never</option>
+ </select>
+ </div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">sample buffer size</div>
+ <div class="memberValue">
+ <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
+ <option value="10">10</option>
+ <option value="100" selected="selected">100</option>
+ <option value="1000">1000</option>
+ </select>
+ </div>
</div>
</div>
</div>
</template>
</polymer-element>
-<polymer-element name="metric-details" extends="observatory-element">
+<polymer-element name="metrics-graph" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -15967,63 +16865,48 @@ hr {
word-wrap: break-word;
}
</style>
- <div class="content-centered">
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">name</div>
- <div class="memberValue">{{ metric.name }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">description</div>
- <div class="memberValue">{{ metric.description }}</div>
- </div>
- <div class="memberItem">
- <div class="memberName">current value</div>
- <div class="memberValue">{{ metric.value }}</div>
- </div>
- <template if="{{ (metric != null) &amp;&amp; (metric.min != null) }}">
- <div class="memberItem">
- <div class="memberName">minimum</div>
- <div class="memberValue">{{ metric.min }}</div>
- </div>
- </template>
- <template if="{{ (metric != null) &amp;&amp; (metric.max != null) }}">
- <div class="memberItem">
- <div class="memberName">maximum</div>
- <div class="memberValue">{{ metric.max }}</div>
- </div>
- </template>
- <div class="memberItem">
- <div class="memberName">refresh rate</div>
- <div class="memberValue">
- <select id="refreshrate" on-change="{{ refreshRateChange }}">
- <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
- in object.dart -->
- <option value="8000">Every eight seconds</option>
- <option value="4000">Every four seconds</option>
- <option value="2000">Every two seconds</option>
- <option value="1000">Once a second</option>
- <option value="100">Ten times per second</option>
- <option value="0" selected="selected">Never</option>
- </select>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberName">sample buffer size</div>
- <div class="memberValue">
- <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
- <option value="10">10</option>
- <option value="100" selected="selected">100</option>
- <option value="1000">1000</option>
- </select>
- </div>
- </div>
- </div>
+ <style>
+ .graph {
+ min-height: 600px;
+ }
+ </style>
+ <div id="graph" class="graph">
</div>
</template>
</polymer-element>
-<polymer-element name="metrics-graph" extends="observatory-element">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<polymer-element name="context-view" extends="observatory-element">
<template>
<style>
/* Global styles */
@@ -16280,34 +17163,60 @@ hr {
word-wrap: break-word;
}
</style>
- <style>
- .graph {
- min-height: 600px;
- }
- </style>
- <div id="graph" class="graph">
- </div>
- </template>
-</polymer-element>
-
-
-
-
-
-
-
-
-
-
-
+ <nav-bar>
+ <top-nav-menu></top-nav-menu>
+ <isolate-nav-menu isolate="{{ context.isolate }}"></isolate-nav-menu>
+ <!-- TODO(turnidge): Add library nav menu here. -->
+ <class-nav-menu cls="{{ context.clazz }}"></class-nav-menu>
+ <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
+ <nav-refresh callback="{{ refresh }}"></nav-refresh>
+ <nav-control></nav-control>
+ </nav-bar>
+ <template if="{{ !context.isError }}">
+ <div class="content">
+ <h1>instance of Context</h1>
+ <object-common object="{{ context }}"></object-common>
+ <div class="memberList">
+ <div class="memberItem">&nbsp;</div>
+ <div class="memberItem">
+ <div class="memberName">parent context</div>
+ <div class="memberValue">
+ <any-service-ref ref="{{ context.parentContext }}"></any-service-ref>
+ </div>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="content">
+ <template if="{{ context.variables.isNotEmpty }}">
+ variables ({{ context.variables.length }})
+ <curly-block expand="{{ context.variables.length <= 8 }}">
+ <div class="memberList">
+ <template repeat="{{ variable in context.variables }}">
+ <div class="memberItem">
+ <div class="memberName">[{{ variable['index']}}]</div>
+ <div class="memberValue">
+ <any-service-ref ref="{{ variable['value'] }}"></any-service-ref>
+ </div>
+ </div>
+ </template>
+ </div>
+ </curly-block><br><br>
+ </template>
+ </div>
+ <br><br><br><br>
+ <br><br><br><br>
+ </template>
+ </template>
+</polymer-element>
« no previous file with comments | « runtime/bin/vmservice/observatory/deployed/web/index.html_bootstrap.dart.js ('k') | runtime/bin/vmservice/observatory/deployed/web/index_devtools.html._data » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698