feat: implement web-tracing-framework support

This includes implementation and minimal instrumentation Closes angular#2610

Author: mhevery

modules/angular2/angular2.ts

@@ -15,3 +15,4 @@ export * from './directives';
 export * from './http';
 export * from './forms';
 export * from './render';
+export * from './profile';

modules/angular2/angular2_exports.ts

@@ -6,3 +6,4 @@ export * from './directives';
 export * from './http';
 export * from './forms';
 export * from './render';
+export * from './profile';

modules/angular2/profile.ts

@@ -0,0 +1,7 @@
+export {
+ wtfCreateScope,
+ wtfLeave,
+ wtfStartTimeRange,
+ wtfEndTimeRange,
+ WtfScopeFn
+} from './src/profile/profile';

modules/angular2/src/change_detection/abstract_change_detector.ts

@@ -14,6 +14,9 @@ import {BindingRecord} from './binding_record';
 import {Locals} from './parser/locals';
 import {Pipes} from './pipes/pipes';
 import {CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH} from './constants';
+import {wtfCreateScope, wtfLeave, WtfScopeFn} from '../profile/profile';
+
+var _scope_check: WtfScopeFn = wtfCreateScope(`ChangeDetector#check(ascii id, bool throwOnChange)`);
 
 class _Context {
  constructor(public element: any, public componentElement: any, public instance: any,
@@ -69,16 +72,13 @@ export class AbstractChangeDetector<T> implements ChangeDetector {
 
  runDetectChanges(throwOnChange: boolean): void {
  if (this.mode === DETACHED || this.mode === CHECKED) return;
-
+ var s = _scope_check(this.id, throwOnChange);
  this.detectChangesInRecords(throwOnChange);
-
  this._detectChangesInLightDomChildren(throwOnChange);
-
  if (throwOnChange === false) this.callOnAllChangesDone();
-
  this._detectChangesInShadowDomChildren(throwOnChange);
-
  if (this.mode === CHECK_ONCE) this.mode = CHECKED;
+ wtfLeave(s);
  }
 
  // This method is not intended to be overridden. Subclasses should instead provide an

modules/angular2/src/core/application_common.ts

@@ -71,6 +71,7 @@ import {
 } from 'angular2/src/render/dom/view/shared_styles_host';
 import {internalView} from 'angular2/src/core/compiler/view_ref';
 import {appComponentRefPromiseToken, appComponentTypeToken} from './application_tokens';
+import {wtfInit} from '../profile/wtf_init';
 
 var _rootInjector: Injector;
 
@@ -290,6 +291,7 @@ export function commonBootstrap(
  appComponentType: /*Type*/ any,
  componentInjectableBindings: List<Type | Binding | List<any>> = null): Promise<ApplicationRef> {
  BrowserDomAdapter.makeCurrent();
+ wtfInit();
  var bootstrapProcess = PromiseWrapper.completer();
  var zone = createNgZone(new ExceptionHandler(DOM, isDart ? false : true));
  zone.run(() => {

modules/angular2/src/core/compiler/compiler.ts

@@ -25,6 +25,7 @@ import {ProtoViewFactory} from './proto_view_factory';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {AppRootUrl} from 'angular2/src/services/app_root_url';
 import {ElementBinder} from './element_binder';
+import {wtfStartTimeRange, wtfEndTimeRange} from '../../profile/profile';
 
 import * as renderApi from 'angular2/src/render/api';
 
@@ -127,6 +128,7 @@ export class Compiler {
  compileInHost(componentTypeOrBinding: Type | Binding): Promise<ProtoViewRef> {
  var componentType = isType(componentTypeOrBinding) ? componentTypeOrBinding :
  (<Binding>componentTypeOrBinding).token;
+ var r = wtfStartTimeRange('Compiler#compile()', stringify(componentType));
 
  var hostAppProtoView = this._compilerCache.getHost(componentType);
  var hostPvPromise;
@@ -149,7 +151,10 @@ export class Compiler {
  return appProtoView;
  });
  }
- return hostPvPromise.then(hostAppProtoView => hostAppProtoView.ref);
+ return hostPvPromise.then((hostAppProtoView) => {
+ wtfEndTimeRange(r);
+ return hostAppProtoView.ref;
+ });
  }
 
  private _compile(componentBinding: DirectiveBinding,

modules/angular2/src/core/compiler/view_manager.ts

@@ -15,6 +15,7 @@ import {
 import {AppViewManagerUtils} from './view_manager_utils';
 import {AppViewPool} from './view_pool';
 import {AppViewListener} from './view_listener';
+import {wtfCreateScope, wtfLeave, WtfScopeFn} from '../../profile/profile';
 
 /**
  * Entry point for creating, moving views in the view hierarchy and destroying views.
@@ -83,6 +84,7 @@ export class AppViewManager {
  return this._utils.getComponentInstance(hostView, boundElementIndex);
  }
 
+ _scope_createRootHostView: WtfScopeFn = wtfCreateScope('AppViewManager#createRootHostView()');
  /**
  * Load component view into existing element.
  *
@@ -139,6 +141,7 @@ export class AppViewManager {
  */
  createRootHostView(hostProtoViewRef: ProtoViewRef, overrideSelector: string,
  injector: Injector): HostViewRef {
+ var s = this._scope_createRootHostView();
  var hostProtoView: viewModule.AppProtoView = internalProtoView(hostProtoViewRef);
  var hostElementSelector = overrideSelector;
  if (isBlank(hostElementSelector)) {
@@ -151,51 +154,60 @@ export class AppViewManager {
 
  this._renderer.hydrateView(hostView.render);
  this._utils.hydrateRootHostView(hostView, injector);
-
- return hostView.ref;
+ return wtfLeave(s, hostView.ref);
  }
 
+ _scope_destroyRootHostView: WtfScopeFn = wtfCreateScope('AppViewManager#destroyRootHostView()');
  /**
  * Remove the View created with {@link AppViewManager#createRootHostView}.
  */
  destroyRootHostView(hostViewRef: HostViewRef) {
  // Note: Don't put the hostView into the view pool
  // as it is depending on the element for which it was created.
+ var s = this._scope_destroyRootHostView();
  var hostView = internalView(<ViewRef>hostViewRef);
  this._renderer.detachFragment(hostView.renderFragment);
  this._renderer.dehydrateView(hostView.render);
  this._viewDehydrateRecurse(hostView);
  this._viewListener.viewDestroyed(hostView);
  this._renderer.destroyView(hostView.render);
+ wtfLeave(s);
  }
 
+ _scope_createEmbeddedViewInContainer: WtfScopeFn =
+ wtfCreateScope('AppViewManager#createEmbeddedViewInContainer()');
  /**
  *
  * See {@link AppViewManager#destroyViewInContainer}.
  */
  createEmbeddedViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
  templateRef: TemplateRef): ViewRef {
+ var s = this._scope_createEmbeddedViewInContainer();
  var protoView = internalProtoView(templateRef.protoViewRef);
  if (protoView.type !== ViewType.EMBEDDED) {
  throw new BaseException('This method can only be called with embedded ProtoViews!');
  }
- return this._createViewInContainer(viewContainerLocation, atIndex, protoView,
- templateRef.elementRef, null);
+ return wtfLeave(s, this._createViewInContainer(viewContainerLocation, atIndex, protoView,
+  templateRef.elementRef, null));
  }
 
+ _scope_createHostViewInContainer: WtfScopeFn =
+ wtfCreateScope('AppViewManager#createHostViewInContainer()');
  /**
  *
  * See {@link AppViewManager#destroyViewInContainer}.
  */
  createHostViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
  protoViewRef: ProtoViewRef,
  imperativelyCreatedInjector: ResolvedBinding[]): HostViewRef {
+ var s = this._scope_createHostViewInContainer();
  var protoView = internalProtoView(protoViewRef);
  if (protoView.type !== ViewType.HOST) {
  throw new BaseException('This method can only be called with host ProtoViews!');
  }
- return this._createViewInContainer(viewContainerLocation, atIndex, protoView,
- viewContainerLocation, imperativelyCreatedInjector);
+ return wtfLeave(
+ s, this._createViewInContainer(viewContainerLocation, atIndex, protoView,
+ viewContainerLocation, imperativelyCreatedInjector));
  }
 
  /**
@@ -243,22 +255,27 @@ export class AppViewManager {
  }
  }
 
+ _scope_destroyViewInContainer = wtfCreateScope('AppViewMananger#destroyViewInContainer()');
  /**
  *
  * See {@link AppViewManager#createViewInContainer}.
  */
  destroyViewInContainer(viewContainerLocation: ElementRef, atIndex: number) {
+ var s = this._scope_destroyViewInContainer();
  var parentView = internalView(viewContainerLocation.parentView);
  var boundElementIndex = viewContainerLocation.boundElementIndex;
  this._destroyViewInContainer(parentView, boundElementIndex, atIndex);
+ wtfLeave(s);
  }
 
+ _scope_attachViewInContainer = wtfCreateScope('AppViewMananger#attachViewInContainer()');
  /**
  *
  * See {@link AppViewManager#detachViewInContainer}.
  */
  attachViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
  viewRef: ViewRef): ViewRef {
+ var s = this._scope_attachViewInContainer();
  var view = internalView(viewRef);
  var parentView = internalView(viewContainerLocation.parentView);
  var boundElementIndex = viewContainerLocation.boundElementIndex;
@@ -270,21 +287,23 @@ export class AppViewManager {
  // context view that might have been used.
  this._utils.attachViewInContainer(parentView, boundElementIndex, null, null, atIndex, view);
  this._attachRenderView(parentView, boundElementIndex, atIndex, view);
- return viewRef;
+ return wtfLeave(s, viewRef);
  }
 
+ _scope_detachViewInContainer = wtfCreateScope('AppViewMananger#detachViewInContainer()');
  /**
  *
  * See {@link AppViewManager#attachViewInContainer}.
  */
  detachViewInContainer(viewContainerLocation: ElementRef, atIndex: number): ViewRef {
+ var s = this._scope_detachViewInContainer();
  var parentView = internalView(viewContainerLocation.parentView);
  var boundElementIndex = viewContainerLocation.boundElementIndex;
  var viewContainer = parentView.viewContainers[boundElementIndex];
  var view = viewContainer.views[atIndex];
  this._utils.detachViewInContainer(parentView, boundElementIndex, atIndex);
  this._renderer.detachFragment(view.renderFragment);
- return view.ref;
+ return wtfLeave(s, view.ref);
  }
 
  _createMainView(protoView: viewModule.AppProtoView,

modules/angular2/src/core/life_cycle/life_cycle.ts

@@ -2,6 +2,7 @@ import {Injectable} from 'angular2/di';
 import {ChangeDetector} from 'angular2/src/change_detection/change_detection';
 import {NgZone} from 'angular2/src/core/zone/ng_zone';
 import {isPresent, BaseException} from 'angular2/src/facade/lang';
+import {wtfLeave, wtfCreateScope, WtfScopeFn} from '../../profile/profile';
 
 /**
  * Provides access to explicitly trigger change detection in an application.
@@ -31,6 +32,8 @@ import {isPresent, BaseException} from 'angular2/src/facade/lang';
  */
 @Injectable()
 export class LifeCycle {
+ static _scope_tick: WtfScopeFn = wtfCreateScope('LifeCycle#tick()');
+
  _changeDetector: ChangeDetector;
  _enforceNoNewChanges: boolean;
  _runningTick: boolean = false;
@@ -71,6 +74,7 @@ export class LifeCycle {
  throw new BaseException("LifeCycle.tick is called recursively");
  }
 
+ var s = LifeCycle._scope_tick();
  try {
  this._runningTick = true;
  this._changeDetector.detectChanges();
@@ -79,6 +83,7 @@ export class LifeCycle {
  }
  } finally {
  this._runningTick = false;
+ wtfLeave(s);
  }
  }
 }

modules/angular2/src/core/zone/ng_zone.ts

@@ -1,5 +1,7 @@
 import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
 import {normalizeBlank, isPresent, global} from 'angular2/src/facade/lang';
+import {wtfLeave, wtfCreateScope, WtfScopeFn} from '../../profile/profile';
+
 
 export interface NgZoneZone extends Zone { _innerZone: boolean; }
 
@@ -13,6 +15,9 @@ export interface NgZoneZone extends Zone { _innerZone: boolean; }
  * `Zone`. The default `onTurnDone` runs the Angular change detection.
  */
 export class NgZone {
+ _zone_run_scope: WtfScopeFn = wtfCreateScope(`NgZone#run()`);
+ _zone_microtask: WtfScopeFn = wtfCreateScope(`NgZone#microtask()`);
+
  // Code executed in _mountZone does not trigger the onTurnDone.
  _mountZone;
  // _innerZone is the child of _mountZone. Any code executed in this zone will trigger the
@@ -134,7 +139,12 @@ export class NgZone {
  */
  run(fn: () => any): any {
  if (this._disabled) {
- return fn();
+ var s = this._zone_run_scope();
+ try {
+ return fn();
+ } finally {
+ wtfLeave(s);
+ }
  } else {
  return this._innerZone.run(fn);
  }
@@ -165,6 +175,7 @@ export class NgZone {
  }
 
  _createInnerZone(zone, enableLongStackTrace) {
+ var _zone_microtask = this._zone_microtask;
  var ngZone = this;
  var errorHandling;
 
@@ -217,10 +228,12 @@ export class NgZone {
  return function(fn) {
  ngZone._pendingMicrotasks++;
  var microtask = function() {
+ var s = _zone_microtask();
  try {
  fn();
  } finally {
  ngZone._pendingMicrotasks--;
+ wtfLeave(s);
  }
  };
  parentScheduleMicrotask.call(this, microtask);