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

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

Issue 381383010: Add breakpoints and single-stepping to Observatory. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: fix bugs, gen js Created 6 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
Index: runtime/bin/vmservice/client/deployed/web/index_devtools.html
diff --git a/runtime/bin/vmservice/client/deployed/web/index_devtools.html b/runtime/bin/vmservice/client/deployed/web/index_devtools.html
index 1ee9434b5741447f2e95a89f32fad2b2a6e7e5d0..4fd626f5312f65a85fe9eae242d3b4939195d3af 100644
--- a/runtime/bin/vmservice/client/deployed/web/index_devtools.html
+++ b/runtime/bin/vmservice/client/deployed/web/index_devtools.html
@@ -978,10 +978,15 @@ hr {
.idle {
color: #0489c3;
cursor: pointer;
+ text-decoration: none;
+ }
+ .idle:hover {
+ text-decoration: underline;
}
.busy {
color: #aaa;
cursor: wait;
+ text-decoration: none;
}
</style>
@@ -989,7 +994,12 @@ hr {
<span class="busy">[{{ label }}]</span>
</template>
<template if="{{ !busy }}">
- <span class="idle"><a on-click="{{ doAction }}">[{{ label }}]</a></span>
+ <template if="{{ color == null }}">
+ <span class="idle"><a on-click="{{ doAction }}">[{{ label }}]</a></span>
+ </template>
+ <template if="{{ color != null }}">
+ <span class="idle" style="color:{{ color }}"><a on-click="{{ doAction }}">[{{ label }}]</a></span>
+ </template>
</template>
</template>
</polymer-element>
@@ -1002,6 +1012,7 @@ hr {
+
<polymer-element name="nav-bar" extends="observatory-element">
<template>
<style>
@@ -1556,27 +1567,27 @@ hr {
background: rgba(255,255,255,0.5);
}
</style>
- <template if="{{ event.eventType == 'IsolateInterrupted' }}">
+ <template if="{{ event.eventType == 'IsolateInterrupted' ||
+ event.eventType == 'BreakpointReached' ||
+ event.eventType == 'ExceptionThrown' }}">
<div class="item">
Isolate
<a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
is paused
- <a class="boxclose" on-click="{{ closeItem }}">×</a>
- </div>
- </template>
- <template if="{{ event.eventType == 'BreakpointReached' }}">
- <div class="item">
- Isolate
- <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
- is paused at breakpoint {{ event.breakpoint['id'] }}
- <a class="boxclose" on-click="{{ closeItem }}">×</a>
- </div>
- </template>
- <template if="{{ event.eventType == 'ExceptionThrown' }}">
- <div class="item">
- Isolate
- <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
- is paused at exception
+ <template if="{{ event.breakpoint != null }}">
+ at breakpoint
+ </template>
+ <template if="{{ event.eventType == 'ExceptionThrown' }}">
+ at exception
+ </template>
+
+ <br><br>
+ <action-link callback="{{ resume }}" label="resume" color="white">
+ </action-link>
+ <action-link callback="{{ stepInto }}" label="step" color="white">
+ </action-link>
+ <action-link callback="{{ stepOver }}" label="step&nbsp;over" color="white"></action-link>
+ <action-link callback="{{ stepOut }}" label="step&nbsp;out" color="white"></action-link>
<a class="boxclose" on-click="{{ closeItem }}">×</a>
</div>
</template>
@@ -3450,24 +3461,39 @@ hr {
<content></content>
<div class="sourceBox" style="height:{{height}}">
<div class="sourceTable">
- <template repeat="{{ line in lines }}">
- <div class="sourceRow" id="{{ makeLineId(line.line) }}">
- <template if="{{ line.hits == null }}">
- <div class="hitsNone">{{ line.line }}</div>
- </template>
- <template if="{{ line.hits == 0 }}">
- <div class="hitsNotExecuted">{{ line.line }}</div>
- </template>
- <template if="{{ line.hits > 0 }}">
- <div class="hitsExecuted">{{ line.line }}</div>
- </template>
- <div class="sourceItem">&nbsp;</div>
- <template if="{{ line.line == currentLine }}">
- <div id="currentLine" class="sourceItemCurrent">{{line.text}}</div>
- </template>
- <template if="{{ line.line != currentLine }}">
- <div class="sourceItem">{{line.text}}</div>
- </template>
+ <template if="{{ linesReady }}">
+ <template repeat="{{ line in lines }}">
+ <div class="sourceRow" id="{{ makeLineId(line.line) }}">
+ <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>
+
+ <div class="sourceItem">&nbsp;</div>
+
+ <template if="{{ line.hits == null ||
+ line.hits < 0 }}">
+ <div class="hitsNone">{{ line.line }}</div>
+ </template>
+ <template if="{{ line.hits == 0 }}">
+ <div class="hitsNotExecuted">{{ line.line }}</div>
+ </template>
+ <template if="{{ line.hits > 0 }}">
+ <div class="hitsExecuted">{{ line.line }}</div>
+ </template>
+
+ <div class="sourceItem">&nbsp;</div>
+
+ <template if="{{ line.line == currentLine }}">
+ <div class="sourceItemCurrent">{{line.text}}</div>
+ </template>
+ <template if="{{ line.line != currentLine }}">
+ <div class="sourceItem">{{line.text}}</div>
+ </template>
+ </div>
+ </template>
+ </template>
+
+ <template if="{{ !linesReady }}">
+ <div class="sourceRow">
+ <div class="sourceItem">loading...</div>
</div>
</template>
</div>
@@ -3476,6 +3502,68 @@ hr {
</template>
</polymer-element>
+<polymer-element name="breakpoint-toggle" extends="observatory-element">
+ <template>
+ <style>
+ .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpoint, .resolvedBreakpoint {
+ display: table-cell;
+ vertical-align: top;
+ font: 400 14px consolas, courier, monospace;
+ min-width: 1em;
+ text-align: center;
+ cursor: pointer;
+ }
+ .possibleBreakpoint {
+ color: #e0e0e0;
+ }
+ .possibleBreakpoint:hover {
+ color: white;
+ background-color: #777;
+ }
+ .busyBreakpoint {
+ color: white;
+ background-color: black;
+ cursor: wait;
+ }
+ .unresolvedBreakpoint {
+ color: white;
+ background-color: #cac;
+ }
+ .resolvedBreakpoint {
+ color: white;
+ background-color: #e66;
+ }
+ </style>
+
+ <template if="{{ line.possibleBpt &amp;&amp; busy}}">
+ <div class="busyBreakpoint">B</div>
+ </template>
+
+ <template if="{{ line.bpt == null &amp;&amp; !line.possibleBpt }}">
+ <div class="emptyBreakpoint">&nbsp;</div>
+ </template>
+
+ <template if="{{ line.bpt == null &amp;&amp; line.possibleBpt &amp;&amp; !busy}}">
+ <div class="possibleBreakpoint">
+ <a on-click="{{ toggleBreakpoint }}">B</a>
+ </div>
+ </template>
+
+ <template if="{{ line.bpt != null &amp;&amp; !line.bpt['resolved'] &amp;&amp; !busy}}">
+ <div class="unresolvedBreakpoint">
+ <a on-click="{{ toggleBreakpoint }}">B</a>
+ </div>
+ </template>
+
+ <template if="{{ line.bpt != null &amp;&amp; line.bpt['resolved'] &amp;&amp; !busy}}">
+ <div class="resolvedBreakpoint">
+ <a on-click="{{ toggleBreakpoint }}">B</a>
+ </div>
+ </template>
+
+ </template>
+</polymer-element>
+
@@ -12751,10 +12839,10 @@ hr {
<div class="flex-item-10-percent">
<isolate-ref ref="{{ isolate }}"></isolate-ref>
</div>
- <div class="flex-item-20-percent">
+ <div class="flex-item-30-percent">
<isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
</div>
- <div class="flex-item-50-percent">
+ <div class="flex-item-40-percent">
<isolate-location isolate="{{ isolate }}"></isolate-location>
</div>
<div class="flex-item-10-percent">
@@ -12779,6 +12867,10 @@ hr {
<template if="{{ isolate.pauseEvent != null }}">
<strong>paused</strong>
<action-link callback="{{ resume }}" label="resume"></action-link>
+
+ <action-link callback="{{ stepInto }}" label="step"></action-link>
+ <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-link>
+ <action-link callback="{{ stepOut }}" label="step&nbsp;out"></action-link>
</template>
<template if="{{ isolate.running }}">
@@ -12803,27 +12895,25 @@ hr {
<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' }}">
+
+ <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
+ isolate.pauseEvent.eventType == 'BreakpointReached' ||
+ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
+ <template if="{{ isolate.pauseEvent.breakpoint != null }}">
+ by breakpoint
+ </template>
+ <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
+ by exception
+ </template>
at
<function-ref ref="{{ isolate.topFrame['function'] }}">
</function-ref>
(<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
</template>
- <template if="{{ isolate.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 if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
- at exception
- <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 }}">
@@ -13466,10 +13556,10 @@ hr {
<div class="flex-row">
<div class="flex-item-10-percent">
</div>
- <div class="flex-item-20-percent">
+ <div class="flex-item-30-percent">
<isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
</div>
- <div class="flex-item-60-percent">
+ <div class="flex-item-50-percent">
<isolate-location isolate="{{ isolate }}"></isolate-location>
</div>
<div class="flex-item-10-percent">

Powered by Google App Engine
This is Rietveld 408576698