feat(debug): collect styles and classes for the DebugElement

modules/@angular/core/src/debug/debug_node.ts

@@ -56,6 +56,8 @@ export class DebugElement extends DebugNode {
   name: string;
   properties: {[key: string]: any};
   attributes: {[key: string]: string};
+  classes: {[key: string]: boolean};
+  styles: {[key: string]: string};
   childNodes: DebugNode[];
   nativeElement: any;
 
@@ -63,6 +65,8 @@ export class DebugElement extends DebugNode {
     super(nativeNode, parent, _debugInfo);
     this.properties = {};
     this.attributes = {};
+    this.classes = {};
+    this.styles = {};
     this.childNodes = [];
     this.nativeElement = nativeNode;
   }

modules/@angular/core/src/debug/debug_renderer.ts

@@ -9,6 +9,8 @@ import {
   removeDebugNodeFromIndex
 } from './debug_node';
 
+import {StringMapWrapper} from '../../src/facade/collection';
+
 import {AnimationKeyframe} from '../animation/animation_keyframe';
 import {AnimationStyles} from '../animation/animation_styles';
 import {AnimationPlayer} from '../animation/animation_player';
@@ -125,14 +127,29 @@ export class DebugDomRenderer implements Renderer {
   }
 
   setElementClass(renderElement: any, className: string, isAdd: boolean) {
+    var debugEl = getDebugNode(renderElement);
+    if (isPresent(debugEl) && debugEl instanceof DebugElement) {
+      debugEl.classes[className] = isAdd;
+    }
     this._delegate.setElementClass(renderElement, className, isAdd);
   }
 
   setElementStyles(renderElement: any, styles: {[key: string]: string}) {
+    var debugEl = getDebugNode(renderElement);
+    if (isPresent(debugEl) && debugEl instanceof DebugElement) {
+      var elStyles = debugEl.styles;
+      StringMapWrapper.forEach(styles, (value, prop) => {
+        elStyles[prop] = value;
+      });
+    }
     this._delegate.setElementStyles(renderElement, styles);
   }
 
   setElementStyle(renderElement: any, styleName: string, styleValue: string) {
+    var debugEl = getDebugNode(renderElement);
+    if (isPresent(debugEl) && debugEl instanceof DebugElement) {
+      debugEl.styles[styleName] = styleValue;
+    }
     this._delegate.setElementStyle(renderElement, styleName, styleValue);
   }
 

modules/@angular/core/test/debug/debug_node_spec.ts

@@ -175,11 +175,19 @@ class BankAccount {
 @Component({
   selector: 'test-app',
   template: `
-   <bank-account bank="RBC" account="4747"></bank-account>
+   <bank-account bank="RBC"
+                 account="4747"
+                 [style.width.px]="width"
+                 [style.color]="color"
+                 [class.closed]="isClosed"
+                 [class.open]="!isClosed"></bank-account>
  `,
   directives: [BankAccount]
 })
 class TestApp {
+  width = 200;
+  color = 'red';
+  isClosed = true;
 }
 
 export function main() {
@@ -285,6 +293,30 @@ export function main() {
          });
        }));
 
+    it('should list element classes',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(TestApp).then((fixture) => {
+           fixture.detectChanges();
+           var bankElem = fixture.debugElement.children[0];
+
+           expect(bankElem.classes['closed']).toBe(true);
+           expect(bankElem.classes['open']).toBe(false);
+           async.done();
+         });
+       }));
+
+    it('should list element styles',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.createAsync(TestApp).then((fixture) => {
+           fixture.detectChanges();
+           var bankElem = fixture.debugElement.children[0];
+
+           expect(bankElem.styles['width']).toEqual('200px');
+           expect(bankElem.styles['color']).toEqual('red');
+           async.done();
+         });
+       }));
+
     it('should query child elements by css',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          tcb.createAsync(ParentComp)

tools/public_api_guard/public_api_spec.ts

@@ -171,6 +171,7 @@ const CORE = [
   'DebugElement.attributes:{[key:string]:string}',
   'DebugElement.childNodes:DebugNode[]',
   'DebugElement.children:DebugElement[]',
+  'DebugElement.classes:{[key:string]:boolean}',
   'DebugElement.constructor(nativeNode:any, parent:any, _debugInfo:RenderDebugInfo)',
   'DebugElement.insertChildrenAfter(child:DebugNode, newChildren:DebugNode[]):any',
   'DebugElement.name:string',