Schedule rebuild immediately on scroll to avoid flicker. (#65)

Schedule rebuild immediately on scroll to avoid flicker.
Use visibility observers instead of guessing at when visibility changes.
Fixes bug when initially only 4 rows were drawn for the memory view.

Author: jacob314

lib/framework/framework.dart

@@ -36,27 +36,22 @@ class Framework {
     assert(screen != null);
 
     final String search = window.location.search;
-    final String ref = search == null ? screen.ref : '${screen.ref}$search';
+    final String ref = search == null ? screen.ref : '$search${screen.ref}';
     window.history.pushState(null, screen.name, ref);
 
     load(screen);
   }
 
   void loadScreenFromLocation() {
-    // Look for an explicit path, otherwise re-direct to '/'
-    String path = window.location.pathname;
-
-    // Special case the development path.
-    if (path == '/devtools/web/index.html' || path == '/index.html') {
-      path = '/';
-    }
-
-    final String first =
-        (path.startsWith('/') ? path.substring(1) : path).split('/').first;
-    Screen screen = getScreen(first.isEmpty ? path : first);
-    if (screen == null && path == '/') {
-      screen = screens.first;
+    // Screens are identified by the hash as that works better with the webdev
+    // server.
+    String id = window.location.hash;
+    if (id.isNotEmpty) {
+      assert(id[0] == '#');
+      id = id.substring(1);
     }
+    Screen screen = getScreen(id);
+    screen ??= screens.first;
     if (screen != null) {
       load(screen);
     } else {
@@ -218,7 +213,7 @@ abstract class Screen {
 
   final List<StatusItem> statusItems = <StatusItem>[];
 
-  String get ref => id == '/' ? id : '/$id';
+  String get ref => id.isEmpty ? id : '#$id';
 
   bool get visible => _visible.value;
 

lib/tables.dart

@@ -4,6 +4,7 @@
 
 import 'dart:async';
 import 'dart:html';
+import 'dart:js';
 
 import 'package:devtools/framework/framework.dart';
 import 'package:meta/meta.dart';
@@ -13,7 +14,7 @@ import 'utils.dart';
 
 // TODO(devoncarew): fixed position header
 
-class Table<T> extends Object with SetStateMixin, OnAddedToDomMixin {
+class Table<T> extends Object with SetStateMixin {
   Table()
       : element = div(a: 'flex', c: 'overflow-y table-border'),
         _isVirtual = false,
@@ -28,10 +29,16 @@ class Table<T> extends Object with SetStateMixin, OnAddedToDomMixin {
     _spacerBeforeVisibleRows = new CoreElement('tr');
     _spacerAfterVisibleRows = new CoreElement('tr');
 
-    element.onScroll.listen((_) => _scheduleRebuild());
+    // TODO(jacobr): remove call to allowInterop once
+    // https://github.com/dart-lang/sdk/issues/35484 is fixed.
+    _visibilityObserver = new IntersectionObserver(allowInterop(_visibilityChange));
+    _visibilityObserver.observe(_spacerBeforeVisibleRows.element);
+    _visibilityObserver.observe(_spacerAfterVisibleRows.element);
+    element.onScroll.listen((_) => _rebuildTable());
   }
 
-  @override
+  IntersectionObserver _visibilityObserver;
+
   final CoreElement element;
   final bool _isVirtual;
 
@@ -69,9 +76,6 @@ class Table<T> extends Object with SetStateMixin, OnAddedToDomMixin {
       new StreamController<T>.broadcast();
 
   void _init() {
-    _monitorWindowResizes();
-    _rebuildWhenAddedToDom();
-
     element.add(_table);
     _table.onKeyDown.listen((KeyboardEvent e) {
       int indexOffset;
@@ -98,29 +102,8 @@ class Table<T> extends Object with SetStateMixin, OnAddedToDomMixin {
     });
   }
 
-  StreamSubscription<Event> _windowResizeSubscription;
-  void _monitorWindowResizes() {
-    // Monitor Window resizes but don't rebuild if we're not in the DOM.
-    _windowResizeSubscription = window.onResize.listen((_) {
-      if (!isInDom) {
-        return;
-      }
-      _scheduleRebuild();
-    });
-  }
-
-  StreamSubscription<void> _addToDomSubscription;
-  void _rebuildWhenAddedToDom() {
-    // When we're added to the DOM, force a rebuild since we may have
-    // resized the window while we were not in the DOM.
-    _addToDomSubscription = onAddedToDom.listen((_) => _scheduleRebuild());
-  }
-
   void dispose() {
-    _windowResizeSubscription?.cancel();
-    _windowResizeSubscription = null;
-    _addToDomSubscription?.cancel();
-    _addToDomSubscription = null;
+    _visibilityObserver.disconnect();
   }
 
   Stream<T> get onSelect => _selectController.stream;
@@ -506,6 +489,10 @@ class Table<T> extends Object with SetStateMixin, OnAddedToDomMixin {
     _doSort();
     _scheduleRebuild();
   }
+
+  void _visibilityChange(List entries, IntersectionObserver observer) {
+    _scheduleRebuild();
+  }
 }
 
 abstract class Column<T> {

lib/ui/elements.dart

@@ -310,39 +310,3 @@ class TrustedHtmlTreeSanitizer implements NodeTreeSanitizer {
   @override
   void sanitizeTree(Node node) {}
 }
-
-abstract class CoreElementOwner {
-  CoreElement get element;
-}
-
-// TODO(dantup): Remove this (plus HasCoreElement above) when we methods on
-// CoreElement to handle add/remove from DOM.
-abstract class OnAddedToDomMixin implements CoreElementOwner {
-  bool isInDom = false;
-  MutationObserver observer;
-  final StreamController<void> _addedToDomController =
-      new StreamController<void>.broadcast();
-
-  Stream<void> get onAddedToDom {
-    // Set up an observer that can detect when this element is added to the DOM.
-    // TODO(dantup): Can mixins have anything like constructors?
-    if (observer == null) {
-      observer = new MutationObserver(
-          (List<dynamic> mutations, MutationObserver observer) {
-        if (document.body.contains(element.element) && !isInDom) {
-          isInDom = true;
-          _addedToDomController.add(null);
-        } else if (!document.body.contains(element.element) && isInDom) {
-          isInDom = false;
-        }
-      });
-
-      // Enable/disable the observer based on whether anyone is listening.
-      _addedToDomController.onListen =
-          () => observer.observe(document.body, childList: true, subtree: true);
-      _addedToDomController.onCancel = () => observer.disconnect();
-    }
-
-    return _addedToDomController.stream;
-  }
-}