Miscellaneous Observatory UI improvements

runtime/bin/vmservice/client/lib/src/elements/json_view.dart

Index: runtime/bin/vmservice/client/lib/src/elements/json_view.dart
diff --git a/runtime/bin/vmservice/client/lib/src/elements/json_view.dart b/runtime/bin/vmservice/client/lib/src/elements/json_view.dart
index 8aca30dc4c44c6e6c3532301e3e867d27fc5bf39..b03322c7f7c34504791a8adecb58794f437e5463 100644
--- a/runtime/bin/vmservice/client/lib/src/elements/json_view.dart
+++ b/runtime/bin/vmservice/client/lib/src/elements/json_view.dart
@@ -6,55 +6,97 @@ library json_view_element;
 
 import 'package:polymer/polymer.dart';
 import 'observatory_element.dart';
+import 'package:observatory/service.dart';
 
-@CustomTag('json-view')
-class JsonViewElement extends ObservatoryElement {
-  @published var json = null;
-  var _count = 0;
-
-  JsonViewElement.created() : super.created();
-
-  void enteredView() {
-    super.enteredView();
-    _count = 0;
+class JsonPrettyPrinter {
+  String prettyPrint(ServiceMap map, int indent) {
+    _depth = 0;
+    _indent = _space * indent;
+    _buffer.clear();
+    _buffer.write(_indentForDepth);
+    _buffer.write('{\n');
+    _printMap(map);
+    _buffer.write(_indentForDepth);
+    _buffer.write('}\n');
+    return _buffer.toString();
   }
 
-  void jsonChanged(oldValue) {
-    notifyPropertyChange(#valueType, "a", "b");
-  }
-
-  String get primitiveString {
-    return json.toString();
+  void _printMap(ObservableMap map) {
+    if (_seen.contains(map)) {
+      return;
+    }
+    _seen.add(map);
+    _depth++;
+    for (var k in map.keys) {
+      var v = map[k];
+      if (v is Map) {
+        _buffer.write(_indentForDepth);
+        _buffer.write('"$k": {\n');
+        _printMap(v);
+        _buffer.write(_indentForDepth);
+        _buffer.write('}\n');
+      } else if (v is List) {
+        _buffer.write(_indentForDepth);
+        _buffer.write('"$k": [\n');
+        _printList(v);
+        _buffer.write(_indentForDepth);
+        _buffer.write(']\n');
+      } else {
+        _buffer.write(_indentForDepth);
+        _buffer.write('"$k": $v');
+        _buffer.write('\n');
+      }
+    }
+    _depth--;

[turnidge, 2014/04/01 19:42:48]

The downside to using a member for _depth is that it needs to be restored before
exit from the function.  I recommend making depth a function parameter instead. 
Then your recursive _printMap call looks like this:

  _printMap(v, depth + 1);

And no set/restore is required.

[Cutch, 2014/04/02 18:26:52]

Done.

+    _seen.remove(map);
   }
 
-  String get valueType {
-    if (json is Map) {
-      return 'Map';
-    } else if (json is List) {
-      return 'List';
+  void _printList(ObservableList list) {
+    if (_seen.contains(list)) {
+      return;
+    }
+    _seen.add(list);
+    _depth++;
+    for (var v in list) {
+      if (v is Map) {
+        _buffer.write(_indentForDepth);
+        _buffer.write('{\n');
+        _printMap(v);
+        _buffer.write(_indentForDepth);
+        _buffer.write('}\n');
+      } else if (v is List) {
+        _buffer.write(_indentForDepth);
+        _buffer.write('[\n');
+        _printList(v);
+        _buffer.write(_indentForDepth);
+        _buffer.write(']\n');
+      } else {
+        _buffer.write(_indentForDepth);
+        _buffer.write(v);
+        _buffer.write('\n');
+      }
     }
-    return 'Primitive';
+    _depth--;
+    _seen.remove(list);
   }
 
-  int get counter {
-    return _count++;
-  }
+  final _buffer = new StringBuffer();
+  final _seen = new Set();
+  static const String _space = ' ';
+  String _indent;

[turnidge, 2014/04/01 19:42:48]

I would drop the _indent member and just hard-code the tab-stop at 2 until you
need to change it.

[Cutch, 2014/04/02 18:26:52]

Done.

+  int _depth;

[turnidge, 2014/04/01 19:42:48]

Delete _depth.

[Cutch, 2014/04/02 18:26:52]

Done.

+  String get _indentForDepth => _indent * _depth;

[turnidge, 2014/04/01 19:42:48]

Consider replacing with a function (_indent or _writeIndent?) that does the
indentation:

void _indent(int level) {
    const tab = '  ';  // 2 spaces.
    _buffer.write(level * tab);
}

This will change this:

  _buffer.write(_indentForDepth);

To this:

  _indent(depth);

[Cutch, 2014/04/02 18:26:52]

Done.

+}
 
-  List get list {
-    if (json is List) {
-      return json;
-    }
-    return [];
-  }
 
-  List get keys {
-    if (json is Map) {
-      return json.keys.toList();
-    }
-    return [];
-  }
+@CustomTag('json-view')
+class JsonViewElement extends ObservatoryElement {
+  @published ServiceMap map;
+  @observable String mapAsString;
+  JsonViewElement.created() : super.created();
 
-  dynamic value(String key) {
-    return json[key];
+  void mapChanged(oldValue) {
+    var jpp = new JsonPrettyPrinter();
+    mapAsString = jpp.prettyPrint(map, 2);
   }
 }