| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | |
| 2 // for details. All rights reserved. Use of this source code is governed by a | |
| 3 // BSD-style license that can be found in the LICENSE file. | |
| 4 | |
| 5 import 'dart:html'; | |
| 6 import 'dart:async'; | |
| 7 | |
| 8 import 'package:observatory/app.dart'; | |
| 9 import 'package:observatory/repositories.dart'; | |
| 10 import 'package:observatory/service_html.dart' show Script; | |
| 11 import 'package:observatory/src/elements/script_inset.dart'; | |
| 12 import 'package:observatory/src/elements/helpers/tag.dart'; | |
| 13 import 'package:observatory/src/elements/shims/binding.dart'; | |
| 14 | |
| 15 @bindable | |
| 16 class ScriptInsetElementWrapper extends HtmlElement { | |
| 17 static const binder = const Binder<ScriptInsetElementWrapper>(const { | |
| 18 'script': #script, 'startpos': #startPos, 'endpos': #endPos, | |
| 19 'currentpos': #currentPos, 'indebuggercontext': #inDebuggerContext, | |
| 20 'variables': #variables, 'height': #height | |
| 21 }); | |
| 22 | |
| 23 static const tag = const Tag<ScriptInsetElementWrapper>('script-inset'); | |
| 24 | |
| 25 Script _script; | |
| 26 int _startPos; | |
| 27 int _endPos; | |
| 28 int _currentPos; | |
| 29 String _height; | |
| 30 bool _inDebuggerContext; | |
| 31 Iterable _variables; | |
| 32 | |
| 33 Script get script => _script; | |
| 34 int get startPos => _startPos; | |
| 35 int get endPos => _endPos; | |
| 36 int get currentPos => _currentPos; | |
| 37 String get height => _height; | |
| 38 bool get inDebuggerContext => _inDebuggerContext; | |
| 39 Iterable get variables => _variables; | |
| 40 | |
| 41 set script(Script value) { | |
| 42 _script = value; | |
| 43 render(); | |
| 44 } | |
| 45 set startPos(int value) { | |
| 46 _startPos = value; | |
| 47 render(); | |
| 48 } | |
| 49 set endPos(int value) { | |
| 50 _endPos = value; | |
| 51 render(); | |
| 52 } | |
| 53 set currentPos(int value) { | |
| 54 _currentPos = value; | |
| 55 render(); | |
| 56 } | |
| 57 set height(String value) { | |
| 58 _height = value; | |
| 59 render(); | |
| 60 } | |
| 61 set inDebuggerContext(bool value) { | |
| 62 _inDebuggerContext = value; | |
| 63 render(); | |
| 64 } | |
| 65 set variables(Iterable value) { | |
| 66 _variables = value; | |
| 67 render(); | |
| 68 } | |
| 69 | |
| 70 ScriptInsetElementWrapper.created() : super.created() { | |
| 71 binder.registerCallback(this); | |
| 72 createShadowRoot(); | |
| 73 render(); | |
| 74 } | |
| 75 | |
| 76 @override | |
| 77 void attached() { | |
| 78 super.attached(); | |
| 79 render(); | |
| 80 } | |
| 81 | |
| 82 Future render() async { | |
| 83 shadowRoot.children = []; | |
| 84 if (_script == null) { | |
| 85 return; | |
| 86 } | |
| 87 | |
| 88 shadowRoot.children = [ | |
| 89 new StyleElement() | |
| 90 ..text = ''' | |
| 91 script-inset-wrapped { | |
| 92 position: relative; | |
| 93 } | |
| 94 script-inset-wrapped button.refresh, | |
| 95 script-inset-wrapped button.toggle-profile { | |
| 96 background-color: transparent; | |
| 97 padding: 0; | |
| 98 margin: 0; | |
| 99 border: none; | |
| 100 position: absolute; | |
| 101 display: inline-block; | |
| 102 top: 5px; | |
| 103 color: #888888; | |
| 104 line-height: 30px; | |
| 105 font: 400 20px 'Montserrat', sans-serif; | |
| 106 } | |
| 107 script-inset-wrapped button.refresh { | |
| 108 right: 5px; | |
| 109 font-size: 25px; | |
| 110 } | |
| 111 script-inset-wrapped button.toggle-profile { | |
| 112 right: 30px; | |
| 113 font-size: 20px; | |
| 114 } | |
| 115 script-inset-wrapped button.toggle-profile.enabled { | |
| 116 color: #BB3322; | |
| 117 } | |
| 118 script-inset-wrapped a { | |
| 119 color: #0489c3; | |
| 120 text-decoration: none; | |
| 121 } | |
| 122 script-inset-wrapped a:hover { | |
| 123 text-decoration: underline; | |
| 124 } | |
| 125 script-inset-wrapped .sourceInset { | |
| 126 } | |
| 127 script-inset-wrapped .sourceTable { | |
| 128 position: relative; | |
| 129 background-color: #f5f5f5; | |
| 130 border: 1px solid #ccc; | |
| 131 padding: 10px; | |
| 132 width: 100%; | |
| 133 box-sizing: border-box; | |
| 134 overflow-x: scroll; | |
| 135 } | |
| 136 script-inset-wrapped .sourceRow { | |
| 137 display: flex; | |
| 138 flex-direction: row; | |
| 139 width: 100%; | |
| 140 } | |
| 141 script-inset-wrapped .sourceItem, | |
| 142 script-inset-wrapped .sourceItemCurrent { | |
| 143 vertical-align: top; | |
| 144 font: 400 14px consolas, courier, monospace; | |
| 145 line-height: 125%; | |
| 146 white-space: pre; | |
| 147 max-width: 0; | |
| 148 } | |
| 149 script-inset-wrapped .currentLine { | |
| 150 background-color: #fff; | |
| 151 } | |
| 152 script-inset-wrapped .currentCol { | |
| 153 background-color: #6cf; | |
| 154 } | |
| 155 script-inset-wrapped .hitsCurrent, | |
| 156 script-inset-wrapped .hitsNone, | |
| 157 script-inset-wrapped .hitsNotExecuted, | |
| 158 script-inset-wrapped .hitsExecuted, | |
| 159 script-inset-wrapped .hitsCompiled, | |
| 160 script-inset-wrapped .hitsNotCompiled { | |
| 161 display: table-cell; | |
| 162 vertical-align: top; | |
| 163 font: 400 14px consolas, courier, monospace; | |
| 164 margin-left: 5px; | |
| 165 margin-right: 5px; | |
| 166 text-align: right; | |
| 167 color: #a8a8a8; | |
| 168 } | |
| 169 script-inset-wrapped .hitsCurrent { | |
| 170 background-color: #6cf; | |
| 171 color: black; | |
| 172 } | |
| 173 script-inset-wrapped .hitsNotExecuted { | |
| 174 background-color: #faa; | |
| 175 } | |
| 176 script-inset-wrapped .hitsExecuted { | |
| 177 background-color: #aea; | |
| 178 } | |
| 179 script-inset-wrapped .hitsCompiled { | |
| 180 background-color: #e0e0e0; | |
| 181 } | |
| 182 script-inset-wrapped .hitsNotCompiled { | |
| 183 background-color: #f0c5c5; | |
| 184 } | |
| 185 script-inset-wrapped .noCopy {} | |
| 186 script-inset-wrapped .emptyBreakpoint, | |
| 187 script-inset-wrapped .possibleBreakpoint, | |
| 188 script-inset-wrapped .busyBreakpoint, | |
| 189 script-inset-wrapped .unresolvedBreakpoint, | |
| 190 script-inset-wrapped .resolvedBreakpoint { | |
| 191 display: table-cell; | |
| 192 vertical-align: top; | |
| 193 font: 400 14px consolas, courier, monospace; | |
| 194 width: 1em; | |
| 195 text-align: center; | |
| 196 cursor: pointer; | |
| 197 } | |
| 198 script-inset-wrapped .possibleBreakpoint { | |
| 199 color: #e0e0e0; | |
| 200 } | |
| 201 script-inset-wrapped .possibleBreakpoint:hover { | |
| 202 color: white; | |
| 203 background-color: #777; | |
| 204 } | |
| 205 script-inset-wrapped .busyBreakpoint { | |
| 206 color: white; | |
| 207 background-color: black; | |
| 208 cursor: wait; | |
| 209 } | |
| 210 script-inset-wrapped .unresolvedBreakpoint { | |
| 211 color: white; | |
| 212 background-color: #cac; | |
| 213 } | |
| 214 script-inset-wrapped .resolvedBreakpoint { | |
| 215 color: white; | |
| 216 background-color: #e66; | |
| 217 } | |
| 218 script-inset-wrapped .unresolvedBreakAnnotation { | |
| 219 color: white; | |
| 220 background-color: #cac; | |
| 221 } | |
| 222 script-inset-wrapped .resolvedBreakAnnotation { | |
| 223 color: white; | |
| 224 background-color: #e66; | |
| 225 } | |
| 226 script-inset-wrapped .notSourceProfile, | |
| 227 script-inset-wrapped .noProfile, | |
| 228 script-inset-wrapped .coldProfile, | |
| 229 script-inset-wrapped .mediumProfile, | |
| 230 script-inset-wrapped .hotProfile { | |
| 231 display: table-cell; | |
| 232 vertical-align: top; | |
| 233 font: 400 14px consolas, courier, monospace; | |
| 234 width: 4em; | |
| 235 text-align: right; | |
| 236 cursor: pointer; | |
| 237 margin-left: 5px; | |
| 238 margin-right: 5px; | |
| 239 } | |
| 240 script-inset-wrapped .notSourceProfile { | |
| 241 } | |
| 242 script-inset-wrapped .noProfile { | |
| 243 background-color: #e0e0e0; | |
| 244 } | |
| 245 script-inset-wrapped .coldProfile { | |
| 246 background-color: #aea; | |
| 247 } | |
| 248 script-inset-wrapped .mediumProfile { | |
| 249 background-color: #fe9; | |
| 250 } | |
| 251 script-inset-wrapped .hotProfile { | |
| 252 background-color: #faa; | |
| 253 }''', | |
| 254 new ScriptInsetElement(_script.isolate, _script, | |
| 255 new ScriptRepository(), | |
| 256 new InstanceRepository(), | |
| 257 ObservatoryApplication.app.events, | |
| 258 startPos: _startPos, | |
| 259 endPos: _endPos, | |
| 260 currentPos: _currentPos, | |
| 261 inDebuggerContext: _inDebuggerContext ?? false, | |
| 262 variables: _variables ?? const [], | |
| 263 queue: ObservatoryApplication.app.queue) | |
| 264 ]; | |
| 265 } | |
| 266 } | |
| OLD | NEW |