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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 286903010: Add dart:io view to the observatory. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Add missing files. Created 6 years, 7 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 | « runtime/bin/service_object_patch.dart ('k') | 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 <meta charset="utf-8"> 2 <meta charset="utf-8">
3 <title>Dart VM Observatory</title> 3 <title>Dart VM Observatory</title>
4 4
5 5
6 6
7 7
8 8
9 9
10 </head> 10 </head>
(...skipping 316 matching lines...) Expand 10 before | Expand all | Expand 10 after
327 327
328 328
329 329
330 330
331 331
332 332
333 333
334 334
335 335
336 336
337
337 338
338 339
339 340
340 341
341 342
342 343
343 <polymer-element name="curly-block"> 344 <polymer-element name="curly-block">
344 <template> 345 <template>
345 <style> 346 <style>
346 .idle { 347 .idle {
(...skipping 4602 matching lines...) Expand 10 before | Expand all | Expand 10 after
4949 <div class="spacer"> 4950 <div class="spacer">
4950 <!-- Make sure no data is covered by hover bar initially --> 4951 <!-- Make sure no data is covered by hover bar initially -->
4951 </div> 4952 </div>
4952 <div class="flex-row"> 4953 <div class="flex-row">
4953 <canvas id="fragmentation" width="1px" height="1px"></canvas> 4954 <canvas id="fragmentation" width="1px" height="1px"></canvas>
4954 </div> 4955 </div>
4955 </template> 4956 </template>
4956 4957
4957 </polymer-element> 4958 </polymer-element>
4958 4959
4959 4960
4960 <polymer-element name="isolate-ref" extends="service-ref"> 4961
4961 <template><style> 4962
4963 <polymer-element name="io-view" extends="observatory-element">
4964 <template>
4965 <style>
4962 /* Global styles */ 4966 /* Global styles */
4963 * { 4967 * {
4964 margin: 0; 4968 margin: 0;
4965 padding: 0; 4969 padding: 0;
4966 font: 400 14px 'Montserrat', sans-serif; 4970 font: 400 14px 'Montserrat', sans-serif;
4967 color: #333; 4971 color: #333;
4968 box-sizing: border-box; 4972 box-sizing: border-box;
4969 } 4973 }
4970 4974
4971 .content { 4975 .content {
(...skipping 206 matching lines...) Expand 10 before | Expand all | Expand 10 after
5178 .well { 5182 .well {
5179 min-height: 20px; 5183 min-height: 20px;
5180 padding: 19px; 5184 padding: 19px;
5181 margin-bottom: 20px; 5185 margin-bottom: 20px;
5182 background-color: #f5f5f5; 5186 background-color: #f5f5f5;
5183 border: 1px solid #e3e3e3; 5187 border: 1px solid #e3e3e3;
5184 border-radius: 4px; 5188 border-radius: 4px;
5185 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 5189 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5186 } 5190 }
5187 </style> 5191 </style>
5188 <a href="{{ url }}">{{ ref.name }}</a>
5189 </template>
5190 5192
5193 <nav-bar>
5194 <top-nav-menu last="{{ true }}"></top-nav-menu>
5195 <nav-refresh callback="{{ refresh }}"></nav-refresh>
5196 </nav-bar>
5197
5198 <div class="content">
5199 <h1>dart:io</h1>
5200
5201 <br>
5202
5203 <ul class="list-group">
5204 <li class="list-group-item">
5205 <a href="{{io.isolate.relativeHashLink('io/http/servers')}}">HTTP Serv ers</a>
5206 </li>
5207 </ul>
5208 </div>
5209 <br>
5210 <hr>
5211 </template>
5191 </polymer-element> 5212 </polymer-element>
5192 5213
5193 5214 <polymer-element name="io-http-server-list-view" extends="observatory-element">
5194
5195
5196
5197
5198
5199 <polymer-element name="isolate-summary" extends="observatory-element">
5200 <template> 5215 <template>
5201 <style> 5216 <style>
5202 /* Global styles */ 5217 /* Global styles */
5203 * { 5218 * {
5204 margin: 0; 5219 margin: 0;
5205 padding: 0; 5220 padding: 0;
5206 font: 400 14px 'Montserrat', sans-serif; 5221 font: 400 14px 'Montserrat', sans-serif;
5207 color: #333; 5222 color: #333;
5208 box-sizing: border-box; 5223 box-sizing: border-box;
5209 } 5224 }
(...skipping 208 matching lines...) Expand 10 before | Expand all | Expand 10 after
5418 .well { 5433 .well {
5419 min-height: 20px; 5434 min-height: 20px;
5420 padding: 19px; 5435 padding: 19px;
5421 margin-bottom: 20px; 5436 margin-bottom: 20px;
5422 background-color: #f5f5f5; 5437 background-color: #f5f5f5;
5423 border: 1px solid #e3e3e3; 5438 border: 1px solid #e3e3e3;
5424 border-radius: 4px; 5439 border-radius: 4px;
5425 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 5440 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5426 } 5441 }
5427 </style> 5442 </style>
5428 <div class="flex-row"> 5443
5429 <div class="flex-item-10-percent"> 5444 <nav-bar>
5430 <img src="packages/observatory/src/elements/img/isolate_icon.png"> 5445 <top-nav-menu last="{{ true }}"></top-nav-menu>
5431 </div> 5446 <nav-refresh callback="{{ refresh }}"></nav-refresh>
5432 <div class="flex-item-10-percent"> 5447 </nav-bar>
5433 <isolate-ref ref="{{ isolate }}"></isolate-ref> 5448
5434 </div> 5449 <div class="content">
5435 <div class="flex-item-20-percent"> 5450 <h1>HttpServers</h1>
5436 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state> 5451
5437 </div> 5452 <br>
5438 <div class="flex-item-50-percent"> 5453
5439 <isolate-location isolate="{{ isolate }}"></isolate-location> 5454 <ul class="list-group">
5440 </div> 5455 <template repeat="{{ httpServer in list['members'] }}">
5441 <div class="flex-item-10-percent"> 5456 <li class="list-group-item">
5442 </div> 5457 <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
5458 </li>
5459 </template>
5460 </ul>
5443 </div> 5461 </div>
5444 5462 <br>
5445 <div class="flex-row"> 5463 <hr>
5446 <div class="flex-item-20-percent"></div>
5447 <div class="flex-item-60-percent">
5448 <hr>
5449 </div>
5450 <div class="flex-item-20-percent"></div>
5451 </div>
5452
5453 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
5454
5455 </template> 5464 </template>
5456 </polymer-element> 5465 </polymer-element>
5457 5466
5458 <polymer-element name="isolate-run-state" extends="observatory-element"> 5467 <polymer-element name="io-http-server-ref" extends="service-ref">
5459 <template> 5468 <template>
5460 <template if="{{ isolate.pauseEvent != null }}">
5461 <strong>paused</strong>
5462 <action-link callback="{{ resume }}" label="resume"></action-link>
5463 </template>
5464
5465 <template if="{{ isolate.running }}">
5466 <strong>running</strong>
5467 <action-link callback="{{ pause }}" label="pause"></action-link>
5468 </template>
5469
5470 <template if="{{ isolate.idle }}">
5471 <strong>idle</strong>
5472 </template>
5473
5474 <template if="{{ isolate.loading }}">
5475 <strong>loading...</strong>
5476 </template>
5477 </template>
5478 </polymer-element>
5479
5480 <polymer-element name="isolate-location" extends="observatory-element">
5481 <template>
5482 <template if="{{ isolate.pauseEvent != null }}">
5483 <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateCreated' }}">
5484 at isolate start
5485 </template>
5486 <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateShutdown' }}">
5487 at isolate exit
5488 </template>
5489 <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateInterrupted' } }">
5490 at
5491 <function-ref ref="{{ isolate.topFrame['function'] }}">
5492 </function-ref>
5493 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
5494 </template>
5495 <template if="{{ isolate.pauseEvent['eventType'] == 'BreakpointReached' }} ">
5496 at breakpoint {{ isolate.pauseEvent['breakpoint']['id'] }}
5497 <function-ref ref="{{ isolate.topFrame['function'] }}">
5498 </function-ref>
5499 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
5500 </template>
5501 </template>
5502
5503 <template if="{{ isolate.running }}">
5504 at
5505 <function-ref ref="{{ isolate.topFrame['function'] }}">
5506 </function-ref>
5507 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>)
5508 </template>
5509
5510 </template>
5511 </polymer-element>
5512
5513 <polymer-element name="isolate-shared-summary" extends="observatory-element">
5514 <template>
5515 <style>
5516 .errorBox {
5517 background-color: #f5f5f5;
5518 border: 1px solid #ccc;
5519 padding: 10px;
5520 font-family: consolas, courier, monospace;
5521 font-size: 1em;
5522 line-height: 1.2em;
5523 white-space: pre;
5524 }
5525 </style>
5526 <style> 5469 <style>
5527 /* Global styles */ 5470 /* Global styles */
5528 * { 5471 * {
5529 margin: 0; 5472 margin: 0;
5530 padding: 0; 5473 padding: 0;
5531 font: 400 14px 'Montserrat', sans-serif; 5474 font: 400 14px 'Montserrat', sans-serif;
5532 color: #333; 5475 color: #333;
5533 box-sizing: border-box; 5476 box-sizing: border-box;
5534 } 5477 }
5535 5478
(...skipping 207 matching lines...) Expand 10 before | Expand all | Expand 10 after
5743 .well { 5686 .well {
5744 min-height: 20px; 5687 min-height: 20px;
5745 padding: 19px; 5688 padding: 19px;
5746 margin-bottom: 20px; 5689 margin-bottom: 20px;
5747 background-color: #f5f5f5; 5690 background-color: #f5f5f5;
5748 border: 1px solid #e3e3e3; 5691 border: 1px solid #e3e3e3;
5749 border-radius: 4px; 5692 border-radius: 4px;
5750 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 5693 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5751 } 5694 }
5752 </style> 5695 </style>
5696 <a href="{{ url }}">{{ name }}</a>
5697 </template>
5698 </polymer-element>
5699
5700 <polymer-element name="io-http-server-view" extends="observatory-element">
5701 <template>
5702 <style>
5703 /* Global styles */
5704 * {
5705 margin: 0;
5706 padding: 0;
5707 font: 400 14px 'Montserrat', sans-serif;
5708 color: #333;
5709 box-sizing: border-box;
5710 }
5711
5712 .content {
5713 padding-left: 10%;
5714 font: 400 14px 'Montserrat', sans-serif;
5715 }
5716
5717 .content-centered {
5718 padding-left: 10%;
5719 padding-right: 10%;
5720 font: 400 14px 'Montserrat', sans-serif;
5721 }
5722
5723 h1 {
5724 font: 400 18px 'Montserrat', sans-serif;
5725 }
5726
5727 .memberList {
5728 display: table;
5729 }
5730
5731 .memberItem {
5732 display: table-row;
5733 }
5734
5735 .memberName, .memberValue {
5736 display: table-cell;
5737 vertical-align: top;
5738 padding: 3px 0 3px 1em;
5739 font: 400 14px 'Montserrat', sans-serif;
5740 }
5741
5742 .monospace {
5743 font-family: consolas, courier, monospace;
5744 font-size: 1em;
5745 line-height: 1.2em;
5746 white-space: nowrap;
5747 }
5748
5749 a {
5750 color: #0489c3;
5751 text-decoration: none;
5752 }
5753
5754 a:hover {
5755 text-decoration: underline;
5756 }
5757
5758 em {
5759 color: inherit;
5760 font-style:italic;
5761 }
5762
5763 hr {
5764 margin-top: 20px;
5765 margin-bottom: 20px;
5766 border: 0;
5767 border-top: 1px solid #eee;
5768 height: 0;
5769 box-sizing: content-box;
5770 }
5771
5772 .list-group {
5773 padding-left: 0;
5774 margin-bottom: 20px;
5775 }
5776
5777 .list-group-item {
5778 position: relative;
5779 display: block;
5780 padding: 10px 15px;
5781 margin-bottom: -1px;
5782 background-color: #fff;
5783 }
5784
5785 .list-group-item:first-child {
5786 /* rounded top corners */
5787 border-top-right-radius:4px;
5788 border-top-left-radius:4px;
5789 }
5790
5791 .list-group-item:last-child {
5792 margin-bottom: 0;
5793 /* rounded bottom corners */
5794 border-bottom-right-radius: 4px;
5795 border-bottom-left-radius:4px;
5796 }
5797
5798 /* Flex row container */
5799 .flex-row {
5800 display: flex;
5801 flex-direction: row;
5802 }
5803
5804 /* Flex column container */
5805 .flex-column {
5806 display: flex;
5807 flex-direction: column;
5808 }
5809
5810 .flex-item-fit {
5811 flex-grow: 1;
5812 flex-shrink: 1;
5813 flex-basis: auto;
5814 }
5815
5816 .flex-item-no-shrink {
5817 flex-grow: 0;
5818 flex-shrink: 0;
5819 flex-basis: auto;
5820 }
5821
5822 .flex-item-fill {
5823 flex-grow: 0;
5824 flex-shrink: 1; /* shrink when pressured */
5825 flex-basis: 100%; /* try and take 100% */
5826 }
5827
5828 .flex-item-fixed-1-12 {
5829 flex-grow: 0;
5830 flex-shrink: 0;
5831 flex-basis: 8.3%;
5832 }
5833
5834 .flex-item-fixed-2-12 {
5835 flex-grow: 0;
5836 flex-shrink: 0;
5837 flex-basis: 16.6%;
5838 }
5839
5840 .flex-item-fixed-4-12 {
5841 flex-grow: 0;
5842 flex-shrink: 0;
5843 flex-basis: 33.3333%;
5844 }
5845
5846 .flex-item-fixed-6-12, .flex-item-50-percent {
5847 flex-grow: 0;
5848 flex-shrink: 0;
5849 flex-basis: 50%;
5850 }
5851
5852 .flex-item-fixed-8-12 {
5853 flex-grow: 0;
5854 flex-shrink: 0;
5855 flex-basis: 66.6666%;
5856 }
5857
5858 .flex-item-fixed-9-12 {
5859 flex-grow: 0;
5860 flex-shrink: 0;
5861 flex-basis: 75%;
5862 }
5863
5864
5865 .flex-item-fixed-12-12 {
5866 flex-grow: 0;
5867 flex-shrink: 0;
5868 flex-basis: 100%;
5869 }
5870
5871 .flex-item-10-percent {
5872 flex-grow: 0;
5873 flex-shrink: 0;
5874 flex-basis: 10%;
5875 }
5876
5877 .flex-item-15-percent {
5878 flex-grow: 0;
5879 flex-shrink: 0;
5880 flex-basis: 15%;
5881 }
5882
5883 .flex-item-20-percent {
5884 flex-grow: 0;
5885 flex-shrink: 0;
5886 flex-basis: 20%;
5887 }
5888
5889 .flex-item-30-percent {
5890 flex-grow: 0;
5891 flex-shrink: 0;
5892 flex-basis: 30%;
5893 }
5894
5895 .flex-item-40-percent {
5896 flex-grow: 0;
5897 flex-shrink: 0;
5898 flex-basis: 40%;
5899 }
5900
5901 .flex-item-60-percent {
5902 flex-grow: 0;
5903 flex-shrink: 0;
5904 flex-basis: 60%;
5905 }
5906
5907 .flex-item-70-percent {
5908 flex-grow: 0;
5909 flex-shrink: 0;
5910 flex-basis: 70%;
5911 }
5912
5913 .flex-item-80-percent {
5914 flex-grow: 0;
5915 flex-shrink: 0;
5916 flex-basis: 80%;
5917 }
5918
5919 .well {
5920 min-height: 20px;
5921 padding: 19px;
5922 margin-bottom: 20px;
5923 background-color: #f5f5f5;
5924 border: 1px solid #e3e3e3;
5925 border-radius: 4px;
5926 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5927 }
5928 </style>
5929
5930 <nav-bar>
5931 <top-nav-menu last="{{ true }}"></top-nav-menu>
5932 <nav-refresh callback="{{ refresh }}"></nav-refresh>
5933 </nav-bar>
5934
5935 <div class="content">
5936 <h1>HttpServer</h1>
5937
5938 <br>
5939
5940 <div class="memberList">
5941 <div class="memberItem">
5942 <div class="memberName">Address</div>
5943 <div class="memberValue">{{ httpServer['address'] }}</div>
5944 </div>
5945 <div class="memberItem">
5946 <div class="memberName">Port</div>
5947 <div class="memberValue">{{ httpServer['port'] }}</div>
5948 </div>
5949 <div class="memberItem">
5950 <div class="memberName">Active connections</div>
5951 <div class="memberValue">{{ httpServer['active'] }}</div>
5952 </div>
5953 <div class="memberItem">
5954 <div class="memberName">Idle connections</div>
5955 <div class="memberValue">{{ httpServer['idle'] }}</div>
5956 </div>
5957 </div>
5958 </div>
5959 <br>
5960 <hr>
5961 </template>
5962 </polymer-element>
5963
5964
5965
5966
5967 <polymer-element name="isolate-ref" extends="service-ref">
5968 <template><style>
5969 /* Global styles */
5970 * {
5971 margin: 0;
5972 padding: 0;
5973 font: 400 14px 'Montserrat', sans-serif;
5974 color: #333;
5975 box-sizing: border-box;
5976 }
5977
5978 .content {
5979 padding-left: 10%;
5980 font: 400 14px 'Montserrat', sans-serif;
5981 }
5982
5983 .content-centered {
5984 padding-left: 10%;
5985 padding-right: 10%;
5986 font: 400 14px 'Montserrat', sans-serif;
5987 }
5988
5989 h1 {
5990 font: 400 18px 'Montserrat', sans-serif;
5991 }
5992
5993 .memberList {
5994 display: table;
5995 }
5996
5997 .memberItem {
5998 display: table-row;
5999 }
6000
6001 .memberName, .memberValue {
6002 display: table-cell;
6003 vertical-align: top;
6004 padding: 3px 0 3px 1em;
6005 font: 400 14px 'Montserrat', sans-serif;
6006 }
6007
6008 .monospace {
6009 font-family: consolas, courier, monospace;
6010 font-size: 1em;
6011 line-height: 1.2em;
6012 white-space: nowrap;
6013 }
6014
6015 a {
6016 color: #0489c3;
6017 text-decoration: none;
6018 }
6019
6020 a:hover {
6021 text-decoration: underline;
6022 }
6023
6024 em {
6025 color: inherit;
6026 font-style:italic;
6027 }
6028
6029 hr {
6030 margin-top: 20px;
6031 margin-bottom: 20px;
6032 border: 0;
6033 border-top: 1px solid #eee;
6034 height: 0;
6035 box-sizing: content-box;
6036 }
6037
6038 .list-group {
6039 padding-left: 0;
6040 margin-bottom: 20px;
6041 }
6042
6043 .list-group-item {
6044 position: relative;
6045 display: block;
6046 padding: 10px 15px;
6047 margin-bottom: -1px;
6048 background-color: #fff;
6049 }
6050
6051 .list-group-item:first-child {
6052 /* rounded top corners */
6053 border-top-right-radius:4px;
6054 border-top-left-radius:4px;
6055 }
6056
6057 .list-group-item:last-child {
6058 margin-bottom: 0;
6059 /* rounded bottom corners */
6060 border-bottom-right-radius: 4px;
6061 border-bottom-left-radius:4px;
6062 }
6063
6064 /* Flex row container */
6065 .flex-row {
6066 display: flex;
6067 flex-direction: row;
6068 }
6069
6070 /* Flex column container */
6071 .flex-column {
6072 display: flex;
6073 flex-direction: column;
6074 }
6075
6076 .flex-item-fit {
6077 flex-grow: 1;
6078 flex-shrink: 1;
6079 flex-basis: auto;
6080 }
6081
6082 .flex-item-no-shrink {
6083 flex-grow: 0;
6084 flex-shrink: 0;
6085 flex-basis: auto;
6086 }
6087
6088 .flex-item-fill {
6089 flex-grow: 0;
6090 flex-shrink: 1; /* shrink when pressured */
6091 flex-basis: 100%; /* try and take 100% */
6092 }
6093
6094 .flex-item-fixed-1-12 {
6095 flex-grow: 0;
6096 flex-shrink: 0;
6097 flex-basis: 8.3%;
6098 }
6099
6100 .flex-item-fixed-2-12 {
6101 flex-grow: 0;
6102 flex-shrink: 0;
6103 flex-basis: 16.6%;
6104 }
6105
6106 .flex-item-fixed-4-12 {
6107 flex-grow: 0;
6108 flex-shrink: 0;
6109 flex-basis: 33.3333%;
6110 }
6111
6112 .flex-item-fixed-6-12, .flex-item-50-percent {
6113 flex-grow: 0;
6114 flex-shrink: 0;
6115 flex-basis: 50%;
6116 }
6117
6118 .flex-item-fixed-8-12 {
6119 flex-grow: 0;
6120 flex-shrink: 0;
6121 flex-basis: 66.6666%;
6122 }
6123
6124 .flex-item-fixed-9-12 {
6125 flex-grow: 0;
6126 flex-shrink: 0;
6127 flex-basis: 75%;
6128 }
6129
6130
6131 .flex-item-fixed-12-12 {
6132 flex-grow: 0;
6133 flex-shrink: 0;
6134 flex-basis: 100%;
6135 }
6136
6137 .flex-item-10-percent {
6138 flex-grow: 0;
6139 flex-shrink: 0;
6140 flex-basis: 10%;
6141 }
6142
6143 .flex-item-15-percent {
6144 flex-grow: 0;
6145 flex-shrink: 0;
6146 flex-basis: 15%;
6147 }
6148
6149 .flex-item-20-percent {
6150 flex-grow: 0;
6151 flex-shrink: 0;
6152 flex-basis: 20%;
6153 }
6154
6155 .flex-item-30-percent {
6156 flex-grow: 0;
6157 flex-shrink: 0;
6158 flex-basis: 30%;
6159 }
6160
6161 .flex-item-40-percent {
6162 flex-grow: 0;
6163 flex-shrink: 0;
6164 flex-basis: 40%;
6165 }
6166
6167 .flex-item-60-percent {
6168 flex-grow: 0;
6169 flex-shrink: 0;
6170 flex-basis: 60%;
6171 }
6172
6173 .flex-item-70-percent {
6174 flex-grow: 0;
6175 flex-shrink: 0;
6176 flex-basis: 70%;
6177 }
6178
6179 .flex-item-80-percent {
6180 flex-grow: 0;
6181 flex-shrink: 0;
6182 flex-basis: 80%;
6183 }
6184
6185 .well {
6186 min-height: 20px;
6187 padding: 19px;
6188 margin-bottom: 20px;
6189 background-color: #f5f5f5;
6190 border: 1px solid #e3e3e3;
6191 border-radius: 4px;
6192 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6193 }
6194 </style>
6195 <a href="{{ url }}">{{ ref.name }}</a>
6196 </template>
6197
6198 </polymer-element>
6199
6200
6201
6202
6203
6204
6205
6206 <polymer-element name="isolate-summary" extends="observatory-element">
6207 <template>
6208 <style>
6209 /* Global styles */
6210 * {
6211 margin: 0;
6212 padding: 0;
6213 font: 400 14px 'Montserrat', sans-serif;
6214 color: #333;
6215 box-sizing: border-box;
6216 }
6217
6218 .content {
6219 padding-left: 10%;
6220 font: 400 14px 'Montserrat', sans-serif;
6221 }
6222
6223 .content-centered {
6224 padding-left: 10%;
6225 padding-right: 10%;
6226 font: 400 14px 'Montserrat', sans-serif;
6227 }
6228
6229 h1 {
6230 font: 400 18px 'Montserrat', sans-serif;
6231 }
6232
6233 .memberList {
6234 display: table;
6235 }
6236
6237 .memberItem {
6238 display: table-row;
6239 }
6240
6241 .memberName, .memberValue {
6242 display: table-cell;
6243 vertical-align: top;
6244 padding: 3px 0 3px 1em;
6245 font: 400 14px 'Montserrat', sans-serif;
6246 }
6247
6248 .monospace {
6249 font-family: consolas, courier, monospace;
6250 font-size: 1em;
6251 line-height: 1.2em;
6252 white-space: nowrap;
6253 }
6254
6255 a {
6256 color: #0489c3;
6257 text-decoration: none;
6258 }
6259
6260 a:hover {
6261 text-decoration: underline;
6262 }
6263
6264 em {
6265 color: inherit;
6266 font-style:italic;
6267 }
6268
6269 hr {
6270 margin-top: 20px;
6271 margin-bottom: 20px;
6272 border: 0;
6273 border-top: 1px solid #eee;
6274 height: 0;
6275 box-sizing: content-box;
6276 }
6277
6278 .list-group {
6279 padding-left: 0;
6280 margin-bottom: 20px;
6281 }
6282
6283 .list-group-item {
6284 position: relative;
6285 display: block;
6286 padding: 10px 15px;
6287 margin-bottom: -1px;
6288 background-color: #fff;
6289 }
6290
6291 .list-group-item:first-child {
6292 /* rounded top corners */
6293 border-top-right-radius:4px;
6294 border-top-left-radius:4px;
6295 }
6296
6297 .list-group-item:last-child {
6298 margin-bottom: 0;
6299 /* rounded bottom corners */
6300 border-bottom-right-radius: 4px;
6301 border-bottom-left-radius:4px;
6302 }
6303
6304 /* Flex row container */
6305 .flex-row {
6306 display: flex;
6307 flex-direction: row;
6308 }
6309
6310 /* Flex column container */
6311 .flex-column {
6312 display: flex;
6313 flex-direction: column;
6314 }
6315
6316 .flex-item-fit {
6317 flex-grow: 1;
6318 flex-shrink: 1;
6319 flex-basis: auto;
6320 }
6321
6322 .flex-item-no-shrink {
6323 flex-grow: 0;
6324 flex-shrink: 0;
6325 flex-basis: auto;
6326 }
6327
6328 .flex-item-fill {
6329 flex-grow: 0;
6330 flex-shrink: 1; /* shrink when pressured */
6331 flex-basis: 100%; /* try and take 100% */
6332 }
6333
6334 .flex-item-fixed-1-12 {
6335 flex-grow: 0;
6336 flex-shrink: 0;
6337 flex-basis: 8.3%;
6338 }
6339
6340 .flex-item-fixed-2-12 {
6341 flex-grow: 0;
6342 flex-shrink: 0;
6343 flex-basis: 16.6%;
6344 }
6345
6346 .flex-item-fixed-4-12 {
6347 flex-grow: 0;
6348 flex-shrink: 0;
6349 flex-basis: 33.3333%;
6350 }
6351
6352 .flex-item-fixed-6-12, .flex-item-50-percent {
6353 flex-grow: 0;
6354 flex-shrink: 0;
6355 flex-basis: 50%;
6356 }
6357
6358 .flex-item-fixed-8-12 {
6359 flex-grow: 0;
6360 flex-shrink: 0;
6361 flex-basis: 66.6666%;
6362 }
6363
6364 .flex-item-fixed-9-12 {
6365 flex-grow: 0;
6366 flex-shrink: 0;
6367 flex-basis: 75%;
6368 }
6369
6370
6371 .flex-item-fixed-12-12 {
6372 flex-grow: 0;
6373 flex-shrink: 0;
6374 flex-basis: 100%;
6375 }
6376
6377 .flex-item-10-percent {
6378 flex-grow: 0;
6379 flex-shrink: 0;
6380 flex-basis: 10%;
6381 }
6382
6383 .flex-item-15-percent {
6384 flex-grow: 0;
6385 flex-shrink: 0;
6386 flex-basis: 15%;
6387 }
6388
6389 .flex-item-20-percent {
6390 flex-grow: 0;
6391 flex-shrink: 0;
6392 flex-basis: 20%;
6393 }
6394
6395 .flex-item-30-percent {
6396 flex-grow: 0;
6397 flex-shrink: 0;
6398 flex-basis: 30%;
6399 }
6400
6401 .flex-item-40-percent {
6402 flex-grow: 0;
6403 flex-shrink: 0;
6404 flex-basis: 40%;
6405 }
6406
6407 .flex-item-60-percent {
6408 flex-grow: 0;
6409 flex-shrink: 0;
6410 flex-basis: 60%;
6411 }
6412
6413 .flex-item-70-percent {
6414 flex-grow: 0;
6415 flex-shrink: 0;
6416 flex-basis: 70%;
6417 }
6418
6419 .flex-item-80-percent {
6420 flex-grow: 0;
6421 flex-shrink: 0;
6422 flex-basis: 80%;
6423 }
6424
6425 .well {
6426 min-height: 20px;
6427 padding: 19px;
6428 margin-bottom: 20px;
6429 background-color: #f5f5f5;
6430 border: 1px solid #e3e3e3;
6431 border-radius: 4px;
6432 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6433 }
6434 </style>
6435 <div class="flex-row">
6436 <div class="flex-item-10-percent">
6437 <img src="packages/observatory/src/elements/img/isolate_icon.png">
6438 </div>
6439 <div class="flex-item-10-percent">
6440 <isolate-ref ref="{{ isolate }}"></isolate-ref>
6441 </div>
6442 <div class="flex-item-20-percent">
6443 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
6444 </div>
6445 <div class="flex-item-50-percent">
6446 <isolate-location isolate="{{ isolate }}"></isolate-location>
6447 </div>
6448 <div class="flex-item-10-percent">
6449 </div>
6450 </div>
6451
6452 <div class="flex-row">
6453 <div class="flex-item-20-percent"></div>
6454 <div class="flex-item-60-percent">
6455 <hr>
6456 </div>
6457 <div class="flex-item-20-percent"></div>
6458 </div>
6459
6460 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
6461
6462 </template>
6463 </polymer-element>
6464
6465 <polymer-element name="isolate-run-state" extends="observatory-element">
6466 <template>
6467 <template if="{{ isolate.pauseEvent != null }}">
6468 <strong>paused</strong>
6469 <action-link callback="{{ resume }}" label="resume"></action-link>
6470 </template>
6471
6472 <template if="{{ isolate.running }}">
6473 <strong>running</strong>
6474 <action-link callback="{{ pause }}" label="pause"></action-link>
6475 </template>
6476
6477 <template if="{{ isolate.idle }}">
6478 <strong>idle</strong>
6479 </template>
6480
6481 <template if="{{ isolate.loading }}">
6482 <strong>loading...</strong>
6483 </template>
6484 </template>
6485 </polymer-element>
6486
6487 <polymer-element name="isolate-location" extends="observatory-element">
6488 <template>
6489 <template if="{{ isolate.pauseEvent != null }}">
6490 <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateCreated' }}">
6491 at isolate start
6492 </template>
6493 <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateShutdown' }}">
6494 at isolate exit
6495 </template>
6496 <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateInterrupted' } }">
6497 at
6498 <function-ref ref="{{ isolate.topFrame['function'] }}">
6499 </function-ref>
6500 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
6501 </template>
6502 <template if="{{ isolate.pauseEvent['eventType'] == 'BreakpointReached' }} ">
6503 at breakpoint {{ isolate.pauseEvent['breakpoint']['id'] }}
6504 <function-ref ref="{{ isolate.topFrame['function'] }}">
6505 </function-ref>
6506 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
6507 </template>
6508 </template>
6509
6510 <template if="{{ isolate.running }}">
6511 at
6512 <function-ref ref="{{ isolate.topFrame['function'] }}">
6513 </function-ref>
6514 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>)
6515 </template>
6516
6517 </template>
6518 </polymer-element>
6519
6520 <polymer-element name="isolate-shared-summary" extends="observatory-element">
6521 <template>
6522 <style>
6523 .errorBox {
6524 background-color: #f5f5f5;
6525 border: 1px solid #ccc;
6526 padding: 10px;
6527 font-family: consolas, courier, monospace;
6528 font-size: 1em;
6529 line-height: 1.2em;
6530 white-space: pre;
6531 }
6532 </style>
6533 <style>
6534 /* Global styles */
6535 * {
6536 margin: 0;
6537 padding: 0;
6538 font: 400 14px 'Montserrat', sans-serif;
6539 color: #333;
6540 box-sizing: border-box;
6541 }
6542
6543 .content {
6544 padding-left: 10%;
6545 font: 400 14px 'Montserrat', sans-serif;
6546 }
6547
6548 .content-centered {
6549 padding-left: 10%;
6550 padding-right: 10%;
6551 font: 400 14px 'Montserrat', sans-serif;
6552 }
6553
6554 h1 {
6555 font: 400 18px 'Montserrat', sans-serif;
6556 }
6557
6558 .memberList {
6559 display: table;
6560 }
6561
6562 .memberItem {
6563 display: table-row;
6564 }
6565
6566 .memberName, .memberValue {
6567 display: table-cell;
6568 vertical-align: top;
6569 padding: 3px 0 3px 1em;
6570 font: 400 14px 'Montserrat', sans-serif;
6571 }
6572
6573 .monospace {
6574 font-family: consolas, courier, monospace;
6575 font-size: 1em;
6576 line-height: 1.2em;
6577 white-space: nowrap;
6578 }
6579
6580 a {
6581 color: #0489c3;
6582 text-decoration: none;
6583 }
6584
6585 a:hover {
6586 text-decoration: underline;
6587 }
6588
6589 em {
6590 color: inherit;
6591 font-style:italic;
6592 }
6593
6594 hr {
6595 margin-top: 20px;
6596 margin-bottom: 20px;
6597 border: 0;
6598 border-top: 1px solid #eee;
6599 height: 0;
6600 box-sizing: content-box;
6601 }
6602
6603 .list-group {
6604 padding-left: 0;
6605 margin-bottom: 20px;
6606 }
6607
6608 .list-group-item {
6609 position: relative;
6610 display: block;
6611 padding: 10px 15px;
6612 margin-bottom: -1px;
6613 background-color: #fff;
6614 }
6615
6616 .list-group-item:first-child {
6617 /* rounded top corners */
6618 border-top-right-radius:4px;
6619 border-top-left-radius:4px;
6620 }
6621
6622 .list-group-item:last-child {
6623 margin-bottom: 0;
6624 /* rounded bottom corners */
6625 border-bottom-right-radius: 4px;
6626 border-bottom-left-radius:4px;
6627 }
6628
6629 /* Flex row container */
6630 .flex-row {
6631 display: flex;
6632 flex-direction: row;
6633 }
6634
6635 /* Flex column container */
6636 .flex-column {
6637 display: flex;
6638 flex-direction: column;
6639 }
6640
6641 .flex-item-fit {
6642 flex-grow: 1;
6643 flex-shrink: 1;
6644 flex-basis: auto;
6645 }
6646
6647 .flex-item-no-shrink {
6648 flex-grow: 0;
6649 flex-shrink: 0;
6650 flex-basis: auto;
6651 }
6652
6653 .flex-item-fill {
6654 flex-grow: 0;
6655 flex-shrink: 1; /* shrink when pressured */
6656 flex-basis: 100%; /* try and take 100% */
6657 }
6658
6659 .flex-item-fixed-1-12 {
6660 flex-grow: 0;
6661 flex-shrink: 0;
6662 flex-basis: 8.3%;
6663 }
6664
6665 .flex-item-fixed-2-12 {
6666 flex-grow: 0;
6667 flex-shrink: 0;
6668 flex-basis: 16.6%;
6669 }
6670
6671 .flex-item-fixed-4-12 {
6672 flex-grow: 0;
6673 flex-shrink: 0;
6674 flex-basis: 33.3333%;
6675 }
6676
6677 .flex-item-fixed-6-12, .flex-item-50-percent {
6678 flex-grow: 0;
6679 flex-shrink: 0;
6680 flex-basis: 50%;
6681 }
6682
6683 .flex-item-fixed-8-12 {
6684 flex-grow: 0;
6685 flex-shrink: 0;
6686 flex-basis: 66.6666%;
6687 }
6688
6689 .flex-item-fixed-9-12 {
6690 flex-grow: 0;
6691 flex-shrink: 0;
6692 flex-basis: 75%;
6693 }
6694
6695
6696 .flex-item-fixed-12-12 {
6697 flex-grow: 0;
6698 flex-shrink: 0;
6699 flex-basis: 100%;
6700 }
6701
6702 .flex-item-10-percent {
6703 flex-grow: 0;
6704 flex-shrink: 0;
6705 flex-basis: 10%;
6706 }
6707
6708 .flex-item-15-percent {
6709 flex-grow: 0;
6710 flex-shrink: 0;
6711 flex-basis: 15%;
6712 }
6713
6714 .flex-item-20-percent {
6715 flex-grow: 0;
6716 flex-shrink: 0;
6717 flex-basis: 20%;
6718 }
6719
6720 .flex-item-30-percent {
6721 flex-grow: 0;
6722 flex-shrink: 0;
6723 flex-basis: 30%;
6724 }
6725
6726 .flex-item-40-percent {
6727 flex-grow: 0;
6728 flex-shrink: 0;
6729 flex-basis: 40%;
6730 }
6731
6732 .flex-item-60-percent {
6733 flex-grow: 0;
6734 flex-shrink: 0;
6735 flex-basis: 60%;
6736 }
6737
6738 .flex-item-70-percent {
6739 flex-grow: 0;
6740 flex-shrink: 0;
6741 flex-basis: 70%;
6742 }
6743
6744 .flex-item-80-percent {
6745 flex-grow: 0;
6746 flex-shrink: 0;
6747 flex-basis: 80%;
6748 }
6749
6750 .well {
6751 min-height: 20px;
6752 padding: 19px;
6753 margin-bottom: 20px;
6754 background-color: #f5f5f5;
6755 border: 1px solid #e3e3e3;
6756 border-radius: 4px;
6757 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6758 }
6759 </style>
5753 <template if="{{ isolate.error != null }}"> 6760 <template if="{{ isolate.error != null }}">
5754 <div class="content-centered"> 6761 <div class="content-centered">
5755 <pre class="errorBox">{{ isolate.error.message }}</pre> 6762 <pre class="errorBox">{{ isolate.error.message }}</pre>
5756 <br> 6763 <br>
5757 </div> 6764 </div>
5758 </template> 6765 </template>
5759 <div class="flex-row"> 6766 <div class="flex-row">
5760 <div class="flex-item-10-percent"> 6767 <div class="flex-item-10-percent">
5761 </div> 6768 </div>
5762 <div class="flex-item-40-percent"> 6769 <div class="flex-item-40-percent">
5763 <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-count er-chart> 6770 <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-count er-chart>
5764 </div> 6771 </div>
5765 <div class="flex-item-40-percent"> 6772 <div class="flex-item-40-percent">
5766 <div class="memberList"> 6773 <div class="memberList">
5767 <div class="memberItem">
5768 <div class="memberName">new heap</div>
5769 <div class="memberValue">
5770 {{ isolate.newHeapUsed | formatSize }}
5771 of
5772 {{ isolate.newHeapCapacity | formatSize }}
5773 </div>
5774 </div>
5775 <div class="memberItem">
5776 <div class="memberName">old heap</div>
5777 <div class="memberValue">
5778 {{ isolate.oldHeapUsed | formatSize }}
5779 of
5780 {{ isolate.oldHeapCapacity | formatSize }}
5781 </div>
5782 </div>
5783 </div>
5784 <br>
5785 <div class="memberItem"> 6774 <div class="memberItem">
6775 <div class="memberName">new heap</div>
5786 <div class="memberValue"> 6776 <div class="memberValue">
5787 See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack t race</a> 6777 {{ isolate.newHeapUsed | formatSize }}
6778 of
6779 {{ isolate.newHeapCapacity | formatSize }}
5788 </div> 6780 </div>
5789 </div> 6781 </div>
5790 <div class="memberItem"> 6782 <div class="memberItem">
6783 <div class="memberName">old heap</div>
5791 <div class="memberValue"> 6784 <div class="memberValue">
5792 See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profil e</a> 6785 {{ isolate.oldHeapUsed | formatSize }}
6786 of
6787 {{ isolate.oldHeapCapacity | formatSize }}
5793 </div> 6788 </div>
5794 </div> 6789 </div>
5795 <div class="memberList"> 6790 </div>
5796 <div class="memberItem"> 6791 <br>
5797 <div class="memberValue"> 6792 <div class="memberItem">
5798 See <a href="{{ isolate.relativeHashLink('allocationprofile') }} ">allocation profile</a> 6793 <div class="memberValue">
5799 </div> 6794 See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack tra ce</a>
5800 </div> 6795 </div>
5801 <div class="memberItem"> 6796 </div>
5802 <div class="memberValue"> 6797 <div class="memberItem">
5803 See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map </a> 6798 <div class="memberValue">
5804 </div> 6799 See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile< /a>
6800 </div>
6801 </div>
6802 <div class="memberItem">
6803 <div class="memberValue">
6804 See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">al location profile</a>
6805 </div>
6806 </div>
6807 <div class="memberItem">
6808 <div class="memberValue">
6809 See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a>
6810 </div>
6811 </div>
6812 <template if="{{ isolate.ioEnabled }}">
6813 <div class="memberItem">
6814 <div class="memberValue">
6815 See <a href="{{ isolate.relativeHashLink('io') }}">dart:io</a>
5805 </div> 6816 </div>
5806 </div> 6817 </div>
6818 </template>
5807 </div> 6819 </div>
5808 <div class="flex-item-10-percent"> 6820 <div class="flex-item-10-percent">
5809 </div> 6821 </div>
5810 </div> 6822 </div>
5811 </template> 6823 </template>
5812 </polymer-element> 6824 </polymer-element>
5813 6825
5814 <polymer-element name="isolate-counter-chart" extends="observatory-element"> 6826 <polymer-element name="isolate-counter-chart" extends="observatory-element">
5815 <template> 6827 <template>
5816 <div id="counterPieChart" style="height: 200px"></div> 6828 <div id="counterPieChart" style="height: 200px"></div>
(...skipping 3804 matching lines...) Expand 10 before | Expand all | Expand 10 after
9621 </style> 10633 </style>
9622 <a href="{{ url }}">{{ ref.name }}</a> 10634 <a href="{{ url }}">{{ ref.name }}</a>
9623 </template> 10635 </template>
9624 10636
9625 </polymer-element> 10637 </polymer-element>
9626 10638
9627 10639
9628 <observatory-application></observatory-application> 10640 <observatory-application></observatory-application>
9629 10641
9630 <script src="index.html_bootstrap.dart.js"></script></body></html> 10642 <script src="index.html_bootstrap.dart.js"></script></body></html>
OLDNEW
« no previous file with comments | « runtime/bin/service_object_patch.dart ('k') | 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