Converted Observatory curly-block element

runtime/observatory/lib/src/elements/curly_block.dart

Index: runtime/observatory/lib/src/elements/curly_block.dart
diff --git a/runtime/observatory/lib/src/elements/curly_block.dart b/runtime/observatory/lib/src/elements/curly_block.dart
index 004a02e36422e64341a952da5b85692070fd4f7b..d6b065088cdd9873415539663bb2fcecbeb48886 100644
--- a/runtime/observatory/lib/src/elements/curly_block.dart
+++ b/runtime/observatory/lib/src/elements/curly_block.dart
@@ -4,52 +4,123 @@
 
 library curly_block_element;
 
-import 'package:polymer/polymer.dart';
-import 'observatory_element.dart';
+import 'dart:async';
+import 'dart:html';
+import 'package:observatory/src/elements/helpers/tag.dart';
+import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
 
-@CustomTag('curly-block')
-class CurlyBlockElement extends ObservatoryElement {
-  CurlyBlockElement.created() : super.created();
+class CurlyBlockToggleEvent {
+  final CurlyBlockElement control;
 
-  @observable bool expanded = false;
-  @observable bool busy = false;
-  @published var callback = null;
-  @published bool expand = false;
-  @published String expandKey;
+  CurlyBlockToggleEvent(this.control);
+}
 
-  void expandChanged(oldValue) {
-    expanded = expand;
-  }
+class CurlyBlockElement extends HtmlElement implements Renderable {
+  static final StyleElement _style = () {
+      var style = new StyleElement();
+      style.text = 'span.curly-block {'

[Cutch, 2016/07/19 16:18:56]

use ''' quotes and new lines.

[cbernaschina, 2016/07/19 16:36:01]

Done.

+                   '  color: #0489c3;'
+                   '  cursor: pointer;'
+                   '}'
+                   'span.curly-block.disabled {'
+                   '  color: white;'
+                   '  cursor: wait;'
+                   '}';
+      return style;
+  }();
+
+  static const tag = const Tag<CurlyBlockElement>('curly-block-wrapped');
+
+  RenderingScheduler<CurlyBlockElement> _r;
+
+  final StreamController<CurlyBlockToggleEvent> _onToggle;
+  final Stream<CurlyBlockToggleEvent> onToggle;
+  Stream<RenderedEvent<CurlyBlockElement>> get onRendered => _r.onRendered;
+
+  bool _expanded;
+  bool _disabled;
 
-  void expandKeyChanged(oldValue) {
-    if (expandKey != null) {
-      var value = app.expansions[expandKey];
-      if (value != null) {
-        if (expanded != value) {
-          toggleExpand(null, null, null);
-        }
-      }
+  bool get expanded => _expanded;
+  set expanded(bool expanded) {
+    if (_expanded != expanded) {
+      _expanded = expanded;
+      _onToggle.add(new CurlyBlockToggleEvent(this));
+      _r.dirty();
+    } else {
+      _r.scheduleNotification();
     }
   }
-
-  void doneCallback() {
-    expanded = !expanded;
-    if (expandKey != null) {
-      app.expansions[expandKey] = expanded;
+  bool get disabled => _disabled;
+  set disabled(bool disabled) {
+    if (_disabled != disabled) {
+      _disabled = disabled;
+      _r.dirty();
+    } else {
+      _r.scheduleNotification();
     }
-    busy = false;
   }
 
-  void toggleExpand(var event, var b, var c) {
-    assert(callback == null || expand == false);
-    if (busy) {
+  factory CurlyBlockElement({bool expanded: false, bool disabled:false,
+                            RenderingQueue queue}) {
+    assert(expanded != null);
+    assert(disabled != null);
+    CurlyBlockElement e = document.createElement(tag.name);
+    e._r = new RenderingScheduler(e, queue: queue);
+    e._expanded = expanded;
+    e._disabled = disabled;
+    return e;
+  }
+
+  CurlyBlockElement.created()
+    : this._(new StreamController<CurlyBlockToggleEvent>());
+
+  CurlyBlockElement._(StreamController<CurlyBlockToggleEvent> onToggle)
+    : super.created(),
+      this._onToggle = onToggle,
+      this.onToggle = onToggle.stream.asBroadcastStream() {
+      createShadowRoot();
+  }
+
+  @override
+  void attached() { super.attached(); _r.enable(); }
+
+  @override
+  void detached() {
+    super.detached(); _r.disable(notify: true);
+    shadowRoot.children = [];
+  }
+
+  void toggle() {
+    if (disabled) {
+      _r.scheduleNotification();
       return;
     }
-    busy = true;
-    if (callback != null) {
-      callback(!expanded, doneCallback);
+    expanded = !expanded;
+  }
+
+  void render() {
+    List<Element> children = [
+      _style.clone(true),
+      new SpanElement()..text = '{'
+    ];
+    SpanElement label = new SpanElement()
+      ..classes = disabled ? ['curly-block', 'disabled'] : ['curly-block']
+      ..innerHtml = expanded ?
+        '&nbsp;&nbsp;&#8863;&nbsp;&nbsp;' : '&nbsp;&nbsp;&#8862;&nbsp;&nbsp;';
+    if (disabled) {
+      children.add(label);
     } else {
-      doneCallback();
+      children.add(new AnchorElement()
+        ..onClick.listen((_) { toggle(); })
+        ..children = [label]);
+    }
+    if (expanded) {
+      children.addAll([
+        new BRElement(),
+        new ContentElement()
+      ]);
     }
+    children.add(new SpanElement()..text = '}');
+    shadowRoot.children = children;
   }
 }