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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: runtime/observatory/lib/src/elements/cpu_profile.html

Issue 1266193003: Introduce two utility elements for the cpu profiler (Closed) Base URL: git@github.com:dart-lang/sdk.git@master
Patch Set: Created 5 years, 5 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/observatory/lib/src/elements/cpu_profile.dart ('k') | runtime/observatory/lib/src/elements/css/shared.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: runtime/observatory/lib/src/elements/cpu_profile.html
diff --git a/runtime/observatory/lib/src/elements/cpu_profile.html b/runtime/observatory/lib/src/elements/cpu_profile.html
index 891783f3d74ba2de561d07440132528342713f94..588f8692d810beb078203b15c487848e95d5de2b 100644
--- a/runtime/observatory/lib/src/elements/cpu_profile.html
+++ b/runtime/observatory/lib/src/elements/cpu_profile.html
@@ -6,6 +6,161 @@
<link rel="import" href="sliding_checkbox.html">
<link rel="import" href="view_footer.html">
+<polymer-element name="sample-buffer-control" extends="observatory-element">
+ <template>
+ <link rel="stylesheet" href="css/shared.css">
+ <style>
+ .statusMessage {
+ font-size: 150%;
+ font-weight: bold;
+ }
+
+ .statusBox {
+ height: 100%;
+ padding: 1em;
+ }
+
+ .center {
+ align-items: center;
+ justify-content: center;
+ }
+
+ .notice {
+ background-color: #fcf8e3;
+ }
+
+ .red {
+ background-color: #f2dede;
+ }
+ </style>
+ <div class="content-centered-big">
+ <h2>Sample buffer</h2>
+ <hr>
+ <template if="{{ state == 'kFetching' }}">
+ <div class="statusBox shadow center">
+ <div class="statusMessage">Fetching profile from VM...</div>
+ </div>
+ </template>
+ <template if="{{ state == 'kLoading' }}">
+ <div class="statusBox shadow center">
+ <div class="statusMessage">Loading profile...</div>
+ </div>
+ </template>
+ <template if="{{ state == 'kDisabled' }}">
+ <div class="statusBox shadow center">
+ <div>
+ <h1>Profiling is disabled</h1>
+ <br>
+ Perhaps the <b>profile</b> flag has been disabled for this VM.
+ <br><br>
+ See all
+ <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">vm flags</a>
+ </div>
+ </div>
+ </template>
+ <template if="{{ state == 'kException' }}">
+ <div class="statusBox shadow center">
+ <div class="statusMessage">
+ <h1>Profiling is disabled due to unexpected exception:</h1>
+ <br>
+ <pre>{{ exception.toString() }}</pre>
+ <br>
+ <h1>Stack trace:</h1>
+ <br>
+ <pre>{{ stackTrace.toString() }}</pre>
+ </div>
+ </div>
+ </template>
+ <template if="{{ state == 'kLoaded' }}">
+ <div class="memberList">
+ <div class="memberItem">
+ <div class="memberName">Refreshed at </div>
+ <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime }}) (loaded in {{ loadTime }})</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Profile contains</div>
+ <div class="memberValue">{{ sampleCount }} samples (spanning {{ timeSpan }})</div>
+ </div>
+ <div class="memberItem">
+ <div class="memberName">Sampling</div>
+ <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRate }} Hz</div>
+ </div>
+ <template if="{{ showTagSelector }}">
+ <div class="memberItem">
+ <div class="memberName">Tag Order</div>
+ <div class="memberValue">
+ <select value="{{tagSelector}}">
+ <option value="UserVM">User &gt; VM</option>
+ <option value="UserOnly">User</option>
+ <option value="VMUser">VM &gt; User</option>
+ <option value="VMOnly">VM</option>
+ <option value="None">None</option>
+ </select>
+ </div>
+ </div>
+ </template>
+ </div>
+ </template>
+ </div>
+ </template>
+</polymer-element>
+
+<polymer-element name="stack-trace-tree-config" extends="observatory-element">
+ <template>
+ <link rel="stylesheet" href="css/shared.css">
+ <style>
+ .statusBox {
+ height: 100%;
+ padding: 1em;
+ }
+ </style>
+ <div class="content-centered-big">
+ <h2>Tree display</h2>
+ <hr>
+ <div class="memberList">
+ <template if="{{ showModeSelector }}">
+ <div class="memberItem">
+ <div class="memberName">Mode</div>
+ <div class="memberValue">
+ <select value="{{modeSelector}}">
+ <option value="Code">Code</option>
+ <option value="Function">Function</option>
+ </select>
+ </div>
+ </div>
+ </template>
+ <template if="{{ showDirectionSelector }}">
+ <div class="memberItem">
+ <div class="memberName">Call Tree Direction</div>
+ <div class="memberValue">
+ <select value="{{directionSelector}}">
+ <option value="Down">Top down</option>
+ <option value="Up">Bottom up</option>
+ </select>
+ </div>
+ </div>
+ </template>
+ </div>
+ <template if="{{ directionSelector == 'Down' }}">
+ <br>
+ <div class="statusBox shadow">
+ <div>Tree is rooted at main.</div>
+ <br>
+ <div>Child nodes are callees.</div>
+ </div>
+ </template>
+ <template if="{{ directionSelector == 'Up' }}">
+ <br>
+ <div class="statusBox shadow">
+ <div>Tree is rooted at executing function / code.</div>
+ <br>
+ <div>Child nodes are callers.</div>
+ </div>
+ </template>
+ </div>
+ </template>
+</polymer-element>
+
<polymer-element name="cpu-profile-tree" extends="observatory-element">
<template>
<link rel="stylesheet" href="css/shared.css">
@@ -211,68 +366,8 @@
}
</style>
- <div class="content-centered-big">
- <template if="{{ state == 'Requested' }}">
- <div class="statusBox shadow center">
- <div class="statusMessage">Fetching profile from VM...</div>
- </div>
- </template>
- <template if="{{ state == 'Loading' }}">
- <div class="statusBox shadow center">
- <div class="statusMessage">Loading profile...</div>
- </div>
- </template>
- <template if="{{ state == 'Disabled' }}">
- <div class="statusBox shadow center">
- <div>
- <h1>Profiling is disabled</h1>
- <br>
- Perhaps the <b>profile</b> flag has been disabled for this VM.
- <br><br>
- See all
- <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">vm flags</a>
- </div>
- </div>
- </template>
- <template if="{{ state == 'Exception' }}">
- <div class="statusBox shadow center">
- <div class="statusMessage">
- <h1>Profiling is disabled due to unexpected exception:</h1>
- <br>
- <pre>{{ exception.toString() }}</pre>
- <br>
- <h1>Stack trace:</h1>
- <br>
- <pre>{{ stackTrace.toString() }}</pre>
- </div>
- </div>
- </template>
- <template if="{{ state == 'Loaded' }}">
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">Refreshed at </div>
- <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime }}) (loaded in {{ loadTime }})</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Profile contains</div>
- <div class="memberValue">{{ sampleCount }} samples (spanning {{ timeSpan }})</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Sampling</div>
- <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRate }} Hz</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Call Tree Direction</div>
- <div class="memberValue">
- <select value="{{directionSelector}}">
- <option value="Down">Top down</option>
- <option value="Up">Bottom up</option>
- </select>
- </div>
- </div>
- </div>
- </template>
- </div>
+ <sample-buffer-control id="sampleBufferControl"></sample-buffer-control>
+ <br>
<hr>
<div id="main" class="flex-row centered">
<div class="flex-item-45-percent full-height outlined scroll">
@@ -329,16 +424,21 @@
</div>
</div>
<br>
+ <stack-trace-tree-config id="stackTraceTreeConfig"></stack-trace-tree-config>
<br>
- <div class="focused-function-label">
- <template if="{{ focusedFunction != null }}">
- <span>Filtered tree: </span>
- <function-ref ref="{{ focusedFunction }}"></function-ref>
- </template>
- <template if="{{ focusedFunction == null }}">
- <span>No focused function</span>
- </template>
+ <div class="content-centered-big">
+ <div class="focused-function-label">
+ <template if="{{ focusedFunction != null }}">
+ <span>Filtered tree: </span>
+ <function-ref ref="{{ focusedFunction }}"></function-ref>
+ </template>
+ <template if="{{ focusedFunction == null }}">
+ <span>No focused function</span>
+ </template>
+ </div>
</div>
+ <br>
+ <br>
<div class="flex-row centered">
<div class="flex-item-90-percent outlined" style="margin: 16px; margin-left: 8px; margin-right: 8px">
<cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree>
@@ -363,137 +463,12 @@
background-color: #ECECEC;
padding: 0.2em;
}
- .statusMessage {
- font-size: 150%;
- font-weight: bold;
- }
-
- .statusBox {
- height: 100%;
- padding: 1em;
- }
-
- .center {
- align-items: center;
- justify-content: center;
- }
-
- .notice {
- background-color: #fcf8e3;
- }
-
- .red {
- background-color: #f2dede;
- }
-
</style>
+ <sample-buffer-control id="sampleBufferControl"></sample-buffer-control>
+ <br>
+ <stack-trace-tree-config id="stackTraceTreeConfig"></stack-trace-tree-config>
+ <br>
<div class="content-centered-big">
- <h1>Sampled CPU profile</h1>
- <hr>
- <template if="{{ state == 'Requested' }}">
- <div class="statusBox shadow center">
- <div class="statusMessage">Fetching profile from VM...</div>
- </div>
- </template>
- <template if="{{ state == 'Loading' }}">
- <div class="statusBox shadow center">
- <div class="statusMessage">Loading profile...</div>
- </div>
- </template>
- <template if="{{ state == 'Disabled' }}">
- <div class="statusBox shadow center">
- <div>
- <h1>Profiling is disabled</h1>
- <br>
- Perhaps the <b>profile</b> flag has been disabled for this VM.
- <br><br>
- See all
- <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">vm flags</a>
- </div>
- </div>
- </template>
- <template if="{{ state == 'Exception' }}">
- <div class="statusBox shadow center">
- <div class="statusMessage">
- <h1>Profiling is disabled due to unexpected exception:</h1>
- <br>
- <pre>{{ exception.toString() }}</pre>
- <br>
- <h1>Stack trace:</h1>
- <br>
- <pre>{{ stackTrace.toString() }}</pre>
- </div>
- </div>
- </template>
- <template if="{{ state == 'Loaded' }}">
- <div class="memberList">
- <div class="memberItem">
- <div class="memberName">Refreshed at </div>
- <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime }}) (loaded in {{ loadTime }})</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Profile contains</div>
- <div class="memberValue">{{ sampleCount }} samples (spanning {{ timeSpan }})</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Sampling</div>
- <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRate }} Hz</div>
- </div>
- <div class="memberItem">
- <div class="memberName">Mode</div>
- <div class="memberValue">
- <select value="{{modeSelector}}">
- <option value="Code">Code</option>
- <option value="Function">Function</option>
- </select>
- </div>
- </div>
- <div class="memberItem">
- <div class="memberName">Tag Order</div>
- <div class="memberValue">
- <select value="{{tagSelector}}">
- <option value="UserVM">User &gt; VM</option>
- <option value="UserOnly">User</option>
- <option value="VMUser">VM &gt; User</option>
- <option value="VMOnly">VM</option>
- <option value="None">None</option>
- </select>
- </div>
- </div>
- <!--- Experimental
- <div class="memberItem">
- <div class="memberName">Call Tree Direction</div>
- <div class="memberValue">
- <select value="{{directionSelector}}">
- <option value="Down">Top down</option>
- <option value="Up">Bottom up</option>
- </select>
- </div>
- </div>
- --->
- </div>
- </template>
- <template if="{{ state == 'Loaded' && directionSelector == 'Down' }}">
- <br>
- <div class="statusBox shadow">
- <div>Tree is rooted at main.</div>
- <br>
- <div>Child nodes are callees.</div>
- <br>
- <div class="notice">To get the most out of this mode you may need to launch Dart with a higher --profile-depth flag value.</div>
- <div class="notice">Try 16, 32, ... up to 256 until [Truncated] approaches zero.</div>
- <div class="red">NOTE: Higher values will impact performance</div>
- </div>
- </template>
- <template if="{{ state == 'Loaded' && directionSelector == 'Up' }}">
- <br>
- <div class="statusBox shadow">
- <div>Tree is rooted at executing function / code.</div>
- <br>
- <div>Child nodes are callers.</div>
- </div>
- </template>
- <br><br>
<div class="tableWell shadow">
<cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree>
</div>
« no previous file with comments | « runtime/observatory/lib/src/elements/cpu_profile.dart ('k') | runtime/observatory/lib/src/elements/css/shared.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698