Update conflict ux per updated design.

app/views/inspector.js

 /*
 This file is part of the Juju GUI, which lets users view and manage Juju
 environments within a graphical interface (https://launchpad.net/juju-gui).
 Copyright (C) 2012-2013 Canonical Ltd.
 
 This program is free software: you can redistribute it and/or modify it under
 the terms of the GNU Affero General Public License version 3, as published by
 the Free Software Foundation.
 
 This program is distributed in the hope that it will be useful, but WITHOUT
@@ skipping 1070 matching lines @@
      *
      * Marking checkboxes in the UI is done a little differently and requires
      * condition checking in these helpers.
      *
      * @method _clearModified
      * @param {Y.Node} node of the input to clear.
      *
      */
     '_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();
         }
 
         // If the value isn't modified it can't be in conflict.
         this._clearConflictPending(node);
       } else {
         node.removeClass('modified');
       }
     },
 
     /**
      * Mark the given node to not be marked as 'modified' in the UX.
      *
      * @method _markModified
      * @param {Y.Node} node of the input to mark.
      *
      */
     '_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 {
         node.addClass('modified');
       }
     },
 
     /**
      * Reset the given node to not be marked as 'conflict-pending' in the UX.
      *
      * Marking checkboxes in the UI is done a little differently and requires
      * condition checking in these helpers.
      *
      * @method _clearConflictPending
      * @param {Y.Node} node of the input to clear.
      *
      */
     '_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();
         }
       } else {
         node.removeClass('conflict-pending');
       }
     },
 
     /**
      * Mark the given node to not be marked as 'conflict-pending' in the UX.
      *
      * Marking checkboxes in the UI is done a little differently and requires
      * condition checking in these helpers.
      *
      * @method _makeConflictPending
      * @param {Y.Node} node of the input to mark.
      *
      */
     '_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');
       }
     },
 
     /**
      * Reset the given node to not be marked as 'conflict' in the UX.
      *
      * Marking checkboxes in the UI is done a little differently and requires
@@ skipping 17 matching lines @@
      *
      * @method _makeConflict
      * @param {Y.Node} node of the input to mark.
      *
      */
     '_makeConflict': function(node) {
       node.addClass('conflict');
     },
 
     '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);
         controls.removeClass('closed');
       } else {
         this._clearModified(node);
         // Databinding calls syncedFields if there are no more changed
         // values, and that method is responsible for closing the controls.
       }
     },
 
     '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 = [];
 
       /**
        User selects one of the two conflicting values.
        @method sendResolve
        */
       function sendResolve(e) {
         e.halt(true);
         var formValue = field.get(node);
         handlers.forEach(function(h) { h.detach();});
 
         /* jshint -W040 */
         // Ignore 'possible strict violation'
         this._clearModified(node);
         this._clearConflict(node);
 
-        resolver.addClass('hidden');
+        if (resolver) {
+          resolver.addClass('hidden');
+        }
 
         if (e.currentTarget.hasClass('conflicted-env')) {
           resolve(modelValue);
         } else {
           resolve(formValue);
         }
       }
 
       /**
        User selects a conflicting field, show the resolution UI
 
        @method setupResolver
       */
       function setupResolver(e) {
         e.halt(true);
         /* jshint -W040 */
         // 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.
       this._clearModified(node);
       this._makeConflictPending(node);
 
       handlers.push(wrapper.delegate(
           'click',
           setupResolver,
           '.conflict-pending',
@@ skipping 126 matching lines @@
     'viewlet-charm-details',
     'viewlet-inspector-header',
     'viewlet-inspector-overview',
     'viewlet-service-config',
     'viewlet-service-constraints',
     'viewlet-service-ghost',
     'viewlet-unit-details'
   ]
 });