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

Side by Side 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, 4 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 unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 <!DOCTYPE html><html><head> 1 <!DOCTYPE html><html><head>
2 <title>Dart VM Observatory</title> 2 <title>Dart VM Observatory</title>
3 <meta charset="utf-8"> 3 <meta charset="utf-8">
4 4
5 5
6 6
7 7
8 8
9 9
10 10
(...skipping 960 matching lines...) Expand 10 before | Expand all | Expand 10 after
971 </span> 971 </span>
972 </template> 972 </template>
973 </polymer-element> 973 </polymer-element>
974 974
975 <polymer-element name="action-link"> 975 <polymer-element name="action-link">
976 <template> 976 <template>
977 <style> 977 <style>
978 .idle { 978 .idle {
979 color: #0489c3; 979 color: #0489c3;
980 cursor: pointer; 980 cursor: pointer;
981 text-decoration: none;
982 }
983 .idle:hover {
984 text-decoration: underline;
981 } 985 }
982 .busy { 986 .busy {
983 color: #aaa; 987 color: #aaa;
984 cursor: wait; 988 cursor: wait;
989 text-decoration: none;
985 } 990 }
986 </style> 991 </style>
987 992
988 <template if="{{ busy }}"> 993 <template if="{{ busy }}">
989 <span class="busy">[{{ label }}]</span> 994 <span class="busy">[{{ label }}]</span>
990 </template> 995 </template>
991 <template if="{{ !busy }}"> 996 <template if="{{ !busy }}">
992 <span class="idle"><a on-click="{{ doAction }}">[{{ label }}]</a></span> 997 <template if="{{ color == null }}">
998 <span class="idle"><a on-click="{{ doAction }}">[{{ label }}]</a></span>
999 </template>
1000 <template if="{{ color != null }}">
1001 <span class="idle" style="color:{{ color }}"><a on-click="{{ doAction }} ">[{{ label }}]</a></span>
1002 </template>
993 </template> 1003 </template>
994 </template> 1004 </template>
995 </polymer-element> 1005 </polymer-element>
996 1006
997 1007
998 1008
999 1009
1000 1010
1001 1011
1002 1012
1003 1013
1004 1014
1015
1005 <polymer-element name="nav-bar" extends="observatory-element"> 1016 <polymer-element name="nav-bar" extends="observatory-element">
1006 <template> 1017 <template>
1007 <style> 1018 <style>
1008 /* Global styles */ 1019 /* Global styles */
1009 * { 1020 * {
1010 margin: 0; 1021 margin: 0;
1011 padding: 0; 1022 padding: 0;
1012 font: 400 14px 'Montserrat', sans-serif; 1023 font: 400 14px 'Montserrat', sans-serif;
1013 color: #333; 1024 color: #333;
1014 box-sizing: border-box; 1025 box-sizing: border-box;
(...skipping 534 matching lines...) Expand 10 before | Expand all | Expand 10 after
1549 border-radius: 9px; 1560 border-radius: 9px;
1550 color: white; 1561 color: white;
1551 font-size: 18px; 1562 font-size: 18px;
1552 cursor: pointer; 1563 cursor: pointer;
1553 text-align: center; 1564 text-align: center;
1554 } 1565 }
1555 a.boxclose:hover { 1566 a.boxclose:hover {
1556 background: rgba(255,255,255,0.5); 1567 background: rgba(255,255,255,0.5);
1557 } 1568 }
1558 </style> 1569 </style>
1559 <template if="{{ event.eventType == 'IsolateInterrupted' }}"> 1570 <template if="{{ event.eventType == 'IsolateInterrupted' ||
1571 event.eventType == 'BreakpointReached' ||
1572 event.eventType == 'ExceptionThrown' }}">
1560 <div class="item"> 1573 <div class="item">
1561 Isolate 1574 Isolate
1562 <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a> 1575 <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
1563 is paused 1576 is paused
1577 <template if="{{ event.breakpoint != null }}">
1578 at breakpoint
1579 </template>
1580 <template if="{{ event.eventType == 'ExceptionThrown' }}">
1581 at exception
1582 </template>
1583
1584 <br><br>
1585 <action-link callback="{{ resume }}" label="resume" color="white">
1586 </action-link>
1587 <action-link callback="{{ stepInto }}" label="step" color="white">
1588 </action-link>
1589 <action-link callback="{{ stepOver }}" label="step&nbsp;over" color="whi te"></action-link>
1590 <action-link callback="{{ stepOut }}" label="step&nbsp;out" color="white "></action-link>
1564 <a class="boxclose" on-click="{{ closeItem }}">×</a> 1591 <a class="boxclose" on-click="{{ closeItem }}">×</a>
1565 </div> 1592 </div>
1566 </template> 1593 </template>
1567 <template if="{{ event.eventType == 'BreakpointReached' }}">
1568 <div class="item">
1569 Isolate
1570 <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
1571 is paused at breakpoint {{ event.breakpoint['id'] }}
1572 <a class="boxclose" on-click="{{ closeItem }}">×</a>
1573 </div>
1574 </template>
1575 <template if="{{ event.eventType == 'ExceptionThrown' }}">
1576 <div class="item">
1577 Isolate
1578 <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
1579 is paused at exception
1580 <a class="boxclose" on-click="{{ closeItem }}">×</a>
1581 </div>
1582 </template>
1583 </template> 1594 </template>
1584 </polymer-element> 1595 </polymer-element>
1585 1596
1586 1597
1587 1598
1588 <polymer-element name="breakpoint-list" extends="observatory-element"> 1599 <polymer-element name="breakpoint-list" extends="observatory-element">
1589 <template> 1600 <template>
1590 <style> 1601 <style>
1591 /* Global styles */ 1602 /* Global styles */
1592 * { 1603 * {
(...skipping 1850 matching lines...) Expand 10 before | Expand all | Expand 10 after
3443 background-color: #e66; 3454 background-color: #e66;
3444 } 3455 }
3445 .hitsExecuted { 3456 .hitsExecuted {
3446 background-color: #6d6; 3457 background-color: #6d6;
3447 } 3458 }
3448 </style> 3459 </style>
3449 <div class="sourceInset"> 3460 <div class="sourceInset">
3450 <content></content> 3461 <content></content>
3451 <div class="sourceBox" style="height:{{height}}"> 3462 <div class="sourceBox" style="height:{{height}}">
3452 <div class="sourceTable"> 3463 <div class="sourceTable">
3453 <template repeat="{{ line in lines }}"> 3464 <template if="{{ linesReady }}">
3454 <div class="sourceRow" id="{{ makeLineId(line.line) }}"> 3465 <template repeat="{{ line in lines }}">
3455 <template if="{{ line.hits == null }}"> 3466 <div class="sourceRow" id="{{ makeLineId(line.line) }}">
3456 <div class="hitsNone">{{ line.line }}</div> 3467 <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>
3457 </template> 3468
3458 <template if="{{ line.hits == 0 }}"> 3469 <div class="sourceItem">&nbsp;</div>
3459 <div class="hitsNotExecuted">{{ line.line }}</div> 3470
3460 </template> 3471 <template if="{{ line.hits == null ||
3461 <template if="{{ line.hits > 0 }}"> 3472 line.hits < 0 }}">
3462 <div class="hitsExecuted">{{ line.line }}</div> 3473 <div class="hitsNone">{{ line.line }}</div>
3463 </template> 3474 </template>
3464 <div class="sourceItem">&nbsp;</div> 3475 <template if="{{ line.hits == 0 }}">
3465 <template if="{{ line.line == currentLine }}"> 3476 <div class="hitsNotExecuted">{{ line.line }}</div>
3466 <div id="currentLine" class="sourceItemCurrent">{{line.text}}</d iv> 3477 </template>
3467 </template> 3478 <template if="{{ line.hits > 0 }}">
3468 <template if="{{ line.line != currentLine }}"> 3479 <div class="hitsExecuted">{{ line.line }}</div>
3469 <div class="sourceItem">{{line.text}}</div> 3480 </template>
3470 </template> 3481
3482 <div class="sourceItem">&nbsp;</div>
3483
3484 <template if="{{ line.line == currentLine }}">
3485 <div class="sourceItemCurrent">{{line.text}}</div>
3486 </template>
3487 <template if="{{ line.line != currentLine }}">
3488 <div class="sourceItem">{{line.text}}</div>
3489 </template>
3490 </div>
3491 </template>
3492 </template>
3493
3494 <template if="{{ !linesReady }}">
3495 <div class="sourceRow">
3496 <div class="sourceItem">loading...</div>
3471 </div> 3497 </div>
3472 </template> 3498 </template>
3473 </div> 3499 </div>
3474 </div> 3500 </div>
3475 </div> 3501 </div>
3476 </template> 3502 </template>
3477 </polymer-element> 3503 </polymer-element>
3478 3504
3505 <polymer-element name="breakpoint-toggle" extends="observatory-element">
3506 <template>
3507 <style>
3508 .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpo int, .resolvedBreakpoint {
3509 display: table-cell;
3510 vertical-align: top;
3511 font: 400 14px consolas, courier, monospace;
3512 min-width: 1em;
3513 text-align: center;
3514 cursor: pointer;
3515 }
3516 .possibleBreakpoint {
3517 color: #e0e0e0;
3518 }
3519 .possibleBreakpoint:hover {
3520 color: white;
3521 background-color: #777;
3522 }
3523 .busyBreakpoint {
3524 color: white;
3525 background-color: black;
3526 cursor: wait;
3527 }
3528 .unresolvedBreakpoint {
3529 color: white;
3530 background-color: #cac;
3531 }
3532 .resolvedBreakpoint {
3533 color: white;
3534 background-color: #e66;
3535 }
3536 </style>
3537
3538 <template if="{{ line.possibleBpt &amp;&amp; busy}}">
3539 <div class="busyBreakpoint">B</div>
3540 </template>
3541
3542 <template if="{{ line.bpt == null &amp;&amp; !line.possibleBpt }}">
3543 <div class="emptyBreakpoint">&nbsp;</div>
3544 </template>
3545
3546 <template if="{{ line.bpt == null &amp;&amp; line.possibleBpt &amp;&amp; !bu sy}}">
3547 <div class="possibleBreakpoint">
3548 <a on-click="{{ toggleBreakpoint }}">B</a>
3549 </div>
3550 </template>
3551
3552 <template if="{{ line.bpt != null &amp;&amp; !line.bpt['resolved'] &amp;&amp ; !busy}}">
3553 <div class="unresolvedBreakpoint">
3554 <a on-click="{{ toggleBreakpoint }}">B</a>
3555 </div>
3556 </template>
3557
3558 <template if="{{ line.bpt != null &amp;&amp; line.bpt['resolved'] &amp;&amp; !busy}}">
3559 <div class="resolvedBreakpoint">
3560 <a on-click="{{ toggleBreakpoint }}">B</a>
3561 </div>
3562 </template>
3563
3564 </template>
3565 </polymer-element>
3566
3479 3567
3480 3568
3481 3569
3482 3570
3483 3571
3484 <polymer-element name="script-ref" extends="service-ref"> 3572 <polymer-element name="script-ref" extends="service-ref">
3485 <template> 3573 <template>
3486 <style> 3574 <style>
3487 /* Global styles */ 3575 /* Global styles */
3488 * { 3576 * {
(...skipping 9255 matching lines...) Expand 10 before | Expand all | Expand 10 after
12744 word-wrap: break-word; 12832 word-wrap: break-word;
12745 } 12833 }
12746 </style> 12834 </style>
12747 <div class="flex-row"> 12835 <div class="flex-row">
12748 <div class="flex-item-10-percent"> 12836 <div class="flex-item-10-percent">
12749 <img src="packages/observatory/src/elements/img/isolate_icon.png"> 12837 <img src="packages/observatory/src/elements/img/isolate_icon.png">
12750 </div> 12838 </div>
12751 <div class="flex-item-10-percent"> 12839 <div class="flex-item-10-percent">
12752 <isolate-ref ref="{{ isolate }}"></isolate-ref> 12840 <isolate-ref ref="{{ isolate }}"></isolate-ref>
12753 </div> 12841 </div>
12754 <div class="flex-item-20-percent"> 12842 <div class="flex-item-30-percent">
12755 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state> 12843 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
12756 </div> 12844 </div>
12757 <div class="flex-item-50-percent"> 12845 <div class="flex-item-40-percent">
12758 <isolate-location isolate="{{ isolate }}"></isolate-location> 12846 <isolate-location isolate="{{ isolate }}"></isolate-location>
12759 </div> 12847 </div>
12760 <div class="flex-item-10-percent"> 12848 <div class="flex-item-10-percent">
12761 </div> 12849 </div>
12762 </div> 12850 </div>
12763 12851
12764 <div class="flex-row"> 12852 <div class="flex-row">
12765 <div class="flex-item-20-percent"></div> 12853 <div class="flex-item-20-percent"></div>
12766 <div class="flex-item-60-percent"> 12854 <div class="flex-item-60-percent">
12767 <hr> 12855 <hr>
12768 </div> 12856 </div>
12769 <div class="flex-item-20-percent"></div> 12857 <div class="flex-item-20-percent"></div>
12770 </div> 12858 </div>
12771 12859
12772 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary> 12860 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
12773 12861
12774 </template> 12862 </template>
12775 </polymer-element> 12863 </polymer-element>
12776 12864
12777 <polymer-element name="isolate-run-state" extends="observatory-element"> 12865 <polymer-element name="isolate-run-state" extends="observatory-element">
12778 <template> 12866 <template>
12779 <template if="{{ isolate.pauseEvent != null }}"> 12867 <template if="{{ isolate.pauseEvent != null }}">
12780 <strong>paused</strong> 12868 <strong>paused</strong>
12781 <action-link callback="{{ resume }}" label="resume"></action-link> 12869 <action-link callback="{{ resume }}" label="resume"></action-link>
12870
12871 <action-link callback="{{ stepInto }}" label="step"></action-link>
12872 <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-lin k>
12873 <action-link callback="{{ stepOut }}" label="step&nbsp;out"></action-link>
12782 </template> 12874 </template>
12783 12875
12784 <template if="{{ isolate.running }}"> 12876 <template if="{{ isolate.running }}">
12785 <strong>running</strong> 12877 <strong>running</strong>
12786 <action-link callback="{{ pause }}" label="pause"></action-link> 12878 <action-link callback="{{ pause }}" label="pause"></action-link>
12787 </template> 12879 </template>
12788 12880
12789 <template if="{{ isolate.idle }}"> 12881 <template if="{{ isolate.idle }}">
12790 <strong>idle</strong> 12882 <strong>idle</strong>
12791 <action-link callback="{{ pause }}" label="pause"></action-link> 12883 <action-link callback="{{ pause }}" label="pause"></action-link>
12792 </template> 12884 </template>
12793 12885
12794 <template if="{{ isolate.loading }}"> 12886 <template if="{{ isolate.loading }}">
12795 <strong>loading...</strong> 12887 <strong>loading...</strong>
12796 </template> 12888 </template>
12797 </template> 12889 </template>
12798 </polymer-element> 12890 </polymer-element>
12799 12891
12800 <polymer-element name="isolate-location" extends="observatory-element"> 12892 <polymer-element name="isolate-location" extends="observatory-element">
12801 <template> 12893 <template>
12802 <template if="{{ isolate.pauseEvent != null }}"> 12894 <template if="{{ isolate.pauseEvent != null }}">
12803 <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}"> 12895 <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}">
12804 at isolate start 12896 at isolate start
12805 </template> 12897 </template>
12898
12806 <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}"> 12899 <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}">
12807 at isolate exit 12900 at isolate exit
12808 </template> 12901 </template>
12809 <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' }}"> 12902
12903 <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
12904 isolate.pauseEvent.eventType == 'BreakpointReached' ||
12905 isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
12906 <template if="{{ isolate.pauseEvent.breakpoint != null }}">
12907 by breakpoint
12908 </template>
12909 <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
12910 by exception
12911 </template>
12810 at 12912 at
12811 <function-ref ref="{{ isolate.topFrame['function'] }}"> 12913 <function-ref ref="{{ isolate.topFrame['function'] }}">
12812 </function-ref> 12914 </function-ref>
12813 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>) 12915 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
12814 </template> 12916 </template>
12815 <template if="{{ isolate.pauseEvent.eventType == 'BreakpointReached' }}">
12816 at breakpoint {{ isolate.pauseEvent.breakpoint['id'] }}
12817 <function-ref ref="{{ isolate.topFrame['function'] }}">
12818 </function-ref>
12819 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
12820 </template>
12821 <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
12822 at exception
12823 <function-ref ref="{{ isolate.topFrame['function'] }}">
12824 </function-ref>
12825 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
12826 </template>
12827 </template> 12917 </template>
12828 12918
12829 <template if="{{ isolate.running }}"> 12919 <template if="{{ isolate.running }}">
12830 at 12920 at
12831 <function-ref ref="{{ isolate.topFrame['function'] }}"> 12921 <function-ref ref="{{ isolate.topFrame['function'] }}">
12832 </function-ref> 12922 </function-ref>
12833 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>) 12923 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>)
12834 </template> 12924 </template>
12835 12925
12836 </template> 12926 </template>
(...skipping 622 matching lines...) Expand 10 before | Expand all | Expand 10 after
13459 </nav-bar> 13549 </nav-bar>
13460 13550
13461 <div class="content"> 13551 <div class="content">
13462 <h1>isolate '{{ isolate.name }}'</h1> 13552 <h1>isolate '{{ isolate.name }}'</h1>
13463 </div> 13553 </div>
13464 13554
13465 <br> 13555 <br>
13466 <div class="flex-row"> 13556 <div class="flex-row">
13467 <div class="flex-item-10-percent"> 13557 <div class="flex-item-10-percent">
13468 </div> 13558 </div>
13469 <div class="flex-item-20-percent"> 13559 <div class="flex-item-30-percent">
13470 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state> 13560 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
13471 </div> 13561 </div>
13472 <div class="flex-item-60-percent"> 13562 <div class="flex-item-50-percent">
13473 <isolate-location isolate="{{ isolate }}"></isolate-location> 13563 <isolate-location isolate="{{ isolate }}"></isolate-location>
13474 </div> 13564 </div>
13475 <div class="flex-item-10-percent"> 13565 <div class="flex-item-10-percent">
13476 </div> 13566 </div>
13477 </div> 13567 </div>
13478 <br> 13568 <br>
13479 13569
13480 <template if="{{ isolate.topFrame != null }}"> 13570 <template if="{{ isolate.topFrame != null }}">
13481 <br> 13571 <br>
13482 <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ iso late.topFrame['tokenPos'] }}" height="200px"> 13572 <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ iso late.topFrame['tokenPos'] }}" height="200px">
(...skipping 4160 matching lines...) Expand 10 before | Expand all | Expand 10 after
17643 </style> 17733 </style>
17644 <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a> 17734 <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a>
17645 </template> 17735 </template>
17646 </polymer-element> 17736 </polymer-element>
17647 17737
17648 17738
17649 17739
17650 <observatory-application devtools="true"></observatory-application> 17740 <observatory-application devtools="true"></observatory-application>
17651 17741
17652 <script src="index_devtools.html_bootstrap.dart.js" async=""></script></body></h tml> 17742 <script src="index_devtools.html_bootstrap.dart.js" async=""></script></body></h tml>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698