Start on commit UI. This pulls together a modal window listing changes.

index.html

@@ -25,6 +25,7 @@
         <script type='text/javascript' src='js/iD/renderer/hash.js'></script>
         <script type='text/javascript' src='js/iD/renderer/markers.js'></script>
         <script type='text/javascript' src='js/iD/ui/Inspector.js'></script>
+        <script type='text/javascript' src='js/iD/ui/commit.js'></script>
 
         <script type='text/javascript' src='js/iD/actions/modes.js'></script>
         <script type='text/javascript' src='js/iD/actions/actions.js'></script>

js/iD/id.js

@@ -11,21 +11,17 @@ var iD = function(container) {
     container = d3.select(container);
 
     var m = container.append('div')
-        .attr('id', 'map');
+            .attr('id', 'map'),
+        connection = iD.Connection()
+            .url('http://api06.dev.openstreetmap.org'),
+        map = iD.Map(m.node(), connection),
+        controller = iD.Controller(map),
+        bar = container.append('div')
+            .attr('id', 'bar');
 
-    var connection = iD.Connection()
-        .url('http://api06.dev.openstreetmap.org');
-
-    var map = iD.Map(m.node(), connection);
-
-    var controller = iD.Controller(map);
-
-    var bar = container.append('div')
-        .attr('id', 'bar');
-
-    var buttons = bar.selectAll('button')
+    var buttons = bar.selectAll('button.add-button')
         .data([iD.modes.AddPlace, iD.modes.AddRoad, iD.modes.AddArea])
-        .enter().append('button')
+        .enter().append('button').attr('class', 'add-button')
         .text(function (mode) { return mode.title; })
         .on('click', function (mode) { controller.enter(mode); });
 
@@ -34,30 +30,26 @@ var iD = function(container) {
     });
 
     bar.append('button')
-        .attr('id', 'undo')
-        .attr('class', 'mini')
+        .attr({ id: 'undo', 'class': 'mini' })
         .property('disabled', true)
         .html('&larr;<small></small>')
         .on('click', map.undo);
 
     bar.append('button')
-        .attr('id', 'redo')
-        .attr('class', 'mini')
+        .attr({ id: 'redo', 'class': 'mini' })
         .property('disabled', true)
         .html('&rarr;<small></small>')
         .on('click', map.redo);
 
     bar.append('input')
-        .attr('type', 'text')
-        .attr('placeholder', 'find a place')
-        .attr('id', 'geocode-location')
+        .attr({ type: 'text', placeholder: 'find a place', id: 'geocode-location' })
         .on('keydown', function () {
             if (d3.event.keyCode !== 13) return;
             d3.event.preventDefault();
             var val = d3.select('#geocode-location').node().value;
-            var scr = document.body.appendChild(document.createElement('script'));
-            scr.src = 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
-                encodeURIComponent(val) + '.jsonp?callback=grid';
+            d3.select(document.body).append('script')
+                .attr('src', 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
+                    encodeURIComponent(val) + '.jsonp?callback=grid');
         });
 
     window.grid = function(resp) {
@@ -77,7 +69,13 @@ var iD = function(container) {
         .html("Save<small id='as-username'></small>")
         .on('click', function() {
             connection.authenticate(function() {
-                map.commit();
+                var shaded = d3.select(document.body)
+                    .append('div').attr('class', 'shaded');
+                var modal = shaded.append('div')
+                    .attr('class', 'modal')
+                    .datum(map.history.changes());
+                modal.call(iD.Commit());
+                // map.commit();
             });
         });
 

js/iD/ui/commit.js

@@ -0,0 +1,32 @@
+iD.Commit = function() {
+    var event = d3.dispatch();
+
+    function commit(selection) {
+        var changes = selection.datum();
+        var header = selection.append('div').attr('class', 'header');
+        var body = selection.append('div').attr('class', 'body');
+
+        header.append('h2').text('Save Changes to OpenStreetMap');
+
+        var section = body.selectAll('div.section')
+            .data(['modify', 'delete', 'create'])
+            .enter()
+            .append('div').attr('class', 'section');
+        section.append('h3').text(String);
+        section.append('ul')
+            .selectAll('li')
+            .data(function(d) {
+                return changes[d];
+            })
+            .enter()
+            .append('li')
+            .text(function(d) {
+                return d.type + iD.Util.friendlyName(d);
+            });
+
+        body.append('button').text('Save');
+        body.append('button').text('Cancel');
+    }
+
+    return d3.rebind(commit, event, 'on');
+};