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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: runtime/bin/vmservice/client/deployed/web/index.html

Issue 194623006: Improve the instance-view page in observatory. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: gen js / fix stuff Created 6 years, 9 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
« no previous file with comments | « no previous file | runtime/bin/vmservice/client/deployed/web/index.html_bootstrap.dart.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html><html><head> 1 <!DOCTYPE html><html><head>
2 2
3 3
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <link type="text/css" rel="stylesheet" href="bootstrap_css/css/bootstrap.min.c ss"> 5 <link type="text/css" rel="stylesheet" href="bootstrap_css/css/bootstrap.min.c ss">
6 6
7 <title>Dart VM Observatory</title> 7 <title>Dart VM Observatory</title>
8 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 8 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
9 9
10 10
(...skipping 291 matching lines...) Expand 10 before | Expand all | Expand 10 after
302 </template> 302 </template>
303 </template> 303 </template>
304 </template> 304 </template>
305 305
306 </polymer-element> 306 </polymer-element>
307 <polymer-element name="instance-ref" extends="service-ref"> 307 <polymer-element name="instance-ref" extends="service-ref">
308 <template> 308 <template>
309 <style> 309 <style>
310 .member { 310 .member {
311 vertical-align: top; 311 vertical-align: top;
312 padding: 0 0 0 1em; 312 padding: 1px 0 1px 1em;
313 } 313 }
314 </style> 314 </style>
315 <div> 315 <div>
316 <template if="{{ isUnexpected(ref.serviceType) }}"> 316 <template if="{{ isUnexpected(ref.serviceType) }}">
317 unexpected reference type &lt;{{ ref['type'] }}&gt; 317 unexpected reference type &lt;{{ ref.serviceType }}&gt;
318 </template>
319
320 <template if="{{ isError(ref.serviceType) }}">
321 <pre>{{ ref.message }}</pre>
318 </template> 322 </template>
319 323
320 <template if="{{ isNull(ref.serviceType) }}"> 324 <template if="{{ isNull(ref.serviceType) }}">
321 <div title="{{ hoverText }}">{{ ref['preview'] }}</div> 325 <div title="{{ hoverText }}">{{ ref['preview'] }}</div>
322 </template> 326 </template>
323 327
324 <template if="{{ (isString(ref.serviceType) || 328 <template if="{{ (isString(ref.serviceType) ||
325 isBool(ref.serviceType) || 329 isBool(ref.serviceType) ||
326 isInt(ref.serviceType)) }}"> 330 isInt(ref.serviceType)) }}">
327 <a href="{{ url }}">{{ ref['preview'] }}</a> 331 <a href="{{ url }}">{{ ref['preview'] }}</a>
(...skipping 132 matching lines...) Expand 10 before | Expand all | Expand 10 after
460 <template> 464 <template>
461 <style> 465 <style>
462 .monospace { 466 .monospace {
463 font-family: consolas, courier, monospace; 467 font-family: consolas, courier, monospace;
464 font-size: 1em; 468 font-size: 1em;
465 line-height: 1.2em; 469 line-height: 1.2em;
466 white-space: nowrap; 470 white-space: nowrap;
467 } 471 }
468 </style> 472 </style>
469 <div class="row"> 473 <div class="row">
470 <div class="col-md-2 monospace">{{ instruction.formattedAddress() }}</div>
471 <div class="col-md-2 monospace">{{ instruction.formattedInclusive(code) }} </div> 474 <div class="col-md-2 monospace">{{ instruction.formattedInclusive(code) }} </div>
472 <div class="col-md-2 monospace">{{ instruction.formattedExclusive(code) }} </div> 475 <div class="col-md-2 monospace">{{ instruction.formattedExclusive(code) }} </div>
476 <div class="col-md-2 monospace">{{ instruction.formattedAddress() }}</div>
473 <div class="col-md-6 monospace">{{ instruction.human }}</div> 477 <div class="col-md-6 monospace">{{ instruction.human }}</div>
474 </div> 478 </div>
475 </template> 479 </template>
476 480
477 </polymer-element><polymer-element name="code-view" extends="observatory-element "> 481 </polymer-element><polymer-element name="code-view" extends="observatory-element ">
478 <template> 482 <template>
479 <nav-bar> 483 <nav-bar>
480 <top-nav-menu></top-nav-menu> 484 <top-nav-menu></top-nav-menu>
481 <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu> 485 <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu>
482 <nav-menu link="." anchor="{{ code.name }}" last="{{ true }}"></nav-menu> 486 <nav-menu link="." anchor="{{ code.name }}" last="{{ true }}"></nav-menu>
483 <nav-refresh callback="{{ refresh }}"></nav-refresh> 487 <nav-refresh callback="{{ refresh }}"></nav-refresh>
484 </nav-bar> 488 </nav-bar>
485 489
486 <div class="row"> 490 <div class="row">
487 <div class="col-md-8 col-md-offset-2"> 491 <div class="col-md-8 col-md-offset-2">
488 <div class="{{ cssPanelClass }}"> 492 <div class="{{ cssPanelClass }}">
489 <div class="panel-heading"> 493 <div class="panel-heading">
490 <span>Disassembled code for function: </span> 494 <span>Disassembled code for function: </span>
491 <function-ref ref="{{ code.function }}"></function-ref> 495 <function-ref ref="{{ code.function }}"></function-ref>
492 </div> 496 </div>
493 <div class="panel-body"> 497 <div class="panel-body">
494 <div class="row"> 498 <div class="row">
495 <div class="col-md-2"><strong>Address</strong></div>
496 <div class="col-md-2"><strong>Inclusive</strong></div> 499 <div class="col-md-2"><strong>Inclusive</strong></div>
497 <div class="col-md-2"><strong>Exclusive</strong></div> 500 <div class="col-md-2"><strong>Exclusive</strong></div>
501 <div class="col-md-2"><strong>Address</strong></div>
498 <div class="col-md-6"><strong>Disassembly</strong></div> 502 <div class="col-md-6"><strong>Disassembly</strong></div>
499 </div> 503 </div>
500 <template repeat="{{ instruction in code.instructions }}"> 504 <template repeat="{{ instruction in code.instructions }}">
501 <disassembly-entry code="{{ code }}" instruction="{{ instruction }}" > 505 <disassembly-entry code="{{ code }}" instruction="{{ instruction }}" >
502 </disassembly-entry> 506 </disassembly-entry>
503 </template> 507 </template>
504 </div> 508 </div>
505 </div> 509 </div>
506 </div> 510 </div>
507 </div> 511 </div>
508 </template> 512 </template>
509 513
510 </polymer-element> 514 </polymer-element>
511 <polymer-element name="collapsible-content" extends="observatory-element"> 515 <polymer-element name="collapsible-content" extends="observatory-element">
512 <template> 516 <template>
513 <div class="well row"> 517 <div class="well row">
514 <a on-click="toggleDisplay" class="btn muted unselectable"> 518 <a on-click="toggleDisplay" class="btn muted unselectable">
515 Raw message... <i class="{{ iconClass }}"></i> 519 Raw message... <i class="{{ iconClass }}"></i>
516 </a> 520 </a>
517 <div style="display: {{ displayValue }}" class="well"> 521 <div style="display: {{ displayValue }}" class="well">
518 <content></content> 522 <content></content>
519 </div> 523 </div>
520 </div> 524 </div>
521 </template> 525 </template>
522 526
523 </polymer-element><polymer-element name="field-view" extends="observatory-elemen t"> 527 </polymer-element><polymer-element name="eval-box" extends="observatory-element" >
528 <template>
529 <style>
530 .textbox {
531 width: 80ex;
532 font: 400 16px 'Montserrat', sans-serif;
533 }
534 .bigtextbox {
535 font: 400 16px 'Montserrat', sans-serif;
536 }
537 .button {
538 font: 400 16px 'Montserrat', sans-serif;
539 }
540 .radios {
541 display: inline;
542 }
543 .radios label{
544 padding-left: 15px;
545 }
546 .historyExpr, .historyValue {
547 vertical-align: text-top;
548 font: 400 14px 'Montserrat', sans-serif;
549 }
550 .historyExpr a {
551 display: block;
552 color: black;
553 text-decoration: none;
554 padding: 6px 6px;
555 cursor: pointer;
556 white-space: pre-line;
557 }
558 .historyExpr a:hover {
559 background-color: #e1f5fe
560 }
561 .historyValue {
562 display: block;
563 padding: 6px 6px;
564 }
565 </style>
566 <form>
567 <template if="{{ lineMode == '1-line' }}">
568 <input class="textbox" type="text" value="{{ text }}">
569 </template>
570 <template if="{{ lineMode == 'N-line' }}">
571 <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></tex tarea>
572 </template>
573
574 <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}" >
575 <div class="radios" on-change="{{ updateLineMode }}">
576 <label for="1-line">1-line
577 <input type="radio" name="lineMode" value="1-line" checked="">
578 </label>
579 <label for="N-line">N-line
580 <input type="radio" name="lineMode" value="N-line">
581 </label>
582 </div>
583 </form>
584
585 <br>
586 <template if="{{ results.isNotEmpty }}">
587 <table>
588 <tbody><tr template="" repeat="{{ result in results }}">
589 <td class="historyExpr">
590 <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
591 </td>
592 <td class="historyValue">
593 <template if="{{ result['value'] == null }}">
594 <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
595 </template>
596 <template if="{{ result['value'] != null }}">
597 <instance-ref isolate="{{ isolate }}" ref="{{ result['value'] }}">
598 </instance-ref>
599 </template>
600 </td>
601 </tr>
602 </tbody></table>
603 </template>
604 </template>
605 </polymer-element>
606
607
608 <polymer-element name="field-view" extends="observatory-element">
524 <template> 609 <template>
525 <nav-bar> 610 <nav-bar>
526 <top-nav-menu></top-nav-menu> 611 <top-nav-menu></top-nav-menu>
527 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu> 612 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>
528 <template if="{{ field['owner'].serviceType == 'Class' }}"> 613 <template if="{{ field['owner'].serviceType == 'Class' }}">
529 <!-- TODO(turnidge): Add library nav menu here. --> 614 <!-- TODO(turnidge): Add library nav menu here. -->
530 <class-nav-menu cls="{{ field['owner'] }}"></class-nav-menu> 615 <class-nav-menu cls="{{ field['owner'] }}"></class-nav-menu>
531 </template> 616 </template>
532 <template if="{{ field['owner'].serviceType == 'Library' }}"> 617 <template if="{{ field['owner'].serviceType == 'Library' }}">
533 <library-nav-menu library="{{ field['owner'] }}"></library-nav-menu> 618 <library-nav-menu library="{{ field['owner'] }}"></library-nav-menu>
(...skipping 217 matching lines...) Expand 10 before | Expand all | Expand 10 after
751 836
752 </polymer-element> 837 </polymer-element>
753 <polymer-element name="instance-view" extends="observatory-element"> 838 <polymer-element name="instance-view" extends="observatory-element">
754 <template> 839 <template>
755 <nav-bar> 840 <nav-bar>
756 <top-nav-menu></top-nav-menu> 841 <top-nav-menu></top-nav-menu>
757 <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu> 842 <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
758 <!-- TODO(turnidge): Add library nav menu here. --> 843 <!-- TODO(turnidge): Add library nav menu here. -->
759 <class-nav-menu cls="{{ instance['class'] }}"></class-nav-menu> 844 <class-nav-menu cls="{{ instance['class'] }}"></class-nav-menu>
760 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu> 845 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
761 <!-- TODO(turnidge): Add nav refresh here. --> 846 <nav-refresh callback="{{ refresh }}"></nav-refresh>
762 </nav-bar> 847 </nav-bar>
763 848
764 <div class="row"> 849 <style>
765 <div class="col-md-8 col-md-offset-2"> 850 .content {
766 <div class="panel panel-warning"> 851 padding-left: 10%;
767 <div class="panel-heading"> 852 font: 400 14px 'Montserrat', sans-serif;
768 Instance of 853 }
769 <class-ref ref="{{ instance['class'] }}"></class-ref> 854 h1 {
770 </div> 855 font: 400 18px 'Montserrat', sans-serif;
771 <div class="panel-body"> 856 }
772 <template if="{{ instance['error'] == null }}"> 857 .member {
773 <table class="table table-hover"> 858 vertical-align: top;
774 <tbody> 859 padding: 3px 0 3px 1em;
775 <tr> 860 font: 400 14px 'Montserrat', sans-serif;
776 <td>Preview</td><td>{{ instance['preview'] }}</td> 861 }
777 </tr> 862 .memberBold {
778 </tbody> 863 vertical-align: top;
779 </table> 864 padding: 3px 0 3px 1em;
780 <blockquote><strong>Fields</strong></blockquote> 865 font: 400 14px 'Montserrat', sans-serif;
781 <table class="table table-hover"> 866 }
782 <tbody> 867 </style>
783 <tr template="" repeat="{{ field in instance['fields'] }}"> 868
784 <td><field-ref ref="{{ field['decl'] }}"></field-ref></td> 869 <template if="{{ instance['error'] != null }}">
785 <td><instance-ref ref="{{ field['value'] }}"></instance-ref></ td> 870 <error-view error_obj="{{ instance['error'] }}"></error-view>
786 </tr> 871 </template>
787 </tbody> 872
788 </table> 873 <template if="{{ instance['error'] == null }}">
789 </template> 874 <div class="content">
790 <template if="{{ instance['error'] != null }}"> 875 <!-- TODO(turnidge): Handle null instances. -->
791 <error-view error_obj="{{ instance['error'] }}"></error-view> 876 <h1>instance of {{ instance['class']['user_name'] }}</h1>
792 </template> 877 <table>
793 </div> 878 <tbody><tr>
879 <td class="memberBold">class</td>
880 <td class="member">
881 <class-ref ref="{{ instance['class'] }}">
882 </class-ref>
883 </td>
884 </tr>
885 <tr template="" if="{{ instance['preview'] != null }}">
886 <td class="memberBold">preview</td>
887 <td class="member">{{ instance['preview'] }}</td>
888 </tr>
889 <tr>
890 <td class="memberBold">size</td>
891 <td class="member">{{ instance['size'] | formatSize }}</td>
892 </tr>
893 </tbody></table>
794 </div> 894 </div>
795 </div> 895
796 </div> 896 <hr>
897
898 <div class="content">
899 <template if="{{ instance['fields'].isNotEmpty }}">
900 fields ({{ instance['fields'].length }})
901 <curly-block>
902 <table>
903 <tbody><tr template="" repeat="{{ field in instance['fields'] }}">
904 <td class="member">
905 <field-ref ref="{{ field['decl'] }}"></field-ref>
906 </td>
907 <td class="member">
908 <instance-ref ref="{{ field['value'] }}"></instance-ref>
909 </td>
910 </tr>
911 </tbody></table>
912 </curly-block>
913 </template>
914
915 <template if="{{ instance['nativeFields'].isNotEmpty }}">
916 native fields ({{ instance['nativeFields'].length }})
917 <curly-block>
918 <table>
919 <tbody><tr template="" repeat="{{ field in instance['nativeFields' ] }}">
920 <td class="member">[{{ field['index']}}]</td>
921 <td class="member">[{{ field['value']}}]</td>
922 </tr>
923 </tbody></table>
924 </curly-block>
925 </template>
926
927 <template if="{{ instance['elements'].isNotEmpty }}">
928 elements ({{ instance['elements'].length }})
929 <curly-block>
930 <table>
931 <tbody><tr template="" repeat="{{ element in instance['elements'] }}">
932 <td class="member">[{{ element['index']}}]</td>
933 <td class="member">
934 <instance-ref ref="{{ element['value'] }}">
935 </instance-ref>
936 </td>
937 </tr>
938 </tbody></table>
939 </curly-block>
940 </template>
941 </div>
942
943 <hr>
944
945 <div class="content">
946 <eval-box callback="{{ eval }}"></eval-box>
947 </div>
948 <br><br><br><br>
949 <br><br><br><br>
950 </template>
797 </template> 951 </template>
798 952
799 </polymer-element> 953 </polymer-element>
800 <polymer-element name="json-view" extends="observatory-element"> 954 <polymer-element name="json-view" extends="observatory-element">
801 <template> 955 <template>
802 <template bind="" if="{{ valueType == 'Primitive' }}"> 956 <template bind="" if="{{ valueType == 'Primitive' }}">
803 <span>{{primitiveString}}</span> 957 <span>{{primitiveString}}</span>
804 </template> 958 </template>
805 <template bind="" if="{{ valueType == 'List' }}"> 959 <template bind="" if="{{ valueType == 'List' }}">
806 <table class="table table-condensed table-bordered"> 960 <table class="table table-condensed table-bordered">
(...skipping 381 matching lines...) Expand 10 before | Expand all | Expand 10 after
1188 <template> 1342 <template>
1189 <response-viewer app="{{ app }}"></response-viewer> 1343 <response-viewer app="{{ app }}"></response-viewer>
1190 </template> 1344 </template>
1191 1345
1192 </polymer-element> 1346 </polymer-element>
1193 1347
1194 1348
1195 <observatory-application></observatory-application> 1349 <observatory-application></observatory-application>
1196 1350
1197 </body></html> 1351 </body></html>
OLDNEW
« no previous file with comments | « no previous file | runtime/bin/vmservice/client/deployed/web/index.html_bootstrap.dart.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698