| 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 } |
| 106 script-inset-wrapped button.refresh { |
| 107 right: 5px; |
| 108 font-size: 25px; |
| 109 } |
| 110 script-inset-wrapped button.toggle-profile { |
| 111 right: 30px; |
| 112 font-size: 20px; |
| 113 } |
| 114 script-inset-wrapped button.toggle-profile.enabled { |
| 115 color: #BB3322; |
| 116 } |
| 117 script-inset-wrapped a { |
| 118 color: #0489c3; |
| 119 text-decoration: none; |
| 120 } |
| 121 script-inset-wrapped a:hover { |
| 122 text-decoration: underline; |
| 123 } |
| 124 script-inset-wrapped .sourceInset { |
| 125 } |
| 126 script-inset-wrapped .sourceTable { |
| 127 position: relative; |
| 128 background-color: #f5f5f5; |
| 129 border: 1px solid #ccc; |
| 130 padding: 10px; |
| 131 width: 100%; |
| 132 box-sizing: border-box; |
| 133 overflow-x: scroll; |
| 134 } |
| 135 script-inset-wrapped .sourceRow { |
| 136 display: flex; |
| 137 flex-direction: row; |
| 138 width: 100%; |
| 139 } |
| 140 script-inset-wrapped .sourceItem, .sourceItemCurrent { |
| 141 vertical-align: top; |
| 142 font: 400 14px consolas, courier, monospace; |
| 143 line-height: 125%; |
| 144 white-space: pre; |
| 145 max-width: 0; |
| 146 } |
| 147 script-inset-wrapped .currentLine { |
| 148 background-color: #fff; |
| 149 } |
| 150 script-inset-wrapped .currentCol { |
| 151 background-color: #6cf; |
| 152 } |
| 153 script-inset-wrapped .hitsCurrent, |
| 154 script-inset-wrapped .hitsNone, |
| 155 script-inset-wrapped .hitsNotExecuted, |
| 156 script-inset-wrapped .hitsExecuted, |
| 157 script-inset-wrapped .hitsCompiled, |
| 158 script-inset-wrapped .hitsNotCompiled { |
| 159 display: table-cell; |
| 160 vertical-align: top; |
| 161 font: 400 14px consolas, courier, monospace; |
| 162 margin-left: 5px; |
| 163 margin-right: 5px; |
| 164 text-align: right; |
| 165 color: #a8a8a8; |
| 166 } |
| 167 script-inset-wrapped .hitsCurrent { |
| 168 background-color: #6cf; |
| 169 color: black; |
| 170 } |
| 171 script-inset-wrapped .hitsNotExecuted { |
| 172 background-color: #faa; |
| 173 } |
| 174 script-inset-wrapped .hitsExecuted { |
| 175 background-color: #aea; |
| 176 } |
| 177 script-inset-wrapped .hitsCompiled { |
| 178 background-color: #e0e0e0; |
| 179 } |
| 180 script-inset-wrapped .hitsNotCompiled { |
| 181 background-color: #f0c5c5; |
| 182 } |
| 183 script-inset-wrapped .noCopy {} |
| 184 script-inset-wrapped .emptyBreakpoint, |
| 185 script-inset-wrapped .possibleBreakpoint, |
| 186 script-inset-wrapped .busyBreakpoint, |
| 187 script-inset-wrapped .unresolvedBreakpoint, |
| 188 script-inset-wrapped .resolvedBreakpoint { |
| 189 display: table-cell; |
| 190 vertical-align: top; |
| 191 font: 400 14px consolas, courier, monospace; |
| 192 width: 1em; |
| 193 text-align: center; |
| 194 cursor: pointer; |
| 195 } |
| 196 script-inset-wrapped .possibleBreakpoint { |
| 197 color: #e0e0e0; |
| 198 } |
| 199 script-inset-wrapped .possibleBreakpoint:hover { |
| 200 color: white; |
| 201 background-color: #777; |
| 202 } |
| 203 script-inset-wrapped .busyBreakpoint { |
| 204 color: white; |
| 205 background-color: black; |
| 206 cursor: wait; |
| 207 } |
| 208 script-inset-wrapped .unresolvedBreakpoint { |
| 209 color: white; |
| 210 background-color: #cac; |
| 211 } |
| 212 script-inset-wrapped .resolvedBreakpoint { |
| 213 color: white; |
| 214 background-color: #e66; |
| 215 } |
| 216 script-inset-wrapped .unresolvedBreakAnnotation { |
| 217 color: white; |
| 218 background-color: #cac; |
| 219 } |
| 220 script-inset-wrapped .resolvedBreakAnnotation { |
| 221 color: white; |
| 222 background-color: #e66; |
| 223 } |
| 224 script-inset-wrapped .notSourceProfile, |
| 225 script-inset-wrapped .noProfile, |
| 226 script-inset-wrapped .coldProfile, |
| 227 script-inset-wrapped .mediumProfile, |
| 228 script-inset-wrapped .hotProfile { |
| 229 display: table-cell; |
| 230 vertical-align: top; |
| 231 font: 400 14px consolas, courier, monospace; |
| 232 width: 4em; |
| 233 text-align: right; |
| 234 cursor: pointer; |
| 235 margin-left: 5px; |
| 236 margin-right: 5px; |
| 237 } |
| 238 script-inset-wrapped .notSourceProfile { |
| 239 } |
| 240 script-inset-wrapped .noProfile { |
| 241 background-color: #e0e0e0; |
| 242 } |
| 243 script-inset-wrapped .coldProfile { |
| 244 background-color: #aea; |
| 245 } |
| 246 script-inset-wrapped .mediumProfile { |
| 247 background-color: #fe9; |
| 248 } |
| 249 script-inset-wrapped .hotProfile { |
| 250 background-color: #faa; |
| 251 }''', |
| 252 new ScriptInsetElement(_script.isolate, _script, |
| 253 new ScriptRepository(), |
| 254 new InstanceRepository(), |
| 255 ObservatoryApplication.app.events, |
| 256 startPos: _startPos, |
| 257 endPos: _endPos, |
| 258 currentPos: _currentPos, |
| 259 inDebuggerContext: _inDebuggerContext ?? false, |
| 260 variables: _variables ?? const [], |
| 261 queue: ObservatoryApplication.app.queue) |
| 262 ]; |
| 263 } |
| 264 } |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2277543004:
Converted Observatory script-inset & source-inset elements (Closed)
Base URL: git@github.com:dart-lang/sdk.git@master