feat(debug): replace DebugElement with new Debug DOM

Now, using `ng.probe(element)` in the browser console returns
a DebugElement when in dev mode.

`ComponentFixture#debugElement` also returns a new DebugElement.

Breaking Change:

This is a breaking change for unit tests. The API for the DebugElement
has changed. Now, there is a DebugElement or DebugNode for every node
in the DOM, not only nodes with an ElementRef. `componentViewChildren` is
removed, and `childNodes` is a list of ElementNodes corresponding to every
child in the DOM. `query` no longer takes a scope parameter, since
the entire rendered DOM is included in the `childNodes`.

Before:

```
componentFixture.debugElement.componentViewChildren[0];
```

After
```
// Depending on the DOM structure of your component, the
// index may have changed or the first component child
// may be a sub-child.
componentFixture.debugElement.children[0];
```

Before:

```
debugElement.query(By.css('div'), Scope.all());
```

After:

```
debugElement.query(By.css('div'));
```

Before:

```
componentFixture.debugElement.elementRef;
```

After:

```
componentFixture.elementRef;
```

modules/angular2/core.dart

@@ -15,7 +15,7 @@ export './src/core/application_tokens.dart' show APP_ID,
 export './src/core/zone.dart';
 export './src/core/render.dart';
 export './src/core/linker.dart';
-export './src/core/debug/debug_element.dart' show DebugElement,
+export './src/core/debug/debug_node.dart' show DebugElement,
   Scope,
   inspectElement,
   asNativeElements;

modules/angular2/core.ts

@@ -20,12 +20,7 @@ export {
 export * from './src/core/zone';
 export * from './src/core/render';
 export * from './src/core/linker';
-export {
+export {DebugElement, asNativeElements} from './src/core/debug/debug_node';
-  DebugElement,
-  Scope,
-  inspectElement,
-  asNativeElements
-} from './src/core/debug/debug_element';
 export * from './src/core/testability/testability';
 export * from './src/core/change_detection';
 export * from './src/core/platform_directives_and_pipes';

modules/angular2/examples/core/debug/ts/debug_element/debug_element.ts

@@ -1,16 +1,8 @@
-import {DebugElement, Scope} from 'angular2/core';
+import {DebugElement} from 'angular2/core';
 
 var debugElement: DebugElement;
 var predicate;
 
 // #docregion scope_all
-debugElement.query(predicate, Scope.all);
+debugElement.query(predicate);
-// #enddocregion
-
-// #docregion scope_light
-debugElement.query(predicate, Scope.light);
-// #enddocregion
-
-// #docregion scope_view
-debugElement.query(predicate, Scope.view);
 // #enddocregion

modules/angular2/examples/platform/dom/debug/ts/by/by.ts

@@ -1,17 +1,17 @@
 import {By} from 'angular2/platform/browser';
-import {DebugElement, Scope} from 'angular2/core';
+import {DebugElement} from 'angular2/core';
 
 var debugElement: DebugElement;
 class MyDirective {}
 
 // #docregion by_all
-debugElement.query(By.all(), Scope.all);
+debugElement.query(By.all());
 // #enddocregion
 
 // #docregion by_css
-debugElement.query(By.css('[attribute]'), Scope.all);
+debugElement.query(By.css('[attribute]'));
 // #enddocregion
 
 // #docregion by_directive
-debugElement.query(By.directive(MyDirective), Scope.all);
+debugElement.query(By.directive(MyDirective));
 // #enddocregion

modules/angular2/platform/browser.ts

@@ -1,8 +1,8 @@
 export {AngularEntrypoint} from 'angular2/src/core/angular_entrypoint';
 export {
   BROWSER_PROVIDERS,
-  ELEMENT_PROBE_BINDINGS,
   ELEMENT_PROBE_PROVIDERS,
+  ELEMENT_PROBE_PROVIDERS_PROD_MODE,
   inspectNativeElement,
   BrowserDomAdapter,
   By,

modules/angular2/platform/browser_static.ts

@@ -1,8 +1,8 @@
 export {AngularEntrypoint} from 'angular2/src/core/angular_entrypoint';
 export {
   BROWSER_PROVIDERS,
-  ELEMENT_PROBE_BINDINGS,
   ELEMENT_PROBE_PROVIDERS,
+  ELEMENT_PROBE_PROVIDERS_PROD_MODE,
   inspectNativeElement,
   BrowserDomAdapter,
   By,

modules/angular2/platform/common_dom.ts

@@ -12,4 +12,4 @@ export {
   EventManagerPlugin
 } from 'angular2/src/platform/dom/events/event_manager';
 export * from 'angular2/src/platform/dom/debug/by';
-export * from 'angular2/src/platform/dom/debug/debug_element_view_listener';
+export * from 'angular2/src/platform/dom/debug/ng_probe';

modules/angular2/src/core/application_common_providers.ts

@@ -15,7 +15,6 @@ import {ResolvedMetadataCache} from 'angular2/src/core/linker/resolved_metadata_
 import {AppViewManager} from './linker/view_manager';
 import {AppViewManager_} from "./linker/view_manager";
 import {ViewResolver} from './linker/view_resolver';
-import {AppViewListener} from './linker/view_listener';
 import {DirectiveResolver} from './linker/directive_resolver';
 import {PipeResolver} from './linker/pipe_resolver';
 import {Compiler} from './linker/compiler';
@@ -32,7 +31,6 @@ export const APPLICATION_COMMON_PROVIDERS: Array<Type | Provider | any[]> = CONS
   APP_ID_RANDOM_PROVIDER,
   ResolvedMetadataCache,
   new Provider(AppViewManager, {useClass: AppViewManager_}),
-  AppViewListener,
   ViewResolver,
   new Provider(IterableDiffers, {useValue: defaultIterableDiffers}),
   new Provider(KeyValueDiffers, {useValue: defaultKeyValueDiffers}),

modules/angular2/src/core/debug/debug_element.ts

@@ -1,248 +0,0 @@
-import {Type, isPresent, isBlank} from 'angular2/src/facade/lang';
-import {ListWrapper, MapWrapper, Predicate} from 'angular2/src/facade/collection';
-import {unimplemented} from 'angular2/src/facade/exceptions';
-
-import {AppElement} from 'angular2/src/core/linker/element';
-import {AppView} from 'angular2/src/core/linker/view';
-import {ElementRef, ElementRef_} from 'angular2/src/core/linker/element_ref';
-
-/**
- * A DebugElement contains information from the Angular compiler about an
- * element and provides access to the corresponding ElementInjector and
- * underlying DOM Element, as well as a way to query for children.
- *
- * A DebugElement can be obtained from a {@link ComponentFixture} or from an
- * {@link ElementRef} via {@link inspectElement}.
- */
-export abstract class DebugElement {
-  /**
-   * Return the instance of the component associated with this element, if any.
-   */
-  get componentInstance(): any { return unimplemented(); };
-
-  /**
-   * Return the native HTML element for this DebugElement.
-   */
-  get nativeElement(): any { return unimplemented(); };
-
-  /**
-   * Return an Angular {@link ElementRef} for this element.
-   */
-  get elementRef(): ElementRef { return unimplemented(); };
-
-  /**
-   * Get the directive active for this element with the given index, if any.
-   */
-  abstract getDirectiveInstance(directiveIndex: number): any;
-
-  /**
-   * Get child DebugElements from within the Light DOM.
-   *
-   * @return {DebugElement[]}
-   */
-  get children(): DebugElement[] { return unimplemented(); };
-
-  /**
-   * Get the root DebugElement children of a component. Returns an empty
-   * list if the current DebugElement is not a component root.
-   *
-   * @return {DebugElement[]}
-   */
-  get componentViewChildren(): DebugElement[] { return unimplemented(); };
-
-  /**
-   * Simulate an event from this element as if the user had caused
-   * this event to fire from the page.
-   */
-  abstract triggerEventHandler(eventName: string, eventObj: Event): void;
-
-  /**
-   * Check whether the element has a directive with the given type.
-   */
-  abstract hasDirective(type: Type): boolean;
-
-  /**
-   * Inject the given type from the element injector.
-   */
-  abstract inject(type: Type): any;
-
-
-  /**
-   * Read a local variable from the element (e.g. one defined with `#variable`).
-   */
-  abstract getLocal(name: string): any;
-
-  /**
-   * Return the first descendant TestElement matching the given predicate
-   * and scope.
-   *
-   * @param {Function: boolean} predicate
-   * @param {Scope} scope
-   *
-   * @return {DebugElement}
-   */
-  query(predicate: Predicate<DebugElement>, scope: Function = Scope.all): DebugElement {
-    var results = this.queryAll(predicate, scope);
-    return results.length > 0 ? results[0] : null;
-  }
-
-  /**
-   * Return descendant TestElememts matching the given predicate
-   * and scope.
-   *
-   * @param {Function: boolean} predicate
-   * @param {Scope} scope
-   *
-   * @return {DebugElement[]}
-   */
-  queryAll(predicate: Predicate<DebugElement>, scope: Function = Scope.all): DebugElement[] {
-    var elementsInScope: any[] = scope(this);
-
-    return elementsInScope.filter(predicate);
-  }
-}
-
-export class DebugElement_ extends DebugElement {
-  constructor(private _appElement: AppElement) { super(); }
-
-  get componentInstance(): any {
-    if (!isPresent(this._appElement)) {
-      return null;
-    }
-    return this._appElement.getComponent();
-  }
-
-  get nativeElement(): any { return this.elementRef.nativeElement; }
-
-  get elementRef(): ElementRef { return this._appElement.ref; }
-
-  getDirectiveInstance(directiveIndex: number): any {
-    return this._appElement.getDirectiveAtIndex(directiveIndex);
-  }
-
-  get children(): DebugElement[] {
-    return this._getChildElements(this._appElement.parentView, this._appElement);
-  }
-
-  get componentViewChildren(): DebugElement[] {
-    if (!isPresent(this._appElement.componentView)) {
-      // The current element is not a component.
-      return [];
-    }
-
-    return this._getChildElements(this._appElement.componentView, null);
-  }
-
-  triggerEventHandler(eventName: string, eventObj: Event): void {
-    this._appElement.parentView.triggerEventHandlers(eventName, eventObj,
-                                                     this._appElement.proto.index);
-  }
-
-  hasDirective(type: Type): boolean {
-    if (!isPresent(this._appElement)) {
-      return false;
-    }
-    return this._appElement.hasDirective(type);
-  }
-
-  inject(type: Type): any {
-    if (!isPresent(this._appElement)) {
-      return null;
-    }
-    return this._appElement.get(type);
-  }
-
-  getLocal(name: string): any { return this._appElement.parentView.locals.get(name); }
-
-  /** @internal */
-  _getChildElements(view: AppView, parentAppElement: AppElement): DebugElement[] {
-    var els = [];
-    for (var i = 0; i < view.appElements.length; ++i) {
-      var appEl = view.appElements[i];
-      if (appEl.parent == parentAppElement) {
-        els.push(new DebugElement_(appEl));
-
-        var views = appEl.nestedViews;
-        if (isPresent(views)) {
-          views.forEach(
-              (nextView) => { els = els.concat(this._getChildElements(nextView, null)); });
-        }
-      }
-    }
-    return els;
-  }
-}
-
-/**
- * Returns a {@link DebugElement} for an {@link ElementRef}.
- *
- * @param {ElementRef}: elementRef
- * @return {DebugElement}
- */
-export function inspectElement(elementRef: ElementRef): DebugElement {
-  return new DebugElement_((<ElementRef_>elementRef).internalElement);
-}
-
-/**
- * Maps an array of {@link DebugElement}s to an array of native DOM elements.
- */
-export function asNativeElements(arr: DebugElement[]): any[] {
-  return arr.map((debugEl) => debugEl.nativeElement);
-}
-
-/**
- * Set of scope functions used with {@link DebugElement}'s query functionality.
- */
-export class Scope {
-  /**
-   * Scope queries to both the light dom and view of an element and its
-   * children.
-   *
-   * ## Example
-   *
-   * {@example core/debug/ts/debug_element/debug_element.ts region='scope_all'}
-   */
-  static all(debugElement: DebugElement): DebugElement[] {
-    var scope = [];
-    scope.push(debugElement);
-
-    debugElement.children.forEach(child => scope = scope.concat(Scope.all(child)));
-
-    debugElement.componentViewChildren.forEach(child => scope = scope.concat(Scope.all(child)));
-
-    return scope;
-  }
-
-  /**
-   * Scope queries to the light dom of an element and its children.
-   *
-   * ## Example
-   *
-   * {@example core/debug/ts/debug_element/debug_element.ts region='scope_light'}
-   */
-  static light(debugElement: DebugElement): DebugElement[] {
-    var scope = [];
-    debugElement.children.forEach(child => {
-      scope.push(child);
-      scope = scope.concat(Scope.light(child));
-    });
-    return scope;
-  }
-
-  /**
-   * Scope queries to the view of an element of its children.
-   *
-   * ## Example
-   *
-   * {@example core/debug/ts/debug_element/debug_element.ts region='scope_view'}
-   */
-  static view(debugElement: DebugElement): DebugElement[] {
-    var scope = [];
-
-    debugElement.componentViewChildren.forEach(child => {
-      scope.push(child);
-      scope = scope.concat(Scope.light(child));
-    });
-    return scope;
-  }
-}

modules/angular2/src/core/debug/debug_node.ts

@@ -0,0 +1,171 @@
+import {isPresent} from 'angular2/src/facade/lang';
+import {Predicate} from 'angular2/src/facade/collection';
+import {Injector} from 'angular2/src/core/di';
+import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+import {RenderDebugInfo} from 'angular2/src/core/render/api';
+
+export class EventListener { constructor(public name: string, public callback: Function){}; }
+
+export class DebugNode {
+  nativeNode: any;
+  listeners: EventListener[];
+  parent: DebugElement;
+  providerTokens: any[];
+  locals: Map<string, any>;
+  injector: Injector;
+  componentInstance: any;
+
+  constructor(nativeNode: any, parent: DebugNode) {
+    this.nativeNode = nativeNode;
+    if (isPresent(parent) && parent instanceof DebugElement) {
+      parent.addChild(this);
+    } else {
+      this.parent = null;
+    }
+    this.listeners = [];
+    this.providerTokens = [];
+  }
+
+  setDebugInfo(info: RenderDebugInfo) {
+    this.injector = info.injector;
+    this.providerTokens = info.providerTokens;
+    this.locals = info.locals;
+    this.componentInstance = info.component;
+  }
+
+  inject(token: any): any { return this.injector.get(token); }
+
+  getLocal(name: string): any { return this.locals.get(name); }
+}
+
+export class DebugElement extends DebugNode {
+  name: string;
+  properties: Map<string, any>;
+  attributes: Map<string, any>;
+  childNodes: DebugNode[];
+  nativeElement: any;
+
+  constructor(nativeNode: any, parent: any) {
+    super(nativeNode, parent);
+    this.properties = new Map<string, any>();
+    this.attributes = new Map<string, any>();
+    this.childNodes = [];
+    this.nativeElement = nativeNode;
+  }
+
+  addChild(child: DebugNode) {
+    if (isPresent(child)) {
+      this.childNodes.push(child);
+      child.parent = this;
+    }
+  }
+
+  removeChild(child: DebugNode) {
+    var childIndex = this.childNodes.indexOf(child);
+    if (childIndex !== -1) {
+      child.parent = null;
+      this.childNodes.splice(childIndex, 1);
+    }
+  }
+
+  insertChildrenAfter(child: DebugNode, newChildren: DebugNode[]) {
+    var siblingIndex = this.childNodes.indexOf(child);
+    if (siblingIndex !== -1) {
+      var previousChildren = this.childNodes.slice(0, siblingIndex + 1);
+      var nextChildren = this.childNodes.slice(siblingIndex + 1);
+      this.childNodes =
+          ListWrapper.concat(ListWrapper.concat(previousChildren, newChildren), nextChildren);
+      for (var i = 0; i < newChildren.length; ++i) {
+        var newChild = newChildren[i];
+        if (isPresent(newChild.parent)) {
+          newChild.parent.removeChild(newChild);
+        }
+        newChild.parent = this;
+      }
+    }
+  }
+
+  query(predicate: Predicate<DebugElement>): DebugElement {
+    var results = this.queryAll(predicate);
+    return results.length > 0 ? results[0] : null;
+  }
+
+  queryAll(predicate: Predicate<DebugElement>): DebugElement[] {
+    var matches = [];
+    _queryElementChildren(this, predicate, matches);
+    return matches;
+  }
+
+  queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[] {
+    var matches = [];
+    _queryNodeChildren(this, predicate, matches);
+    return matches;
+  }
+
+  get children(): DebugElement[] {
+    var children = [];
+    this.childNodes.forEach((node) => {
+      if (node instanceof DebugElement) {
+        children.push(node);
+      }
+    });
+    return children;
+  }
+
+  triggerEventHandler(eventName: string, eventObj: Event) {
+    this.listeners.forEach((listener) => {
+      if (listener.name == eventName) {
+        listener.callback(eventObj);
+      }
+    });
+  }
+}
+
+export function asNativeElements(debugEls: DebugElement[]): any {
+  return debugEls.map((el) => el.nativeElement);
+}
+
+function _queryElementChildren(element: DebugElement, predicate: Predicate<DebugElement>,
+                               matches: DebugElement[]) {
+  element.childNodes.forEach(node => {
+    if (node instanceof DebugElement) {
+      if (predicate(node)) {
+        matches.push(node);
+      }
+      _queryElementChildren(node, predicate, matches);
+    }
+  });
+}
+
+function _queryNodeChildren(parentNode: DebugNode, predicate: Predicate<DebugNode>,
+                            matches: DebugNode[]) {
+  if (parentNode instanceof DebugElement) {
+    parentNode.childNodes.forEach(node => {
+      if (predicate(node)) {
+        matches.push(node);
+      }
+      if (node instanceof DebugElement) {
+        _queryNodeChildren(node, predicate, matches);
+      }
+    });
+  }
+}
+
+// Need to keep the nodes in a global Map so that multiple angular apps are supported.
+var _nativeNodeToDebugNode = new Map<any, DebugNode>();
+
+export function getDebugNode(nativeNode: any): DebugNode {
+  return _nativeNodeToDebugNode.get(nativeNode);
+}
+
+export function getAllDebugNodes(): DebugNode[] {
+  return MapWrapper.values(_nativeNodeToDebugNode);
+}
+
+export function indexDebugNode(node: DebugNode) {
+  _nativeNodeToDebugNode.set(node.nativeNode, node);
+}
+
+export function removeDebugNodeFromIndex(node: DebugNode) {
+  _nativeNodeToDebugNode.delete(node.nativeNode);
+}

modules/angular2/src/core/debug/debug_renderer.ts

@@ -0,0 +1,157 @@
+import {isPresent} from 'angular2/src/facade/lang';
+import {
+  Renderer,
+  RootRenderer,
+  RenderComponentType,
+  RenderDebugInfo
+} from 'angular2/src/core/render/api';
+import {
+  DebugNode,
+  DebugElement,
+  EventListener,
+  getDebugNode,
+  indexDebugNode,
+  removeDebugNodeFromIndex
+} from 'angular2/src/core/debug/debug_node';
+
+export class DebugDomRootRenderer implements RootRenderer {
+  constructor(private _delegate: RootRenderer) {}
+
+  renderComponent(componentProto: RenderComponentType): Renderer {
+    return new DebugDomRenderer(this, this._delegate.renderComponent(componentProto));
+  }
+}
+
+export class DebugDomRenderer implements Renderer {
+  constructor(private _rootRenderer: DebugDomRootRenderer, private _delegate: Renderer) {}
+
+  renderComponent(componentType: RenderComponentType): Renderer {
+    return this._rootRenderer.renderComponent(componentType);
+  }
+
+  selectRootElement(selector: string): any {
+    var nativeEl = this._delegate.selectRootElement(selector);
+    var debugEl = new DebugElement(nativeEl, null);
+    indexDebugNode(debugEl);
+    return nativeEl;
+  }
+
+  createElement(parentElement: any, name: string): any {
+    var nativeEl = this._delegate.createElement(parentElement, name);
+    var debugEl = new DebugElement(nativeEl, getDebugNode(parentElement));
+    debugEl.name = name;
+    indexDebugNode(debugEl);
+    return nativeEl;
+  }
+
+  createViewRoot(hostElement: any): any { return this._delegate.createViewRoot(hostElement); }
+
+  createTemplateAnchor(parentElement: any): any {
+    var comment = this._delegate.createTemplateAnchor(parentElement);
+    var debugEl = new DebugNode(comment, getDebugNode(parentElement));
+    indexDebugNode(debugEl);
+    return comment;
+  }
+
+  createText(parentElement: any, value: string): any {
+    var text = this._delegate.createText(parentElement, value);
+    var debugEl = new DebugNode(text, getDebugNode(parentElement));
+    indexDebugNode(debugEl);
+    return text;
+  }
+
+  projectNodes(parentElement: any, nodes: any[]) {
+    var debugParent = getDebugNode(parentElement);
+    if (isPresent(debugParent) && debugParent instanceof DebugElement) {
+      nodes.forEach((node) => { debugParent.addChild(getDebugNode(node)); });
+    }
+    return this._delegate.projectNodes(parentElement, nodes);
+  }
+
+  attachViewAfter(node: any, viewRootNodes: any[]) {
+    var debugNode = getDebugNode(node);
+    if (isPresent(debugNode)) {
+      var debugParent = debugNode.parent;
+      if (viewRootNodes.length > 0 && isPresent(debugParent)) {
+        var debugViewRootNodes = [];
+        viewRootNodes.forEach((rootNode) => debugViewRootNodes.push(getDebugNode(rootNode)));
+        debugParent.insertChildrenAfter(debugNode, debugViewRootNodes);
+      }
+    }
+    return this._delegate.attachViewAfter(node, viewRootNodes);
+  }
+
+  detachView(viewRootNodes: any[]) {
+    viewRootNodes.forEach((node) => {
+      var debugNode = getDebugNode(node);
+      if (isPresent(debugNode) && isPresent(debugNode.parent)) {
+        debugNode.parent.removeChild(debugNode);
+      }
+    });
+    return this._delegate.detachView(viewRootNodes);
+  }
+
+  destroyView(hostElement: any, viewAllNodes: any[]) {
+    viewAllNodes.forEach((node) => { removeDebugNodeFromIndex(getDebugNode(node)); });
+    return this._delegate.destroyView(hostElement, viewAllNodes);
+  }
+
+  listen(renderElement: any, name: string, callback: Function) {
+    var debugEl = getDebugNode(renderElement);
+    if (isPresent(debugEl)) {
+      debugEl.listeners.push(new EventListener(name, callback));
+    }
+    return this._delegate.listen(renderElement, name, callback);
+  }
+
+  listenGlobal(target: string, name: string, callback: Function): Function {
+    return this._delegate.listenGlobal(target, name, callback);
+  }
+
+  setElementProperty(renderElement: any, propertyName: string, propertyValue: any) {
+    var debugEl = getDebugNode(renderElement);
+    if (isPresent(debugEl) && debugEl instanceof DebugElement) {
+      debugEl.properties.set(propertyName, propertyValue);
+    }
+    return this._delegate.setElementProperty(renderElement, propertyName, propertyValue);
+  }
+
+  setElementAttribute(renderElement: any, attributeName: string, attributeValue: string) {
+    var debugEl = getDebugNode(renderElement);
+    if (isPresent(debugEl) && debugEl instanceof DebugElement) {
+      debugEl.attributes.set(attributeName, attributeValue);
+    }
+    return this._delegate.setElementAttribute(renderElement, attributeName, attributeValue);
+  }
+
+  /**
+   * Used only in debug mode to serialize property changes to comment nodes,
+   * such as <template> placeholders.
+   */
+  setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string) {
+    return this._delegate.setBindingDebugInfo(renderElement, propertyName, propertyValue);
+  }
+
+  /**
+   * Used only in development mode to set information needed by the DebugNode for this element.
+   */
+  setElementDebugInfo(renderElement: any, info: RenderDebugInfo) {
+    var debugEl = getDebugNode(renderElement);
+    debugEl.setDebugInfo(info);
+    return this._delegate.setElementDebugInfo(renderElement, info);
+  }
+
+  setElementClass(renderElement: any, className: string, isAdd: boolean) {
+    return this._delegate.setElementClass(renderElement, className, isAdd);
+  }
+
+  setElementStyle(renderElement: any, styleName: string, styleValue: string) {
+    return this._delegate.setElementStyle(renderElement, styleName, styleValue);
+  }
+
+  invokeElementMethod(renderElement: any, methodName: string, args: any[]) {
+    return this._delegate.invokeElementMethod(renderElement, methodName, args);
+  }
+
+  setText(renderNode: any, text: string) { return this._delegate.setText(renderNode, text); }
+}

modules/angular2/src/core/linker/view.ts

@@ -27,7 +27,7 @@ import {
   CONST_EXPR
 } from 'angular2/src/facade/lang';
 import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
-import {Renderer, RootRenderer} from 'angular2/src/core/render/api';
+import {Renderer, RootRenderer, RenderDebugInfo} from 'angular2/src/core/render/api';
 import {ViewRef_, HostViewFactoryRef} from './view_ref';
 import {ProtoPipes} from 'angular2/src/core/pipes/pipes';
 import {camelCaseToDashCase} from 'angular2/src/core/render/util';
@@ -119,6 +119,12 @@ export class AppView implements ChangeDispatcher {
                              (templateName, _) => { localsMap.set(templateName, null); });
     for (var i = 0; i < appElements.length; i++) {
       var appEl = appElements[i];
+      var providerTokens = [];
+      if (isPresent(appEl.proto.protoInjector)) {
+        for (var j = 0; j < appEl.proto.protoInjector.numberOfProviders; j++) {
+          providerTokens.push(appEl.proto.protoInjector.getProviderAtIndex(j).key.token);
+        }
+      }
       StringMapWrapper.forEach(appEl.proto.directiveVariableBindings, (directiveIndex, name) => {
         if (isBlank(directiveIndex)) {
           localsMap.set(name, appEl.nativeElement);
@@ -126,6 +132,9 @@ export class AppView implements ChangeDispatcher {
           localsMap.set(name, appEl.getDirectiveAtIndex(directiveIndex));
         }
       });
+      this.renderer.setElementDebugInfo(
+          appEl.nativeElement, new RenderDebugInfo(appEl.getInjector(), appEl.getComponent(),
+                                                   providerTokens, localsMap));
     }
     var parentLocals = null;
     if (this.proto.type !== ViewType.COMPONENT) {

modules/angular2/src/core/linker/view_listener.ts

@@ -1,11 +0,0 @@
-import {Injectable} from 'angular2/src/core/di';
-import * as viewModule from './view';
-
-/**
- * Listener for view creation / destruction.
- */
-@Injectable()
-export class AppViewListener {
-  onViewCreated(view: viewModule.AppView) {}
-  onViewDestroyed(view: viewModule.AppView) {}
-}

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

@@ -22,7 +22,6 @@ import {
 } from './view_ref';
 import {ViewContainerRef} from './view_container_ref';
 import {TemplateRef, TemplateRef_} from './template_ref';
-import {AppViewListener} from './view_listener';
 import {RootRenderer, RenderComponentType} from 'angular2/src/core/render/api';
 import {wtfCreateScope, wtfLeave, WtfScopeFn} from '../profile/profile';
 import {APP_ID} from 'angular2/src/core/application_tokens';
@@ -185,10 +184,7 @@ export abstract class AppViewManager {
 export class AppViewManager_ extends AppViewManager {
   private _nextCompTypeId: number = 0;
 
-  constructor(private _renderer: RootRenderer, private _viewListener: AppViewListener,
+  constructor(private _renderer: RootRenderer, @Inject(APP_ID) private _appId: string) { super(); }
-              @Inject(APP_ID) private _appId: string) {
-    super();
-  }
 
   getViewContainer(location: ElementRef): ViewContainerRef {
     return (<ElementRef_>location).internalElement.getViewContainerRef();
@@ -316,10 +312,10 @@ export class AppViewManager_ extends AppViewManager {
   }
 
   /** @internal */
-  onViewCreated(view: AppView) { this._viewListener.onViewCreated(view); }
+  onViewCreated(view: AppView) {}
 
   /** @internal */
-  onViewDestroyed(view: AppView) { this._viewListener.onViewDestroyed(view); }
+  onViewDestroyed(view: AppView) {}
 
   /** @internal */
   createRenderComponentType(encapsulation: ViewEncapsulation,

modules/angular2/src/core/render/api.ts

@@ -1,10 +1,16 @@
 import {ViewEncapsulation} from 'angular2/src/core/metadata/view';
+import {Injector} from 'angular2/src/core/di/injector';
 
 export class RenderComponentType {
   constructor(public id: string, public encapsulation: ViewEncapsulation,
               public styles: Array<string | any[]>) {}
 }
 
+export class RenderDebugInfo {
+  constructor(public injector: Injector, public component: any, public providerTokens: any[],
+              public locals: Map<string, any>) {}
+}
+
 export interface ParentRenderer { renderComponent(componentType: RenderComponentType): Renderer; }
 
 export abstract class Renderer implements ParentRenderer {
@@ -42,6 +48,8 @@ export abstract class Renderer implements ParentRenderer {
    */
   abstract setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string);
 
+  abstract setElementDebugInfo(renderElement: any, info: RenderDebugInfo);
+
   abstract setElementClass(renderElement: any, className: string, isAdd: boolean);
 
   abstract setElementStyle(renderElement: any, styleName: string, styleValue: string);

modules/angular2/src/platform/browser_common.ts

@@ -30,12 +30,12 @@ import {BrowserDomAdapter} from './browser/browser_adapter';
 import {BrowserGetTestability} from 'angular2/src/platform/browser/testability';
 import {wtfInit} from 'angular2/src/core/profile/wtf_init';
 import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager";
+import {ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/common_dom';
 export {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
 export {Title} from 'angular2/src/platform/browser/title';
 export {
-  DebugElementViewListener,
   ELEMENT_PROBE_PROVIDERS,
-  ELEMENT_PROBE_BINDINGS,
+  ELEMENT_PROBE_PROVIDERS_PROD_MODE,
   inspectNativeElement,
   By
 } from 'angular2/platform/common_dom';
@@ -84,7 +84,8 @@ export const BROWSER_APP_COMMON_PROVIDERS: Array<any /*Type | Provider | any[]*/
   Testability,
   BrowserDetails,
   AnimationBuilder,
-  EventManager
+  EventManager,
+  ELEMENT_PROBE_PROVIDERS
 ]);
 
 export function initDomAdapter() {

modules/angular2/src/platform/dom/debug/by.ts

@@ -39,6 +39,6 @@ export class By {
    * {@example platform/dom/debug/ts/by/by.ts region='by_directive'}
    */
   static directive(type: Type): Predicate<DebugElement> {
-    return (debugElement) => { return debugElement.hasDirective(type); };
+    return (debugElement) => { return debugElement.providerTokens.indexOf(type) !== -1; };
   }
 }

modules/angular2/src/platform/dom/debug/debug_element_view_listener.ts

@@ -1,89 +0,0 @@
-import {CONST_EXPR, isPresent, NumberWrapper, StringWrapper} from 'angular2/src/facade/lang';
-import {MapWrapper, Map, ListWrapper} from 'angular2/src/facade/collection';
-import {Injectable, provide, Provider} from 'angular2/src/core/di';
-import {AppViewListener} from 'angular2/src/core/linker/view_listener';
-import {AppView} from 'angular2/src/core/linker/view';
-import {DOM} from 'angular2/src/platform/dom/dom_adapter';
-import {DebugElement, DebugElement_} from 'angular2/src/core/debug/debug_element';
-
-const NG_ID_PROPERTY = 'ngid';
-const INSPECT_GLOBAL_NAME = 'ng.probe';
-
-const NG_ID_SEPARATOR = '#';
-
-// Need to keep the views in a global Map so that multiple angular apps are supported
-var _allIdsByView = new Map<AppView, number>();
-var _allViewsById = new Map<number, AppView>();
-
-var _nextId = 0;
-
-function _setElementId(element, indices: number[]) {
-  if (isPresent(element) && DOM.isElementNode(element)) {
-    DOM.setData(element, NG_ID_PROPERTY, indices.join(NG_ID_SEPARATOR));
-  }
-}
-
-function _getElementId(element): number[] {
-  var elId = DOM.getData(element, NG_ID_PROPERTY);
-  if (isPresent(elId)) {
-    return elId.split(NG_ID_SEPARATOR).map(partStr => NumberWrapper.parseInt(partStr, 10));
-  } else {
-    return null;
-  }
-}
-
-/**
- * Returns a {@link DebugElement} for the given native DOM element, or
- * null if the given native element does not have an Angular view associated
- * with it.
- */
-export function inspectNativeElement(element): DebugElement {
-  var elId = _getElementId(element);
-  if (isPresent(elId)) {
-    var view = _allViewsById.get(elId[0]);
-    if (isPresent(view)) {
-      return new DebugElement_(view.appElements[elId[1]]);
-    }
-  }
-  return null;
-}
-
-@Injectable()
-export class DebugElementViewListener implements AppViewListener {
-  constructor() { DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement); }
-
-  onViewCreated(view: AppView) {
-    var viewId = _nextId++;
-    _allViewsById.set(viewId, view);
-    _allIdsByView.set(view, viewId);
-    for (var i = 0; i < view.appElements.length; i++) {
-      var el = view.appElements[i];
-      _setElementId(el.nativeElement, [viewId, i]);
-    }
-  }
-
-  onViewDestroyed(view: AppView) {
-    var viewId = _allIdsByView.get(view);
-    _allIdsByView.delete(view);
-    _allViewsById.delete(viewId);
-  }
-}
-
-/**
- * Providers which support debugging Angular applications (e.g. via `ng.probe`).
- *
- * ## Example
- *
- * {@example platform/dom/debug/ts/debug_element_view_listener/providers.ts region='providers'}
- */
-export const ELEMENT_PROBE_PROVIDERS: any[] = CONST_EXPR([
-  DebugElementViewListener,
-  CONST_EXPR(new Provider(AppViewListener, {useExisting: DebugElementViewListener})),
-]);
-
-/**
- * Use {@link ELEMENT_PROBE_PROVIDERS}.
- *
- * @deprecated
- */
-export const ELEMENT_PROBE_BINDINGS = ELEMENT_PROBE_PROVIDERS;

modules/angular2/src/platform/dom/debug/ng_probe.ts

@@ -0,0 +1,42 @@
+import {CONST_EXPR, assertionsEnabled, isPresent} from 'angular2/src/facade/lang';
+import {Injectable, provide, Provider} from 'angular2/src/core/di';
+import {DOM} from 'angular2/src/platform/dom/dom_adapter';
+import {DebugNode, getDebugNode} from 'angular2/src/core/debug/debug_node';
+import {DomRootRenderer} from 'angular2/src/platform/dom/dom_renderer';
+import {RootRenderer} from 'angular2/core';
+import {DebugDomRootRenderer} from 'angular2/src/core/debug/debug_renderer';
+
+
+const INSPECT_GLOBAL_NAME = 'ng.probe';
+
+/**
+ * Returns a {@link DebugElement} for the given native DOM element, or
+ * null if the given native element does not have an Angular view associated
+ * with it.
+ */
+export function inspectNativeElement(element): DebugNode {
+  return getDebugNode(element);
+}
+
+function _createConditionalRootRenderer(rootRenderer) {
+  if (assertionsEnabled()) {
+    return _createRootRenderer(rootRenderer);
+  }
+  return rootRenderer;
+}
+
+function _createRootRenderer(rootRenderer) {
+  DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
+  return new DebugDomRootRenderer(rootRenderer);
+}
+
+/**
+ * Providers which support debugging Angular applications (e.g. via `ng.probe`).
+ */
+export const ELEMENT_PROBE_PROVIDERS: any[] = CONST_EXPR([
+  new Provider(RootRenderer,
+               {useFactory: _createConditionalRootRenderer, deps: [DomRootRenderer]})
+]);
+
+export const ELEMENT_PROBE_PROVIDERS_PROD_MODE: any[] = CONST_EXPR(
+    [new Provider(RootRenderer, {useFactory: _createRootRenderer, deps: [DomRootRenderer]})]);

modules/angular2/src/platform/dom/dom_renderer.ts

@@ -14,7 +14,12 @@ import {
 import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
 import {DomSharedStylesHost} from './shared_styles_host';
 
-import {Renderer, RootRenderer, RenderComponentType} from 'angular2/core';
+import {
+  Renderer,
+  RootRenderer,
+  RenderComponentType,
+  RenderDebugInfo
+} from 'angular2/src/core/render/api';
 
 import {EventManager} from './events/event_manager';
 
@@ -201,6 +206,8 @@ export class DomRenderer implements Renderer {
     }
   }
 
+  setElementDebugInfo(renderElement: any, info: RenderDebugInfo) {}
+
   setElementClass(renderElement: any, className: string, isAdd: boolean): void {
     if (isAdd) {
       DOM.addClass(renderElement, className);

modules/angular2/src/testing/test_component_builder.ts

@@ -1,11 +1,11 @@
 import {
   ComponentRef,
-  DebugElement,
   DirectiveResolver,
   DynamicComponentLoader,
   Injector,
   Injectable,
   ViewMetadata,
+  ElementRef,
   EmbeddedViewRef,
   ViewResolver,
   provide
@@ -23,7 +23,7 @@ import {el} from './utils';
 import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 
-import {DebugElement_} from 'angular2/src/core/debug/debug_element';
+import {DebugNode, DebugElement, getDebugNode} from 'angular2/src/core/debug/debug_node';
 
 
 /**
@@ -45,6 +45,11 @@ export abstract class ComponentFixture {
    */
   nativeElement: any;
 
+  /**
+   * The ElementRef for the element at the root of the component.
+   */
+  elementRef: ElementRef;
+
   /**
    * Trigger a change detection cycle for the component.
    */
@@ -66,7 +71,9 @@ export class ComponentFixture_ extends ComponentFixture {
   constructor(componentRef: ComponentRef) {
     super();
     this._componentParentView = (<ViewRef_>componentRef.hostView).internalView;
-    this.debugElement = new DebugElement_(this._componentParentView.appElements[0]);
+    this.elementRef = this._componentParentView.appElements[0].ref;
+    this.debugElement = <DebugElement>getDebugNode(
+        this._componentParentView.rootNodesOrAppElements[0].nativeElement);
     this.componentInstance = this.debugElement.componentInstance;
     this.nativeElement = this.debugElement.nativeElement;
     this._componentRef = componentRef;

modules/angular2/src/web_workers/worker/renderer.ts

@@ -1,4 +1,9 @@
-import {Renderer, RootRenderer, RenderComponentType} from 'angular2/src/core/render/api';
+import {
+  Renderer,
+  RootRenderer,
+  RenderComponentType,
+  RenderDebugInfo
+} from 'angular2/src/core/render/api';
 import {
   ClientMessageBroker,
   ClientMessageBrokerFactory,
@@ -186,6 +191,8 @@ export class WebWorkerRenderer implements Renderer, RenderStoreObject {
     ]);
   }
 
+  setElementDebugInfo(renderElement: any, info: RenderDebugInfo) {}
+
   setElementClass(renderElement: any, className: string, isAdd: boolean) {
     this._runOnService('setElementClass', [
       new FnArg(renderElement, RenderStoreObject),

modules/angular2/test/common/directives/ng_class_spec.ts

@@ -19,10 +19,9 @@ import {Component, View, provide} from 'angular2/core';
 import {NgFor} from 'angular2/common';
 import {NgClass} from 'angular2/src/common/directives/ng_class';
 
-function detectChangesAndCheck(fixture: ComponentFixture, classes: string, elIndex: number = 0) {
+function detectChangesAndCheck(fixture: ComponentFixture, classes: string) {
   fixture.detectChanges();
-  expect(fixture.debugElement.componentViewChildren[elIndex].nativeElement.className)
+  expect(fixture.debugElement.children[0].nativeElement.className).toEqual(classes);
-      .toEqual(classes);
 }
 
 export function main() {
@@ -39,7 +38,7 @@ export function main() {
                  fixture.detectChanges();
                  fixture.debugElement.componentInstance.items = [['1']];
 
-                 detectChangesAndCheck(fixture, '1', 1);
+                 detectChangesAndCheck(fixture, '1');
 
                  async.done();
                });

modules/angular2/test/common/directives/ng_for_spec.ts

@@ -318,7 +318,7 @@ export function main() {
                  '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
              .createAsync(ComponentUsingTestComponent)
              .then((fixture) => {
-               var testComponent = fixture.debugElement.componentViewChildren[0];
+               var testComponent = fixture.debugElement.children[0];
                testComponent.componentInstance.items = ['a', 'b', 'c'];
                fixture.detectChanges();
                expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@@ -334,7 +334,7 @@ export function main() {
              .overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
              .createAsync(ComponentUsingTestComponent)
              .then((fixture) => {
-               var testComponent = fixture.debugElement.componentViewChildren[0];
+               var testComponent = fixture.debugElement.children[0];
                testComponent.componentInstance.items = ['a', 'b', 'c'];
                fixture.detectChanges();
                expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@@ -352,7 +352,7 @@ export function main() {
                  '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
              .createAsync(ComponentUsingTestComponent)
              .then((fixture) => {
-               var testComponent = fixture.debugElement.componentViewChildren[0];
+               var testComponent = fixture.debugElement.children[0];
                testComponent.componentInstance.items = ['a', 'b', 'c'];
                fixture.detectChanges();
                expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');

modules/angular2/test/common/directives/ng_style_spec.ts

@@ -32,8 +32,7 @@ export function main() {
              .createAsync(TestComponent)
              .then((fixture) => {
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('40px');
 
                async.done();
@@ -51,15 +50,13 @@ export function main() {
 
                fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('40px');
 
                expr = fixture.debugElement.componentInstance.expr;
                expr['max-width'] = '30%';
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('30%');
 
                async.done();
@@ -75,14 +72,12 @@ export function main() {
              .then((fixture) => {
                fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('40px');
 
                StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('');
 
                async.done();
@@ -98,20 +93,16 @@ export function main() {
              .then((fixture) => {
                fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('40px');
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
-                                   'font-size'))
                    .toEqual('12px');
 
                StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('');
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
-                                   'font-size'))
                    .toEqual('12px');
 
                async.done();
@@ -127,21 +118,17 @@ export function main() {
              .then((fixture) => {
                fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('40px');
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
-                                   'font-size'))
                    .toEqual('12px');
 
                StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
-                                   'font-size'))
                    .toEqual('12px');
 
                fixture.detectChanges();
-               expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
-                                   'max-width'))
                    .toEqual('');
 
                async.done();

modules/angular2/test/common/forms/integration_spec.ts

@@ -673,7 +673,7 @@ export function main() {
                   fixture.debugElement.componentInstance.name = null;
                   fixture.detectChanges();
 
-                  var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
+                  var form = fixture.debugElement.children[0].inject(NgForm);
                   expect(form.controls['user']).not.toBeDefined();
 
                   tick();
@@ -708,7 +708,7 @@ export function main() {
              fixture.debugElement.componentInstance.name = null;
              fixture.detectChanges();
 
-             expect(fixture.debugElement.componentViewChildren.length).toEqual(0);
+             expect(fixture.debugElement.children[0].providerTokens.length).toEqual(0);
              async.done();
            });
          }));
@@ -728,7 +728,7 @@ export function main() {
                   fixture.debugElement.componentInstance.name = 'show';
                   fixture.detectChanges();
                   tick();
-                  var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
+                  var form = fixture.debugElement.children[0].inject(NgForm);
 
 
                   expect(form.controls['login']).toBeDefined();
@@ -756,7 +756,7 @@ export function main() {
                   fixture.debugElement.componentInstance.name = 'show';
                   fixture.detectChanges();
                   tick();
-                  var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
+                  var form = fixture.debugElement.children[0].inject(NgForm);
 
                   expect(form.controls['user']).toBeDefined();
 

modules/angular2/test/core/debug/debug_element_spec.ts

@@ -1,294 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachProviders,
-  it,
-  xit,
-  TestComponentBuilder
-} from 'angular2/testing_internal';
-
-import {DOM} from 'angular2/src/platform/dom/dom_adapter';
-
-import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-
-import {Injectable} from 'angular2/core';
-import {NgFor, NgIf} from 'angular2/common';
-import {Scope} from 'angular2/core';
-import {By} from 'angular2/platform/common_dom';
-
-import {
-  Directive,
-  Component,
-  View,
-} from 'angular2/src/core/metadata';
-
-@Injectable()
-class Logger {
-  log: string[];
-
-  constructor() { this.log = []; }
-
-  add(thing: string) { this.log.push(thing); }
-}
-
-@Directive({selector: '[message]', inputs: ['message']})
-@Injectable()
-class MessageDir {
-  logger: Logger;
-
-  constructor(logger: Logger) { this.logger = logger; }
-
-  set message(newMessage) { this.logger.add(newMessage); }
-}
-
-@Component({selector: 'child-comp'})
-@View({
-  template: `<div class="child" message="child">
-               <span class="childnested" message="nestedchild">Child</span>
-             </div>
-             <span class="child" [innerHtml]="childBinding"></span>`,
-  directives: [MessageDir],
-})
-@Injectable()
-class ChildComp {
-  childBinding: string;
-
-  constructor() { this.childBinding = 'Original'; }
-}
-
-@Component({selector: 'cond-content-comp', viewProviders: [Logger]})
-@View({
-  template: `<div class="child" message="child" *ngIf="false"><ng-content></ng-content></div>`,
-  directives: [NgIf, MessageDir],
-})
-@Injectable()
-class ConditionalContentComp {
-}
-
-@Component({selector: 'parent-comp', viewProviders: [Logger]})
-@View({
-  template: `<div class="parent" message="parent">
-               <span class="parentnested" message="nestedparent">Parent</span>
-             </div>
-             <span class="parent" [innerHtml]="parentBinding"></span>
-             <child-comp class="child-comp-class"></child-comp>
-             <cond-content-comp class="cond-content-comp-class"></cond-content-comp>`,
-  directives: [ChildComp, MessageDir, ConditionalContentComp],
-})
-@Injectable()
-class ParentComp {
-  parentBinding: string;
-  constructor() { this.parentBinding = 'OriginalParent'; }
-}
-
-@Directive({selector: 'custom-emitter', outputs: ['myevent']})
-@Injectable()
-class CustomEmitter {
-  myevent: EventEmitter<any>;
-
-  constructor() { this.myevent = new EventEmitter(); }
-}
-
-@Component({selector: 'events-comp'})
-@View({
-  template: `<button (click)="handleClick()"></button>
-             <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
-  directives: [CustomEmitter],
-})
-@Injectable()
-class EventsComp {
-  clicked: boolean;
-  customed: boolean;
-
-  constructor() {
-    this.clicked = false;
-    this.customed = false;
-  }
-
-  handleClick() { this.clicked = true; }
-
-  handleCustom() { this.customed = true; }
-}
-
-@Component({selector: 'using-for', viewProviders: [Logger]})
-@View({
-  template: `<span *ngFor="#thing of stuff" [innerHtml]="thing"></span>
-            <ul message="list">
-              <li *ngFor="#item of stuff" [innerHtml]="item"></li>
-            </ul>`,
-  directives: [NgFor, MessageDir],
-})
-@Injectable()
-class UsingFor {
-  stuff: string[];
-
-  constructor() { this.stuff = ['one', 'two', 'three']; }
-}
-
-export function main() {
-  describe('debug element', function() {
-
-    it('should list component child elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((componentFixture) => {
-               componentFixture.detectChanges();
-
-               var childEls = componentFixture.debugElement.children;
-               // The root is a lone component, and has no children in the light dom.
-               expect(childEls.length).toEqual(0);
-
-               var rootCompChildren = componentFixture.debugElement.componentViewChildren;
-               // The root component has 4 elements in its shadow view.
-               expect(rootCompChildren.length).toEqual(4);
-               expect(DOM.hasClass(rootCompChildren[0].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(rootCompChildren[1].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(rootCompChildren[2].nativeElement, 'child-comp-class'))
-                   .toBe(true);
-               expect(DOM.hasClass(rootCompChildren[3].nativeElement, 'cond-content-comp-class'))
-                   .toBe(true);
-
-               var nested = rootCompChildren[0].children;
-               expect(nested.length).toEqual(1);
-               expect(DOM.hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
-
-               var childComponent = rootCompChildren[2];
-               expect(childComponent.children.length).toEqual(0);
-
-               var childCompChildren = childComponent.componentViewChildren;
-               expect(childCompChildren.length).toEqual(2);
-               expect(DOM.hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
-               expect(DOM.hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
-
-               var childNested = childCompChildren[0].children;
-               expect(childNested.length).toEqual(1);
-               expect(DOM.hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
-
-               var conditionalContentComp = rootCompChildren[3];
-               expect(conditionalContentComp.children.length).toEqual(0);
-
-               expect(conditionalContentComp.componentViewChildren.length).toEqual(1);
-               var ngIfWithProjectedNgContent = conditionalContentComp.componentViewChildren[0];
-               expect(ngIfWithProjectedNgContent.children.length).toBe(0);
-               expect(ngIfWithProjectedNgContent.componentViewChildren.length).toBe(0);
-
-               async.done();
-             });
-       }));
-
-    it('should list child elements within viewports',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-         tcb.createAsync(UsingFor).then((componentFixture) => {
-           componentFixture.detectChanges();
-
-           var childEls = componentFixture.debugElement.componentViewChildren;
-           // TODO should this count include the <template> element?
-           expect(childEls.length).toEqual(5);
-
-           var list = childEls[4];
-           expect(list.children.length).toEqual(4);
-
-           async.done();
-         });
-       }));
-
-    it('should query child elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((componentFixture) => {
-               componentFixture.detectChanges();
-
-               var childTestEls = componentFixture.debugElement.queryAll(By.directive(MessageDir));
-
-               expect(childTestEls.length).toBe(4);
-               expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
-               expect(DOM.hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
-               expect(DOM.hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
-               async.done();
-             });
-       }));
-
-    it('should query child elements in the light DOM',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((componentFixture) => {
-               componentFixture.detectChanges();
-
-               var parentEl = componentFixture.debugElement.componentViewChildren[0];
-
-               var childTestEls = parentEl.queryAll(By.directive(MessageDir), Scope.light);
-
-               expect(childTestEls.length).toBe(1);
-               expect(DOM.hasClass(childTestEls[0].nativeElement, 'parentnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should query child elements in the current component view DOM',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((componentFixture) => {
-               componentFixture.detectChanges();
-
-               var childTestEls =
-                   componentFixture.debugElement.queryAll(By.directive(MessageDir), Scope.view);
-
-               expect(childTestEls.length).toBe(2);
-               expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should allow injecting from the element injector',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((componentFixture) => {
-               componentFixture.detectChanges();
-
-               expect(componentFixture.debugElement.componentViewChildren[0].inject(Logger).log)
-                   .toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
-
-               async.done();
-             });
-       }));
-
-    it('should trigger event handlers',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-
-         tcb.createAsync(EventsComp)
-             .then((componentFixture) => {
-               componentFixture.detectChanges();
-
-               expect(componentFixture.debugElement.componentInstance.clicked).toBe(false);
-               expect(componentFixture.debugElement.componentInstance.customed).toBe(false);
-
-               componentFixture.debugElement.componentViewChildren[0].triggerEventHandler(
-                   'click', <Event>{});
-               expect(componentFixture.debugElement.componentInstance.clicked).toBe(true);
-
-               componentFixture.debugElement.componentViewChildren[1].triggerEventHandler(
-                   'myevent', <Event>{});
-               expect(componentFixture.debugElement.componentInstance.customed).toBe(true);
-
-               async.done();
-             });
-       }));
-  });
-}

modules/angular2/test/core/debug/debug_node_spec.ts

@@ -0,0 +1,392 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  xdescribe,
+  describe,
+  dispatchEvent,
+  expect,
+  iit,
+  inject,
+  beforeEachProviders,
+  it,
+  xit,
+  TestComponentBuilder
+} from 'angular2/testing_internal';
+
+import {DOM} from 'angular2/src/platform/dom/dom_adapter';
+
+import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
+
+import {Injectable} from 'angular2/core';
+import {NgFor, NgIf} from 'angular2/common';
+import {By} from 'angular2/platform/common_dom';
+
+import {Directive, Component, View, Input} from 'angular2/src/core/metadata';
+
+@Injectable()
+class Logger {
+  log: string[];
+
+  constructor() { this.log = []; }
+
+  add(thing: string) { this.log.push(thing); }
+}
+
+@Directive({selector: '[message]', inputs: ['message']})
+@Injectable()
+class MessageDir {
+  logger: Logger;
+
+  constructor(logger: Logger) { this.logger = logger; }
+
+  set message(newMessage) { this.logger.add(newMessage); }
+}
+
+@Component({selector: 'child-comp'})
+@View({
+  template: `<div class="child" message="child">
+               <span class="childnested" message="nestedchild">Child</span>
+             </div>
+             <span class="child" [innerHtml]="childBinding"></span>`,
+  directives: [MessageDir],
+})
+@Injectable()
+class ChildComp {
+  childBinding: string;
+
+  constructor() { this.childBinding = 'Original'; }
+}
+
+@Component({selector: 'parent-comp', viewProviders: [Logger]})
+@View({
+  template: `<div class="parent" message="parent">
+               <span class="parentnested" message="nestedparent">Parent</span>
+             </div>
+             <span class="parent" [innerHtml]="parentBinding"></span>
+             <child-comp class="child-comp-class"></child-comp>`,
+  directives: [ChildComp, MessageDir],
+})
+@Injectable()
+class ParentComp {
+  parentBinding: string;
+  constructor() { this.parentBinding = 'OriginalParent'; }
+}
+
+@Directive({selector: 'custom-emitter', outputs: ['myevent']})
+@Injectable()
+class CustomEmitter {
+  myevent: EventEmitter<any>;
+
+  constructor() { this.myevent = new EventEmitter(); }
+}
+
+@Component({selector: 'events-comp'})
+@View({
+  template: `<button (click)="handleClick()"></button>
+             <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
+  directives: [CustomEmitter],
+})
+@Injectable()
+class EventsComp {
+  clicked: boolean;
+  customed: boolean;
+
+  constructor() {
+    this.clicked = false;
+    this.customed = false;
+  }
+
+  handleClick() { this.clicked = true; }
+
+  handleCustom() { this.customed = true; }
+}
+
+@Component({selector: 'cond-content-comp', viewProviders: [Logger]})
+@View({
+  template: `<div class="child" message="child" *ngIf="myBool"><ng-content></ng-content></div>`,
+  directives: [NgIf, MessageDir],
+})
+@Injectable()
+class ConditionalContentComp {
+  myBool: boolean = false;
+}
+
+@Component({selector: 'conditional-parent-comp', viewProviders: [Logger]})
+@View({
+  template: `<span class="parent" [innerHtml]="parentBinding"></span>
+            <cond-content-comp class="cond-content-comp-class">
+              <span class="from-parent"></span>
+            </cond-content-comp>`,
+  directives: [ConditionalContentComp],
+})
+@Injectable()
+class ConditionalParentComp {
+  parentBinding: string;
+  constructor() { this.parentBinding = 'OriginalParent'; }
+}
+
+@Component({selector: 'using-for', viewProviders: [Logger]})
+@View({
+  template: `<span *ngFor="#thing of stuff" [innerHtml]="thing"></span>
+            <ul message="list">
+              <li *ngFor="#item of stuff" [innerHtml]="item"></li>
+            </ul>`,
+  directives: [NgFor, MessageDir],
+})
+@Injectable()
+class UsingFor {
+  stuff: string[];
+  constructor() { this.stuff = ['one', 'two', 'three']; }
+}
+
+@Directive({selector: '[mydir]', exportAs: 'mydir'})
+class MyDir {
+}
+
+@Component({
+  selector: 'locals-comp',
+  template: `
+   <div mydir #alice="mydir"></div>
+ `,
+  directives: [MyDir]
+})
+class LocalsComp {
+}
+
+
+@Component({
+  selector: 'bank-account',
+  template: `
+   Bank Name: {{bank}}
+   Account Id: {{id}}
+ `
+})
+class BankAccount {
+  @Input() bank: string;
+  @Input('account') id: string;
+
+  normalizedBankName: string;
+}
+
+@Component({
+  selector: 'test-app',
+  template: `
+   <bank-account bank="RBC" account="4747"></bank-account>
+ `,
+  directives: [BankAccount]
+})
+class TestApp {
+}
+
+export function main() {
+  describe('debug element', function() {
+    it('should list all child nodes',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(ParentComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               // The root component has 3 elements and 2 text node children.
+               expect(fixture.debugElement.childNodes.length).toEqual(5);
+               async.done();
+             });
+       }));
+
+    it('should list all component child elements',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               var childEls = fixture.debugElement.children;
+
+               // The root component has 3 elements in its view.
+               expect(childEls.length).toEqual(3);
+               expect(DOM.hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(childEls[1].nativeElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(childEls[2].nativeElement, 'child-comp-class')).toBe(true);
+
+               var nested = childEls[0].children;
+               expect(nested.length).toEqual(1);
+               expect(DOM.hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
+
+               var childComponent = childEls[2];
+
+               var childCompChildren = childComponent.children;
+               expect(childCompChildren.length).toEqual(2);
+               expect(DOM.hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
+               expect(DOM.hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
+
+               var childNested = childCompChildren[0].children;
+               expect(childNested.length).toEqual(1);
+               expect(DOM.hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
+
+               async.done();
+             });
+       }));
+
+    it('should list conditional component child elements',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(ConditionalParentComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               var childEls = fixture.debugElement.children;
+
+               // The root component has 2 elements in its view.
+               expect(childEls.length).toEqual(2);
+               expect(DOM.hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(childEls[1].nativeElement, 'cond-content-comp-class'))
+                   .toBe(true);
+
+               var conditionalContentComp = childEls[1];
+
+               expect(conditionalContentComp.children.length).toEqual(0);
+
+               conditionalContentComp.componentInstance.myBool = true;
+               fixture.detectChanges();
+
+               expect(conditionalContentComp.children.length).toEqual(1);
+               async.done();
+             });
+       }));
+
+    it('should list child elements within viewports',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(UsingFor).then((fixture) => {
+           fixture.detectChanges();
+
+           var childEls = fixture.debugElement.children;
+           expect(childEls.length).toEqual(4);
+
+           // The 4th child is the <ul>
+           var list = childEls[3];
+
+           expect(list.children.length).toEqual(3);
+
+           async.done();
+         });
+       }));
+
+    it('should list element attributes',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(TestApp).then((fixture) => {
+           fixture.detectChanges();
+           var bankElem = fixture.debugElement.children[0];
+
+           expect(bankElem.attributes.get('bank')).toEqual('RBC');
+           expect(bankElem.attributes.get('account')).toEqual('4747');
+           async.done();
+         });
+       }));
+
+    it('should query child elements by css',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(ParentComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               var childTestEls = fixture.debugElement.queryAll(By.css('child-comp'));
+
+               expect(childTestEls.length).toBe(1);
+               expect(DOM.hasClass(childTestEls[0].nativeElement, 'child-comp-class')).toBe(true);
+
+               async.done();
+             });
+       }));
+
+    it('should query child elements by directive',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(ParentComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               var childTestEls = fixture.debugElement.queryAll(By.directive(MessageDir));
+
+               expect(childTestEls.length).toBe(4);
+               expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
+               expect(DOM.hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
+               expect(DOM.hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
+
+               async.done();
+             });
+       }));
+
+    it('should list providerTokens',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               expect(fixture.debugElement.providerTokens).toContain(Logger);
+
+               async.done();
+             });
+       }));
+
+    it('should list locals',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(LocalsComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               expect(fixture.debugElement.children[0].getLocal('alice')).toBeAnInstanceOf(MyDir);
+
+               async.done();
+             });
+       }));
+
+    it('should allow injecting from the element injector',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               expect(fixture.debugElement.children[0].inject(Logger).log)
+                   .toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
+
+               async.done();
+             });
+       }));
+
+    it('should list event listeners',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+
+         tcb.createAsync(EventsComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               expect(fixture.debugElement.children[0].listeners.length).toEqual(1);
+               expect(fixture.debugElement.children[1].listeners.length).toEqual(1);
+
+               async.done();
+             });
+       }));
+
+
+    it('should trigger event handlers',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+
+         tcb.createAsync(EventsComp)
+             .then((fixture) => {
+               fixture.detectChanges();
+
+               expect(fixture.debugElement.componentInstance.clicked).toBe(false);
+               expect(fixture.debugElement.componentInstance.customed).toBe(false);
+
+               fixture.debugElement.children[0].triggerEventHandler('click', <Event>{});
+               expect(fixture.debugElement.componentInstance.clicked).toBe(true);
+
+               fixture.debugElement.children[1].triggerEventHandler('myevent', <Event>{});
+               expect(fixture.debugElement.componentInstance.customed).toBe(true);
+
+               async.done();
+             });
+       }));
+  });
+}

modules/angular2/test/core/forward_ref_integration_spec.ts

@@ -32,8 +32,7 @@ export function main() {
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          tcb.createAsync(App).then((tc) => {
            tc.detectChanges();
-           expect(asNativeElements(tc.debugElement.componentViewChildren))
+           expect(asNativeElements(tc.debugElement.children)).toHaveText('frame(lock)');
-               .toHaveText('frame(lock)');
            async.done();
          });
        }));

modules/angular2/test/core/linker/dynamic_component_loader_spec.ts

@@ -17,12 +17,11 @@ import {
 } from 'angular2/testing_internal';
 
 import {OnDestroy} from 'angular2/core';
-import {Injector, inspectElement} from 'angular2/core';
+import {Injector} from 'angular2/core';
 import {NgIf} from 'angular2/common';
-import {By} from 'angular2/platform/common_dom';
 import {Component, View, ViewMetadata} from 'angular2/src/core/metadata';
 import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
-import {ElementRef} from 'angular2/src/core/linker/element_ref';
+import {ElementRef, ElementRef_} from 'angular2/src/core/linker/element_ref';
 import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 import {ComponentFixture_} from "angular2/src/testing/test_component_builder";
@@ -34,16 +33,15 @@ export function main() {
   describe('DynamicComponentLoader', function() {
     describe("loading into a location", () => {
       it('should work',
-         inject(
+         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-             [DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
                 (loader, tcb: TestComponentBuilder, async) => {
                   tcb.overrideView(
-                      MyComp, new ViewMetadata(
+                         MyComp,
+                         new ViewMetadata(
                              {template: '<location #loc></location>', directives: [Location]}))
                       .createAsync(MyComp)
                       .then((tc) => {
-
+                        loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
-                     loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
                             .then(ref => {
                               expect(tc.debugElement.nativeElement)
                                   .toHaveText("Location;DynamicallyLoaded;");
@@ -53,16 +51,16 @@ export function main() {
                 }));
 
       it('should return a disposable component ref',
-         inject(
+         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-             [DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
                 (loader, tcb: TestComponentBuilder, async) => {
                   tcb.overrideView(
-                      MyComp, new ViewMetadata(
+                         MyComp,
+                         new ViewMetadata(
                              {template: '<location #loc></location>', directives: [Location]}))
                       .createAsync(MyComp)
                       .then((tc) => {
 
-                     loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
+                        loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
                             .then(ref => {
                               ref.dispose();
                               expect(tc.debugElement.nativeElement).toHaveText("Location;");
@@ -72,7 +70,8 @@ export function main() {
                 }));
 
       it('should allow to dispose even if the location has been removed',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
+         inject(
+             [DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
              (loader, tcb: TestComponentBuilder, async) => {
                tcb.overrideView(MyComp, new ViewMetadata({
                                   template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
@@ -86,8 +85,12 @@ export function main() {
                    .then((tc) => {
                      tc.debugElement.componentInstance.ctxBoolProp = true;
                      tc.detectChanges();
-                        var childCompEl = tc.debugElement.query(By.css('child-cmp'));
+                     var childCompEl = (<ElementRef_>tc.elementRef).internalElement;
-                        loader.loadIntoLocation(DynamicallyLoaded, childCompEl.elementRef, 'loc')
+                     // TODO(juliemr): This is hideous, see if there's a better way to handle
+                     // child element refs now.
+                     var childElementRef =
+                         childCompEl.componentView.appElements[0].nestedViews[0].appElements[0].ref;
+                     loader.loadIntoLocation(DynamicallyLoaded, childElementRef, 'loc')
                          .then(ref => {
                            expect(tc.debugElement.nativeElement)
                                .toHaveText("Location;DynamicallyLoaded;");
@@ -104,16 +107,15 @@ export function main() {
              }));
 
       it('should update host properties',
-         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
+         inject(
+             [DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
              (loader, tcb: TestComponentBuilder, async) => {
                tcb.overrideView(
-                         MyComp,
+                      MyComp, new ViewMetadata(
-                         new ViewMetadata(
                                   {template: '<location #loc></location>', directives: [Location]}))
                    .createAsync(MyComp)
                    .then((tc) => {
-                        loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
+                     loader.loadIntoLocation(DynamicallyLoadedWithHostProps, tc.elementRef, 'loc')
-                                                tc.debugElement.elementRef, 'loc')
                          .then(ref => {
                            ref.instance.id = "new value";
 
@@ -139,8 +141,8 @@ export function main() {
                         tc.debugElement
 
                             PromiseWrapper.catchError(
-                                loader.loadIntoLocation(DynamicallyLoadedThrows,
+                                loader.loadIntoLocation(DynamicallyLoadedThrows, tc.elementRef,
-                                                        tc.debugElement.elementRef, 'loc'),
+                                                        'loc'),
                                 error => {
                                   expect(error.message).toContain("ThrownInConstructor");
                                   expect(() => tc.detectChanges()).not.toThrow();
@@ -159,8 +161,7 @@ export function main() {
                       .createAsync(MyComp)
                       .then((tc) => {
                         expect(() => loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
-                                                             tc.debugElement.elementRef,
+                                                             tc.elementRef, 'someUnknownVariable'))
-                                                             'someUnknownVariable'))
                             .toThrowError('Could not find variable someUnknownVariable');
                         async.done();
                       });
@@ -173,9 +174,8 @@ export function main() {
                                    new ViewMetadata({template: '<div #loc></div>', directives: []}))
                       .createAsync(MyComp)
                       .then((tc) => {
-                        loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
+                        loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
-                                                tc.debugElement.elementRef, 'loc', null,
+                                                'loc', null, [[DOM.createTextNode('hello')]])
-                                                [[DOM.createTextNode('hello')]])
                             .then(ref => {
                               tc.detectChanges();
                               expect(tc.nativeElement).toHaveText('dynamic(hello)');
@@ -193,8 +193,8 @@ export function main() {
                    .createAsync(MyComp)
                    .then((tc) => {
                      PromiseWrapper.catchError(
-                         loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
+                         loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
-                                                 tc.debugElement.elementRef, 'loc', null, []),
+                                                 'loc', null, []),
                          (e) => {
                            expect(e.message).toContain(
                                `The component ${stringify(DynamicallyLoadedWithNgContent)} has 1 <ng-content> elements, but only 0 slots were provided`);
@@ -215,7 +215,7 @@ export function main() {
                                    }))
                       .createAsync(MyComp)
                       .then((tc) => {
-                        loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
+                        loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
                             .then(ref => {
                               expect(tc.debugElement.nativeElement).toHaveText("Location;");
                               expect(DOM.nextSibling(tc.debugElement.nativeElement))
@@ -227,8 +227,7 @@ export function main() {
                 }));
 
       it('should return a disposable component ref',
-         inject(
+         inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
-             [DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
                 (loader, tcb: TestComponentBuilder, async) => {
                   tcb.overrideView(MyComp, new ViewMetadata({
                                      template: '<div><location #loc></location></div>',
@@ -238,11 +237,12 @@ export function main() {
 
                       createAsync(MyComp)
                       .then((tc) => {
-                     loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
+                        loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
                             .then(ref => {
-                           loader.loadNextToLocation(DynamicallyLoaded2, tc.debugElement.elementRef)
+                              loader.loadNextToLocation(DynamicallyLoaded2, tc.elementRef)
                                   .then(ref2 => {
-                                 var firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
+                                    var firstSibling =
+                                        DOM.nextSibling(tc.debugElement.nativeElement);
                                     var secondSibling = DOM.nextSibling(firstSibling);
                                     expect(tc.debugElement.nativeElement).toHaveText("Location;");
                                     expect(firstSibling).toHaveText("DynamicallyLoaded;");
@@ -271,8 +271,7 @@ export function main() {
                       .createAsync(MyComp)
                       .then((tc) => {
 
-                        loader.loadNextToLocation(DynamicallyLoadedWithHostProps,
+                        loader.loadNextToLocation(DynamicallyLoadedWithHostProps, tc.elementRef)
-                                                  tc.debugElement.elementRef)
                             .then(ref => {
                               ref.instance.id = "new value";
 
@@ -293,9 +292,8 @@ export function main() {
                   tcb.overrideView(MyComp, new ViewMetadata({template: '', directives: [Location]}))
                       .createAsync(MyComp)
                       .then((tc) => {
-                        loader.loadNextToLocation(DynamicallyLoadedWithNgContent,
+                        loader.loadNextToLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
-                                                  tc.debugElement.elementRef, null,
+                                                  null, [[DOM.createTextNode('hello')]])
-                                                  [[DOM.createTextNode('hello')]])
                             .then(ref => {
                               tc.detectChanges();
                               var newlyInsertedElement =

modules/angular2/test/core/linker/integration_dart_spec.dart

@@ -3,7 +3,7 @@ library angular2.test.di.integration_dart_spec;
 
 import 'package:angular2/angular2.dart';
 import 'package:angular2/core.dart';
-import 'package:angular2/src/core/debug/debug_element.dart';
+import 'package:angular2/src/core/debug/debug_node.dart';
 import 'package:angular2/testing_internal.dart';
 import 'package:observe/observe.dart';
 import 'package:angular2/src/core/change_detection/differs/default_iterable_differ.dart';
@@ -56,7 +56,7 @@ main() {
               .createAsync(Dummy)
               .then((tc) {
             tc.detectChanges();
-            expect(asNativeElements(tc.debugElement.componentViewChildren))
+            expect(asNativeElements(tc.debugElement.children))
                 .toHaveText('[Hello, World]');
             async.done();
           });
@@ -112,7 +112,7 @@ main() {
               .createAsync(Dummy)
               .then((tc) {
             tc.detectChanges();
-            expect(asNativeElements(tc.debugElement.componentViewChildren))
+            expect(asNativeElements(tc.debugElement.children))
                 .toHaveText('prop:foo-prop;map:foo-map');
             async.done();
           });
@@ -149,7 +149,7 @@ main() {
               .createAsync(Dummy)
               .then((tc) {
             tc.detectChanges();
-            var cmp = tc.debugElement.componentViewChildren[0]
+            var cmp = tc.debugElement.children[0]
                 .inject(OnChangeComponent);
             expect(cmp.prop).toEqual('hello');
             expect(cmp.changes.containsKey('prop')).toEqual(true);
@@ -178,7 +178,7 @@ main() {
             tc.detectChanges();
 
             expect(log.result()).toEqual("check");
-            expect(asNativeElements(tc.debugElement.componentViewChildren))
+            expect(asNativeElements(tc.debugElement.children))
                 .toHaveText('12');
 
             tc.detectChanges();
@@ -194,7 +194,7 @@ main() {
 
             // we changed the list => a check
             expect(log.result()).toEqual("check; check");
-            expect(asNativeElements(tc.debugElement.componentViewChildren))
+            expect(asNativeElements(tc.debugElement.children))
                 .toHaveText('123');
 
             // we replaced the list => a check
@@ -204,7 +204,7 @@ main() {
             tc.detectChanges();
 
             expect(log.result()).toEqual("check; check; check");
-            expect(asNativeElements(tc.debugElement.componentViewChildren))
+            expect(asNativeElements(tc.debugElement.children))
                 .toHaveText('567');
           });
         })));

modules/angular2/test/core/linker/integration_spec.ts

@@ -160,8 +160,7 @@ function declareTests() {
                  fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
                  fixture.detectChanges();
 
-                 expect(fixture.debugElement.componentViewChildren[0].nativeElement.id)
+                 expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!');
-                     .toEqual('Hello World!');
                  async.done();
                });
          }));
@@ -176,15 +175,13 @@ function declareTests() {
                  fixture.debugElement.componentInstance.ctxProp = 'Initial aria label';
                  fixture.detectChanges();
                  expect(
-                     DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
+                     DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
-                                      'aria-label'))
                      .toEqual('Initial aria label');
 
                  fixture.debugElement.componentInstance.ctxProp = 'Changed aria label';
                  fixture.detectChanges();
                  expect(
-                     DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
+                     DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
-                                      'aria-label'))
                      .toEqual('Changed aria label');
 
                  async.done();
@@ -201,14 +198,12 @@ function declareTests() {
 
                  fixture.debugElement.componentInstance.ctxProp = 'bar';
                  fixture.detectChanges();
-                 expect(DOM.getAttribute(
+                 expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
-                            fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
                      .toEqual('bar');
 
                  fixture.debugElement.componentInstance.ctxProp = null;
                  fixture.detectChanges();
-                 expect(DOM.hasAttribute(
+                 expect(DOM.hasAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
-                            fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
                      .toBeFalsy();
 
                  async.done();
@@ -225,14 +220,12 @@ function declareTests() {
 
                  fixture.debugElement.componentInstance.ctxProp = '10';
                  fixture.detectChanges();
-                 expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+                 expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
-                                     'height'))
                      .toEqual('10px');
 
                  fixture.debugElement.componentInstance.ctxProp = null;
                  fixture.detectChanges();
-                 expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+                 expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
-                                     'height'))
                      .toEqual('');
 
                  async.done();
@@ -248,13 +241,11 @@ function declareTests() {
                .then((fixture) => {
 
                  fixture.detectChanges();
-                 expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
+                 expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
-                     .toEqual(0);
 
                  fixture.debugElement.componentInstance.ctxNumProp = 5;
                  fixture.detectChanges();
-                 expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
+                 expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
-                     .toEqual(5);
 
                  async.done();
                });
@@ -269,13 +260,11 @@ function declareTests() {
                .then((fixture) => {
 
                  fixture.detectChanges();
-                 expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
+                 expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy();
-                     .toBeFalsy();
 
                  fixture.debugElement.componentInstance.ctxBoolProp = true;
                  fixture.detectChanges();
-                 expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
+                 expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy();
-                     .toBeTruthy();
 
                  async.done();
                });
@@ -291,14 +280,12 @@ function declareTests() {
 
                  fixture.debugElement.componentInstance.ctxProp = 'Some <span>HTML</span>';
                  fixture.detectChanges();
-                 expect(
+                 expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
-                     DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
                      .toEqual('Some <span>HTML</span>');
 
                  fixture.debugElement.componentInstance.ctxProp = 'Some other <div>HTML</div>';
                  fixture.detectChanges();
-                 expect(
+                 expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
-                     DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
                      .toEqual('Some other <div>HTML</div>');
 
                  async.done();
@@ -313,7 +300,7 @@ function declareTests() {
 
                .createAsync(MyComp)
                .then((fixture) => {
-                 var nativeEl = fixture.debugElement.componentViewChildren[0].nativeElement;
+                 var nativeEl = fixture.debugElement.children[0].nativeElement;
                  fixture.debugElement.componentInstance.ctxProp = 'foo bar';
                  fixture.detectChanges();
 
@@ -340,13 +327,12 @@ function declareTests() {
                  fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
                  fixture.detectChanges();
 
-                 expect(fixture.debugElement.componentViewChildren[0].inject(MyDir).dirProp)
+                 var containerSpan = fixture.debugElement.children[0];
-                     .toEqual('Hello World!');
+
-                 expect(fixture.debugElement.componentViewChildren[1].inject(MyDir).dirProp)
+                 expect(containerSpan.children[0].inject(MyDir).dirProp).toEqual('Hello World!');
-                     .toEqual('Hi there!');
+                 expect(containerSpan.children[1].inject(MyDir).dirProp).toEqual('Hi there!');
-                 expect(fixture.debugElement.componentViewChildren[2].inject(MyDir).dirProp)
+                 expect(containerSpan.children[2].inject(MyDir).dirProp).toEqual('Hi there!');
-                     .toEqual('Hi there!');
+                 expect(containerSpan.children[3].inject(MyDir).dirProp)
-                 expect(fixture.debugElement.componentViewChildren[3].inject(MyDir).dirProp)
                      .toEqual('One more Hello World!');
                  async.done();
                });
@@ -368,7 +354,7 @@ function declareTests() {
                        fixture.debugElement.componentInstance.ctxProp = 'a';
                        fixture.detectChanges();
 
-                       var dir = fixture.debugElement.componentViewChildren[0].getLocal('dir');
+                       var dir = fixture.debugElement.children[0].getLocal('dir');
                        expect(dir.dirProp).toEqual('aa');
                        async.done();
                      });
@@ -405,7 +391,7 @@ function declareTests() {
                  fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
                  fixture.detectChanges();
 
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
 
                  expect(tc.inject(MyDir).dirProp).toEqual('Hello World!');
                  expect(tc.inject(ChildComp).dirProp).toEqual(null);
@@ -447,7 +433,7 @@ function declareTests() {
 
                .createAsync(MyComp)
                .then((fixture) => {
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
                  var idDir = tc.inject(IdDir);
 
                  fixture.debugElement.componentInstance.ctxProp = 'some_id';
@@ -563,7 +549,7 @@ function declareTests() {
 
                           .createAsync(MyComp)
                           .then((fixture) => {
-                            expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
+                            expect(fixture.debugElement.children[0].children[0].getLocal('alice'))
                                 .toBeAnInstanceOf(ChildComp);
 
                             async.done();
@@ -579,7 +565,7 @@ function declareTests() {
 
                      .createAsync(MyComp)
                      .then((fixture) => {
-                       expect(fixture.debugElement.componentViewChildren[0].getLocal('localdir'))
+                       expect(fixture.debugElement.children[0].children[0].getLocal('localdir'))
                            .toBeAnInstanceOf(ExportDir);
 
                        async.done();
@@ -620,22 +606,19 @@ function declareTests() {
 
                        .createAsync(MyComp)
                        .then((fixture) => {
+                         var childCmp = fixture.debugElement.children[0].children[0];
 
-                         expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
+                         expect(childCmp.getLocal('alice')).toBeAnInstanceOf(ChildComp);
-                             .toBeAnInstanceOf(ChildComp);
+                         expect(childCmp.getLocal('bob')).toBeAnInstanceOf(ChildComp);
-                         expect(fixture.debugElement.componentViewChildren[0].getLocal('bob'))
+                         expect(childCmp.getLocal('alice')).not.toBe(childCmp.getLocal('bob'));
-                             .toBeAnInstanceOf(ChildComp);
-                         expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
-                             .not.toBe(
-                                 fixture.debugElement.componentViewChildren[0].getLocal('bob'));
 
                          async.done();
                        })}));
 
         it('should assign the component instance to a var- with shorthand syntax',
            inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
+                  (tcb: TestComponentBuilder,
-                      tcb.overrideView(MyComp, new ViewMetadata({
+                   async) => {tcb.overrideView(MyComp, new ViewMetadata({
                                                  template: '<child-cmp #alice></child-cmp>',
                                                  directives: [ChildComp]
                                                }))
@@ -643,7 +626,7 @@ function declareTests() {
                                   .createAsync(MyComp)
                                   .then((fixture) => {
 
-                            expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
+                                    expect(fixture.debugElement.children[0].getLocal('alice'))
                                         .toBeAnInstanceOf(ChildComp);
 
                                     async.done();
@@ -660,7 +643,7 @@ function declareTests() {
                           .then((fixture) => {
 
                             var value =
-                                fixture.debugElement.componentViewChildren[0].getLocal('alice');
+                                fixture.debugElement.children[0].children[0].getLocal('alice');
                             expect(value).not.toBe(null);
                             expect(value.tagName.toLowerCase()).toEqual('div');
 
@@ -677,7 +660,7 @@ function declareTests() {
 
                      .createAsync(MyComp)
                      .then((fixture) => {
-                       expect(fixture.debugElement.componentViewChildren[0].getLocal('superAlice'))
+                       expect(fixture.debugElement.children[0].children[0].getLocal('superAlice'))
                            .toBeAnInstanceOf(ChildComp);
 
                        async.done();
@@ -719,7 +702,7 @@ function declareTests() {
                           .createAsync(MyComp)
                           .then((fixture) => {
 
-                            var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
+                            var cmp = fixture.debugElement.children[0].getLocal('cmp');
 
                             fixture.detectChanges();
                             expect(cmp.numberOfChecks).toEqual(1);
@@ -745,7 +728,7 @@ function declareTests() {
 
                           .createAsync(MyComp)
                           .then((fixture) => {
-                            var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
+                            var cmp = fixture.debugElement.children[0].getLocal('cmp');
 
                             fixture.debugElement.componentInstance.ctxProp = "one";
                             fixture.detectChanges();
@@ -771,7 +754,7 @@ function declareTests() {
                           .createAsync(MyComp)
                           .then((fixture) => {
 
-                            var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
+                            var cmp = fixture.debugElement.children[0].getLocal('cmp');
 
                             fixture.debugElement.componentInstance.ctxProp = "one";
                             fixture.detectChanges();
@@ -797,7 +780,7 @@ function declareTests() {
                       tcb.createAsync(MyComp).then(root => { fixture = root; });
                       tick();
 
-                      var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
+                      var cmp = fixture.debugElement.children[0].getLocal('cmp');
                       fixture.detectChanges();
                       expect(cmp.numberOfChecks).toEqual(1);
 
@@ -830,8 +813,7 @@ function declareTests() {
                         .createAsync(MyComp)
                         .then((fixture) => {
 
-                          var childComponent =
+                          var childComponent = fixture.debugElement.children[0].getLocal('child');
-                              fixture.debugElement.componentViewChildren[0].getLocal('child');
                           expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
 
                           async.done();
@@ -853,7 +835,7 @@ function declareTests() {
                .then((fixture) => {
                  fixture.detectChanges();
 
-                 var tc = fixture.debugElement.componentViewChildren[0].children[1];
+                 var tc = fixture.debugElement.children[0].children[0].children[0];
 
                  var childComponent = tc.getLocal('child');
                  expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
@@ -872,7 +854,7 @@ function declareTests() {
                .createAsync(MyComp)
                .then((fixture) => {
 
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
                  var emitter = tc.inject(DirectiveEmittingEvent);
                  var listener = tc.inject(DirectiveListeningEvent);
 
@@ -907,9 +889,10 @@ function declareTests() {
                .createAsync(MyComp)
                .then((fixture) => {
 
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.childNodes[0];
+
                  var emitter = tc.inject(DirectiveEmittingEvent);
-                 var myComp = tc.inject(MyComp);
+                 var myComp = fixture.debugElement.inject(MyComp);
                  var listener = tc.inject(DirectiveListeningEvent);
 
                  myComp.ctxProp = '';
@@ -934,7 +917,7 @@ function declareTests() {
 
                .createAsync(MyComp)
                .then((fixture) => {
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
                  var dir = tc.inject(DirectiveWithTwoWayBinding);
 
                  fixture.debugElement.componentInstance.ctxProp = 'one';
@@ -961,7 +944,7 @@ function declareTests() {
                .createAsync(MyComp)
                .then((fixture) => {
 
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
                  var listener = tc.inject(DirectiveListeningDomEvent);
 
                  dispatchEvent(tc.nativeElement, 'domEvent');
@@ -988,7 +971,7 @@ function declareTests() {
 
                .createAsync(MyComp)
                .then((fixture) => {
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
                  var listener = tc.inject(DirectiveListeningDomEvent);
                  dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
                  expect(listener.eventTypes).toEqual(['window_domEvent']);
@@ -1017,8 +1000,7 @@ function declareTests() {
                .then((fixture) => {
                  fixture.detectChanges();
 
-                 expect(DOM.getAttribute(
+                 expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, "role"))
-                            fixture.debugElement.componentViewChildren[0].nativeElement, "role"))
                      .toEqual("button");
 
                  async.done();
@@ -1034,7 +1016,7 @@ function declareTests() {
 
                .createAsync(MyComp)
                .then((fixture) => {
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
                  var updateHost = tc.inject(DirectiveUpdatingHostProperties);
 
                  updateHost.id = "newId";
@@ -1066,17 +1048,15 @@ function declareTests() {
                  .then((fixture) => {
                    var dispatchedEvent = DOM.createMouseEvent('click');
                    var dispatchedEvent2 = DOM.createMouseEvent('click');
-                   DOM.dispatchEvent(fixture.debugElement.componentViewChildren[0].nativeElement,
+                   DOM.dispatchEvent(fixture.debugElement.children[0].nativeElement,
                                      dispatchedEvent);
-                   DOM.dispatchEvent(fixture.debugElement.componentViewChildren[1].nativeElement,
+                   DOM.dispatchEvent(fixture.debugElement.children[1].nativeElement,
                                      dispatchedEvent2);
                    expect(DOM.isPrevented(dispatchedEvent)).toBe(true);
                    expect(DOM.isPrevented(dispatchedEvent2)).toBe(false);
-                   expect(
+                   expect(DOM.getChecked(fixture.debugElement.children[0].nativeElement))
-                       DOM.getChecked(fixture.debugElement.componentViewChildren[0].nativeElement))
                        .toBeFalsy();
-                   expect(
+                   expect(DOM.getChecked(fixture.debugElement.children[1].nativeElement))
-                       DOM.getChecked(fixture.debugElement.componentViewChildren[1].nativeElement))
                        .toBeTruthy();
                    async.done();
                  });
@@ -1098,7 +1078,7 @@ function declareTests() {
                  fixture.debugElement.componentInstance.ctxBoolProp = true;
                  fixture.detectChanges();
 
-                 var tc = fixture.debugElement.componentViewChildren[1];
+                 var tc = fixture.debugElement.children[0];
 
                  var listener = tc.inject(DirectiveListeningDomEvent);
                  var listenerother = tc.inject(DirectiveListeningDomEventOther);
@@ -1136,11 +1116,11 @@ function declareTests() {
 
                         .createAsync(MyComp)
                         .then((fixture) => {
-                          var tc = fixture.debugElement.componentViewChildren[0];
+                          var tc = fixture.debugElement.children[0].children[0];
                           var dynamicVp = tc.inject(DynamicViewport);
                           dynamicVp.done.then((_) => {
                             fixture.detectChanges();
-                            expect(fixture.debugElement.componentViewChildren[1].nativeElement)
+                            expect(fixture.debugElement.children[0].children[1].nativeElement)
                                 .toHaveText('dynamic greet');
                             async.done();
                           });
@@ -1157,7 +1137,7 @@ function declareTests() {
                       {template: '<input static type="text" title>', directives: [NeedsAttribute]}))
                .createAsync(MyComp)
                .then((fixture) => {
-                 var tc = fixture.debugElement.componentViewChildren[0];
+                 var tc = fixture.debugElement.children[0];
                  var needsAttribute = tc.inject(NeedsAttribute);
                  expect(needsAttribute.typeAttribute).toEqual('text');
                  expect(needsAttribute.staticAttribute).toEqual('');
@@ -1183,7 +1163,7 @@ function declareTests() {
                   }))
                .createAsync(MyComp)
                .then((fixture) => {
-                 var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
+                 var comp = fixture.debugElement.children[0].getLocal("consuming");
                  expect(comp.injectable).toBeAnInstanceOf(InjectableService);
 
                  async.done();
@@ -1201,7 +1181,7 @@ function declareTests() {
                             }))
                .createAsync(DirectiveProvidingInjectableInView)
                .then((fixture) => {
-                 var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
+                 var comp = fixture.debugElement.children[0].getLocal("consuming");
                  expect(comp.injectable).toBeAnInstanceOf(InjectableService);
 
                  async.done();
@@ -1231,7 +1211,7 @@ function declareTests() {
 
                .createAsync(MyComp)
                .then((fixture) => {
-                 var comp = fixture.debugElement.componentViewChildren[0].getLocal("dir");
+                 var comp = fixture.debugElement.children[0].getLocal("dir");
                  expect(comp.directive.injectable).toBeAnInstanceOf(InjectableService);
 
                  async.done();
@@ -1257,7 +1237,7 @@ function declareTests() {
                             }))
                .createAsync(MyComp)
                .then((fixture) => {
-                 var gpComp = fixture.debugElement.componentViewChildren[0];
+                 var gpComp = fixture.debugElement.children[0];
                  var parentComp = gpComp.children[0];
                  var childComp = parentComp.children[0];
 
@@ -1289,8 +1269,7 @@ function declareTests() {
                   }))
                .createAsync(MyComp)
                .then((fixture) => {
-                 var providing =
+                 var providing = fixture.debugElement.children[0].getLocal("providing");
-                     fixture.debugElement.componentViewChildren[0].getLocal("providing");
                  expect(providing.created).toBe(false);
 
                  fixture.debugElement.componentInstance.ctxBoolProp = true;
@@ -1435,7 +1414,7 @@ function declareTests() {
                     tcb.createAsync(MyComp).then(root => { fixture = root; });
                     tick();
 
-                    var tc = fixture.debugElement.componentViewChildren[0];
+                    var tc = fixture.debugElement.children[0];
                     tc.inject(DirectiveEmittingEvent).fireEvent("boom");
 
                     try {
@@ -1750,8 +1729,7 @@ function declareTests() {
                .createAsync(MyComp)
                .then((fixture) => {
                  fixture.detectChanges();
-                 var dir = fixture.debugElement.componentViewChildren[0].inject(
+                 var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
-                     DirectiveWithPropDecorators);
                  expect(dir.dirProp).toEqual("aaa");
                  async.done();
                });
@@ -1766,13 +1744,11 @@ function declareTests() {
                .createAsync(MyComp)
                .then((fixture) => {
                  fixture.detectChanges();
-                 var dir = fixture.debugElement.componentViewChildren[0].inject(
+                 var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
-                     DirectiveWithPropDecorators);
                  dir.myAttr = "aaa";
 
                  fixture.detectChanges();
-                 expect(
+                 expect(DOM.getOuterHTML(fixture.debugElement.children[0].nativeElement))
-                     DOM.getOuterHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
                      .toContain('my-attr="aaa"');
                  async.done();
                });
@@ -1791,8 +1767,8 @@ function declareTests() {
                     tcb.createAsync(MyComp).then(root => { fixture = root; });
                     tick();
 
-                    var emitter = fixture.debugElement.componentViewChildren[0].inject(
+                    var emitter =
-                        DirectiveWithPropDecorators);
+                        fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
                     emitter.fireEvent('fired !');
 
                     tick();
@@ -1802,8 +1778,8 @@ function declareTests() {
 
 
         it('should support host listener decorators',
-           inject([TestComponentBuilder, AsyncTestCompleter],
+           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
-                  (tcb: TestComponentBuilder, async) => {
+                                                               async) => {
              tcb.overrideView(MyComp, new ViewMetadata({
                                 template: '<with-prop-decorators></with-prop-decorators>',
                                 directives: [DirectiveWithPropDecorators]
@@ -1811,9 +1787,8 @@ function declareTests() {
                  .createAsync(MyComp)
                  .then((fixture) => {
                    fixture.detectChanges();
-                          var dir = fixture.debugElement.componentViewChildren[0].inject(
+                   var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
-                              DirectiveWithPropDecorators);
+                   var native = fixture.debugElement.children[0].nativeElement;
-                          var native = fixture.debugElement.componentViewChildren[0].nativeElement;
                    DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
 
                    expect(dir.target).toBe(native);
@@ -1831,7 +1806,7 @@ function declareTests() {
                .createAsync(MyComp)
                .then((fixture) => {
                  fixture.detectChanges();
-                 var native = fixture.debugElement.componentViewChildren[0].nativeElement;
+                 var native = fixture.debugElement.children[0].nativeElement;
                  expect(native).toHaveText("No View Decorator: 123");
                  async.done();
                });

modules/angular2/test/core/linker/projection_integration_spec.ts

@@ -21,7 +21,6 @@ import {
 } from 'angular2/testing_internal';
 
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
-import {AppViewListener} from 'angular2/src/core/linker/view_listener';
 
 import {
   bind,
@@ -34,17 +33,15 @@ import {
   View,
   ViewContainerRef,
   ViewEncapsulation,
-  ViewMetadata,
+  ViewMetadata
-  Scope
 } from 'angular2/core';
 import {
   By,
 } from 'angular2/platform/common_dom';
+import {getAllDebugNodes} from 'angular2/src/core/debug/debug_node';
 
 export function main() {
   describe('projection', () => {
-    beforeEachProviders(() => [provide(AppViewListener, {useClass: AppViewListener})]);
-
     it('should support simple components',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          tcb.overrideView(MainComp, new ViewMetadata({
@@ -199,7 +196,8 @@ export function main() {
              .then((main) => {
 
                var viewportDirectives =
-                   main.debugElement.queryAll(By.directive(ManualViewportDirective))
+                   main.debugElement.children[0]
+                       .childNodes.filter(By.directive(ManualViewportDirective))
                        .map(de => de.inject(ManualViewportDirective));
 
                expect(main.debugElement.nativeElement).toHaveText('(, B)');
@@ -244,8 +242,8 @@ export function main() {
              .then((main) => {
 
                var viewportDirective =
-                   main.debugElement.query(By.directive(ManualViewportDirective))
+                   main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
-                       .inject(ManualViewportDirective);
+                       ManualViewportDirective);
 
                expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
                viewportDirective.show();
@@ -269,8 +267,8 @@ export function main() {
              .then((main) => {
 
                var viewportDirective =
-                   main.debugElement.query(By.directive(ManualViewportDirective))
+                   main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
-                       .inject(ManualViewportDirective);
+                       ManualViewportDirective);
 
                expect(main.debugElement.nativeElement).toHaveText('(, BC)');
 
@@ -336,12 +334,20 @@ export function main() {
                           }))
              .createAsync(MainComp)
              .then((main) => {
+               var sourceDirective;
+
+               // We can't use the child nodes to get a hold of this because it's not in the dom at
+               // all.
+               getAllDebugNodes().forEach((debug) => {
+                 if (debug.providerTokens.indexOf(ManualViewportDirective) !== -1) {
+                   sourceDirective = debug.inject(ManualViewportDirective);
+                 }
+               });
 
-               var sourceDirective: ManualViewportDirective =
-                   main.debugElement.query(By.directive(ManualViewportDirective))
-                       .inject(ManualViewportDirective);
                var projectDirective: ProjectDirective =
-                   main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
+                   main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
+                       ProjectDirective);
+
                expect(main.debugElement.nativeElement).toHaveText('START()END');
 
                projectDirective.show(sourceDirective.templateRef);
@@ -361,10 +367,11 @@ export function main() {
              .then((main) => {
 
                var sourceDirective: ManualViewportDirective =
-                   main.debugElement.query(By.directive(ManualViewportDirective))
+                   main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
-                       .inject(ManualViewportDirective);
+                       ManualViewportDirective);
                var projectDirective: ProjectDirective =
-                   main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
+                   main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
+                       ProjectDirective);
                expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START()END');
 
                projectDirective.show(sourceDirective.templateRef);
@@ -389,10 +396,11 @@ export function main() {
              .then((main) => {
 
                var sourceDirective: ManualViewportDirective =
-                   main.debugElement.query(By.directive(ManualViewportDirective))
+                   main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
-                       .inject(ManualViewportDirective);
+                       ManualViewportDirective);
                var projectDirective: ProjectDirective =
-                   main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
+                   main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
+                       ProjectDirective);
                expect(main.debugElement.nativeElement).toHaveText('(, B)START()END');
 
                projectDirective.show(sourceDirective.templateRef);
@@ -419,8 +427,8 @@ export function main() {
 
                main.detectChanges();
                var manualDirective: ManualViewportDirective =
-                   main.debugElement.query(By.directive(ManualViewportDirective))
+                   main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
-                       .inject(ManualViewportDirective);
+                       ManualViewportDirective);
                expect(main.debugElement.nativeElement).toHaveText('TREE(0:)');
                manualDirective.show();
                main.detectChanges();
@@ -480,12 +488,12 @@ export function main() {
                expect(main.debugElement.nativeElement).toHaveText('MAIN()');
 
                var viewportElement =
-                   main.debugElement.componentViewChildren[0].componentViewChildren[0];
+                   main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
                viewportElement.inject(ManualViewportDirective).show();
                expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST())');
 
                viewportElement =
-                   main.debugElement.componentViewChildren[0].componentViewChildren[1];
+                   main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
                viewportElement.inject(ManualViewportDirective).show();
                expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))');
 
@@ -540,21 +548,24 @@ export function main() {
              .then((main) => {
                var conditionalComp =
                    main.debugElement.query(By.directive(ConditionalContentComponent));
+
                var viewViewportDir =
-                   conditionalComp.query(By.directive(ManualViewportDirective), Scope.view)
+                   conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
-                       .inject(ManualViewportDirective);
+                       ManualViewportDirective);
+
+               expect(main.debugElement.nativeElement).toHaveText('(, D)');
+               expect(main.debugElement.nativeElement).toHaveText('(, D)');
+
+               viewViewportDir.show();
+
+               expect(main.debugElement.nativeElement).toHaveText('(AC, D)');
 
                var contentViewportDir =
-                   conditionalComp.query(By.directive(ManualViewportDirective), Scope.light)
+                   conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].inject(
-                       .inject(ManualViewportDirective);
+                       ManualViewportDirective);
 
-               expect(main.debugElement.nativeElement).toHaveText('(, D)');
-               expect(main.debugElement.nativeElement).toHaveText('(, D)');
-               // first show content viewport, then the view viewport,
-               // i.e. projection needs to take create of already
-               // created views
                contentViewportDir.show();
-               viewViewportDir.show();
+
                expect(main.debugElement.nativeElement).toHaveText('(ABC, D)');
 
                // hide view viewport, and test that it also hides

modules/angular2/test/core/linker/query_integration_spec.ts

@@ -53,8 +53,7 @@ export function main() {
                .then((view) => {
                  view.detectChanges();
 
-                 expect(asNativeElements(view.debugElement.componentViewChildren))
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
-                     .toHaveText('2|3|');
 
                  async.done();
                });
@@ -70,7 +69,7 @@ export function main() {
                .then((view) => {
                  view.detectChanges();
 
-                 var q = view.debugElement.componentViewChildren[0].getLocal('q');
+                 var q = view.debugElement.children[0].getLocal('q');
 
                  view.detectChanges();
 
@@ -92,7 +91,7 @@ export function main() {
                  view.debugElement.componentInstance.shouldShow = true;
                  view.detectChanges();
 
-                 var q = view.debugElement.componentViewChildren[0].getLocal('q');
+                 var q = view.debugElement.children[0].getLocal('q');
 
                  expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
 
@@ -121,7 +120,7 @@ export function main() {
                .createAsync(MyComp)
                .then((view) => {
                  view.detectChanges();
-                 var q = view.debugElement.componentViewChildren[0].getLocal('q');
+                 var q = view.debugElement.children[0].getLocal('q');
 
                  expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
 
@@ -181,8 +180,7 @@ export function main() {
                .createAsync(MyComp)
                .then((view) => {
                  view.detectChanges();
-                 expect(asNativeElements(view.debugElement.componentViewChildren))
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|4|');
-                     .toHaveText('2|3|4|');
 
                  async.done();
                });
@@ -198,8 +196,7 @@ export function main() {
                .createAsync(MyComp)
                .then((view) => {
                  view.detectChanges();
-                 expect(asNativeElements(view.debugElement.componentViewChildren))
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
-                     .toHaveText('2|3|');
 
                  async.done();
                });
@@ -217,12 +214,11 @@ export function main() {
                .then((view) => {
 
                  view.detectChanges();
-                 expect(asNativeElements(view.debugElement.componentViewChildren)).toHaveText('2|');
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
 
                  view.debugElement.componentInstance.shouldShow = true;
                  view.detectChanges();
-                 expect(asNativeElements(view.debugElement.componentViewChildren))
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
-                     .toHaveText('2|3|');
 
                  async.done();
                });
@@ -258,13 +254,11 @@ export function main() {
                .then((view) => {
                  view.detectChanges();
 
-                 expect(asNativeElements(view.debugElement.componentViewChildren))
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
-                     .toHaveText('2|1d|2d|3d|');
 
                  view.debugElement.componentInstance.list = ['3d', '2d'];
                  view.detectChanges();
-                 expect(asNativeElements(view.debugElement.componentViewChildren))
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('2|3d|2d|');
-                     .toHaveText('2|3d|2d|');
 
                  async.done();
                });
@@ -279,8 +273,7 @@ export function main() {
                .createAsync(MyComp)
                .then((view) => {
                  view.detectChanges();
-                 var needsTpl: NeedsTpl =
+                 var needsTpl: NeedsTpl = view.debugElement.children[0].inject(NeedsTpl);
-                     view.debugElement.componentViewChildren[0].inject(NeedsTpl);
 
                  expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).hasLocal('light'))
                      .toBe(true);
@@ -304,7 +297,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q = view.debugElement.children[0].getLocal("q");
                  view.detectChanges();
 
                  ObservableWrapper.subscribe(q.query.changes, (_) => {
@@ -329,8 +322,8 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q1 = view.debugElement.componentViewChildren[0].getLocal("q1");
+                 var q1 = view.debugElement.children[0].getLocal("q1");
-                 var q2 = view.debugElement.componentViewChildren[0].getLocal("q2");
+                 var q2 = view.debugElement.children[0].getLocal("q2");
 
                  var firedQ2 = false;
 
@@ -354,7 +347,8 @@ export function main() {
                  view.debugElement.componentInstance.shouldShow = true;
                  view.detectChanges();
 
-                 var q: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
+                 var q: NeedsQuery = view.debugElement.children[0].getLocal('q');
+
                  expect(q.query.length).toEqual(1);
 
                  view.debugElement.componentInstance.shouldShow = false;
@@ -363,7 +357,7 @@ export function main() {
                  view.debugElement.componentInstance.shouldShow = true;
                  view.detectChanges();
 
-                 var q2: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
+                 var q2: NeedsQuery = view.debugElement.children[0].getLocal('q');
 
                  expect(q2.query.length).toEqual(1);
 
@@ -382,7 +376,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q = view.debugElement.children[0].getLocal("q");
 
                  view.debugElement.componentInstance.list = ['1d', '2d'];
 
@@ -405,7 +399,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q = view.debugElement.children[0].getLocal("q");
                  view.detectChanges();
 
                  expect(q.query.first.text).toEqual("one");
@@ -424,7 +418,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q = view.debugElement.children[0].getLocal("q");
 
                  view.debugElement.componentInstance.list = ['1d', '2d'];
 
@@ -451,7 +445,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q = view.debugElement.children[0].getLocal("q");
 
                  view.debugElement.componentInstance.list = ['1d', '2d'];
 
@@ -475,8 +469,7 @@ export function main() {
                .then((view) => {
                  view.detectChanges();
 
-                 expect(asNativeElements(view.debugElement.componentViewChildren))
+                 expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
-                     .toHaveText('hello|world|');
 
                  async.done();
                });
@@ -489,8 +482,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQueryByLabel =
+                 var q: NeedsViewQueryByLabel = view.debugElement.children[0].getLocal("q");
-                     view.debugElement.componentViewChildren[0].getLocal("q");
                  view.detectChanges();
 
                  expect(q.query.first.nativeElement).toHaveText("text");
@@ -508,7 +500,7 @@ export function main() {
                .then((view) => {
                  view.detectChanges();
 
-                 var q = view.debugElement.componentViewChildren[0].getLocal('q');
+                 var q = view.debugElement.children[0].getLocal('q');
 
                  view.detectChanges();
 
@@ -529,7 +521,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
 
                  view.detectChanges();
 
@@ -546,7 +538,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
 
                  view.detectChanges();
 
@@ -563,7 +555,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQueryIf = view.debugElement.componentViewChildren[0].getLocal("q");
+                 var q: NeedsViewQueryIf = view.debugElement.children[0].getLocal("q");
 
                  view.detectChanges();
 
@@ -586,8 +578,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQueryNestedIf =
+                 var q: NeedsViewQueryNestedIf = view.debugElement.children[0].getLocal("q");
-                     view.debugElement.componentViewChildren[0].getLocal("q");
 
                  view.detectChanges();
 
@@ -612,8 +603,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQueryOrder =
+                 var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal("q");
-                     view.debugElement.componentViewChildren[0].getLocal("q");
 
                  view.detectChanges();
 
@@ -636,8 +626,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQueryOrderWithParent =
+                 var q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].getLocal("q");
-                     view.debugElement.componentViewChildren[0].getLocal("q");
 
                  view.detectChanges();
 
@@ -660,8 +649,7 @@ export function main() {
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
                .then((view) => {
-                 var q: NeedsViewQueryOrder =
+                 var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal('q');
-                     view.debugElement.componentViewChildren[0].getLocal('q');
 
                  // no significance to 50, just a reasonably large cycle.
                  for (var i = 0; i < 50; i++) {
@@ -685,7 +673,7 @@ export function main() {
                .then((view) => {
                  view.detectChanges();
 
-                 var q = view.debugElement.componentViewChildren[0].getLocal('q');
+                 var q = view.debugElement.children[0].getLocal('q');
                  expect(q.query1).toBeDefined();
                  expect(q.query2).toBeDefined();
                  expect(q.query3).toBeDefined();

modules/angular2/test/core/spies.dart

@@ -8,7 +8,6 @@ import 'package:angular2/src/core/linker/directive_resolver.dart';
 import 'package:angular2/src/core/linker/view.dart';
 import 'package:angular2/src/core/linker/element_ref.dart';
 import 'package:angular2/src/core/linker/view_manager.dart';
-import 'package:angular2/src/core/linker/view_listener.dart';
 import 'package:angular2/src/platform/dom/dom_adapter.dart';
 import 'package:angular2/testing_internal.dart';
 
@@ -52,8 +51,5 @@ class SpyRenderer extends SpyObject implements Renderer {}
 @proxy
 class SpyRootRenderer extends SpyObject implements RootRenderer {}
 
-@proxy
-class SpyAppViewListener extends SpyObject implements AppViewListener {}
-
 @proxy
 class SpyDomAdapter extends SpyObject implements DomAdapter {}

modules/angular2/test/core/spies.ts

@@ -11,7 +11,6 @@ import {DirectiveResolver} from 'angular2/src/core/linker/directive_resolver';
 import {AppView, AppProtoView, HostViewFactory} from 'angular2/src/core/linker/view';
 import {ElementRef} from 'angular2/src/core/linker/element_ref';
 import {AppViewManager_} from 'angular2/src/core/linker/view_manager';
-import {AppViewListener} from 'angular2/src/core/linker/view_listener';
 import {DomAdapter} from 'angular2/src/platform/dom/dom_adapter';
 
 import {SpyObject, proxy} from 'angular2/testing_internal';
@@ -71,6 +70,7 @@ export class SpyRenderer extends SpyObject {
     this.spy('setElementProperty');
     this.spy('setElementAttribute');
     this.spy('setBindingDebugInfo');
+    this.spy('setElementDebugInfo');
     this.spy('setElementClass');
     this.spy('setElementStyle');
     this.spy('invokeElementMethod');
@@ -88,10 +88,6 @@ export class SpyRootRenderer extends SpyObject {
   }
 }
 
-export class SpyAppViewListener extends SpyObject {
-  constructor() { super(AppViewListener); }
-}
-
 export class SpyDomAdapter extends SpyObject {
   constructor() { super(DomAdapter); }
 }

modules/angular2/test/platform/browser/debug/debug_element_view_listener_spec.ts

@@ -1,71 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  xdescribe,
-  describe,
-  dispatchEvent,
-  expect,
-  iit,
-  inject,
-  beforeEachProviders,
-  it,
-  xit,
-  TestComponentBuilder,
-} from 'angular2/testing_internal';
-import {global} from 'angular2/src/facade/lang';
-import {provide, Component, Directive, Injectable, View} from 'angular2/core';
-import {inspectNativeElement} from 'angular2/platform/browser';
-import {IS_DART} from 'angular2/src/facade/lang';
-
-@Component({selector: 'my-comp'})
-@View({directives: []})
-@Injectable()
-class MyComp {
-  ctxProp: string;
-}
-
-export function main() {
-  describe('element probe', function() {
-    it('should return a TestElement from a dom element',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(MyComp, '<div some-dir></div>')
-             .createAsync(MyComp)
-             .then((componentFixture) => {
-               expect(inspectNativeElement(componentFixture.debugElement.nativeElement)
-                          .componentInstance)
-                   .toBeAnInstanceOf(MyComp);
-
-               async.done();
-             });
-       }));
-
-    it('should clean up whent the view is destroyed',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(MyComp, '')
-             .createAsync(MyComp)
-             .then((componentFixture) => {
-               componentFixture.destroy();
-               expect(inspectNativeElement(componentFixture.debugElement.nativeElement)).toBe(null);
-
-               async.done();
-             });
-
-       }));
-
-    if (!IS_DART) {
-      it('should provide a global function to inspect elements',
-         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideTemplate(MyComp, '')
-               .createAsync(MyComp)
-               .then((componentFixture) => {
-                 expect(global['ng']['probe'](componentFixture.debugElement.nativeElement)
-                            .componentInstance)
-                     .toBeAnInstanceOf(MyComp);
-
-                 async.done();
-               });
-         }), 1000);
-    }
-  });
-}

modules/angular2/test/public_api_spec.ts

@@ -890,19 +890,40 @@ var NG_CORE = [
   'PLATFORM_PIPES:js',
   'DebugElement',
   'DebugElement.children',
+  'DebugElement.attributes',
+  'DebugElement.attributes=',
+  'DebugElement.properties',
+  'DebugElement.properties=',
+  'DebugElement.childNodes',
+  'DebugElement.childNodes=',
+  'DebugElement.injector',
+  'DebugElement.injector=',
+  'DebugElement.listeners',
+  'DebugElement.listeners=',
+  'DebugElement.locals',
+  'DebugElement.locals=',
+  'DebugElement.name',
+  'DebugElement.name=',
+  'DebugElement.parent',
+  'DebugElement.parent=',
   'DebugElement.componentInstance',
-  'DebugElement.componentViewChildren',
+  'DebugElement.componentInstance=',
-  'DebugElement.elementRef',
-  /*
-   Abstract methods
-  'DebugElement.getDirectiveInstance()',
   'DebugElement.getLocal()',
-  'DebugElement.hasDirective()',
+  'DebugElement.providerTokens',
+  'DebugElement.providerTokens=',
   'DebugElement.inject()',
-  */
+  'DebugElement.nativeNode',
+  'DebugElement.nativeNode=',
   'DebugElement.nativeElement',
+  'DebugElement.nativeElement=',
   'DebugElement.query()',
   'DebugElement.queryAll()',
+  'DebugElement.queryAllNodes()',
+  'DebugElement.triggerEventHandler()',
+  'DebugElement.setDebugInfo()',
+  'DebugElement.addChild()',
+  'DebugElement.removeChild()',
+  'DebugElement.insertChildrenAfter()',
   'Dependency#fromKey()',
   'Dependency',
   'Dependency.key',
@@ -1208,10 +1229,6 @@ var NG_CORE = [
   'ResolvedFactory.dependencies=',
   'ResolvedFactory.factory',
   'ResolvedFactory.factory=',
-  'Scope#all()',
-  'Scope#light()',
-  'Scope#view()',
-  'Scope',  // TODO(misko): rename?
   'Self',
   'SelfMetadata',
   'SkipSelf',
@@ -1354,7 +1371,6 @@ var NG_CORE = [
   'provide()',
   'createNgZone()',
   'forwardRef():js',
-  'inspectElement()',
   'platform():js',
   'resolveForwardRef():js',
   'PLATFORM_COMMON_PROVIDERS',
@@ -1600,8 +1616,8 @@ var NG_PLATFORM_BROWSER = [
   'By#directive():js',
   'By:js',
   'DOCUMENT',
-  'ELEMENT_PROBE_BINDINGS:js',
   'ELEMENT_PROBE_PROVIDERS:js',
+  'ELEMENT_PROBE_PROVIDERS_PROD_MODE:js',
   'Title.getTitle():js',
   'Title.setTitle():js',
   'Title:js',

modules/angular2/test/router/integration/impl/async_route_spec_impl.ts

@@ -12,6 +12,9 @@ import {
   xit,
 } from 'angular2/testing_internal';
 
+
+import {By} from 'angular2/platform/common_dom';
+
 import {specs, compile, TEST_ROUTER_PROVIDERS, clickOnElement, getHref} from '../util';
 
 import {Router, AsyncRoute, Route, Location} from 'angular2/router';
@@ -33,7 +36,7 @@ import {
 } from './fixture_components';
 
 function getLinkElement(rtc: ComponentFixture) {
-  return rtc.debugElement.componentViewChildren[0].nativeElement;
+  return rtc.debugElement.query(By.css('a')).nativeElement;
 }
 
 function asyncRoutesWithoutChildrenWithRouteData() {

modules/angular2/test/router/integration/impl/aux_route_spec_impl.ts

@@ -15,6 +15,7 @@ import {
   xit
 } from 'angular2/testing_internal';
 
+import {By} from 'angular2/platform/common_dom';
 import {provide, Component, Injector, Inject} from 'angular2/core';
 
 import {Router, ROUTER_DIRECTIVES, RouteParams, RouteData, Location} from 'angular2/router';
@@ -24,7 +25,7 @@ import {specs, compile, TEST_ROUTER_PROVIDERS, clickOnElement, getHref} from '..
 import {BaseException} from 'angular2/src/facade/exceptions';
 
 function getLinkElement(rtc: ComponentFixture, linkIndex: number = 0) {
-  return rtc.debugElement.componentViewChildren[linkIndex].nativeElement;
+  return rtc.debugElement.queryAll(By.css('a'))[linkIndex].nativeElement;
 }
 
 function auxRoutes() {

modules/angular2/test/router/integration/impl/sync_route_spec_impl.ts

@@ -14,13 +14,14 @@ import {
 
 import {specs, compile, TEST_ROUTER_PROVIDERS, clickOnElement, getHref} from '../util';
 
+import {By} from 'angular2/platform/common_dom';
 import {Router, Route, Location} from 'angular2/router';
 
 import {HelloCmp, UserCmp, TeamCmp, ParentCmp, ParentWithDefaultCmp} from './fixture_components';
 
 
 function getLinkElement(rtc: ComponentFixture) {
-  return rtc.debugElement.componentViewChildren[0].nativeElement;
+  return rtc.debugElement.query(By.css('a')).nativeElement;
 }
 
 function syncRoutesWithoutChildrenWithoutParams() {

modules/angular2/test/router/integration/router_link_spec.ts

@@ -17,6 +17,7 @@ import {
   SpyObject
 } from 'angular2/testing_internal';
 
+import {By} from 'angular2/platform/common_dom';
 import {NumberWrapper} from 'angular2/src/facade/lang';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
@@ -111,9 +112,7 @@ export function main() {
                fixture.debugElement.componentInstance.name = 'brian';
                fixture.detectChanges();
                expect(fixture.debugElement.nativeElement).toHaveText('brian');
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
+               expect(getHref(fixture)).toEqual('/user/brian');
-                                       'href'))
-                   .toEqual('/user/brian');
                async.done();
              });
        }));
@@ -127,11 +126,7 @@ export function main() {
              .then((_) => router.navigateByUrl('/page/1'))
              .then((_) => {
                fixture.detectChanges();
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
+               expect(getHref(fixture)).toEqual('/page/2');
-                                           .componentViewChildren[0]
-                                           .nativeElement,
-                                       'href'))
-                   .toEqual('/page/2');
                async.done();
              });
        }));
@@ -146,11 +141,7 @@ export function main() {
              .then((_) => router.navigateByUrl('/page/1'))
              .then((_) => {
                fixture.detectChanges();
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
+               expect(getHref(fixture)).toEqual('/page/2');
-                                           .componentViewChildren[0]
-                                           .nativeElement,
-                                       'href'))
-                   .toEqual('/page/2');
                async.done();
              });
        }));
@@ -164,11 +155,7 @@ export function main() {
              .then((_) => router.navigateByUrl('/book/1984/page/1'))
              .then((_) => {
                fixture.detectChanges();
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
+               expect(getHref(fixture)).toEqual('/book/1984/page/100');
-                                           .componentViewChildren[0]
-                                           .nativeElement,
-                                       'href'))
-                   .toEqual('/book/1984/page/100');
                async.done();
              });
        }));
@@ -202,11 +189,7 @@ export function main() {
              .then((_) => router.navigateByUrl('/child-with-grandchild/grandchild'))
              .then((_) => {
                fixture.detectChanges();
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
+               expect(getHref(fixture)).toEqual('/child-with-grandchild/grandchild');
-                                           .componentViewChildren[0]
-                                           .nativeElement,
-                                       'href'))
-                   .toEqual('/child-with-grandchild/grandchild');
                async.done();
              });
        }));
@@ -219,15 +202,17 @@ export function main() {
              .then((_) => router.navigateByUrl('/book/1984/page/1'))
              .then((_) => {
                fixture.detectChanges();
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
+               // TODO(juliemr): This should be one By.css('book-cmp a') query, but the parse5
-                                           .componentViewChildren[0]
+               // adapter
+               // can't handle css child selectors.
+               expect(DOM.getAttribute(fixture.debugElement.query(By.css('book-cmp'))
+                                           .query(By.css('a'))
                                            .nativeElement,
                                        'href'))
                    .toEqual('/book/1984/page/100');
 
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
+               expect(DOM.getAttribute(fixture.debugElement.query(By.css('page-cmp'))
-                                           .componentViewChildren[2]
+                                           .query(By.css('a'))
-                                           .componentViewChildren[0]
                                            .nativeElement,
                                        'href'))
                    .toEqual('/book/1984/page/2');
@@ -241,11 +226,7 @@ export function main() {
              .then((_) => router.navigateByUrl('/'))
              .then((_) => {
                fixture.detectChanges();
-               expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
+               expect(getHref(fixture)).toEqual('/(aside)');
-                                           .componentViewChildren[0]
-                                           .nativeElement,
-                                       'href'))
-                   .toEqual('/(aside)');
                async.done();
              });
        }));
@@ -335,9 +316,7 @@ export function main() {
                    fixture.debugElement.componentInstance.name = 'brian';
                    fixture.detectChanges();
                    expect(fixture.debugElement.nativeElement).toHaveText('brian');
-                   expect(DOM.getAttribute(
+                   expect(getHref(fixture)).toEqual('/user/brian');
-                              fixture.debugElement.componentViewChildren[0].nativeElement, 'href'))
-                       .toEqual('/user/brian');
                    async.done();
                  });
            }));
@@ -347,7 +326,7 @@ export function main() {
     describe('when clicked', () => {
 
       var clickOnElement = function(view) {
-        var anchorEl = fixture.debugElement.componentViewChildren[0].nativeElement;
+        var anchorEl = fixture.debugElement.query(By.css('a')).nativeElement;
         var dispatchedEvent = DOM.createMouseEvent('click');
         DOM.dispatchEvent(anchorEl, dispatchedEvent);
         return dispatchedEvent;
@@ -398,7 +377,7 @@ export function main() {
 }
 
 function getHref(tc: ComponentFixture) {
-  return DOM.getAttribute(tc.debugElement.componentViewChildren[0].nativeElement, 'href');
+  return DOM.getAttribute(tc.debugElement.query(By.css('a')).nativeElement, 'href');
 }
 
 @Component({selector: 'my-comp'})

modules/angular2/test/web_workers/worker/renderer_integration_spec.ts

@@ -24,7 +24,6 @@ import {
   Injectable,
   ElementRef
 } from 'angular2/core';
-import {AppViewListener} from 'angular2/src/core/linker/view_listener';
 import {NgIf} from 'angular2/common';
 import {WebWorkerRootRenderer} from "angular2/src/web_workers/worker/renderer";
 import {
@@ -36,6 +35,7 @@ import {
 import {Serializer} from "angular2/src/web_workers/shared/serializer";
 import {RootRenderer} from "angular2/src/core/render/api";
 import {DomRootRenderer, DomRootRenderer_} from 'angular2/src/platform/dom/dom_renderer';
+import {DebugDomRootRenderer} from 'angular2/src/core/debug/debug_renderer';
 import {RenderStore} from "angular2/src/web_workers/shared/render_store";
 import {MessageBasedRenderer} from 'angular2/src/web_workers/ui/renderer';
 import {createPairedMessageBuses, PairedMessageBuses} from '../shared/web_worker_test_util';
@@ -44,6 +44,7 @@ import {
   ServiceMessageBrokerFactory_
 } from 'angular2/src/web_workers/shared/service_message_broker';
 import {ChangeDetectorGenConfig} from 'angular2/src/core/change_detection/change_detection';
+import {ElementRef_} from 'angular2/src/core/linker/element_ref';
 import {
   TEST_BROWSER_PLATFORM_PROVIDERS,
   TEST_BROWSER_APPLICATION_PROVIDERS
@@ -71,12 +72,13 @@ export function main() {
 
   function createWorkerRenderer(workerSerializer: Serializer, uiSerializer: Serializer,
                                 domRootRenderer: DomRootRenderer, uiRenderStore: RenderStore,
-                                workerRenderStore: RenderStore): WebWorkerRootRenderer {
+                                workerRenderStore: RenderStore): RootRenderer {
     var messageBuses = createPairedMessageBuses();
     var brokerFactory = createWebWorkerBrokerFactory(messageBuses, workerSerializer, uiSerializer,
                                                      domRootRenderer, uiRenderStore);
-    return new WebWorkerRootRenderer(brokerFactory, messageBuses.worker, workerSerializer,
+    var workerRootRenderer = new WebWorkerRootRenderer(brokerFactory, messageBuses.worker,
-                                     workerRenderStore);
+                                                       workerSerializer, workerRenderStore);
+    return new DebugDomRootRenderer(workerRootRenderer);
   }
 
   describe("Web Worker Renderer", () => {
@@ -110,8 +112,7 @@ export function main() {
                                                 uiRenderStore, workerRenderStore);
                   },
                   deps: [Serializer]
-                }),
+                })
-        provide(AppViewListener, {useClass: AppViewListener})
       ];
     });
 
@@ -129,7 +130,7 @@ export function main() {
          tcb.overrideView(MyComp, new ViewMetadata({template: '<div>{{ctxProp}}</div>'}))
              .createAsync(MyComp)
              .then((fixture) => {
-               var renderEl = getRenderElement(fixture.debugElement.elementRef);
+               var renderEl = getRenderElement(fixture.elementRef);
                expect(renderEl).toHaveText('');
 
                fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
@@ -167,9 +168,11 @@ export function main() {
                };
 
                // root element
-               checkSetters(fixture.debugElement.elementRef);
+               checkSetters(fixture.elementRef);
                // nested elements
-               checkSetters(fixture.debugElement.componentViewChildren[0].elementRef);
+               checkSetters((<ElementRef_>fixture.elementRef)
+                                .internalElement.componentView.appElements[0]
+                                .ref);
 
                async.done();
              });
@@ -184,7 +187,7 @@ export function main() {
              .then((fixture) => {
                (<MyComp>fixture.debugElement.componentInstance).ctxBoolProp = true;
                fixture.detectChanges();
-               var el = getRenderElement(fixture.debugElement.elementRef);
+               var el = getRenderElement(fixture.elementRef);
                expect(DOM.getInnerHTML(el)).toContain('"ng-reflect-ng-if": "true"');
                async.done();
              });
@@ -199,7 +202,7 @@ export function main() {
              .createAsync(MyComp)
              .then((fixture) => {
 
-               var rootEl = getRenderElement(fixture.debugElement.elementRef);
+               var rootEl = getRenderElement(fixture.elementRef);
                expect(rootEl).toHaveText('');
 
                fixture.debugElement.componentInstance.ctxBoolProp = true;
@@ -220,7 +223,9 @@ export function main() {
            tcb.overrideView(MyComp, new ViewMetadata({template: '<input [title]="y">'}))
                .createAsync(MyComp)
                .then((fixture) => {
-                 var elRef = fixture.debugElement.componentViewChildren[0].elementRef;
+                 var elRef = (<ElementRef_>fixture.elementRef)
+                                 .internalElement.componentView.appElements[0]
+                                 .ref;
                  getRenderer(elRef)
                      .invokeElementMethod(elRef.nativeElement, 'setAttribute', ['a', 'b']);
 
@@ -235,7 +240,9 @@ export function main() {
                             new ViewMetadata({template: '<input (change)="ctxNumProp = 1">'}))
                .createAsync(MyComp)
                .then((fixture) => {
-                 var elRef = fixture.debugElement.componentViewChildren[0].elementRef;
+                 var elRef = (<ElementRef_>fixture.elementRef)
+                                 .internalElement.componentView.appElements[0]
+                                 .ref;
                  dispatchEvent(getRenderElement(elRef), 'change');
                  expect(fixture.componentInstance.ctxNumProp).toBe(1);
 

modules/angular2_material/test/button_spec.ts

@@ -12,9 +12,8 @@ import {
   it,
   xit,
 } from 'angular2/testing_internal';
-import {DebugElement} from 'angular2/src/core/debug/debug_element';
 
-import {Component, View, ViewMetadata, bind, provide} from 'angular2/core';
+import {Component, View, ViewMetadata, bind, provide, DebugElement} from 'angular2/core';
 import {UrlResolver} from 'angular2/compiler';
 
 import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
@@ -110,7 +109,8 @@ export function main() {
 
 /** Gets a child DebugElement by tag name. */
 function getChildDebugElement(parent: DebugElement, tagName: string): DebugElement {
-  return parent.query(debugEl => debugEl.nativeElement.tagName.toLowerCase() == tagName);
+  var el = parent.query(debugEl => debugEl.nativeNode.tagName.toLowerCase() == tagName);
+  return <DebugElement>el;
 }
 
 /** Test component that contains an MdButton. */

tools/public_api_guard/public_api_spec.ts

@@ -119,17 +119,20 @@ const CORE = [
   'CyclicDependencyError.constructor(injector:Injector, key:Key)',
   'DebugElement',
   'DebugElement.children:DebugElement[]',
-  'DebugElement.componentInstance:any',
-  'DebugElement.componentViewChildren:DebugElement[]',
-  'DebugElement.elementRef:ElementRef',
-  'DebugElement.getDirectiveInstance(directiveIndex:number):any',
-  'DebugElement.getLocal(name:string):any',
-  'DebugElement.hasDirective(type:Type):boolean',
-  'DebugElement.inject(type:Type):any',
   'DebugElement.nativeElement:any',
-  'DebugElement.query(predicate:Predicate<DebugElement>, scope:Function):DebugElement',
+  'DebugElement.addChild(child:DebugNode):any',
-  'DebugElement.queryAll(predicate:Predicate<DebugElement>, scope:Function):DebugElement[]',
+  'DebugElement.attributes:Map<string, any>',
-  'DebugElement.triggerEventHandler(eventName:string, eventObj:Event):void',
+  'DebugElement.childNodes:DebugNode[]',
+  'DebugElement.constructor(nativeNode:any, parent:any)',
+  'DebugElement.insertChildrenAfter(child:DebugNode, newChildren:DebugNode[]):any',
+  'DebugElement.name:string',
+  'DebugElement.properties:Map<string, any>',
+  'DebugElement.query(predicate:Predicate<DebugElement>):DebugElement',
+  'DebugElement.queryAll(predicate:Predicate<DebugElement>):DebugElement[]',
+  'DebugElement.queryAllNodes(predicate:Predicate<DebugNode>):DebugNode[]',
+  'DebugElement.removeChild(child:DebugNode):any',
+  'DebugElement.triggerEventHandler(eventName:string, eventObj:Event):any',
+  'asNativeElements(debugEls:DebugElement[]):any',
   'Dependency',
   'Dependency.constructor(key:Key, optional:boolean, lowerBoundVisibility:any, upperBoundVisibility:any, properties:any[])',
   'Dependency.fromKey(key:Key):Dependency',
@@ -389,6 +392,7 @@ const CORE = [
   'Renderer.setElementProperty(renderElement:any, propertyName:string, propertyValue:any):any',
   'Renderer.setElementStyle(renderElement:any, styleName:string, styleValue:string):any',
   'Renderer.setText(renderNode:any, text:string):any',
+  'Renderer.setElementDebugInfo(renderElement:any, info:RenderDebugInfo):any',
   'ResolvedBinding',
   'ResolvedFactory',
   'ResolvedFactory.constructor(factory:Function, dependencies:Dependency[])',
@@ -398,10 +402,6 @@ const CORE = [
   'ResolvedProvider.resolvedFactories:ResolvedFactory[]',
   'RootRenderer',
   'RootRenderer.renderComponent(componentType:RenderComponentType):Renderer',
-  'Scope',
-  'Scope.all(debugElement:DebugElement):DebugElement[]',
-  'Scope.light(debugElement:DebugElement):DebugElement[]',
-  'Scope.view(debugElement:DebugElement):DebugElement[]',
   'SelfFactory',
   'SelfMetadata',
   'SelfMetadata.toString():string',
@@ -489,7 +489,6 @@ const CORE = [
   'WrappedValue.constructor(wrapped:any)',
   'WrappedValue.wrap(value:any):WrappedValue',
   'ZeroArgFunction',
-  'asNativeElements(arr:DebugElement[]):any[]',
   'bind(token:any):ProviderBuilder',
   'const APPLICATION_COMMON_PROVIDERS:Array<Type|Provider|any[]>',
   'const APP_COMPONENT:OpaqueToken',
@@ -503,7 +502,6 @@ const CORE = [
   'createNgZone():NgZone',
   'enableProdMode():any',
   'forwardRef(forwardRefFn:ForwardRefFn):Type',
-  'inspectElement(elementRef:ElementRef):DebugElement',
   'platform(providers:Array<Type|Provider|any[]>):PlatformRef',
   'provide(token:any, {useClass,useValue,useExisting,useFactory,deps,multi}:{useClass?:Type, useValue?:any, useExisting?:any, useFactory?:Function, deps?:Object[], multi?:boolean}):Provider',
   'resolveForwardRef(type:any):any',
@@ -1059,11 +1057,11 @@ const BROWSER = [
   'bootstrapStatic(appComponentType:Type, customProviders:Array<any>, initReflector:Function):Promise<ComponentRef>',
   'const BROWSER_APP_PROVIDERS:Array<any>',
   'const BROWSER_PROVIDERS:Array<any>',
-  'const ELEMENT_PROBE_BINDINGS:any',
   'const ELEMENT_PROBE_PROVIDERS:any[]',
+  'const ELEMENT_PROBE_PROVIDERS_PROD_MODE:any[]',
   'disableDebugTools():void',
   'enableDebugTools(ref:ComponentRef):void',
-  'inspectNativeElement(element:any):DebugElement'
+  'inspectNativeElement(element:any):DebugNode'
 ];
 
 describe('public API', () => {