Converted Observatory isolate-summary element

patch

Index: patch
diff --git a/patch b/patch
new file mode 100644
index 0000000000000000000000000000000000000000..5dfd2f3ca1ff78a8a008fab6020ed774915ec537
--- /dev/null
+++ b/patch
@@ -0,0 +1,1138 @@
+Index: runtime/observatory/lib/src/elements/observatory_application.html
+diff --git a/runtime/observatory/lib/src/elements/observatory_application.html b/runtime/observatory/lib/src/elements/observatory_application.html

[Cutch, 2016/08/09 20:04:22]

delete this.

[cbernaschina, 2016/08/09 20:06:47]

Done.

+deleted file mode 100644
+index d91819f0d4bddb2551c812f83a8dd25cf2d6b0d3..0000000000000000000000000000000000000000
+--- a/runtime/observatory/lib/src/elements/observatory_application.html
++++ /dev/null
+@@ -1,8 +0,0 @@
+-<link rel="import" href="../../../../packages/polymer/polymer.html">
+-
+-<link rel="import" href="service_view.html">
+-<polymer-element name="observatory-application">
+-  <!-- This element explicitly manages its child elements -->
+-</polymer-element>
+-
+-<script type="application/dart" src="observatory_application.dart"></script>
+\ No newline at end of file
+Index: runtime/observatory/lib/elements.dart
+diff --git a/runtime/observatory/lib/elements.dart b/runtime/observatory/lib/elements.dart
+index ecc32ac42ff3985eaffa3a763afb3080d711ce5f..c021ab5b86c5e8a6f75f9119ef08204cff6f9a46 100644
+--- a/runtime/observatory/lib/elements.dart
++++ b/runtime/observatory/lib/elements.dart
+@@ -36,7 +36,6 @@ export 'package:observatory/src/elements/object_common.dart';
+ export 'package:observatory/src/elements/object_view.dart';
+ export 'package:observatory/src/elements/objectpool_view.dart';
+ export 'package:observatory/src/elements/objectstore_view.dart';
+-export 'package:observatory/src/elements/observatory_application.dart';
+ export 'package:observatory/src/elements/observatory_element.dart';
+ export 'package:observatory/src/elements/persistent_handles.dart';
+ export 'package:observatory/src/elements/ports.dart';
+@@ -65,6 +64,9 @@ import 'package:observatory/src/elements/flag_list.dart';
+ import 'package:observatory/src/elements/function_ref.dart';
+ import 'package:observatory/src/elements/function_ref_wrapper.dart';
+ import 'package:observatory/src/elements/general_error.dart';
++import 'package:observatory/src/elements/isolate/counter_chart.dart';
++import 'package:observatory/src/elements/isolate/shared_summary.dart';
++import 'package:observatory/src/elements/isolate/shared_summary_wrapper.dart';
+ import 'package:observatory/src/elements/isolate_ref.dart';
+ import 'package:observatory/src/elements/isolate_ref_wrapper.dart';
+ import 'package:observatory/src/elements/library_ref.dart';
+@@ -90,6 +92,7 @@ import 'package:observatory/src/elements/nav/top_menu.dart';
+ import 'package:observatory/src/elements/nav/top_menu_wrapper.dart';
+ import 'package:observatory/src/elements/nav/vm_menu.dart';
+ import 'package:observatory/src/elements/nav/vm_menu_wrapper.dart';
++import 'package:observatory/src/elements/observatory_application.dart';
+ import 'package:observatory/src/elements/script_ref.dart';
+ import 'package:observatory/src/elements/script_ref_wrapper.dart';
+ import 'package:observatory/src/elements/source_link.dart';
+@@ -110,6 +113,7 @@ export 'package:observatory/src/elements/error_ref.dart';
+ export 'package:observatory/src/elements/flag_list.dart';
+ export 'package:observatory/src/elements/function_ref.dart';
+ export 'package:observatory/src/elements/general_error.dart';
++export 'package:observatory/src/elements/isolate/counter_chart.dart';
+ export 'package:observatory/src/elements/isolate_ref.dart';
+ export 'package:observatory/src/elements/library_ref.dart';
+ export 'package:observatory/src/elements/nav/bar.dart';
+@@ -124,6 +128,7 @@ export 'package:observatory/src/elements/nav/notify_exception.dart';
+ export 'package:observatory/src/elements/nav/refresh.dart';
+ export 'package:observatory/src/elements/nav/top_menu.dart';
+ export 'package:observatory/src/elements/nav/vm_menu.dart';
++export 'package:observatory/src/elements/observatory_application.dart';
+ export 'package:observatory/src/elements/script_ref.dart';
+ export 'package:observatory/src/elements/source_link.dart';
+ export 'package:observatory/src/elements/view_footer.dart';
+@@ -146,6 +151,9 @@ Future initElements() async {
+   FunctionRefElement.tag.ensureRegistration();
+   FunctionRefElementWrapper.tag.ensureRegistration();
+   GeneralErrorElement.tag.ensureRegistration();
++  IsolateCounterChartElement.tag.ensureRegistration();
++  IsolateSharedSummaryElement.tag.ensureRegistration();
++  IsolateSharedSummaryElementWrapper.tag.ensureRegistration();
+   IsolateRefElement.tag.ensureRegistration();
+   IsolateRefElementWrapper.tag.ensureRegistration();
+   LibraryRefElement.tag.ensureRegistration();
+@@ -171,6 +179,8 @@ Future initElements() async {
+   NavTopMenuElementWrapper.tag.ensureRegistration();
+   NavVMMenuElement.tag.ensureRegistration();
+   NavVMMenuElementWrapper.tag.ensureRegistration();
++  ObservatoryApplicationElement.tag.ensureRegistration();
++  ScriptRefElement.tag.ensureRegistration();
+   ScriptRefElement.tag.ensureRegistration();
+   ScriptRefElementWrapper.tag.ensureRegistration();
+   SourceLinkElement.tag.ensureRegistration();
+Index: runtime/observatory/lib/elements.html
+diff --git a/runtime/observatory/lib/elements.html b/runtime/observatory/lib/elements.html
+index 2b42d474fa00953956a57c1d791cb1d1debe6dca..0af52face915870548839792d69ea4009a34c5af 100644
+--- a/runtime/observatory/lib/elements.html
++++ b/runtime/observatory/lib/elements.html
+@@ -29,11 +29,11 @@
+ <link rel="import" href="src/elements/object_view.html">
+ <link rel="import" href="src/elements/objectpool_view.html">
+ <link rel="import" href="src/elements/objectstore_view.html">
+-<link rel="import" href="src/elements/observatory_application.html">
+ <link rel="import" href="src/elements/persistent_handles.html">
+ <link rel="import" href="src/elements/ports.html">
+ <link rel="import" href="src/elements/script_inset.html">
+ <link rel="import" href="src/elements/script_view.html">
+ <link rel="import" href="src/elements/service_ref.html">
++<link rel="import" href="src/elements/service_view.html">
+ <link rel="import" href="src/elements/timeline_page.html">
+ <link rel="import" href="src/elements/vm_view.html">
+Index: runtime/observatory/lib/models.dart
+diff --git a/runtime/observatory/lib/models.dart b/runtime/observatory/lib/models.dart
+index ded6d78a5fa6f9945396d4818c644796cd0b1bab..497d7b059badc971ed35503819670f088c582fbe 100644
+--- a/runtime/observatory/lib/models.dart
++++ b/runtime/observatory/lib/models.dart
+@@ -17,6 +17,7 @@ part 'src/models/objects/extension_data.dart';
+ part 'src/models/objects/flag.dart';
+ part 'src/models/objects/frame.dart';
+ part 'src/models/objects/function.dart';
++part 'src/models/objects/heap_space.dart';
+ part 'src/models/objects/instance.dart';
+ part 'src/models/objects/isolate.dart';
+ part 'src/models/objects/library.dart';
+Index: runtime/observatory/lib/src/elements/css/shared.css
+diff --git a/runtime/observatory/lib/src/elements/css/shared.css b/runtime/observatory/lib/src/elements/css/shared.css
+index e468fc8610774c316a1b3c8b7b6fed2c6152627c..9b200ef9b6f5ea2d4276ad13e25c0beb47b9584b 100644
+--- a/runtime/observatory/lib/src/elements/css/shared.css
++++ b/runtime/observatory/lib/src/elements/css/shared.css
+@@ -61,12 +61,12 @@ h1 {
+   white-space: nowrap;
+ }
+ 
+-a {
++a[href] {
+   color: #0489c3;
+   text-decoration: none;
+ }
+ 
+-a:hover {
++a[href]:hover {
+   text-decoration: underline;
+ }
+ 
+@@ -461,6 +461,35 @@ function-ref-wrapped > a[href] {
+   text-decoration: none;
+ }
+ 
++/* isolate-counter-chart */
++
++isolate-shared-summary-wrapped {
++  display: block;
++  height: 300px;
++  position: relative;
++}
++isolate-shared-summary-wrapped > .menu {
++  float: right;
++  top: 0;
++  right: 0;
++}
++isolate-shared-summary-wrapped > isolate-counter-chart {
++  position: absolute;
++  left: 0;
++  top: 0;
++  right: 200px;
++  clear: both;
++}
++isolate-shared-summary-wrapped .errorBox {
++  background-color: #f5f5f5;
++  border: 1px solid #ccc;
++  padding: 2em;
++  font-family: consolas, courier, monospace;
++  font-size: 1em;
++  line-height: 1.2em;
++  white-space: pre;
++}
++
+ /* isolate-ref */
+ /* TODO(cbernaschina) fix isolate-ref-wrapped to isolate-ref when wrapper
+ removed */
+@@ -473,6 +502,38 @@ isolate-ref-wrapped > a[href] {
+   text-decoration: none;
+ }
+ 
++/* isolate-shared-summary */
++/* TODO(cbernaschina) fix isolate-shared-summary-wrapped
++to isolate-shared-summary when wrapper removed */
++
++isolate-shared-summary,
++isolate-shared-summary-wrapped {
++  display: block;
++  height: 300px;
++  position: relative;
++}
++isolate-shared-summary-wrapped > .menu {
++  float: right;
++  top: 0;
++  right: 0;
++}
++isolate-shared-summary-wrapped > isolate-counter-chart {
++  position: absolute;
++  left: 0;
++  top: 0;
++  right: 230px;
++  clear: both;
++}
++isolate-shared-summary-wrapped .errorBox {
++  background-color: #f5f5f5;
++  border: 1px solid #ccc;
++  padding: 2em;
++  font-family: consolas, courier, monospace;
++  font-size: 1em;
++  line-height: 1.2em;
++  white-space: pre;
++}
++
+ /* library-ref */
+ /* TODO(cbernaschina) fix library-ref-wrapped to library-ref when wrapper
+ removed */
+Index: runtime/observatory/lib/src/elements/isolate/counter_chart.dart
+diff --git a/runtime/observatory/lib/src/elements/isolate/counter_chart.dart b/runtime/observatory/lib/src/elements/isolate/counter_chart.dart
+new file mode 100644
+index 0000000000000000000000000000000000000000..3c7b3bc4c3f431a4368f397fb08aa64f4b47e9d0
+--- /dev/null
++++ b/runtime/observatory/lib/src/elements/isolate/counter_chart.dart
+@@ -0,0 +1,77 @@
++// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
++// for details. All rights reserved. Use of this source code is governed by a
++// BSD-style license that can be found in the LICENSE file.
++
++import 'dart:html';
++import 'dart:async';
++import 'package:charted/charted.dart';
++import "package:charted/charts/charts.dart";
++import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
++import 'package:observatory/src/elements/helpers/tag.dart';
++
++class IsolateCounterChartElement extends HtmlElement implements Renderable {
++  static const tag =
++    const Tag<IsolateCounterChartElement>('isolate-counter-chart');
++
++  RenderingScheduler<IsolateCounterChartElement> _r;
++
++  Stream<RenderedEvent<IsolateCounterChartElement>> get onRendered =>
++      _r.onRendered;
++
++  Map _counters;
++  StreamSubscription _subscription;
++
++  factory IsolateCounterChartElement(Map counters, {RenderingQueue queue}) {
++    assert(counters != null);
++    IsolateCounterChartElement e = document.createElement(tag.name);
++    e._r = new RenderingScheduler(e, queue: queue);
++    e._counters = counters;
++    return e;
++  }
++
++  IsolateCounterChartElement.created() : super.created();
++
++  @override
++  void attached() {
++    super.attached();
++    _r.enable();
++    _subscription = window.onResize.listen((_) => _r.dirty());
++  }
++
++  @override
++  void detached() {
++    super.detached();
++    children = [];
++    _r.disable(notify: true);
++    _subscription.cancel();
++  }
++
++  void render() {
++    var areaHost;
++    var legendHost;
++    children = [
++      areaHost = new DivElement()..classes = ['host'],
++      legendHost = new DivElement()..classes = ['legend']
++    ];
++    final series = new ChartSeries("Work", [1], new PieChartRenderer(
++      sortDataByValue: false
++    ));
++    var rect = areaHost.getBoundingClientRect();
++    var minSize = new Rect.size(rect.width, rect.height);
++    final config = new ChartConfig([series], [0])
++        ..minimumSize = minSize
++        ..legend = new ChartLegend(legendHost, showValues: true);
++    final data = new ChartData([
++        new ChartColumnSpec(label: 'Type', type: ChartColumnSpec.TYPE_STRING),
++        new ChartColumnSpec(label: 'Percent', formatter: (v) => v.toString())
++      ], _counters.keys
++          .map((key) => [key, double.parse(_counters[key].split('%')[0])])
++          .toList());
++
++    new LayoutArea(areaHost, data, config, state: new ChartState(),
++        autoUpdate: true)
++      ..addChartBehavior(new Hovercard())
++      ..addChartBehavior(new AxisLabelTooltip())
++      ..draw();
++  }
++}
+Index: runtime/observatory/lib/src/elements/isolate/shared_summary.dart
+diff --git a/runtime/observatory/lib/src/elements/isolate/shared_summary.dart b/runtime/observatory/lib/src/elements/isolate/shared_summary.dart
+new file mode 100644
+index 0000000000000000000000000000000000000000..2999fb078ca0ea2ce353c339eb26170d641029ef
+--- /dev/null
++++ b/runtime/observatory/lib/src/elements/isolate/shared_summary.dart
+@@ -0,0 +1,152 @@
++// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
++// for details. All rights reserved. Use of this source code is governed by a
++// BSD-style license that can be found in the LICENSE file.
++
++import 'dart:html';
++import 'dart:async';
++import 'package:observatory/models.dart' as M;
++import 'package:observatory/utils.dart';
++import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
++import 'package:observatory/src/elements/helpers/tag.dart';
++import 'package:observatory/src/elements/helpers/uris.dart';
++import 'package:observatory/src/elements/isolate/counter_chart.dart';
++
++class IsolateSharedSummaryElement extends HtmlElement implements Renderable {
++  static const tag =
++    const Tag<IsolateSharedSummaryElement>('isolate-shared-summary-wrapped');
++
++  RenderingScheduler<IsolateSharedSummaryElement> _r;
++
++  Stream<RenderedEvent<IsolateSharedSummaryElement>> get onRendered =>
++      _r.onRendered;
++
++  M.Isolate _isolate;
++
++  factory IsolateSharedSummaryElement(M.Isolate isolate,
++                                      {RenderingQueue queue}) {
++    assert(isolate != null);
++    IsolateSharedSummaryElement e = document.createElement(tag.name);
++    e._r = new RenderingScheduler(e, queue: queue);
++    e._isolate = isolate;
++    return e;
++  }
++
++  IsolateSharedSummaryElement.created() : super.created();
++
++  @override
++  void attached() {
++    super.attached();
++    _r.enable();
++  }
++
++  @override
++  void detached() {
++    super.detached();
++    children = [];
++    _r.disable(notify: true);
++  }
++
++  void render() {
++    children = [];
++    if (_isolate.error != null) {
++      children = [
++        new PreElement()..classes = const ["errorBox"]
++          ..text = _isolate.error.message
++      ];
++    }
++    final newHeapUsed = Utils.formatSize(_isolate.newSpace.used);
++    final newHeapCapacity = Utils.formatSize(_isolate.newSpace.capacity);
++    final oldHeapUsed = Utils.formatSize(_isolate.oldSpace.used);
++    final oldHeapCapacity = Utils.formatSize(_isolate.oldSpace.capacity);
++    children.addAll([
++      new DivElement()..classes = ['menu']
++        ..children = [
++          new DivElement()..classes = const ['memberList']
++            ..children = [
++              new DivElement()..classes = const ['memberItem']
++                ..children = [
++                  new DivElement()..classes = const ['memberName']
++                    ..text = 'new heap',
++                  new DivElement()..classes = const ['memberValue']
++                    ..text = '$newHeapUsed of $newHeapCapacity',
++                ],
++              new DivElement()..classes = const ['memberItem']
++                ..children = [
++                  new DivElement()..classes = const ['memberName']
++                    ..text = 'old heap',
++                  new DivElement()..classes = const ['memberValue']
++                    ..text = '$oldHeapUsed of $oldHeapCapacity',
++                ]
++            ],
++          new BRElement(),
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.debugger(_isolate))
++                ..text = 'debug'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.classTree(_isolate))
++                ..text = 'class hierarchy'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.cpuProfiler(_isolate))
++                ..text = 'cpu profile'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.cpuProfilerTable(_isolate))
++                ..text = 'cpu profile (table)'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.allocationProfiler(_isolate))
++                ..text = 'allocation profile'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.heapMap(_isolate))
++                ..text = 'heap map'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.metrics(_isolate))
++                ..text = 'metrics'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.heapSnapshot(_isolate))
++                ..text = 'heap snapshot'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.persistentHandles(_isolate))
++                ..text = 'persistent handles'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.ports(_isolate))
++                ..text = 'ports'
++            ],
++          new DivElement()
++            ..children = [
++              new SpanElement()..text = 'see ',
++              new AnchorElement(href: Uris.logging(_isolate))
++                ..text = 'logging'
++            ]
++      ],
++      new IsolateCounterChartElement(_isolate.counters, queue: _r.queue)
++    ]);
++  }
++}
+Index: runtime/observatory/lib/src/elements/isolate/shared_summary_wrapper.dart
+diff --git a/runtime/observatory/lib/src/elements/isolate/shared_summary_wrapper.dart b/runtime/observatory/lib/src/elements/isolate/shared_summary_wrapper.dart
+new file mode 100644
+index 0000000000000000000000000000000000000000..66b90ef6a126fb2fd50f8783c08aa8575bf04eac
+--- /dev/null
++++ b/runtime/observatory/lib/src/elements/isolate/shared_summary_wrapper.dart
+@@ -0,0 +1,164 @@
++// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
++// for details. All rights reserved. Use of this source code is governed by a
++// BSD-style license that can be found in the LICENSE file.
++
++import 'dart:html';
++import 'dart:async';
++import 'package:observatory/app.dart';
++import 'package:observatory/service.dart';
++import 'package:observatory/src/elements/helpers/tag.dart';
++import 'package:observatory/src/elements/shims/binding.dart';
++import 'package:observatory/src/elements/isolate/shared_summary.dart';
++
++@bindable
++class IsolateSharedSummaryElementWrapper extends HtmlElement {
++  static const binder = const Binder<IsolateSharedSummaryElementWrapper>(const {
++      'isolate': #isolate
++    });
++
++  static const tag =
++      const Tag<IsolateSharedSummaryElementWrapper>('isolate-shared-summary');
++
++  IsolateSharedSummaryElementWrapper.created() : super.created() {
++    binder.registerCallback(this);
++    createShadowRoot();
++    render();
++  }
++
++  Isolate _isolate;
++  StreamSubscription _subscription;
++
++  Isolate get isolate => _isolate;
++
++  void set isolate(Isolate value) {
++    _isolate = value;
++    _detached();
++    _attached();
++  }
++
++  @override
++  void attached() {
++    super.attached();
++    _attached();
++  }
++
++  @override
++  void detached() {
++    super.detached();
++    _detached();
++  }
++
++  void _attached() {
++    if (_isolate != null) {
++      _subscription = _isolate.changes.listen((_) { render(); });
++    }
++    render();
++  }
++
++  void _detached() {
++    _subscription?.cancel();
++    _subscription = null;
++  }
++
++  void render() {
++    if (_isolate == null) {
++      return;
++    }
++    shadowRoot.children = [
++      new StyleElement()
++        ..text = '''
++        a[href] {
++          color: #0489c3;
++          text-decoration: none;
++        }
++        a[href]:hover {
++          text-decoration: underline;
++        }
++        .memberList {
++          display: table;
++        }
++        .memberItem {
++          display: table-row;
++        }
++        .memberName, .memberValue {
++          display: table-cell;
++          vertical-align: top;
++          padding: 3px 0 3px 1em;
++          font: 400 14px 'Montserrat', sans-serif;
++        }
++        isolate-shared-summary-wrapped {
++          display: block;
++          height: 300px;
++          position: relative;
++        }
++        isolate-shared-summary-wrapped > .menu {
++          float: right;
++          top: 0;
++          right: 0;
++        }
++        isolate-shared-summary-wrapped > isolate-counter-chart {
++          position: absolute;
++          left: 0;
++          top: 0;
++          right: 230px;
++          clear: both;
++        }
++        isolate-shared-summary-wrapped .errorBox {
++          background-color: #f5f5f5;
++          border: 1px solid #ccc;
++          padding: 2em;
++          font-family: consolas, courier, monospace;
++          font-size: 1em;
++          line-height: 1.2em;
++          white-space: pre;
++        }
++        isolate-counter-chart {
++          display: block;
++          position: relative;
++          height: 300px;
++          min-width: 350px;
++        }
++        isolate-counter-chart > div.host {
++          position: absolute;
++          left: 0;
++          bottom: 0;
++          top: 0;
++          right: 250px;
++        }
++        isolate-counter-chart > div.legend {
++          position: absolute;
++          width: 250px;
++          top: 0;
++          right: 0;
++          bottom: 0;
++          overflow-y: auto;
++        }
++        .type-pie-rdr > .chart-legend-color {
++          border-radius: 6px;
++        }
++        .chart-legend-row, .chart-legend-more {
++          width: 100%;
++          display: flex;
++          font-size: 14px;
++          margin-bottom: 16px;
++          position: relative;
++          cursor: default;
++        }
++        .chart-legend-color, .chart-legend-more-color {
++          width: 12px;
++          height: 12px;
++          margin: auto 8px;
++          border-radius: 2px;
++        }
++        .chart-legend-label {
++          overflow: hidden;
++          text-overflow: ellipsis;
++          max-width: 120px;
++          flex: 1;
++        }
++        ''',
++      new IsolateSharedSummaryElement(_isolate,
++                                      queue: ObservatoryApplication.app.queue)
++    ];
++  }
++}
+Index: runtime/observatory/lib/src/elements/isolate_summary.dart
+diff --git a/runtime/observatory/lib/src/elements/isolate_summary.dart b/runtime/observatory/lib/src/elements/isolate_summary.dart
+index b0b2e061b9985877f5518b1fd296c8219194e954..b41befdf38621a9bc06e726b1c3fc8621f660fe8 100644
+--- a/runtime/observatory/lib/src/elements/isolate_summary.dart
++++ b/runtime/observatory/lib/src/elements/isolate_summary.dart
+@@ -4,10 +4,7 @@
+ 
+ library isolate_summary_element;
+ 
+-import 'dart:html';
+ import 'observatory_element.dart';
+-import 'package:charted/charted.dart';
+-import "package:charted/charts/charts.dart";
+ import 'package:observatory/service.dart';
+ import 'package:polymer/polymer.dart';
+ 
+@@ -31,88 +28,3 @@ class IsolateLocationElement extends ObservatoryElement {
+ 
+   @published Isolate isolate;
+ }
+-
+-@CustomTag('isolate-shared-summary')
+-class IsolateSharedSummaryElement extends ObservatoryElement {
+-  IsolateSharedSummaryElement.created() : super.created();
+-
+-  @published Isolate isolate;
+-}
+-
+-class CounterChart {
+-  final HtmlElement _wrapper;
+-  HtmlElement _areaHost;
+-  HtmlElement _legendHost;
+-  LayoutArea _area;
+-  ChartData _data;
+-  final _columns = [
+-      new ChartColumnSpec(label: 'Type', type: ChartColumnSpec.TYPE_STRING),
+-      new ChartColumnSpec(label: 'Percent', formatter: (v) => v.toString())
+-  ];
+-
+-  CounterChart(this._wrapper) {
+-    assert(_wrapper != null);
+-    _areaHost = _wrapper.querySelector('.chart-host');
+-    assert(_areaHost != null);
+-    _areaHost.clientWidth;
+-    _legendHost = _wrapper.querySelector('.chart-legend-host');
+-    assert(_legendHost != null);
+-    var series = new ChartSeries("Work", [1], new PieChartRenderer(
+-      sortDataByValue: false
+-    ));
+-    var config = new ChartConfig([series], [0]);
+-    config.minimumSize = new Rect(200, 200);
+-    config.legend = new ChartLegend(_legendHost, showValues: true);
+-    _data = new ChartData(_columns, []);
+-    _area = new LayoutArea(_areaHost,
+-                           _data,
+-                           config,
+-                           state: new ChartState(),
+-                           autoUpdate: false);
+-    _area.addChartBehavior(new Hovercard());
+-    _area.addChartBehavior(new AxisLabelTooltip());
+-  }
+-
+-  void update(Map counters) {
+-    var rows = [];
+-    for (var key in counters.keys) {
+-      var value = double.parse(counters[key].split('%')[0]);
+-      rows.add([key, value]);
+-    }
+-    _area.data = new ChartData(_columns, rows);
+-    _area.draw();
+-  }
+-}
+-
+-@CustomTag('isolate-counter-chart')
+-class IsolateCounterChartElement extends ObservatoryElement {
+-  IsolateCounterChartElement.created() : super.created();
+-
+-  @published ObservableMap counters;
+-  CounterChart chart;
+-
+-  attached() {
+-    super.attached();
+-    chart =
+-        new CounterChart(shadowRoot.querySelector('#isolate-counter-chart'));
+-  }
+-
+-  detached() {
+-    super.detached();
+-    var host = shadowRoot.querySelector('#isolate-counter-chart-host');
+-    host.children.clear();
+-    var legendHost =
+-        shadowRoot.querySelector('#isolate-counter-chart-legend-host');
+-    legendHost.children.clear();
+-  }
+-
+-  void countersChanged(oldValue) {
+-    if (counters == null) {
+-      return;
+-    }
+-    if (chart == null) {
+-      return;
+-    }
+-    chart.update(counters);
+-  }
+-}
+Index: runtime/observatory/lib/src/elements/isolate_summary.html
+diff --git a/runtime/observatory/lib/src/elements/isolate_summary.html b/runtime/observatory/lib/src/elements/isolate_summary.html
+index 1a0c0a14a642a742271f249e9114553f13dc89ff..3c4924d8a9f7aa816d4923e6f7a357c1d828b78f 100644
+--- a/runtime/observatory/lib/src/elements/isolate_summary.html
++++ b/runtime/observatory/lib/src/elements/isolate_summary.html
+@@ -85,146 +85,4 @@
+   </template>
+ </polymer-element>
+ 
+-<polymer-element name="isolate-shared-summary">
+-  <template>
+-    <style>
+-      .errorBox {
+-        background-color: #f5f5f5;
+-        border: 1px solid #ccc;
+-        padding: 2em;
+-        font-family: consolas, courier, monospace;
+-        font-size: 1em;
+-        line-height: 1.2em;
+-        white-space: pre;
+-      }
+-    </style>
+-    <link rel="stylesheet" href="css/shared.css">
+-    <template if="{{ isolate.error != null }}">
+-      <div class="content-centered">
+-        <pre class="errorBox">{{ isolate.error.message }}</pre>
+-        <br>
+-      </div>
+-    </template>
+-    <div class="flex-row">
+-      <div style="flex:2">
+-        <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart>
+-      </div>
+-      <div style="flex:1">
+-        <div class="memberList">
+-          <div class="memberItem">
+-            <div class="memberName">new heap</div>
+-            <div class="memberValue">
+-              {{ isolate.newSpace.used | formatSize }}
+-              of
+-              {{ isolate.newSpace.capacity | formatSize }}
+-            </div>
+-          </div>
+-          <div class="memberItem">
+-            <div class="memberName">old heap</div>
+-            <div class="memberValue">
+-              {{ isolate.oldSpace.used | formatSize }}
+-              of
+-              {{ isolate.oldSpace.capacity | formatSize }}
+-            </div>
+-          </div>
+-        </div>
+-        <br>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/debugger', isolate) }}">debugger</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree', isolate) }}">class hierarchy</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/profiler', isolate) }}">cpu profile</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/profiler-table', isolate) }}">cpu profile (table)</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/allocation-profiler', isolate) }}">allocation profile</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/heap-map', isolate) }}">heap map</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/metrics', isolate) }}">metrics</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/heap-snapshot', isolate) }}">heap snapshot</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/persistent-handles', isolate) }}">persistent handles</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/ports', isolate) }}">ports</a>
+-          </div>
+-        </div>
+-        <div class="memberItem">
+-          <div class="memberValue">
+-            See <a on-click="{{ goto }}" _href="{{ gotoLink('/logging', isolate) }}">logging</a>
+-          </div>
+-        </div>
+-        <!-- Temporarily disabled until UI for dart:io is acceptable.
+-        <template if="{{ isolate.ioEnabled }}">
+-          <div class="memberItem">
+-            <div class="memberValue">
+-              See <a on-click="{{ goto }}" href="{{ gotoLink('/io', isolate) }}">dart:io</a>
+-            </div>
+-          </div>
+-        </template>
+-        -->
+-      </div>
+-    </div>
+-  </template>
+-</polymer-element>
+-
+-<polymer-element name="isolate-counter-chart">
+-  <template>
+-    <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantum_theme.css">
+-    <style>
+-.chart-wrapper {
+-}
+-.chart-host-wrapper {
+-  display: flex;
+-  flex-direction: row;
+-  max-height: 250px;
+-}
+-.chart-host {
+-  flex: 1;
+-}
+-.chart-legend-host {
+-  flex: 1;
+-  overflow-x: auto;
+-  overflow-y: auto;
+-}
+-    </style>
+-    <div class="chart-wrapper" id="isolate-counter-chart">
+-      <div class="chart-host-wrapper">
+-        <div class="chart-host" id="isolate-counter-chart-host"></div>
+-        <div class="chart-legend-host" id="isolate-counter-chart-legend-host"></div>
+-      </div>
+-  </div>
+-  </template>
+-</polymer-element>
+-
+ <script type="application/dart" src="isolate_summary.dart"></script>
+Index: runtime/observatory/lib/src/elements/observatory_application.dart
+diff --git a/runtime/observatory/lib/src/elements/observatory_application.dart b/runtime/observatory/lib/src/elements/observatory_application.dart
+index 4acdc6575bcaa90772680166fc826e0e71db29a4..0e85692d6b3793c42c92d72e5609ceffc7fcfb50 100644
+--- a/runtime/observatory/lib/src/elements/observatory_application.dart
++++ b/runtime/observatory/lib/src/elements/observatory_application.dart
+@@ -4,22 +4,24 @@
+ 
+ library observatory_application_element;
+ 
+-import 'observatory_element.dart';
++import 'dart:html';
+ import 'package:observatory/app.dart';
+-import 'package:polymer/polymer.dart';
++import 'package:observatory/src/elements/helpers/tag.dart';
+ 
+ /// Main application tag. Responsible for instantiating an instance of
+ /// [ObservatoryApplication] which is passed declaratively to all child
+ /// elements.
+-@CustomTag('observatory-application')
+-class ObservatoryApplicationElement extends ObservatoryElement {
++class ObservatoryApplicationElement extends HtmlElement {
++  static const tag =
++      const Tag<ObservatoryApplicationElement>('observatory-application');
++
+   ObservatoryApplication app;
+ 
+   ObservatoryApplicationElement.created() : super.created();
+ 
+   @override
+-  void domReady() {
+-    super.domReady();
++  void attached() {
++    super.attached();
+     app = new ObservatoryApplication(this);
+   }
+ }
+Index: runtime/observatory/lib/src/models/objects/heap_space.dart
+diff --git a/runtime/observatory/lib/src/models/objects/target.dart b/runtime/observatory/lib/src/models/objects/heap_space.dart
+similarity index 78%
+copy from runtime/observatory/lib/src/models/objects/target.dart
+copy to runtime/observatory/lib/src/models/objects/heap_space.dart
+index a58673f248b4a1bd7638d02be186e5ec384640a3..29c55ce8496db99ab8904b8bd02a5335224bd46b 100644
+--- a/runtime/observatory/lib/src/models/objects/target.dart
++++ b/runtime/observatory/lib/src/models/objects/heap_space.dart
+@@ -4,6 +4,7 @@
+ 
+ part of models;
+ 
+-abstract class Target {
+-  String get name;
++abstract class HeapSpace {
++  int get used;
++  int get capacity;
+ }
+Index: runtime/observatory/lib/src/models/objects/isolate.dart
+diff --git a/runtime/observatory/lib/src/models/objects/isolate.dart b/runtime/observatory/lib/src/models/objects/isolate.dart
+index 81d54c5f60571739922ba285efee88c61296403d..45f5524ceec81eed2bfdca7e5b7d50558227856f 100644
+--- a/runtime/observatory/lib/src/models/objects/isolate.dart
++++ b/runtime/observatory/lib/src/models/objects/isolate.dart
+@@ -5,12 +5,58 @@
+ part of models;
+ 
+ abstract class IsolateRef {
++  /// The id which is passed to the getIsolate RPC to reload this
++  /// isolate.
+   String get id;
++
++  /// A numeric id for this isolate, represented as a string. Unique.
+   int get number;
++
++  /// A name identifying this isolate. Not guaranteed to be unique.
+   String get name;
+ }
+ 
+ abstract class Isolate extends IsolateRef {
++  /// The time that the VM started in milliseconds since the epoch.
+   DateTime get startTime;
++
++  /// Is the isolate in a runnable state?
+   bool get runnable;
++
++  /// The number of live ports for this isolate.
++  //int get livePorts;
++
++  /// Will this isolate pause when exiting?
++  //bool get pauseOnExit;
++
++  /// The last pause event delivered to the isolate. If the isolate is
++  /// running, this will be a resume event.
++  //Event get pauseEvent;
++
++  /// [optional] The root library for this isolate.
++  ///
++  /// Guaranteed to be initialized when the IsolateRunnable event fires.
++  //LibraryRef get rootLib;
++
++  /// A list of all libraries for this isolate.
++  ///
++  /// Guaranteed to be initialized when the IsolateRunnable event fires.
++  Iterable<LibraryRef> get libraries;
++
++  /// A list of all breakpoints for this isolate.
++  //Iterable<Breakpoint> get breakpoints;
++
++  /// [optional] The error that is causing this isolate to exit, if applicable.
++  Error get error;
++
++  /// The current pause on exception mode for this isolate.
++  //ExceptionPauseMode get exceptionPauseMode;
++
++  /// [optional]The list of service extension RPCs that are registered for this
++  /// isolate, if any.
++  Iterable<String> get extensionRPCs;
++
++  Map get counters;
++  HeapSpace get newSpace;
++  HeapSpace get oldSpace;
+ }
+Index: runtime/observatory/lib/src/service/object.dart
+diff --git a/runtime/observatory/lib/src/service/object.dart b/runtime/observatory/lib/src/service/object.dart
+index afd924048b1a1113b1f0117d1d6e6b08f5a27408..bc21be8ca177a58e2db11295e96751e0c35d21cd 100644
+--- a/runtime/observatory/lib/src/service/object.dart
++++ b/runtime/observatory/lib/src/service/object.dart
+@@ -1077,7 +1077,7 @@ class TagProfile {
+   }
+ }
+ 
+-class HeapSpace extends Observable {
++class HeapSpace extends Observable implements M.HeapSpace {
+   @observable int used = 0;
+   @observable int capacity = 0;
+   @observable int external = 0;
+@@ -1139,7 +1139,7 @@ class Isolate extends ServiceObjectOwner implements M.Isolate {
+     return (new DateTime.now().difference(startTime));
+   }
+ 
+-  @observable ObservableMap counters = new ObservableMap();
++  @observable Map counters = {};
+ 
+   void _updateRunState() {
+     topFrame = (pauseEvent != null ? pauseEvent.topFrame : null);
+@@ -1441,18 +1441,18 @@ class Isolate extends ServiceObjectOwner implements M.Isolate {
+       for (var i = 0; i < counts.length; i++) {
+         sum += counts[i];
+       }
+-      // TODO: Why does this not work without this?
+-      counters = toObservable({});
++      var _counters = {};
+       if (sum == 0) {
+         for (var i = 0; i < names.length; i++) {
+-          counters[names[i]] = '0.0%';
++          _counters[names[i]] = '0.0%';
+         }
+       } else {
+         for (var i = 0; i < names.length; i++) {
+-          counters[names[i]] =
++          _counters[names[i]] =
+               (counts[i] / sum * 100.0).toStringAsFixed(2) + '%';
+         }
+       }
++      counters = _counters;
+     }
+ 
+     updateHeapsFromMap(map['_heaps']);
+Index: runtime/observatory/observatory_sources.gypi
+diff --git a/runtime/observatory/observatory_sources.gypi b/runtime/observatory/observatory_sources.gypi
+index fe89855486e20e2526e406a3aac2254d3616d815..8fd96abc9613f81ff429734233a20eda04e30650 100644
+--- a/runtime/observatory/observatory_sources.gypi
++++ b/runtime/observatory/observatory_sources.gypi
+@@ -99,6 +99,9 @@
+     'lib/src/elements/instructions_view.html',
+     'lib/src/elements/io_view.dart',
+     'lib/src/elements/io_view.html',
++    'lib/src/elements/isolate/counter_chart.dart',
++    'lib/src/elements/isolate/shared_summary_wrapper.dart',
++    'lib/src/elements/isolate/shared_summary.dart',
+     'lib/src/elements/isolate_reconnect.dart',
+     'lib/src/elements/isolate_reconnect.html',
+     'lib/src/elements/isolate_ref.dart',
+@@ -151,7 +154,6 @@
+     'lib/src/elements/objectpool_view.dart',
+     'lib/src/elements/objectpool_view.html',
+     'lib/src/elements/observatory_application.dart',
+-    'lib/src/elements/observatory_application.html',
+     'lib/src/elements/observatory_element.dart',
+     'lib/src/elements/persistent_handles.dart',
+     'lib/src/elements/persistent_handles.html',
+@@ -187,6 +189,7 @@
+     'lib/src/models/objects/flag.dart',
+     'lib/src/models/objects/frame.dart',
+     'lib/src/models/objects/function.dart',
++    'lib/src/models/objects/heap_space.dart',
+     'lib/src/models/objects/instance.dart',
+     'lib/src/models/objects/isolate.dart',
+     'lib/src/models/objects/library.dart',
+Index: runtime/observatory/tests/observatory_ui/mocks/objects/isolate.dart
+diff --git a/runtime/observatory/tests/observatory_ui/mocks/objects/isolate.dart b/runtime/observatory/tests/observatory_ui/mocks/objects/isolate.dart
+index d65b840cdb6c82b8e55ef60a54091ab094ac8b68..310d70c106358b6868713293e051a788fe40ba48 100644
+--- a/runtime/observatory/tests/observatory_ui/mocks/objects/isolate.dart
++++ b/runtime/observatory/tests/observatory_ui/mocks/objects/isolate.dart
+@@ -18,8 +18,17 @@ class IsolateMock implements M.Isolate {
+   final String name;
+   final DateTime startTime;
+   final bool runnable;
++  final Iterable<M.LibraryRef> libraries;
++  final M.Error error;
++  final Iterable<String> extensionRPCs;
++  final Map counters;
++  final M.HeapSpace newSpace;
++  final M.HeapSpace oldSpace;
+ 
+   const IsolateMock({this.id: 'i-id', this.number, this.name: 'i-name',
+-                     this.startTime, this.runnable: true});
++                     this.startTime, this.runnable: true,
++                     this.libraries: const [], this.error,
++                     this.extensionRPCs: const [], this.counters,
++                     this.newSpace, this.oldSpace});
+   // TODO(cbernaschina) add other properties.
+ }
+Index: runtime/observatory/web/index.html
+diff --git a/runtime/observatory/web/index.html b/runtime/observatory/web/index.html
+index 065952529416f98855d51442e9a9af15f81fa6be..ccd9bfca2a8d493375d05eb7c02c39aa822c79bd 100644
+--- a/runtime/observatory/web/index.html
++++ b/runtime/observatory/web/index.html
+@@ -4,6 +4,7 @@
+   <meta charset="utf-8">
+   <title>Dart VM Observatory</title>
+   <link rel="import" href="packages/polymer/polymer.html">
++  <link rel="stylesheet" href="packages/charted/charts/themes/quantum_theme.css">
+   <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css">
+   <link rel="import" href="packages/observatory/elements.html">
+   <script src="packages/js_util/dist/js_util.js"></script>
+@@ -11,6 +12,5 @@
+   <script src="packages/browser/dart.js"></script>
+ </head>
+ <body style="height: 100%">
+-  <observatory-application></observatory-application>
+ </body>
+ </html>
+Index: runtime/observatory/web/main.dart
+diff --git a/runtime/observatory/web/main.dart b/runtime/observatory/web/main.dart
+index 41f3dc74c2c0f43a978edec47cc86685153cc87b..36c03ab1165391d55ef8b4c35ad74444bf05ff01 100644
+--- a/runtime/observatory/web/main.dart
++++ b/runtime/observatory/web/main.dart
+@@ -2,6 +2,7 @@
+ // for details. All rights reserved. Use of this source code is governed by a
+ // BSD-style license that can be found in the LICENSE file.
+ 
++import 'dart:html';
+ import 'package:logging/logging.dart';
+ import 'package:polymer/polymer.dart';
+ import 'package:observatory/elements.dart';
+@@ -24,4 +25,6 @@ main() async {
+   Logger.root.info('Polymer initialized');
+   await Polymer.onReady;
+   Logger.root.info('Polymer elements have been upgraded');
++  document.body.children
++      .insert(0, document.createElement('observatory-application'));
+ }