| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2016, 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 import 'package:observatory/app.dart'; | |
| 8 import 'package:observatory/service.dart'; | |
| 9 import 'package:observatory/src/elements/helpers/tag.dart'; | |
| 10 import 'package:observatory/src/elements/shims/binding.dart'; | |
| 11 import 'package:observatory/src/elements/isolate/shared_summary.dart'; | |
| 12 | |
| 13 @bindable | |
| 14 class IsolateSharedSummaryElementWrapper extends HtmlElement { | |
| 15 static const binder = const Binder<IsolateSharedSummaryElementWrapper>(const { | |
| 16 'isolate': #isolate | |
| 17 }); | |
| 18 | |
| 19 static const tag = | |
| 20 const Tag<IsolateSharedSummaryElementWrapper>('isolate-shared-summary'); | |
| 21 | |
| 22 IsolateSharedSummaryElementWrapper.created() : super.created() { | |
| 23 binder.registerCallback(this); | |
| 24 createShadowRoot(); | |
| 25 render(); | |
| 26 } | |
| 27 | |
| 28 Isolate _isolate; | |
| 29 StreamSubscription _subscription; | |
| 30 | |
| 31 Isolate get isolate => _isolate; | |
| 32 | |
| 33 void set isolate(Isolate value) { | |
| 34 _isolate = value; | |
| 35 _detached(); | |
| 36 _attached(); | |
| 37 } | |
| 38 | |
| 39 @override | |
| 40 void attached() { | |
| 41 super.attached(); | |
| 42 _attached(); | |
| 43 } | |
| 44 | |
| 45 @override | |
| 46 void detached() { | |
| 47 super.detached(); | |
| 48 _detached(); | |
| 49 } | |
| 50 | |
| 51 void _attached() { | |
| 52 if (_isolate != null) { | |
| 53 _subscription = _isolate.changes.listen((_) { render(); }); | |
| 54 } | |
| 55 render(); | |
| 56 } | |
| 57 | |
| 58 void _detached() { | |
| 59 _subscription?.cancel(); | |
| 60 _subscription = null; | |
| 61 } | |
| 62 | |
| 63 void render() { | |
| 64 if (_isolate == null) { | |
| 65 return; | |
| 66 } | |
| 67 shadowRoot.children = [ | |
| 68 new StyleElement() | |
| 69 ..text = ''' | |
| 70 a[href] { | |
| 71 color: #0489c3; | |
| 72 text-decoration: none; | |
| 73 } | |
| 74 a[href]:hover { | |
| 75 text-decoration: underline; | |
| 76 } | |
| 77 .memberList { | |
| 78 display: table; | |
| 79 } | |
| 80 .memberItem { | |
| 81 display: table-row; | |
| 82 } | |
| 83 .memberName, .memberValue { | |
| 84 display: table-cell; | |
| 85 vertical-align: top; | |
| 86 padding: 3px 0 3px 1em; | |
| 87 font: 400 14px 'Montserrat', sans-serif; | |
| 88 } | |
| 89 isolate-shared-summary-wrapped { | |
| 90 display: block; | |
| 91 } | |
| 92 isolate-shared-summary-wrapped > .summary { | |
| 93 height: 300px; | |
| 94 position: relative; | |
| 95 } | |
| 96 isolate-shared-summary-wrapped .menu { | |
| 97 float: right; | |
| 98 top: 0; | |
| 99 right: 0; | |
| 100 } | |
| 101 isolate-shared-summary-wrapped isolate-counter-chart { | |
| 102 position: absolute; | |
| 103 left: 0; | |
| 104 top: 0; | |
| 105 right: 230px; | |
| 106 clear: both; | |
| 107 } | |
| 108 isolate-shared-summary-wrapped .errorBox { | |
| 109 background-color: #f5f5f5; | |
| 110 border: 1px solid #ccc; | |
| 111 padding: 2em; | |
| 112 font-family: consolas, courier, monospace; | |
| 113 font-size: 1em; | |
| 114 line-height: 1.2em; | |
| 115 white-space: pre; | |
| 116 } | |
| 117 isolate-counter-chart { | |
| 118 display: block; | |
| 119 position: relative; | |
| 120 height: 300px; | |
| 121 min-width: 350px; | |
| 122 } | |
| 123 isolate-counter-chart > div.host { | |
| 124 position: absolute; | |
| 125 left: 0; | |
| 126 bottom: 20px; | |
| 127 top: 5px; | |
| 128 right: 250px; | |
| 129 } | |
| 130 isolate-counter-chart > div.legend { | |
| 131 position: absolute; | |
| 132 width: 250px; | |
| 133 top: 0; | |
| 134 right: 0; | |
| 135 bottom: 0; | |
| 136 overflow-y: auto; | |
| 137 } | |
| 138 .type-pie-rdr > .chart-legend-color { | |
| 139 border-radius: 6px; | |
| 140 } | |
| 141 .chart-legend-row, .chart-legend-more { | |
| 142 width: 100%; | |
| 143 display: flex; | |
| 144 font-size: 14px; | |
| 145 margin-bottom: 16px; | |
| 146 position: relative; | |
| 147 cursor: default; | |
| 148 } | |
| 149 .chart-legend-row:hover, .chart-legend-more:hover { | |
| 150 font-weight: bold; | |
| 151 } | |
| 152 .chart-legend-color, .chart-legend-more-color { | |
| 153 width: 12px; | |
| 154 height: 12px; | |
| 155 margin: auto 8px; | |
| 156 border-radius: 2px; | |
| 157 } | |
| 158 .chart-legend-label { | |
| 159 overflow: hidden; | |
| 160 text-overflow: ellipsis; | |
| 161 max-width: 120px; | |
| 162 flex: 1; | |
| 163 } | |
| 164 ''', | |
| 165 new IsolateSharedSummaryElement(_isolate, | |
| 166 queue: ObservatoryApplication.app.queue) | |
| 167 ]; | |
| 168 } | |
| 169 } | |
| OLD | NEW |