| OLD | NEW |
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 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 | 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. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 import 'dart:async'; | 5 import 'dart:async'; |
| 6 import 'dart:html'; | 6 import 'dart:html'; |
| 7 import 'package:observatory/models.dart' as M; | 7 import 'package:observatory/models.dart' as M; |
| 8 import 'package:observatory/src/elements/helpers/rendering_scheduler.dart'; | 8 import 'package:observatory/src/elements/helpers/rendering_scheduler.dart'; |
| 9 import 'package:observatory/src/elements/helpers/tag.dart'; | 9 import 'package:observatory/src/elements/helpers/tag.dart'; |
| 10 | 10 |
| 11 enum ProfileTreeMode { | 11 enum ProfileTreeMode { code, function, } |
| 12 code, | |
| 13 function, | |
| 14 } | |
| 15 | 12 |
| 16 class StackTraceTreeConfigChangedEvent { | 13 class StackTraceTreeConfigChangedEvent { |
| 17 final StackTraceTreeConfigElement element; | 14 final StackTraceTreeConfigElement element; |
| 18 StackTraceTreeConfigChangedEvent(this.element); | 15 StackTraceTreeConfigChangedEvent(this.element); |
| 19 } | 16 } |
| 20 | 17 |
| 21 class StackTraceTreeConfigElement extends HtmlElement implements Renderable { | 18 class StackTraceTreeConfigElement extends HtmlElement implements Renderable { |
| 22 static const tag = | 19 static const tag = |
| 23 const Tag<StackTraceTreeConfigElement>('stack-trace-tree-config'); | 20 const Tag<StackTraceTreeConfigElement>('stack-trace-tree-config'); |
| 24 | 21 |
| 25 RenderingScheduler<StackTraceTreeConfigElement> _r; | 22 RenderingScheduler<StackTraceTreeConfigElement> _r; |
| 26 | 23 |
| 27 Stream<RenderedEvent<StackTraceTreeConfigElement>> get onRendered => | 24 Stream<RenderedEvent<StackTraceTreeConfigElement>> get onRendered => |
| 28 _r.onRendered; | 25 _r.onRendered; |
| 29 | 26 |
| 30 StreamController<StackTraceTreeConfigChangedEvent> _onModeChange = | 27 StreamController<StackTraceTreeConfigChangedEvent> _onModeChange = |
| 31 new StreamController<StackTraceTreeConfigChangedEvent>.broadcast(); | 28 new StreamController<StackTraceTreeConfigChangedEvent>.broadcast(); |
| 32 StreamController<StackTraceTreeConfigChangedEvent> _onDirectionChange = | 29 StreamController<StackTraceTreeConfigChangedEvent> _onDirectionChange = |
| 33 new StreamController<StackTraceTreeConfigChangedEvent>.broadcast(); | 30 new StreamController<StackTraceTreeConfigChangedEvent>.broadcast(); |
| 34 StreamController<StackTraceTreeConfigChangedEvent> _onFilterChange = | 31 StreamController<StackTraceTreeConfigChangedEvent> _onFilterChange = |
| 35 new StreamController<StackTraceTreeConfigChangedEvent>.broadcast(); | 32 new StreamController<StackTraceTreeConfigChangedEvent>.broadcast(); |
| 36 Stream<StackTraceTreeConfigChangedEvent> get onModeChange => | 33 Stream<StackTraceTreeConfigChangedEvent> get onModeChange => |
| 37 _onModeChange.stream; | 34 _onModeChange.stream; |
| 38 Stream<StackTraceTreeConfigChangedEvent> get onDirectionChange => | 35 Stream<StackTraceTreeConfigChangedEvent> get onDirectionChange => |
| (...skipping 18 matching lines...) Expand all Loading... |
| 57 set showMode(bool value) => _showMode = _r.checkAndReact(_showMode, value); | 54 set showMode(bool value) => _showMode = _r.checkAndReact(_showMode, value); |
| 58 set showDirection(bool value) => | 55 set showDirection(bool value) => |
| 59 _showDirection = _r.checkAndReact(_showDirection, value); | 56 _showDirection = _r.checkAndReact(_showDirection, value); |
| 60 set showFilter(bool value) => | 57 set showFilter(bool value) => |
| 61 _showFilter = _r.checkAndReact(_showFilter, value); | 58 _showFilter = _r.checkAndReact(_showFilter, value); |
| 62 set mode(ProfileTreeMode value) => _mode = _r.checkAndReact(_mode, value); | 59 set mode(ProfileTreeMode value) => _mode = _r.checkAndReact(_mode, value); |
| 63 set direction(M.ProfileTreeDirection value) => | 60 set direction(M.ProfileTreeDirection value) => |
| 64 _direction = _r.checkAndReact(_direction, value); | 61 _direction = _r.checkAndReact(_direction, value); |
| 65 set filter(String value) => _filter = _r.checkAndReact(_filter, value); | 62 set filter(String value) => _filter = _r.checkAndReact(_filter, value); |
| 66 | 63 |
| 67 factory StackTraceTreeConfigElement({bool showMode: true, | 64 factory StackTraceTreeConfigElement( |
| 68 bool showDirection: true, bool showFilter: true, String filter: '', | 65 {bool showMode: true, |
| 66 bool showDirection: true, |
| 67 bool showFilter: true, |
| 68 String filter: '', |
| 69 ProfileTreeMode mode: ProfileTreeMode.function, | 69 ProfileTreeMode mode: ProfileTreeMode.function, |
| 70 M.ProfileTreeDirection direction: M.ProfileTreeDirection.exclusive, | 70 M.ProfileTreeDirection direction: M.ProfileTreeDirection.exclusive, |
| 71 RenderingQueue queue}) { | 71 RenderingQueue queue}) { |
| 72 assert(showMode != null); | 72 assert(showMode != null); |
| 73 assert(showDirection != null); | 73 assert(showDirection != null); |
| 74 assert(showFilter != null); | 74 assert(showFilter != null); |
| 75 assert(mode != null); | 75 assert(mode != null); |
| 76 assert(direction != null); | 76 assert(direction != null); |
| 77 assert(filter != null); | 77 assert(filter != null); |
| 78 StackTraceTreeConfigElement e = document.createElement(tag.name); | 78 StackTraceTreeConfigElement e = document.createElement(tag.name); |
| (...skipping 10 matching lines...) Expand all Loading... |
| 89 StackTraceTreeConfigElement.created() : super.created(); | 89 StackTraceTreeConfigElement.created() : super.created(); |
| 90 | 90 |
| 91 @override | 91 @override |
| 92 void attached() { | 92 void attached() { |
| 93 super.attached(); | 93 super.attached(); |
| 94 _r.enable(); | 94 _r.enable(); |
| 95 } | 95 } |
| 96 | 96 |
| 97 @override | 97 @override |
| 98 void detached() { | 98 void detached() { |
| 99 super.detached(); _r.disable(notify: true); | 99 super.detached(); |
| 100 _r.disable(notify: true); |
| 100 children = const []; | 101 children = const []; |
| 101 } | 102 } |
| 102 | 103 |
| 103 void render() { | 104 void render() { |
| 104 children = [ | 105 children = [ |
| 105 new DivElement()..classes = ['content-centered-big'] | 106 new DivElement() |
| 107 ..classes = ['content-centered-big'] |
| 106 ..children = [ | 108 ..children = [ |
| 107 new HeadingElement.h2()..text = 'Tree display', | 109 new HeadingElement.h2()..text = 'Tree display', |
| 108 new HRElement(), | 110 new HRElement(), |
| 109 new DivElement()..classes = ['row'] | 111 new DivElement() |
| 112 ..classes = ['row'] |
| 110 ..children = [ | 113 ..children = [ |
| 111 new DivElement()..classes = ['memberList'] | 114 new DivElement() |
| 115 ..classes = ['memberList'] |
| 112 ..children = _createMembers() | 116 ..children = _createMembers() |
| 113 ] | 117 ] |
| 114 ] | 118 ] |
| 115 ]; | 119 ]; |
| 116 } | 120 } |
| 117 | 121 |
| 118 List<Element> _createMembers() { | 122 List<Element> _createMembers() { |
| 119 var members = <Element>[]; | 123 var members = <Element>[]; |
| 120 if (_showMode) { | 124 if (_showMode) { |
| 121 members.add( | 125 members.add(new DivElement() |
| 122 new DivElement()..classes = ['memberItem'] | 126 ..classes = ['memberItem'] |
| 123 ..children = [ | 127 ..children = [ |
| 124 new DivElement()..classes = ['memberName']..text = 'Mode', | 128 new DivElement() |
| 125 new DivElement()..classes = ['memberValue'] | 129 ..classes = ['memberName'] |
| 126 ..children = _createModeSelect() | 130 ..text = 'Mode', |
| 127 ] | 131 new DivElement() |
| 128 ); | 132 ..classes = ['memberValue'] |
| 133 ..children = _createModeSelect() |
| 134 ]); |
| 129 } | 135 } |
| 130 if (_showDirection) { | 136 if (_showDirection) { |
| 131 members.add( | 137 members.add(new DivElement() |
| 132 new DivElement()..classes = ['memberItem'] | 138 ..classes = ['memberItem'] |
| 133 ..children = [ | 139 ..children = [ |
| 134 new DivElement()..classes = ['memberName'] | 140 new DivElement() |
| 135 ..text = 'Call Tree Direction', | 141 ..classes = ['memberName'] |
| 136 new SpanElement()..classes = ['memberValue'] | 142 ..text = 'Call Tree Direction', |
| 137 ..children = _createDirectionSelect() | 143 new SpanElement() |
| 138 ] | 144 ..classes = ['memberValue'] |
| 139 ); | 145 ..children = _createDirectionSelect() |
| 146 ]); |
| 140 } | 147 } |
| 141 if (showFilter) { | 148 if (showFilter) { |
| 142 members.add( | 149 members.add(new DivElement() |
| 143 new DivElement()..classes = ['memberItem'] | 150 ..classes = ['memberItem'] |
| 144 ..children = [ | 151 ..children = [ |
| 145 new DivElement()..classes = ['memberName'] | 152 new DivElement() |
| 146 ..text = 'Call Tree Filter' | 153 ..classes = ['memberName'] |
| 147 ..title = 'case-sensitive substring match', | 154 ..text = 'Call Tree Filter' |
| 148 new SpanElement()..classes = ['memberValue'] | 155 ..title = 'case-sensitive substring match', |
| 149 ..children = _createFilter() | 156 new SpanElement() |
| 150 ] | 157 ..classes = ['memberValue'] |
| 151 ); | 158 ..children = _createFilter() |
| 159 ]); |
| 152 } | 160 } |
| 153 return members; | 161 return members; |
| 154 } | 162 } |
| 155 | 163 |
| 156 List<Element> _createModeSelect() { | 164 List<Element> _createModeSelect() { |
| 157 var s; | 165 var s; |
| 158 return [ | 166 return [ |
| 159 s = new SelectElement()..classes = ['mode-select'] | 167 s = new SelectElement() |
| 168 ..classes = ['mode-select'] |
| 160 ..value = modeToString(_mode) | 169 ..value = modeToString(_mode) |
| 161 ..children = ProfileTreeMode.values.map((mode) { | 170 ..children = ProfileTreeMode.values.map((mode) { |
| 162 return new OptionElement(value : modeToString(mode), | 171 return new OptionElement( |
| 163 selected: _mode == mode) | 172 value: modeToString(mode), |
| 164 ..text = modeToString(mode); | 173 selected: _mode == mode)..text = modeToString(mode); |
| 165 }).toList(growable: false) | 174 }).toList(growable: false) |
| 166 ..onChange.listen((_) { | 175 ..onChange.listen((_) { |
| 167 _mode = ProfileTreeMode.values[s.selectedIndex]; | 176 _mode = ProfileTreeMode.values[s.selectedIndex]; |
| 168 }) | 177 }) |
| 169 ..onChange.map(_toEvent).listen(_triggerModeChange), | 178 ..onChange.map(_toEvent).listen(_triggerModeChange), |
| 170 ]; | 179 ]; |
| 171 } | 180 } |
| 172 | 181 |
| 173 List<Element> _createDirectionSelect() { | 182 List<Element> _createDirectionSelect() { |
| 174 var s; | 183 var s; |
| 175 return [ | 184 return [ |
| 176 s = new SelectElement()..classes = ['direction-select'] | 185 s = new SelectElement() |
| 186 ..classes = ['direction-select'] |
| 177 ..value = directionToString(_direction) | 187 ..value = directionToString(_direction) |
| 178 ..children = M.ProfileTreeDirection.values.map((direction) { | 188 ..children = M.ProfileTreeDirection.values.map((direction) { |
| 179 return new OptionElement(value: directionToString(direction), | 189 return new OptionElement( |
| 180 selected: _direction == direction) | 190 value: directionToString(direction), |
| 181 ..text = directionToString(direction); | 191 selected: _direction == direction) |
| 182 }).toList(growable: false) | 192 ..text = directionToString(direction); |
| 193 }).toList(growable: false) |
| 183 ..onChange.listen((_) { | 194 ..onChange.listen((_) { |
| 184 _direction = M.ProfileTreeDirection.values[s.selectedIndex]; | 195 _direction = M.ProfileTreeDirection.values[s.selectedIndex]; |
| 185 }) | 196 }) |
| 186 ..onChange.map(_toEvent).listen(_triggerDirectionChange), | 197 ..onChange.map(_toEvent).listen(_triggerDirectionChange), |
| 187 new SpanElement()..text = 'Tree is rooted at ' + | 198 new SpanElement() |
| 188 (_direction == 'Down' ? '"main"' : 'function / code') + | 199 ..text = 'Tree is rooted at ' + |
| 189 '. Child nodes are callers.' | 200 (_direction == 'Down' ? '"main"' : 'function / code') + |
| 201 '. Child nodes are callers.' |
| 190 ]; | 202 ]; |
| 191 } | 203 } |
| 192 | 204 |
| 193 List<Element> _createFilter(){ | 205 List<Element> _createFilter() { |
| 194 var t; | 206 var t; |
| 195 return [ | 207 return [ |
| 196 t = new TextInputElement()..placeholder = 'Search filter' | 208 t = new TextInputElement() |
| 197 ..value = filter | 209 ..placeholder = 'Search filter' |
| 198 ..onChange.listen((_) { _filter = t.value; }) | 210 ..value = filter |
| 199 ..onChange.map(_toEvent).listen(_triggerFilterChange) | 211 ..onChange.listen((_) { |
| 212 _filter = t.value; |
| 213 }) |
| 214 ..onChange.map(_toEvent).listen(_triggerFilterChange) |
| 200 ]; | 215 ]; |
| 201 } | 216 } |
| 202 | 217 |
| 203 static String modeToString(ProfileTreeMode mode) { | 218 static String modeToString(ProfileTreeMode mode) { |
| 204 switch (mode) { | 219 switch (mode) { |
| 205 case ProfileTreeMode.code: return 'Code'; | 220 case ProfileTreeMode.code: |
| 206 case ProfileTreeMode.function: return 'Function'; | 221 return 'Code'; |
| 222 case ProfileTreeMode.function: |
| 223 return 'Function'; |
| 207 } | 224 } |
| 208 throw new Exception('Unknown ProfileTreeMode'); | 225 throw new Exception('Unknown ProfileTreeMode'); |
| 209 } | 226 } |
| 210 | 227 |
| 211 static String directionToString(M.ProfileTreeDirection direction) { | 228 static String directionToString(M.ProfileTreeDirection direction) { |
| 212 switch (direction) { | 229 switch (direction) { |
| 213 case M.ProfileTreeDirection.inclusive: return 'Top down'; | 230 case M.ProfileTreeDirection.inclusive: |
| 214 case M.ProfileTreeDirection.exclusive: return 'Bottom up'; | 231 return 'Top down'; |
| 232 case M.ProfileTreeDirection.exclusive: |
| 233 return 'Bottom up'; |
| 215 } | 234 } |
| 216 throw new Exception('Unknown ProfileTreeDirection'); | 235 throw new Exception('Unknown ProfileTreeDirection'); |
| 217 } | 236 } |
| 218 | 237 |
| 219 StackTraceTreeConfigChangedEvent _toEvent(_) { | 238 StackTraceTreeConfigChangedEvent _toEvent(_) { |
| 220 return new StackTraceTreeConfigChangedEvent(this); | 239 return new StackTraceTreeConfigChangedEvent(this); |
| 221 } | 240 } |
| 222 | 241 |
| 223 void _triggerModeChange(e) => _onModeChange.add(e); | 242 void _triggerModeChange(e) => _onModeChange.add(e); |
| 224 void _triggerDirectionChange(e) => _onDirectionChange.add(e); | 243 void _triggerDirectionChange(e) => _onDirectionChange.add(e); |
| 225 void _triggerFilterChange(e) => _onFilterChange.add(e); | 244 void _triggerFilterChange(e) => _onFilterChange.add(e); |
| 226 | |
| 227 | |
| 228 } | 245 } |
| OLD | NEW |