| OLD | NEW |
|---|
| (Empty) |
| 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | |
| 2 <link rel="import" href="function_ref.html"> | |
| 3 <link rel="import" href="nav_bar.html"> | |
| 4 <link rel="import" href="observatory_element.html"> | |
| 5 <link rel="import" href="script_inset.html"> | |
| 6 <link rel="import" href="script_ref.html"> | |
| 7 | |
| 8 <!-- TODO(turnidge): Use core-icon once core_elements work properly in | |
| 9 devtools --> | |
| 10 <polymer-element name="icon-expand-less" noscript> | |
| 11 <template> | |
| 12 <svg width="24" height="24"> | |
| 13 <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "/> | |
| 14 </svg> | |
| 15 </template> | |
| 16 </polymer-element> | |
| 17 | |
| 18 <polymer-element name="icon-expand-more" noscript> | |
| 19 <template> | |
| 20 <svg width="24" height="24"> | |
| 21 <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "/> | |
| 22 </svg> | |
| 23 </template> | |
| 24 </polymer-element> | |
| 25 | |
| 26 <polymer-element name="debugger-page" extends="observatory-element"> | |
| 27 <template> | |
| 28 <link rel="stylesheet" href="css/shared.css"> | |
| 29 <style> | |
| 30 .container { | |
| 31 height: 100%; | |
| 32 display: flex; | |
| 33 flex-direction: column; | |
| 34 justify-content: space-between; | |
| 35 } | |
| 36 nav-bar { | |
| 37 flex: 0 0 auto; | |
| 38 } | |
| 39 .stack { | |
| 40 flex: 0 0 auto; | |
| 41 overflow-y: auto; | |
| 42 } | |
| 43 core-splitter { | |
| 44 flex: 0 0 auto; | |
| 45 } | |
| 46 .console { | |
| 47 flex: 1 1 auto; | |
| 48 overflow-y: auto; | |
| 49 } | |
| 50 .commandline { | |
| 51 flex: 0 0 auto; | |
| 52 } | |
| 53 </style> | |
| 54 | |
| 55 <div class="container"> | |
| 56 <nav-bar> | |
| 57 <top-nav-menu last="{{ true }}"></top-nav-menu> | |
| 58 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}"> | |
| 59 </isolate-nav-menu> | |
| 60 <nav-control></nav-control> | |
| 61 </nav-bar> | |
| 62 | |
| 63 <div id="stack" class="stack"> | |
| 64 <debugger-stack isolate="{{ isolate }}"></debugger-stack> | |
| 65 </div> | |
| 66 <!-- | |
| 67 <core-splitter direction="up" allowOverflow=true></core-splitter> | |
| 68 <div class="console"> | |
| 69 <debugger-console isolate="{{ isolate }}"></debugger-console> | |
| 70 </div> | |
| 71 <div class="commandline"> | |
| 72 <debugger-input isolate="{{ isolate }}"></debugger-input> | |
| 73 </div> | |
| 74 --> | |
| 75 </div> | |
| 76 </template> | |
| 77 </polymer-element> | |
| 78 | |
| 79 <polymer-element name="debugger-stack" extends="observatory-element"> | |
| 80 <template> | |
| 81 <link rel="stylesheet" href="css/shared.css"> | |
| 82 <template if="{{ stack == null }}"> | |
| 83 Loading stack frames | |
| 84 </template> | |
| 85 <template if="{{ stack != null }}"> | |
| 86 <ul class="list-group"> | |
| 87 <template repeat="{{ frame in stack['members'] }}"> | |
| 88 <li class="list-group-item"> | |
| 89 <debugger-frame frame="{{ frame }}" | |
| 90 expand="{{ frame['depth'] == activeFrame }}"> | |
| 91 </debugger-frame> | |
| 92 </li> | |
| 93 </template> | |
| 94 </ul> | |
| 95 </template> | |
| 96 </template> | |
| 97 </polymer-element> | |
| 98 | |
| 99 | |
| 100 <polymer-element name="debugger-frame" extends="observatory-element"> | |
| 101 <template> | |
| 102 <link rel="stylesheet" href="css/shared.css"> | |
| 103 <style> | |
| 104 .frameOuter { | |
| 105 position: relative; | |
| 106 padding: 5px; | |
| 107 border: 1px solid white; | |
| 108 } | |
| 109 .frameOuter:hover { | |
| 110 border: 1px solid #e0e0e0; | |
| 111 } | |
| 112 .shadow { | |
| 113 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), | |
| 114 0 2px 5px 0 rgba(0, 0, 0, 0.26); | |
| 115 } | |
| 116 .frameSummaryText { | |
| 117 display: inline-block; | |
| 118 padding: 5px; | |
| 119 } | |
| 120 .frameId { | |
| 121 display: inline-block; | |
| 122 width: 60px; | |
| 123 } | |
| 124 .frameOuter .frameExpander { | |
| 125 position: absolute; | |
| 126 right: 5px; | |
| 127 top: 5px; | |
| 128 display: none; | |
| 129 } | |
| 130 .frameOuter:hover .frameExpander{ | |
| 131 display: inline-block; | |
| 132 } | |
| 133 .frameContractor { | |
| 134 position: absolute; | |
| 135 right: 5px; | |
| 136 bottom: 5px; | |
| 137 display: inline-block; | |
| 138 } | |
| 139 </style> | |
| 140 <div id="frameOuter" class="frameOuter"> | |
| 141 <a on-click="{{ toggleExpand }}"> | |
| 142 <div class="frameSummary"> | |
| 143 <div class="frameSummaryText"> | |
| 144 <div class="frameId"><b>frame {{ frame['depth'] }}</b></div> | |
| 145 <function-ref ref="{{ frame['function'] }}"></function-ref> | |
| 146 ( <script-ref ref="{{ frame['script'] }}" | |
| 147 pos="{{ frame['tokenPos'] }}"> | |
| 148 </script-ref> ) | |
| 149 </div> | |
| 150 <template if="{{ !expanded }}"> | |
| 151 <div class="frameExpander"> | |
| 152 <icon-expand-more></icon-expand-more> | |
| 153 </div> | |
| 154 </template> | |
| 155 </div> | |
| 156 </a> | |
| 157 | |
| 158 <template if="{{expanded}}"> | |
| 159 <div class="frameDetails"> | |
| 160 <div class="flex-row"> | |
| 161 <div class="flex-item-60-percent"> | |
| 162 <script-inset height="{{ scriptHeight }}" | |
| 163 script="{{ frame['function'].script }}" | |
| 164 startPos="{{ frame['function'].tokenPos }}" | |
| 165 endPos="{{ frame['function'].endTokenPos }}" | |
| 166 currentPos="{{ frame['tokenPos'] }}"> | |
| 167 </script-inset> | |
| 168 </div> | |
| 169 <div class="flex-item-40-percent"> | |
| 170 <div style="padding:10px;" class="memberList"> | |
| 171 <template repeat="{{ v in frame['vars'] }}"> | |
| 172 <div class="memberItem"> | |
| 173 <div class="memberName">{{ v['name']}}</div> | |
| 174 <div class="memberValue"> | |
| 175 <any-service-ref ref="{{ v['value'] }}"> | |
| 176 </any-service-ref> | |
| 177 </div> | |
| 178 </div> | |
| 179 </template> | |
| 180 </div> | |
| 181 </div> | |
| 182 </div> | |
| 183 <!-- TODO(turnidge): Add eval box here? --> | |
| 184 <div class="frameContractor"> | |
| 185 <template if="{{expanded}}"> | |
| 186 <a on-click="{{ toggleExpand }}"> | |
| 187 <icon-expand-less></icon-expand-less> | |
| 188 </a> | |
| 189 </template> | |
| 190 </div> | |
| 191 </div> | |
| 192 </template> | |
| 193 </div> | |
| 194 </template> | |
| 195 </polymer-element> | |
| 196 | |
| 197 <polymer-element name="debugger-console" extends="observatory-element"> | |
| 198 <template> | |
| 199 <link rel="stylesheet" href="css/shared.css"> | |
| 200 <style> | |
| 201 .textBox { | |
| 202 position: absolute; | |
| 203 bottom: 0px; | |
| 204 width: 100%; | |
| 205 } | |
| 206 </style> | |
| 207 <div> | |
| 208 Debugging console is not yet implemented.<br> | |
| 209 </div> | |
| 210 </template> | |
| 211 </polymer-element> | |
| 212 | |
| 213 <polymer-element name="debugger-input" extends="observatory-element"> | |
| 214 <template> | |
| 215 <link rel="stylesheet" href="css/shared.css"> | |
| 216 <style> | |
| 217 .textBox { | |
| 218 font: 400 16px 'Montserrat', sans-serif; | |
| 219 width: 100%; | |
| 220 } | |
| 221 </style> | |
| 222 <input id="textBox" class="textBox" type="text" value="{{ text }}"> | |
| 223 </template> | |
| 224 </polymer-element> | |
| 225 | |
| 226 <script type="application/dart" src="debugger.dart"></script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 837723004:
Build Observatory as part of runtime (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart