feat(WTF): Add support for WTF

1) Install https://chrome.google.com/webstore/detail/web-tracing-framework/gmdhhnlkjmknaopofnadmoamhmnlicme 2) Enjoy the visibility Closes #1354
dart-archive · Aug 15, 2014 · 23639c1 · jbdeboer · Aug 15, 2014 · 23639c1
1 parent a300adf
commit 23639c1
Show file tree

Hide file tree

Showing 22 changed files with 372 additions and 126 deletions.
diff --git a/benchmark/launch_chrome.sh b/benchmark/launch_chrome.sh
@@ -4,5 +4,10 @@ platform=`uname`
 if [[ "$platform" == 'Linux' ]]; then
   `google-chrome --js-flags="--expose-gc"`
 elif [[ "$platform" == 'Darwin' ]]; then
-  `/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-memory-info --enable-precise-memory-info --enable-memory-benchmarking --js-flags="--expose-gc"`
+  `/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary \
+      --enable-memory-info \
+      --enable-precise-memory-info \
+      --enable-memory-benchmarking \
+      --js-flags="--expose-gc" \
+      --remote-debugging-port=9222`
 fi
diff --git a/benchmark/web/wtf.dart b/benchmark/web/wtf.dart
@@ -0,0 +1,31 @@
+library wtf_test_app;
+
+import 'package:angular/wtf.dart';
+import 'dart:html';
+import 'dart:js' show context;
+
+main() {
+  traceInit(context);
+  var _main = traceCreateScope('main()');
+  var _querySelector = traceCreateScope('Node#querySelector()');
+  var _DivElement = traceCreateScope('DivElement()');
+  var _ElementText = traceCreateScope('Element#text');
+  var _NodeAppend = traceCreateScope('Node#append()');
+  var scope = traceEnter(_main);
+    var s = traceEnter(_querySelector);
+    BodyElement body = window.document.querySelector('body');
+    traceLeave(s);
+
+    s = traceEnter(_DivElement);
+    var div = new DivElement();
+    traceLeave(s);
+
+    s = traceEnter(_ElementText);
+    div.text = 'Hello WTF! (enabled: ${wtfEnabled})';
+    traceLeave(s);
+
+    s = traceEnter(_NodeAppend);
+    body.append(div);
+    traceLeave(s);
+  traceLeave(scope);
+}
diff --git a/benchmark/web/wtf.html b/benchmark/web/wtf.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>WTF Test page</title>
+    <script src="wtf.dart" type="application/dart"></script>
+    <script src="packages/browser/dart.js"></script>
+    <script src="packages/browser/interop.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/lib/application.dart b/lib/application.dart
@@ -68,6 +68,7 @@
 library angular.app;
 
 import 'dart:html' as dom;
+import 'dart:js' show context;
 
 import 'package:intl/date_symbol_data_local.dart';
 import 'package:di/di.dart';
@@ -76,12 +77,12 @@ import 'package:angular/perf/module.dart';
 import 'package:angular/cache/module.dart';
 import 'package:angular/cache/js_cache_register.dart';
 import 'package:angular/core/module_internal.dart';
-import 'package:angular/core/registry.dart';
 import 'package:angular/core_dom/module_internal.dart';
 import 'package:angular/directive/module.dart';
 import 'package:angular/formatter/module_internal.dart';
 import 'package:angular/routing/module.dart';
 import 'package:angular/introspection.dart';
+import 'package:angular/wtf.dart';
 
 import 'package:angular/core_dom/static_keys.dart';
 import 'package:angular/core_dom/directive_injector.dart';
@@ -129,6 +130,7 @@ class AngularModule extends Module {
  * applicationFactory to bootstrap your Angular application.
  *
  */
+var _Application_run = traceCreateScope('Application#run()');
 abstract class Application {
   static _find(String selector, [dom.Element defaultElement]) {
     var element = dom.document.querySelector(selector);
@@ -150,6 +152,7 @@ abstract class Application {
   dom.Element selector(String selector) => element = _find(selector);
 
   Application(): element = _find('[ng-app]', dom.window.document.documentElement) {
+    traceInit(context);
     modules.add(ngModule);
     ngModule..bind(VmTurnZone, toValue: zone)
             ..bind(Application, toValue: this)
@@ -172,26 +175,31 @@ abstract class Application {
   }
 
   Injector run() {
-    publishToJavaScript();
-    return zone.run(() {
-      var rootElements = [element];
-      Injector injector = createInjector();
-      ExceptionHandler exceptionHandler = injector.getByKey(EXCEPTION_HANDLER_KEY);
-      // Publish cache register interface
-      injector.getByKey(JS_CACHE_REGISTER_KEY);
-      initializeDateFormatting(null, null).then((_) {
-        try {
-          Compiler compiler = injector.getByKey(COMPILER_KEY);
-          DirectiveMap directiveMap = injector.getByKey(DIRECTIVE_MAP_KEY);
-          RootScope rootScope = injector.getByKey(ROOT_SCOPE_KEY);
-          ViewFactory viewFactory = compiler(rootElements, directiveMap);
-          viewFactory(rootScope, injector.get(DirectiveInjector), rootElements);
-        } catch (e, s) {
-          exceptionHandler(e, s);
-        }
+    var scope = traceEnter(_Application_run);
+    try {
+      publishToJavaScript();
+      return zone.run(() {
+        var rootElements = [element];
+        Injector injector = createInjector();
+        ExceptionHandler exceptionHandler = injector.getByKey(EXCEPTION_HANDLER_KEY);
+        // Publish cache register interface
+        injector.getByKey(JS_CACHE_REGISTER_KEY);
+        initializeDateFormatting(null, null).then((_) {
+          try {
+            Compiler compiler = injector.getByKey(COMPILER_KEY);
+            DirectiveMap directiveMap = injector.getByKey(DIRECTIVE_MAP_KEY);
+            RootScope rootScope = injector.getByKey(ROOT_SCOPE_KEY);
+            ViewFactory viewFactory = compiler(rootElements, directiveMap);
+            viewFactory(rootScope, injector.get(DirectiveInjector), rootElements);
+          } catch (e, s) {
+            exceptionHandler(e, s);
+          }
+        });
+        return injector;
       });
-      return injector;
-    });
+    } finally {
+      traceLeave(scope);
+    }
   }
 
   /**

diff --git a/lib/change_detection/watch_group.dart b/lib/change_detection/watch_group.dart
@@ -2,11 +2,18 @@ library angular.watch_group;
 
 import 'package:angular/change_detection/change_detection.dart';
 import 'dart:collection';
+import 'package:angular/wtf.dart';
 
 part 'linked_list.dart';
 part 'ast.dart';
 part 'prototype_map.dart';
 
+var _WatchGroup_detect = traceCreateScope('WatchGroup#detect()');
+var _WatchGroup_fields = traceCreateScope('WatchGroup#field()');
+var _WatchGroup_field_handler = traceCreateScope('WatchGroup#field_handler()');
+var _WatchGroup_eval = traceCreateScope('WatchGroup#eval()');
+var _WatchGroup_reaction = traceCreateScope('WatchGroup#reaction()');
+
 /**
  * A function that is notified of changes to the model.
  *
@@ -392,23 +399,29 @@ class RootWatchGroup extends WatchGroup {
                       AvgStopwatch evalStopwatch,
                       AvgStopwatch processStopwatch}) {
     // Process the Records from the change detector
+    var sDetect = traceEnter(_WatchGroup_detect);
+    var s = traceEnter(_WatchGroup_fields);
     Iterator<Record<_Handler>> changedRecordIterator =
         (_changeDetector as ChangeDetector<_Handler>).collectChanges(
             exceptionHandler:exceptionHandler,
             stopwatch: fieldStopwatch);
+    traceLeave(s);
     if (processStopwatch != null) processStopwatch.start();
+    s = traceEnter(_WatchGroup_field_handler);
     while (changedRecordIterator.moveNext()) {
       var record = changedRecordIterator.current;
       if (changeLog != null) changeLog(record.handler.expression,
                                        record.currentValue,
                                        record.previousValue);
       record.handler.onChange(record);
     }
+    traceLeave(s);
     if (processStopwatch != null) processStopwatch.stop();
 
     if (evalStopwatch != null) evalStopwatch.start();
     // Process our own function evaluations
     _EvalWatchRecord evalRecord = _evalWatchHead;
+    s = traceEnter(_WatchGroup_eval);
     int evalCount = 0;
     while (evalRecord != null) {
       try {
@@ -423,11 +436,15 @@ class RootWatchGroup extends WatchGroup {
       }
       evalRecord = evalRecord._nextEvalWatch;
     }
+
+    traceLeave(s);
+    traceLeave(sDetect);
     if (evalStopwatch != null) evalStopwatch..stop()..increment(evalCount);
 
     // Because the handler can forward changes between each other synchronously
     // We need to call reaction functions asynchronously. This processes the
     // asynchronous reaction function queue.
+    s = traceEnter(_WatchGroup_reaction);
     int count = 0;
     if (processStopwatch != null) processStopwatch.start();
     Watch dirtyWatch = _dirtyWatchHead;
@@ -451,6 +468,7 @@ class RootWatchGroup extends WatchGroup {
       _dirtyWatchTail = null;
       root._removeCount = 0;
     }
+    traceLeave(s);
     if (processStopwatch != null) processStopwatch..stop()..increment(count);
     return count;
   }

diff --git a/lib/core/module_internal.dart b/lib/core/module_internal.dart
@@ -11,6 +11,7 @@ import 'package:di/annotations.dart';
 import 'package:angular/core/parser/parser.dart';
 import 'package:angular/core/parser/lexer.dart';
 import 'package:angular/utils.dart';
+import 'package:angular/wtf.dart';
 
 import 'package:angular/core/annotation_src.dart';
 

diff --git a/lib/core/parser/dynamic_parser.dart b/lib/core/parser/dynamic_parser.dart
@@ -3,7 +3,7 @@ library angular.core.parser.dynamic_parser;
 import 'package:di/annotations.dart';
 import 'package:angular/cache/module.dart';
 import 'package:angular/core/annotation_src.dart' hide Formatter;
-import 'package:angular/core/module_internal.dart' show FormatterMap;
+import 'package:angular/core/formatter.dart' show FormatterMap;
 
 import 'package:angular/core/parser/parser.dart';
 import 'package:angular/core/parser/lexer.dart';

diff --git a/lib/core/parser/eval.dart b/lib/core/parser/eval.dart
@@ -2,7 +2,7 @@ library angular.core.parser.eval;
 
 import 'package:angular/core/parser/syntax.dart' as syntax;
 import 'package:angular/core/parser/utils.dart';
-import 'package:angular/core/module_internal.dart';
+import 'package:angular/core/formatter.dart' show FormatterMap;
 
 export 'package:angular/core/parser/eval_access.dart';
 export 'package:angular/core/parser/eval_calls.dart';

diff --git a/lib/core/parser/eval_access.dart b/lib/core/parser/eval_access.dart
@@ -3,7 +3,7 @@ library angular.core.parser.eval_access;
 import 'package:angular/core/parser/parser.dart';
 import 'package:angular/core/parser/syntax.dart' as syntax;
 import 'package:angular/core/parser/utils.dart';
-import 'package:angular/core/module_internal.dart';
+import 'package:angular/core/formatter.dart' show FormatterMap;
 
 class AccessScopeFast extends syntax.AccessScope with AccessFast {
   final Getter getter;

diff --git a/lib/core/parser/eval_calls.dart b/lib/core/parser/eval_calls.dart
@@ -3,7 +3,7 @@ library angular.core.parser.eval_calls;
 import 'package:angular/core/parser/parser.dart';
 import 'package:angular/core/parser/syntax.dart' as syntax;
 import 'package:angular/core/parser/utils.dart';
-import 'package:angular/core/module_internal.dart';
+import 'package:angular/core/formatter.dart' show FormatterMap;
 
 
 class CallScope extends syntax.CallScope {

diff --git a/lib/core/parser/syntax.dart b/lib/core/parser/syntax.dart
@@ -3,7 +3,7 @@ library angular.core.parser.syntax;
 import 'package:angular/core/parser/parser.dart' show LocalsWrapper;
 import 'package:angular/core/parser/unparser.dart' show Unparser;
 import 'package:angular/core/parser/utils.dart' show EvalError;
-import 'package:angular/core/module_internal.dart';
+import 'package:angular/core/formatter.dart' show FormatterMap;
 
 abstract class Visitor {
   visit(Expression expression) => expression.accept(this);

diff --git a/lib/core/parser/utils.dart b/lib/core/parser/utils.dart
@@ -1,7 +1,7 @@
 library angular.core.parser.utils;
 
 import 'package:angular/core/parser/syntax.dart' show Expression;
-import 'package:angular/core/module_internal.dart';
+import 'package:angular/core/formatter.dart' show FormatterMap;
 export 'package:angular/utils.dart' show relaxFnApply, relaxFnArgs, toBool;
 
 /// Marker for an uninitialized value.

diff --git a/lib/core/scope.dart b/lib/core/scope.dart
@@ -3,6 +3,14 @@ part of angular.core_internal;
 typedef EvalFunction0();
 typedef EvalFunction1(context);
 
+var _Scope_apply = traceCreateScope('Scope#apply()');
+var _Scope_digest = traceCreateScope('Scope#digest()');
+var _Scope_flush = traceCreateScope('Scope#flush()');
+var _Scope_domWrite = traceCreateScope('Scope#domWrite()');
+var _Scope_domRead = traceCreateScope('Scope#domRead()');
+var _Scope_assert = traceCreateScope('Scope#assert()');
+var _Scope_runAsync = traceCreateScope('Scope#runAsync()');
+var _Scope_createChild = traceCreateScope('Scope#createChild()');
 /**
  * Injected into the listener function within [Scope.on] to provide event-specific details to the
  * scope listener.
@@ -330,6 +338,7 @@ class Scope {
 
   /// Creates a child [Scope] with the given [childContext]
   Scope createChild(Object childContext) {
+    var s = traceEnter(_Scope_createChild);
     assert(isAttached);
     var child = new Scope(childContext, rootScope, this,
                           _readWriteGroup.newGroup(childContext),
@@ -341,6 +350,7 @@ class Scope {
     child._prev = prev;
     if (prev == null) _childHead = child; else prev._next = child;
     _childTail = child;
+    traceLeave(s);
     return child;
   }
 
@@ -593,6 +603,7 @@ class RootScope extends Scope {
   final ScopeStats _scopeStats;
 
   String _state;
+  var _state_wtf_scope;
 
   /**
    * While processing data bindings, Angular passes through multiple states. When testing or
@@ -735,6 +746,7 @@ class RootScope extends Scope {
     try {
       do {
         if (_domWriteHead != null) _stats.domWriteStart();
+        var s = traceEnter(_Scope_domWrite);
         while (_domWriteHead != null) {
           try {
             _domWriteHead.fn();
@@ -744,6 +756,7 @@ class RootScope extends Scope {
           _domWriteHead = _domWriteHead._next;
           if (_domWriteHead == null) _stats.domWriteEnd();
         }
+        traceLeave(s);
         _domWriteTail = null;
         if (runObservers) {
           runObservers = false;
@@ -753,6 +766,7 @@ class RootScope extends Scope {
               processStopwatch: _scopeStats.processStopwatch);
         }
         if (_domReadHead != null) _stats.domReadStart();
+        s = traceEnter(_Scope_domRead);
         while (_domReadHead != null) {
           try {
             _domReadHead.fn();
@@ -763,6 +777,7 @@ class RootScope extends Scope {
           if (_domReadHead == null) _stats.domReadEnd();
         }
         _domReadTail = null;
+        traceLeave(s);
         _runAsyncFns();
       } while (_domWriteHead != null || _domReadHead != null || _runAsyncHead != null);
       _stats.flushEnd();
@@ -808,6 +823,7 @@ class RootScope extends Scope {
   }
 
   _runAsyncFns() {
+    var s = traceEnter(_Scope_runAsync);
     var count = 0;
     while (_runAsyncHead != null) {
       try {
@@ -819,6 +835,7 @@ class RootScope extends Scope {
       _runAsyncHead = _runAsyncHead._next;
     }
     _runAsyncTail = null;
+    traceLeave(s);
     return count;
   }
 
@@ -846,6 +863,13 @@ class RootScope extends Scope {
     assert(isAttached);
     if (_state != from) throw "$_state already in progress can not enter $to.";
     _state = to;
+    if (_state_wtf_scope != null) traceLeave(_state_wtf_scope);
+    var wtfScope = null;
+    if (to == STATE_APPLY) wtfScope = _Scope_apply;
+    else if (to == STATE_DIGEST) wtfScope = _Scope_digest;
+    else if (to == STATE_FLUSH) wtfScope = _Scope_flush;
+    else if (to == STATE_FLUSH_ASSERT) wtfScope = _Scope_assert;
+    _state_wtf_scope = wtfScope == null ? null : traceEnter(wtfScope);
   }
 }