Improve script display in the observatory.

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

 // Copyright (c) 2013, 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.
 
 library script_inset_element;
 
+import 'dart:html';
 import 'observatory_element.dart';
 import 'package:observatory/service.dart';
 import 'package:polymer/polymer.dart';
 
 /// Box with script source code in it.
 @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();
   }
 
   void endPosChanged(oldValue) {
     _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;
 
   void _updateLines() {
     if (_updateFuture != null) {
       // Already scheduled.
       return;
     }
     if (!script.loaded) {
       _updateFuture = script.load().then((_) {
         if (script.loaded) {
           _updateFuture = null;
           _updateLines();
         }
       });
       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]);
     }
   }
 
   ScriptInsetElement.created() : super.created();
 }