Improve script display in the observatory.

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

Index: runtime/bin/vmservice/client/lib/src/elements/script_inset.dart
diff --git a/runtime/bin/vmservice/client/lib/src/elements/script_inset.dart b/runtime/bin/vmservice/client/lib/src/elements/script_inset.dart
index 5a0c9a7364f7e11d63dfbb6510c4d2265b3a3a26..43ce58f9f68ebb38bd7d4f52309503d8673997b9 100644
--- a/runtime/bin/vmservice/client/lib/src/elements/script_inset.dart
+++ b/runtime/bin/vmservice/client/lib/src/elements/script_inset.dart
@@ -4,6 +4,7 @@
 
 library script_inset_element;
 
+import 'dart:html';
 import 'observatory_element.dart';
 import 'package:observatory/service.dart';
 import 'package:polymer/polymer.dart';
@@ -12,23 +13,46 @@ import 'package:polymer/polymer.dart';
 @CustomTag('script-inset')
 class ScriptInsetElement extends ObservatoryElement {
   @published Script script;
-  @published int pos;
+
+  /// Set the height to make the script inset scroll.  Otherwise it
+  /// will show from startPos to endPos.
+  @published String height = null;
+
+  @published int currentPos;
+  @published int startPos;
   @published int endPos;
-  final List<int> lineNumbers = new ObservableList<int>();
+
+  @observable int currentLine;
   @observable int startLine;
   @observable int endLine;
 
   @observable List<ScriptLine> lines = toObservable([]);
 
+  String makeLineId(int line) {
+    return 'line-$line';
+  }
+
+  void _onMutation(mutations, observer) {
+    var line = shadowRoot.querySelector('#line-$currentLine');
+    if (line != null) {
+      line.scrollIntoView();
+    }
+  } 
+
   void attached() {
     super.attached();
+    var table = shadowRoot.querySelector('.sourceTable');
+    if (table != null) {
+      var observer = new MutationObserver(_onMutation);

[Cutch, 2014/07/09 15:49:22]

Do we have to do anything with the mutation observer in detached?

[turnidge, 2014/07/09 17:36:32]

Yes, there is a disconnect method I should call.  Done.

+      observer.observe(table, childList:true);
+    }
   }
 
-  void scriptChanged(oldValue) {
+  void currentPosChanged(oldValue) {
     _updateLines();
   }
 
-  void posChanged(oldValue) {
+  void startPosChanged(oldValue) {
     _updateLines();
   }
 
@@ -36,21 +60,8 @@ class ScriptInsetElement extends ObservatoryElement {
     _updateLines();
   }
 
-  static const hitStyleNone = 'min-width:32px;';
-  static const hitStyleExecuted = 'min-width:32px; background-color:green';
-  static const hitStyleNotExecuted = 'min-width:32px; background-color:red';
-
-  /// [hits] can be null which indicates that the line is not executable.
-  /// When [hits] is 0, the line is executable but hasn't been executed and
-  /// when [hits] is positive, the line is executable and has been executed.
-  String styleForHits(int hits) {
-    if (hits == null) {
-      return hitStyleNone;
-    } else if (hits == 0) {
-      return hitStyleNotExecuted;
-    }
-    assert(hits > 0);
-    return hitStyleExecuted;
+  void scriptChanged(oldValue) {
+    _updateLines();
   }
 
   var _updateFuture;
@@ -69,14 +80,18 @@ class ScriptInsetElement extends ObservatoryElement {
       });
       return;
     }
-    startLine =
-        (pos != null) ? script.tokenToLine(pos) - 1 : 0;
-    endLine =
-        (endPos != null) ? script.tokenToLine(endPos) : startLine + 1;
-    // Add line numbers.
-    lineNumbers.clear();
-    for (var i = startLine; i < endLine; i++) {
-      lineNumbers.add(i);
+    startLine = (startPos != null
+                 ? script.tokenToLine(startPos)
+                 : 1);
+    currentLine = (currentPos != null
+                   ? script.tokenToLine(currentPos)
+                   : null);
+    endLine = (endPos != null
+               ? script.tokenToLine(endPos)
+               : script.lines.length);
+    lines.clear();
+    for (int i = (startLine - 1); i <= (endLine - 1); i++) {
+      lines.add(script.lines[i]);
     }
   }