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 |