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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: runtime/observatory/lib/src/elements/debugger.html

Issue 2312553002: Converted Observatory debugger elements (Closed)
Patch Set: Sharing command history and console Created 4 years, 3 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
« no previous file with comments | « runtime/observatory/lib/src/elements/debugger.dart ('k') | runtime/observatory/lib/src/elements/helpers/any_ref.dart » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <link rel="import" href="../../../../packages/polymer/polymer.html">
2 <link rel="import" href="eval_link.html">
3
4 <!-- TODO(turnidge): Use core-icon once core_elements work properly in
5 devtools -->
6 <polymer-element name="icon-expand-less" noscript>
7 <template>
8 <svg width="24" height="24">
9 <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "/>
10 </svg>
11 </template>
12 </polymer-element>
13
14 <polymer-element name="icon-expand-more" noscript>
15 <template>
16 <svg width="24" height="24">
17 <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "/>
18 </svg>
19 </template>
20 </polymer-element>
21
22 <polymer-element name="icon-chevron-right" noscript>
23 <template>
24 <svg width="24" height="24">
25 <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
26 </svg>
27 </template>
28 </polymer-element>
29
30 <polymer-element name="icon-chevron-left" noscript>
31 <template>
32 <svg width="24" height="24">
33 <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
34 </svg>
35 </template>
36 </polymer-element>
37
38 <polymer-element name="icon-horizontal-three-dot" noscript>
39 <template>
40 <svg width="24" height="24">
41 <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 . 9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2- 2z"/>
42 </svg>
43 </template>
44 </polymer-element>
45
46 <polymer-element name="icon-vertical-three-dot" noscript>
47 <template>
48 <svg width="24" height="24">
49 <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9 -2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z "/>
50 </svg>
51 </template>
52 </polymer-element>
53
54 <polymer-element name="icon-info" noscript>
55 <template>
56 <svg width="24" height="24">
57 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2 zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
58 </svg>
59 </template>
60 </polymer-element>
61
62 <polymer-element name="icon-info-outline" noscript>
63 <template>
64 <svg width="24" height="24">
65 <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 1 0-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
66 </svg>
67 </template>
68 </polymer-element>
69
70 <polymer-element name="debugger-page">
71 <template>
72 <link rel="stylesheet" href="css/shared.css">
73 <style>
74 .container {
75 height: 100%;
76 display: flex;
77 flex-direction: column;
78 justify-content: space-between;
79 }
80 nav-bar {
81 flex: 0 0 auto;
82 }
83 .stack {
84 flex: 0 0 auto;
85 overflow-y: auto;
86 }
87 .splitter {
88 height: 0px;
89 margin: 0px;
90 font-size: 1px;
91 border-bottom: 1px solid #888;
92 }
93 core-splitter {
94 flex: 0 0 auto;
95 }
96 .console {
97 flex: 1 1 auto;
98 overflow-x: auto;
99 overflow-y: auto;
100 }
101 .commandline {
102 flex: 0 0 auto;
103 }
104 </style>
105
106 <div class="container">
107 <nav-bar id="navbarDiv" >
108 <top-nav-menu></top-nav-menu>
109 <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
110 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
111 <nav-menu link="{{ makeLink('/debugger', isolate) }}" anchor="debugger" last="{{ true }}"></nav-menu>
112 <nav-notify notifications="{{ app.notifications }}"
113 notifyOnPause="{{ false }}"></nav-notify>
114 </nav-bar>
115 <div id="stackDiv" class="stack">
116 <debugger-stack id="stackElement" isolate="{{ isolate }}"></debugger-sta ck>
117 </div>
118 <!--
119 <core-splitter direction="up" allowOverflow=true></core-splitter>
120 -->
121 <div id="splitterDiv"><hr class="splitter"></div>
122 <div id="consoleDiv" class="console">
123 <debugger-console id="console" isolate="{{ isolate }}"></debugger-consol e>
124 </div>
125 <div id="commandDiv" class="commandline">
126 <debugger-input id="commandline" isolate="{{ isolate }}"></debugger-inpu t>
127 </div>
128 </div>
129 </template>
130 </polymer-element>
131
132 <polymer-element name="debugger-stack">
133 <template>
134 <link rel="stylesheet" href="css/shared.css">
135 <style>
136 .sampledMessage {
137 margin: 0px 20px 10px 20px;
138 font: 400 14px 'Montserrat', sans-serif;
139 line-height: 125%;
140 }
141 .splitter {
142 height: 0px;
143 margin: 0px;
144 font-size: 1px;
145 border-bottom: 1px dashed #888;
146 }
147 .noMessages, .noStack {
148 margin: 10px 0px 10px 25px;
149 font: bold 14px 'Montserrat', sans-serif;
150 line-height: 125%;
151 }
152 </style>
153 <template if="{{ isSampled }}">
154 <div class="sampledMessage">
155 The program is not paused. The stack trace below may be out of date.<br >
156 <br>
157 <action-link label="Pause Isolate" callback="{{ doPauseIsolate }}">
158 </action-link>
159 <action-link label="Refresh Stack" callback="{{ doRefreshStack }}">
160 </action-link>
161 <br>
162 <br>
163 <hr class="splitter">
164 </div>
165 </template>
166 <template if="{{ !hasStack }}">
167 <div class="noStack">No stack</div>
168 </template>
169 <ul id="frameList" class="list-group">
170 <!-- debugger-frame elements are added programmatically -->
171 </ul>
172 <hr>
173 <template if="{{ !hasMessages }}">
174 <div class="noMessages">No pending messages</div>
175 </template>
176 <ul id="messageList" class="list-group">
177 <!-- debugger-message elements are added programmatically -->
178 </ul>
179 </template>
180 </polymer-element>
181
182
183 <polymer-element name="debugger-frame">
184 <template>
185 <link rel="stylesheet" href="css/shared.css">
186 <style>
187 .frameOuter {
188 position: relative;
189 padding: 5px;
190 border: 1px solid white;
191 }
192 .frameOuter:hover {
193 border: 1px solid #e0e0e0;
194 }
195 .shadow {
196 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
197 0 2px 5px 0 rgba(0, 0, 0, 0.26);
198 }
199 .current {
200 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26),
201 0 2px 5px 0 rgba(0, 0, 0, 0.46);
202 border: 1px solid #444;
203 }
204 .frameSummaryText {
205 display: inline-block;
206 padding: 5px;
207 }
208 .frameId {
209 display: inline-block;
210 width: 60px;
211 }
212 .frameOuter .frameExpander {
213 position: absolute;
214 right: 5px;
215 top: 5px;
216 display: none;
217 }
218 .frameOuter:hover .frameExpander{
219 display: inline-block;
220 }
221 .frameContractor {
222 position: absolute;
223 right: 5px;
224 bottom: 5px;
225 display: inline-block;
226 }
227 .flex-item-script {
228 flex-grow: 1;
229 flex-shrink: 1;
230 flex-basis: 765px;
231 }
232 .flex-item-vars {
233 flex-grow: 5;
234 flex-shrink: 0;
235 flex-basis: 250px;
236 overflow-x: hidden;
237 }
238 #vars {
239 position: relative;
240 top: 5px;
241 padding-left:2em;
242 padding-bottom: 5px;
243 }
244 </style>
245 <div id="frameOuter" class="frameOuter">
246 <a on-click="{{ toggleExpand }}">
247 <div class="frameSummary">
248 <div class="frameSummaryText">
249 <div class="frameId"><b>frame {{ frame.index }}</b></div>
250 <function-ref ref="{{ frame.function }}"></function-ref>
251 ( <source-link location="{{ frame.location }}"></source-link> )
252 </div>
253 <template if="{{ !expanded }}">
254 <div class="frameExpander">
255 <icon-expand-more></icon-expand-more>
256 </div>
257 </template>
258 </div>
259 </a>
260
261 <template if="{{expanded}}">
262 <div class="frameDetails">
263 <div class="flex-row-wrap">
264 <div class="flex-item-script">
265 <source-inset height="{{ scriptHeight }}"
266 location="{{ frame.function.location }}"
267 currentPos="{{ frame.location.tokenPos }}"
268 inDebuggerContext="{{ true }}"
269 scroller="{{ scroller }}"
270 variables="{{ frame.variables }}">
271 </source-inset>
272 </div>
273 <div class="flex-item-vars">
274 <div id="vars" class="memberList">
275 <template repeat="{{ v in properLocals }}">
276 {{ v['name']}}&nbsp;:&nbsp;
277 <any-service-ref ref="{{ v['value'] }}"
278 expandKey="{{ makeExpandKey(v['name']) }}"
279 asValue="{{ true }}">
280 </any-service-ref><br>
281 </template>
282 </div>
283 </div>
284 </div>
285 <!-- TODO(turnidge): Add eval box here? -->
286 <div class="frameContractor">
287 <template if="{{expanded}}">
288 <a on-click="{{ toggleExpand }}">
289 <icon-expand-less></icon-expand-less>
290 </a>
291 </template>
292 </div>
293 </div>
294 </template>
295 </div>
296 </template>
297 </polymer-element>
298
299 <polymer-element name="debugger-message">
300 <template>
301 <link rel="stylesheet" href="css/shared.css">
302 <style>
303 .messageOuter {
304 position: relative;
305 padding: 5px;
306 border: 1px solid white;
307 }
308 .messageOuter:hover {
309 border: 1px solid #e0e0e0;
310 }
311 .shadow {
312 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
313 0 2px 5px 0 rgba(0, 0, 0, 0.26);
314 }
315 .current {
316 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26),
317 0 2px 5px 0 rgba(0, 0, 0, 0.46);
318 border: 1px solid #444;
319 }
320 .messageSummaryText {
321 display: inline-block;
322 padding: 5px;
323 }
324 .messageId {
325 display: inline-block;
326 width: 100px;
327 }
328 .messageOuter .messageExpander {
329 position: absolute;
330 right: 5px;
331 top: 5px;
332 display: none;
333 }
334 .messageOuter:hover .messageExpander {
335 display: inline-block;
336 }
337 .messageContractor {
338 position: absolute;
339 right: 5px;
340 bottom: 5px;
341 display: inline-block;
342 }
343 .flex-item-script {
344 flex-grow: 1;
345 flex-shrink: 1;
346 flex-basis: 765px;
347 }
348 .flex-item-vars {
349 flex-grow: 5;
350 flex-shrink: 0;
351 flex-basis: 225px;
352 }
353 </style>
354 <div id="messageOuter" class="messageOuter">
355 <a on-click="{{ toggleExpand }}">
356 <div class="messageSummary">
357 <div class="messageSummaryText">
358 <div class="messageId"><b>message {{ message.index }}</b></div>
359 <function-ref ref="{{ message.handler }}"></function-ref>
360 ( <source-link location="{{ message.location }}">
361 </source-link> )
362 </div>
363 <template if="{{ !expanded }}">
364 <div class="messageExpander">
365 <icon-expand-more></icon-expand-more>
366 </div>
367 </template>
368 </div>
369 </a>
370
371 <template if="{{expanded}}">
372 <div class="messageDetails">
373 <div class="flex-row-wrap">
374 <div class="flex-item-script">
375 <template if="{{ message.handler != null }}">
376 <source-inset height="{{ scriptHeight }}"
377 location="{{ message.handler.location }}"
378 inDebuggerContext="{{ true }}">
379 </source-inset>
380 </template>
381 </div>
382 <div class="flex-item-vars">
383 <div class="memberItem">
384 <div class="memberName"></div>
385 <div class="memberValue">
386 <eval-link callback="{{ previewMessage }}" label="[preview]" r esult="{{ preview }}"></eval-link>
387 </div>
388 </div>
389 </div>
390 </div>
391 <div class="messageContractor">
392 <template if="{{expanded}}">
393 <a on-click="{{ toggleExpand }}">
394 <icon-expand-less></icon-expand-less>
395 </a>
396 </template>
397 </div>
398 </div>
399 </template>
400 </div>
401 </template>
402 </polymer-element>
403
404 <polymer-element name="debugger-console">
405 <template>
406 <link rel="stylesheet" href="css/shared.css">
407 <style>
408 .console {
409 margin: 0px 20px 10px 20px;
410 }
411 .normal {
412 font: normal 14px consolas, courier, monospace;
413 white-space: pre;
414 line-height: 125%;
415 }
416 .bold {
417 font: bold 14px consolas, courier, monospace;
418 white-space: pre;
419 line-height: 125%;
420 }
421 .red {
422 font: normal 14px consolas, courier, monospace;
423 white-space: pre;
424 line-height: 125%;
425 color: red;
426 }
427 .green {
428 font: normal 14px consolas, courier, monospace;
429 white-space: pre;
430 line-height: 125%;
431 color: green;
432 }
433 .spacer {
434 height: 20px;
435 }
436 </style>
437 <div id="consoleText" class="console">
438 <!-- Console output is added programmatically -->
439 </div>
440 </template>
441 </polymer-element>
442
443 <polymer-element name="debugger-input">
444 <template>
445 <link rel="stylesheet" href="css/shared.css">
446 <style>
447 .container {
448 height: 100%;
449 display: flex;
450 flex-direction: row;
451 justify-content: space-between;
452 }
453 .textBox {
454 flex: 1 1 auto;
455 margin: 20px;
456 padding: 5px;
457 font: 400 16px consolas, courier, monospace;
458 width: 95%;
459 }
460 .modalPrompt {
461 flex: 0 0 auto;
462 margin-top: 20px;
463 margin-left: 20px;
464 padding: 5px;
465 font: 400 16px consolas, courier, monospace;
466 color: red;
467 }
468 </style>
469 <div class="container">
470 <template if="{{ modalPrompt != null }}">
471 <div class="modalPrompt">{{ modalPrompt }}</div>
472 </template>
473 <input id="textBox" class="textBox" type="text" value="{{ text }}" autofoc us>
474 </div>
475 </template>
476 </polymer-element>
477
478 <script type="application/dart" src="debugger.dart"></script>
OLDNEW
« no previous file with comments | « runtime/observatory/lib/src/elements/debugger.dart ('k') | runtime/observatory/lib/src/elements/helpers/any_ref.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698