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 |