refactor(render): cleanup access to native dom elements

BREAKING CHANGES:
- rename `ElementRef.domElement` to `ElementRef.nativeElement`
- add `Renderer.getNativeElementSync` to make the app side
  less dependent on the dom renderer.
- don’t use `ElementRef.nativeElement` in directives but
  use the methods on `Renderer` directly.
- Removed `ElementRef.setAttribute`. Use `Renderer.setElementAttribute` instead.

Closes #2712
Last part of #2476
Closes #2476

modules/angular2/src/debug/debug_element.ts

@@ -8,8 +8,6 @@ import {AppView} from 'angular2/src/core/compiler/view';
 import {internalView} from 'angular2/src/core/compiler/view_ref';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 
-import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
-
 /**
  * @exportedAs angular2/test
  *
@@ -35,13 +33,9 @@ export class DebugElement {
     return this._elementInjector.getComponent();
   }
 
-  get domElement(): any {
-    return resolveInternalDomView(this._parentView.render)
-        .boundElements[this._boundElementIndex]
-        .element;
-  }
+  get nativeElement(): any { return this.elementRef.nativeElement; }
 
-  get elementRef(): ElementRef { return this._elementInjector.getElementRef(); }
+  get elementRef(): ElementRef { return this._parentView.elementRefs[this._boundElementIndex]; }
 
   getDirectiveInstance(directiveIndex: number): any {
     return this._elementInjector.getDirectiveAtIndex(directiveIndex);
@@ -192,7 +186,7 @@ export class By {
   static all(): Function { return (debugElement) => true; }
 
   static css(selector: string): Function {
-    return (debugElement) => { return DOM.elementMatches(debugElement.domElement, selector); };
+    return (debugElement) => { return DOM.elementMatches(debugElement.nativeElement, selector); };
   }
   static directive(type: Type): Function {
     return (debugElement) => { return debugElement.hasDirective(type); };

modules/angular2/src/debug/debug_element_view_listener.ts

@@ -10,7 +10,7 @@ import {Injectable, bind, Binding} from 'angular2/di';
 import {AppViewListener} from 'angular2/src/core/compiler/view_listener';
 import {AppView} from 'angular2/src/core/compiler/view';
 import {DOM} from 'angular2/src/dom/dom_adapter';
-import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
+import {Renderer} from 'angular2/src/render/api';
 import {DebugElement} from './debug_element';
 
 const NG_ID_PROPERTY = 'ngid';
@@ -41,7 +41,7 @@ function _getElementId(element): List<number> {
   }
 }
 
-export function inspectDomElement(element): DebugElement {
+export function inspectNativeElement(element): DebugElement {
   var elId = _getElementId(element);
   if (isPresent(elId)) {
     var view = _allViewsById.get(elId[0]);
@@ -54,15 +54,16 @@ export function inspectDomElement(element): DebugElement {
 
 @Injectable()
 export class DebugElementViewListener implements AppViewListener {
-  constructor() { DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectDomElement); }
+  constructor(private _renderer: Renderer) {
+    DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
+  }
 
   viewCreated(view: AppView) {
     var viewId = _nextId++;
     _allViewsById.set(viewId, view);
     _allIdsByView.set(view, viewId);
-    var renderView = resolveInternalDomView(view.render);
-    for (var i = 0; i < renderView.boundElements.length; i++) {
-      _setElementId(renderView.boundElements[i].element, [viewId, i]);
+    for (var i = 0; i < view.elementRefs.length; i++) {
+      _setElementId(this._renderer.getNativeElementSync(view.elementRefs[i]), [viewId, i]);
     }
   }