feat(dom_renderer): add setBindingDebugInfo method

This is used for setting property binding values as attributes
on elements when running in dev mode. This implementation will
also serialize binding information to template placeholder
comment nodes.

Closes #5227

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

@@ -173,7 +173,7 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
   logBindingUpdate(b: BindingTarget, value: any): void {
     if (b.isDirective() || b.isElementProperty()) {
       var elementRef = this.elementRefs[this.elementOffset + b.elementIndex];
-      this.renderer.setElementAttribute(
+      this.renderer.setBindingDebugInfo(
           elementRef, `${REFLECT_PREFIX}${camelCaseToDashCase(b.name)}`, `${value}`);
     }
   }

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

@@ -300,6 +300,9 @@ export abstract class Renderer {
   abstract setElementAttribute(location: RenderElementRef, attributeName: string,
                                attributeValue: string);
 
+  abstract setBindingDebugInfo(location: RenderElementRef, propertyName: string,
+                               propertyValue: string);
+
   /**
    * Sets a (CSS) class on the Element specified via `location`.
    *

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

@@ -1,9 +1,11 @@
 import {Inject, Injectable, OpaqueToken} from 'angular2/src/core/di';
 import {AnimationBuilder} from 'angular2/src/animate/animation_builder';
 
+import {StringMapWrapper} from 'angular2/src/facade/collection';
 import {
   isPresent,
   isBlank,
+  Json,
   RegExpWrapper,
   CONST_EXPR,
   stringify,
@@ -41,11 +43,13 @@ import {
 } from 'angular2/src/core/render/view';
 import {ViewEncapsulation} from 'angular2/src/core/metadata';
 
-// TODO move it once DomAdapter is moved
+// TODO move it once DdomAdapter is moved
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 
 const NAMESPACE_URIS =
     CONST_EXPR({'xlink': 'http://www.w3.org/1999/xlink', 'svg': 'http://www.w3.org/2000/svg'});
+const TEMPLATE_COMMENT_TEXT = 'template bindings={}';
+var TEMPLATE_BINDINGS_EXP = /^template bindings=(.*)$/g;
 
 export abstract class DomRenderer extends Renderer implements NodeFactory<Node> {
   abstract registerComponentTemplate(template: RenderComponentTemplate);
@@ -118,7 +122,7 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
   dehydrateView(viewRef: RenderViewRef) { resolveInternalDomView(viewRef).dehydrate(); }
 
   createTemplateAnchor(attrNameAndValues: string[]): Node {
-    return this.createElement('script', attrNameAndValues);
+    return DOM.createComment(TEMPLATE_COMMENT_TEXT);
   }
   abstract createElement(name: string, attrNameAndValues: string[]): Node;
   abstract mergeElement(existing: Node, attrNameAndValues: string[]);
@@ -145,6 +149,31 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
     }
   }
 
+  /**
+   * Used only in debug mode to serialize property changes to comment nodes,
+   * such as <template> placeholders.
+   */
+  setBindingDebugInfo(location: RenderElementRef, propertyName: string,
+                      propertyValue: string): void {
+    var view: DefaultRenderView<Node> = resolveInternalDomView(location.renderView);
+    var element = view.boundElements[location.boundElementIndex];
+    var dashCasedPropertyName = camelCaseToDashCase(propertyName);
+    if (DOM.isCommentNode(element)) {
+      var existingBindings = RegExpWrapper.firstMatch(
+          TEMPLATE_BINDINGS_EXP, StringWrapper.replaceAll(DOM.getText(element), /\n/g, ''));
+      var parsedBindings = Json.parse(existingBindings[1]);
+      if (isPresent(propertyValue)) {
+        parsedBindings[dashCasedPropertyName] = propertyValue;
+      } else {
+        StringMapWrapper.delete(parsedBindings, dashCasedPropertyName);
+      }
+      DOM.setText(element, StringWrapper.replace(TEMPLATE_COMMENT_TEXT, '{}',
+                                                 Json.stringify(parsedBindings)));
+    } else {
+      this.setElementAttribute(location, propertyName, propertyValue);
+    }
+  }
+
   setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void {
     var view = resolveInternalDomView(location.renderView);
     var element = view.boundElements[location.boundElementIndex];

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

@@ -58,6 +58,8 @@ export class MessageBasedRenderer {
                           bind(this._renderer.setElementProperty, this._renderer));
     broker.registerMethod("setElementAttribute", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
                           bind(this._renderer.setElementAttribute, this._renderer));
+    broker.registerMethod("setBindingDebugInfo", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
+                          bind(this._renderer.setBindingDebugInfo, this._renderer));
     broker.registerMethod("setElementClass", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
                           bind(this._renderer.setElementClass, this._renderer));
     broker.registerMethod("setElementStyle", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],

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

@@ -196,6 +196,17 @@ export class WebWorkerRenderer implements Renderer {
     this._messageBroker.runOnService(args, null);
   }
 
+  setBindingDebugInfo(location: RenderElementRef, propertyName: string,
+                      propertyValue: string): void {
+    var fnArgs = [
+      new FnArg(location, WebWorkerElementRef),
+      new FnArg(propertyName, null),
+      new FnArg(propertyValue, null)
+    ];
+    var args = new UiArguments("setBindingDebugInfo", fnArgs);
+    this._messageBroker.runOnService(args, null);
+  }
+
   /**
    * Sets a class on an element.
    */