Update conflict ux per updated design.

app/views/inspector.js

Index: app/views/inspector.js
=== modified file 'app/views/inspector.js'
--- app/views/inspector.js	2013-09-11 03:13:28 +0000
+++ app/views/inspector.js	2013-09-11 14:41:04 +0000
@@ -1088,7 +1088,7 @@
      */
     '_clearModified': function(node) {
       if (node.getAttribute('type') === 'checkbox') {
-        var n = node.get('parentNode').one('.modified');
+        var n = node.ancestor('.toggle').one('.modified');
         if (n) {
           n.remove();
         }
@@ -1109,7 +1109,7 @@
      */
     '_makeModified': function(node) {
       if (node.getAttribute('type') === 'checkbox') {
-        node.get('parentNode').append(
+        node.ancestor('.toggle').one('label').append(
             Y.Node.create('<span class="modified boolean"/>'));
         this._clearConflictPending(node);
       } else {
@@ -1129,7 +1129,7 @@
      */
     '_clearConflictPending': function(node) {
       if (node.getAttribute('type') === 'checkbox') {
-        var n = node.get('parentNode').one('.conflict-pending');
+        var n = node.ancestor('.toggle').one('.conflict-pending');
         if (n) {
           n.remove();
         }
@@ -1150,7 +1150,7 @@
      */
     '_makeConflictPending': function(node) {
       if (node.getAttribute('type') === 'checkbox') {
-        node.get('parentNode').append(
+        node.get('parentNode').prepend(
             Y.Node.create('<span class="conflict-pending boolean"/>'));
       } else {
         node.addClass('conflict-pending');
@@ -1188,6 +1188,12 @@
     },
 
     'changed': function(node, key, field) {
+      // Not all nodes need to show the conflict ux. This is true when
+      // multiple binds to a single model field are set, such as in pretty
+      // toggle checkbox UI.

[bac, 2013/09/11 18:14:59]

That last phrase doesn't make sense to me.

+      if (node.getData('skipconflictux')) {

[jeff.pihach, 2013/09/11 15:32:53]

This feels like it should be a feature of the databinding and not the viewlet.
I'd move this check into the databinding and not even call the changed method.

[rharding, 2013/09/12 13:11:54]

I'll disagree here. The conflict UX is handled via a mixin and has it's own
tests, etc. It doesn't make sense to me for the html to say "databinding, don't
show conflict stuff". It makes more sense for it to speak directly. 

+        return;
+      }
       var controls = this.container.one('.controls');
       if (this.changedValues[key]) {
         this._makeModified(node);
@@ -1200,16 +1206,25 @@
     },
 
     'conflict': function(node, model, viewletName, resolve, binding) {
+      // Not all nodes need to show the conflict ux. This is true when
+      // multiple binds to a single model field are set, such as in pretty
+      // toggle checkbox UI.
+      if (node.getData('skipconflictux')) {

[jeff.pihach, 2013/09/11 15:32:53]

Same goes for here.

+        return;
+      }
       /**
        Calls the databinding resolve method
        @method sendResolve
       */
+      var option;
       var key = node.getData('bind');
       var modelValue = model.get(key);
       var field = binding.field;
       var wrapper = node.ancestor('.settings-wrapper');
       var resolver = wrapper.one('.resolver');
-      var option = resolver.one('.config-field');
+      if (resolver) {
+        option = resolver.one('.config-field');
+      }
       var handlers = [];
 
       /**
@@ -1226,7 +1241,9 @@
         this._clearModified(node);
         this._clearConflict(node);
 
-        resolver.addClass('hidden');
+        if (resolver) {
+          resolver.addClass('hidden');
+        }
 
         if (e.currentTarget.hasClass('conflicted-env')) {
           resolve(modelValue);
@@ -1246,10 +1263,15 @@
         // Ignore 'possible strict violation'
         this._clearConflictPending(node);
         this._makeConflict(node);
-        this._makeConflict(option);
-        option.setStyle('width', node.get('offsetWidth'));
-        option.setHTML(modelValue);
-        resolver.removeClass('hidden');
+        // Checkboxes don't have the option node to select a value.
+        if (option) {
+          this._makeConflict(option);
+          option.setStyle('width', node.get('offsetWidth'));
+          option.setHTML(modelValue);
+        }
+        if (resolver) {
+          resolver.removeClass('hidden');
+        }
       }
 
       // On conflict just indicate.