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