Add save indicator. Needs design pass.

css/app.css

@@ -293,6 +293,10 @@ button.save {
     background-color: #6bc641;
 }
 
+button.save[disabled] {
+    background-color: #92BB7F;
+}
+
 button.save:hover {
     background-color: #59ac33;
 }

js/id/id.js

@@ -107,10 +107,11 @@ window.iD = function(container) {
             .append('div')
                 .attr('class', 'hello');
 
-        bar.append('button')
+        var save_button = bar.append('button')
             .attr('class', 'save action wide')
             .html("<span class='icon icon-pre-text save'></span><span class='label'>Save</span><small id='as-username'></small>")
             .attr('title', 'Save changes to OpenStreetMap, making them visible to other users')
+            .property('disabled', true)
             .call(bootstrap.tooltip()
                 .placement('bottom'))
             .on('click', function() {
@@ -146,6 +147,17 @@ window.iD = function(container) {
                 }
             });
 
+        save_button.append('span').attr('class', 'count');
+
+        history.on('change.save-button', function() {
+            var changes = history.changes(),
+                num_changes = d3.sum(d3.values(changes).map(function(c) {
+                    return c.length;
+                }));
+            save_button.property('disabled', num_changes === 0);
+            save_button.select('span.count').text(num_changes === 0 ? '' : num_changes);
+        });
+
         bar.append('div')
             .attr('class', 'messages');
 

js/id/oauth.js

@@ -66,6 +66,10 @@ iD.OAuth = function() {
 
         var l = iD.loading('contacting openstreetmap...');
 
+        // it would make more sense to have this code within the callback
+        // to oauth.xhr below. however, it needs to be directly within a
+        // browser event handler in order to open a popup without it being
+        // blocked.
         var w = 600, h = 550,
             settings = [
                 ['width', w], ['height', h],