OLD | NEW |
---|---|
1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> |
2 <link rel="import" href="function_ref.html"> | 2 <link rel="import" href="function_ref.html"> |
3 <link rel="import" href="nav_bar.html"> | 3 <link rel="import" href="nav_bar.html"> |
4 <link rel="import" href="eval_link.html"> | |
4 <link rel="import" href="observatory_element.html"> | 5 <link rel="import" href="observatory_element.html"> |
5 <link rel="import" href="script_inset.html"> | 6 <link rel="import" href="script_inset.html"> |
6 <link rel="import" href="script_ref.html"> | 7 <link rel="import" href="script_ref.html"> |
7 | 8 |
8 <!-- TODO(turnidge): Use core-icon once core_elements work properly in | 9 <!-- TODO(turnidge): Use core-icon once core_elements work properly in |
9 devtools --> | 10 devtools --> |
10 <polymer-element name="icon-expand-less" noscript> | 11 <polymer-element name="icon-expand-less" noscript> |
11 <template> | 12 <template> |
12 <svg width="24" height="24"> | 13 <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 <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "/> |
(...skipping 124 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
138 margin: 0px 20px 10px 20px; | 139 margin: 0px 20px 10px 20px; |
139 font: 400 14px 'Montserrat', sans-serif; | 140 font: 400 14px 'Montserrat', sans-serif; |
140 line-height: 125%; | 141 line-height: 125%; |
141 } | 142 } |
142 .splitter { | 143 .splitter { |
143 height: 0px; | 144 height: 0px; |
144 margin: 0px; | 145 margin: 0px; |
145 font-size: 1px; | 146 font-size: 1px; |
146 border-bottom: 1px dashed #888; | 147 border-bottom: 1px dashed #888; |
147 } | 148 } |
148 .noStack { | 149 .noMessages .noStack { |
149 margin: 0px 20px 10px 20px; | 150 margin: 0px 20px 10px 20px; |
150 font: normal 14px consolas, courier, monospace; | 151 font: normal 14px consolas, courier, monospace; |
151 line-height: 125%; | 152 line-height: 125%; |
152 } | 153 } |
153 </style> | 154 </style> |
154 <template if="{{ isSampled }}"> | 155 <template if="{{ isSampled }}"> |
155 <div class="sampledMessage"> | 156 <div class="sampledMessage"> |
156 The program is not paused. The stack trace below may be out of date.<br > | 157 The program is not paused. The stack trace below may be out of date.<br > |
157 <br> | 158 <br> |
158 <action-link label="Pause Isolate" callback="{{ doPauseIsolate }}"> | 159 <action-link label="Pause Isolate" callback="{{ doPauseIsolate }}"> |
159 </action-link> | 160 </action-link> |
160 <action-link label="Refresh Stack" callback="{{ doRefreshStack }}"> | 161 <action-link label="Refresh Stack" callback="{{ doRefreshStack }}"> |
161 </action-link> | 162 </action-link> |
162 <br> | 163 <br> |
163 <br> | 164 <br> |
164 <hr class="splitter"> | 165 <hr class="splitter"> |
165 </div> | 166 </div> |
166 </template> | 167 </template> |
167 <template if="{{ !hasStack }}"> | 168 <template if="{{ !hasStack }}"> |
168 <div class="noStack">No stack</div> | 169 <div class="noStack">No stack</div> |
169 </template> | 170 </template> |
170 <ul id="frameList" class="list-group"> | 171 <ul id="frameList" class="list-group"> |
171 <!-- debugger-frame elements are added programmatically --> | 172 <!-- debugger-frame elements are added programmatically --> |
172 </ul> | 173 </ul> |
174 <hr> | |
175 <template if="{{ !hasMessages }}"> | |
176 <div class="noMessages">No messages</div> | |
177 </template> | |
178 <ul id="messageList" class="list-group"> | |
179 <!-- debugger-message elements are added programmatically --> | |
180 </ul> | |
173 </template> | 181 </template> |
174 </polymer-element> | 182 </polymer-element> |
175 | 183 |
176 | 184 |
177 <polymer-element name="debugger-frame" extends="observatory-element"> | 185 <polymer-element name="debugger-frame" extends="observatory-element"> |
178 <template> | 186 <template> |
179 <link rel="stylesheet" href="css/shared.css"> | 187 <link rel="stylesheet" href="css/shared.css"> |
180 <style> | 188 <style> |
181 .frameOuter { | 189 .frameOuter { |
182 position: relative; | 190 position: relative; |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
270 <icon-expand-less></icon-expand-less> | 278 <icon-expand-less></icon-expand-less> |
271 </a> | 279 </a> |
272 </template> | 280 </template> |
273 </div> | 281 </div> |
274 </div> | 282 </div> |
275 </template> | 283 </template> |
276 </div> | 284 </div> |
277 </template> | 285 </template> |
278 </polymer-element> | 286 </polymer-element> |
279 | 287 |
288 <polymer-element name="debugger-message" extends="observatory-element"> | |
289 <template> | |
290 <link rel="stylesheet" href="css/shared.css"> | |
291 <style> | |
292 .messageOuter { | |
293 position: relative; | |
294 padding: 5px; | |
295 border: 1px solid white; | |
296 } | |
297 .messageOuter:hover { | |
298 border: 1px solid #e0e0e0; | |
299 } | |
300 .shadow { | |
301 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), | |
302 0 2px 5px 0 rgba(0, 0, 0, 0.26); | |
303 } | |
304 .current { | |
305 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26), | |
306 0 2px 5px 0 rgba(0, 0, 0, 0.46); | |
307 border: 1px solid #444; | |
308 } | |
309 .messageSummaryText { | |
310 display: inline-block; | |
311 padding: 5px; | |
312 } | |
313 .messageId { | |
314 display: inline-block; | |
315 width: 100px; | |
316 } | |
317 .messageOuter .messageExpander { | |
318 position: absolute; | |
319 right: 5px; | |
320 top: 5px; | |
321 display: none; | |
322 } | |
323 .messageOuter:hover .messageExpander { | |
324 display: inline-block; | |
325 } | |
326 .messageContractor { | |
327 position: absolute; | |
328 right: 5px; | |
329 bottom: 5px; | |
330 display: inline-block; | |
331 } | |
332 </style> | |
333 <div id="messageOuter" class="messageOuter"> | |
334 <a on-click="{{ toggleExpand }}"> | |
335 <div class="messageSummary"> | |
336 <div class="messageSummaryText"> | |
337 <div class="messageId"><b>message {{ message['depth'] }}</b></div> | |
338 <function-ref ref="{{ message['handlerFunction'] }}"></function-ref> | |
339 ( <script-ref ref="{{ message['handlerScript'] }}" | |
340 pos="{{ message['handlerFunction'].tokenPos }}"> | |
341 </script-ref> ) | |
342 </div> | |
343 <template if="{{ !expanded }}"> | |
344 <div class="messageExpander"> | |
345 <icon-expand-more></icon-expand-more> | |
346 </div> | |
347 </template> | |
348 </div> | |
349 </a> | |
350 | |
351 <template if="{{expanded}}"> | |
352 <div class="messageDetails"> | |
353 <div class="flex-row"> | |
354 <div class="flex-item-60-percent"> | |
355 <template if="{{ message['handlerFunction'] != null }}"> | |
356 <script-inset height="{{ scriptHeight }}" | |
357 script="{{ message['handlerFunction'].script }}" | |
358 startPos="{{ message['handlerFunction'].tokenPos }}" | |
359 endPos="{{ message['handlerFunction'].endTokenPos }} " | |
360 inDebuggerContext="{{ true }}"> | |
361 </script-inset> | |
362 </template> | |
363 </div> | |
364 <div class="flex-item-40-percent"> | |
365 <div class="memberItem"> | |
366 <div class="memberName"></div> | |
367 <div class="memberValue"> | |
368 <eval-link callback="{{ previewMessage }}" label="[preview]" r esult="{{ preview }}"></eval-link> | |
369 </div> | |
370 </div> | |
371 </div> | |
372 </div> | |
373 <!-- TODO(turnidge): Add eval box here? --> | |
turnidge
2015/05/04 17:47:12
Drop this TODO from here.
Cutch
2015/05/04 19:56:51
Done.
| |
374 <div class="messageContractor"> | |
375 <template if="{{expanded}}"> | |
376 <a on-click="{{ toggleExpand }}"> | |
377 <icon-expand-less></icon-expand-less> | |
378 </a> | |
379 </template> | |
380 </div> | |
381 </div> | |
382 </template> | |
383 </div> | |
384 </template> | |
385 </polymer-element> | |
386 | |
280 <polymer-element name="debugger-console" extends="observatory-element"> | 387 <polymer-element name="debugger-console" extends="observatory-element"> |
281 <template> | 388 <template> |
282 <link rel="stylesheet" href="css/shared.css"> | 389 <link rel="stylesheet" href="css/shared.css"> |
283 <style> | 390 <style> |
284 .console { | 391 .console { |
285 margin: 0px 20px 10px 20px; | 392 margin: 0px 20px 10px 20px; |
286 } | 393 } |
287 .normal { | 394 .normal { |
288 font: normal 14px consolas, courier, monospace; | 395 font: normal 14px consolas, courier, monospace; |
289 white-space: pre; | 396 white-space: pre; |
(...skipping 23 matching lines...) Expand all Loading... | |
313 margin: 20px; | 420 margin: 20px; |
314 font: 400 16px consolas, courier, monospace; | 421 font: 400 16px consolas, courier, monospace; |
315 width: 95%; | 422 width: 95%; |
316 } | 423 } |
317 </style> | 424 </style> |
318 <input id="textBox" class="textBox" type="text" value="{{ text }}" autofocus > | 425 <input id="textBox" class="textBox" type="text" value="{{ text }}" autofocus > |
319 </template> | 426 </template> |
320 </polymer-element> | 427 </polymer-element> |
321 | 428 |
322 <script type="application/dart" src="debugger.dart"></script> | 429 <script type="application/dart" src="debugger.dart"></script> |
OLD | NEW |