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 over" color="white"></action-link> |
+ <action-link callback="{{ stepOut }}" label="step 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"> </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"> </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"> </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 && busy}}"> |
+ <div class="busyBreakpoint">B</div> |
+ </template> |
+ |
+ <template if="{{ line.bpt == null && !line.possibleBpt }}"> |
+ <div class="emptyBreakpoint"> </div> |
+ </template> |
+ |
+ <template if="{{ line.bpt == null && line.possibleBpt && !busy}}"> |
+ <div class="possibleBreakpoint"> |
+ <a on-click="{{ toggleBreakpoint }}">B</a> |
+ </div> |
+ </template> |
+ |
+ <template if="{{ line.bpt != null && !line.bpt['resolved'] && !busy}}"> |
+ <div class="unresolvedBreakpoint"> |
+ <a on-click="{{ toggleBreakpoint }}">B</a> |
+ </div> |
+ </template> |
+ |
+ <template if="{{ line.bpt != null && line.bpt['resolved'] && !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 over"></action-link> |
+ <action-link callback="{{ stepOut }}" label="step 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"> |