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 561 matching lines @@
 
       @method _onInitiateDestroy
       @param {Object} evt The event data.
       @return {undefined} Nothing.
     */
     _onInitiateDestroy: function(evt) {
       evt.halt();
       this.closeInspector();
       this.initiateServiceDestroy();
       this.options.environment.topo.fire('clearState');
+    },
+
+    /**
+      Keep checkboxes in sync with their textual representation.
+
+      @method onCheckboxUpdate
+      @param {Y.Event} ev the event from the change triggered.
+
+     */
+    onCheckboxUpdate: function(ev) {
+      var checked = ev.currentTarget.get('checked');
+      ev.currentTarget.ancestor('.toggle').one('.textvalue').set('text',
+                                                                 checked);
     },
 
     /**
       Handles exposing the service.
 
       @method toggleExpose
       @param {Y.EventFacade} e An event object.
       @return {undefined} Nothing.
     */
     toggleExpose: function(e) {
@@ skipping 590 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.
+      // multiple binds to a single model field are set, such as in the
+      // checkbox widgets used in the inspector.
       if (node.getData('skipconflictux')) {
         return;
       }
-      var modelValue = this.model.get(key);
-      var fieldValue = field.get(node);
-      if (modelValue !== fieldValue) {
+      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.
+      // multiple binds to a single model field are set, such as in the
+      // checkbox widgets used in the inspector.
       if (node.getData('skipconflictux')) {
         return;
       }
       /**
        Calls the databinding resolve method
        @method sendResolve
       */
       var option;
+      var viewlet = this;
       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');
       if (resolver) {
         option = resolver.one('.config-field');
       }
       var handlers = [];
 
+      if (binding.annotations.conflict) {
+        binding.annotations.conflict.cancel();
+      }
+
+      binding.annotations.conflict = {
+        /**
+          Cancel this conflict handling UX.
+
+          @method cancel
+        */
+        cancel: function() {
+          handlers.forEach(function(h) { h.detach();});
+          viewlet._clearModified(node);
+          viewlet._clearConflictPending(node);
+          viewlet._clearConflict(node);
+          resolver.addClass('hidden');
+          delete binding.annotations.conflict;
+        }
+      };
       /**
-       User selects one of the two conflicting values.
-       @method sendResolve
+        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);
-
-        if (resolver) {
-          resolver.addClass('hidden');
+        binding.annotations.conflict.cancel();
+        if (e.currentTarget.hasClass('conflicted-env')) {
+          resolve(modelValue);
+        } else {
+          var formValue = field.get(node);
+          resolve(formValue);
         }
-
-        if (e.currentTarget.hasClass('conflicted-env')) {
-          resolve(node, viewletName, modelValue);
-        } else {
-          resolve(node, viewletName, formValue);
-        }
       }
 
       /**
-       User selects a conflicting field, show the resolution UI
-
-       @method setupResolver
+        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);
-        // 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');
-        }
+        viewlet._clearConflictPending(node);
+        viewlet._makeConflict(node);
+        viewlet._makeConflict(option);
+        option.setStyle('width', node.get('offsetWidth'));
+        option.setHTML(modelValue);
+        resolver.removeClass('hidden');
       }
 
       // On conflict just indicate.
       this._clearModified(node);
       this._makeConflictPending(node);
 
       handlers.push(wrapper.delegate(
-          'click',
-          setupResolver,
-          '.conflict-pending',
-          this));
-
-      handlers.push(wrapper.delegate('click', sendResolve,
-          '.conflict', this));
-    },
-    'unsyncedFields': function(dirtyFields) {
+          'click', setupResolver, '.conflict-pending'));
+      handlers.push(wrapper.delegate('click', sendResolve, '.conflict'));
+    },
+
+    'unsyncedFields': function() {
       var node = this.container.one('.controls .confirm');
       if (!node.getData('originalText')) {
         node.setData('originalText', node.getHTML());
       }
       node.setHTML('Overwrite');
     },
+
     'syncedFields': function() {
-      var node = this.container.one('.controls .confirm');
+      var controls = this.container.one('.controls');
+      var node = controls.one('.confirm');
       var title = node.getData('originalText');
+      // For checkboxes remove their modified nodes.
+      this.container.all('.modified.boolean').remove();
+      // All else remove their modified class
       this.container.all('.modified').removeClass('modified');
       if (title) {
         node.setHTML(title);
       }
+      controls.addClass('closed');
     }
   };
 
   // Mixin Conflict Handling.
   viewletNS.config = Y.merge(viewletNS.config, ConflictMixin);
   viewletNS.constraints = Y.merge(viewletNS.constraints, ConflictMixin);
 
 
   /**
     Service Inspector Viewlet Manager Controller
@@ skipping 91 matching lines @@
     'panel',
     'transition',
     'view',
     // Imported viewlets
     'viewlet-charm-details',
     'viewlet-inspector-header',
     'viewlet-inspector-overview',
     'viewlet-service-config',
     'viewlet-service-constraints',
     'viewlet-service-ghost',
-    'viewlet-unit-details'
+    'viewlet-unit-details',
+    'viewlet-service-relations'
   ]
 });