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