inspector lives.

css/app.css

@@ -53,8 +53,10 @@ table {
 table th {
     text-align:left;
 }
-
-
+table td {
+    padding:0;
+    border-spacing:0;
+}
 
 .help-pane {
     position:absolute;
@@ -70,14 +72,6 @@ table th {
     font-style:italic;
 }
 
-#map.state-drawing {
-    cursor: crosshair;
-}
-
-.currentMode {
-    font-weight: bold;
-}
-
 #modebuttons {
     width:600px;
     position:absolute;
@@ -152,44 +146,33 @@ table th {
     border-radius: 0 4px 4px 0;
 }
 
-/* Tag window */
-#tagform input.key {
-    margin-right:10px;
-}
-#tagform input.key,
-#tagform input.value {
-    font: normal 13px/20px 'Helvetica';
-    width:135px;
-}
-
-.inspector {
+.inspector-wrap {
     position:absolute;
-    background:#fff;
+    top:90px;
+    right:20px;
     overflow:auto;
-    top:50px;
-    right:10px;
-    box-shadow:#222 0px 0px 3px;
+    padding:10px;
+    background:#aaa;
 }
 
-.edit-pane a.close {
-    position:absolute;
-    top:5px;
-    right:10px;
-    font-weight:bold;
-    text-decoration:none;
-    font-size:20px;
-    color:#DD4848;
+.inspector thead th {
+    font-size:10px;
+    line-height:10px;
+    color:#eee;
+    font-weight:normal;
+    text-transform:uppercase;
 }
-.edit-pane table {
-    width:290px;
-    margin:5px;
+
+.inspector input {
+    margin:0;
+    padding:2px;
+    border:0;
+    border-bottom:1px solid #ccc;
+    width:150px;
 }
-.edit-pane table th,
-.edit-pane table td {
-    padding:2px 2px;
-}
-.edit-pane table td input {
-    width:140px;
+
+.inspector input.tag-input {
+    box-shadow: inset -2px 0 10px #EEE
 }
 
 .presets h3 {

index.html

@@ -10,6 +10,7 @@
         <script type="text/javascript" src="js/lib/underscore-min.js"></script>
         <script type="text/javascript" src="js/lib/jquery-1.8.2.min.js"></script>
         <script type="text/javascript" src="js/lib/d3.v2.min.js"></script>
+
         <script type="text/javascript" src="js/iD/actions/UndoStack.js"></script>
         <script type="text/javascript" src="js/iD/Util.js"></script>
         <script type="text/javascript" src="js/iD/Taginfo.js"></script>
@@ -49,6 +50,7 @@
         </div>
 
     <div id="map"></div>
+    <div class='inspector-wrap'></div>
     <div id='about'>
         <p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
         <a href='http://github.com/systemed/iD'>code</a>,

js/iD/renderer/Map.js

@@ -36,7 +36,6 @@ iD.renderer.Map = function(obj) {
 
     var defs = surface.append('defs');
 
-    var inspector_elem = d3.select(document.body).append('div');
 
     var clipPath = defs.append('clipPath')
         .attr('id', 'clip')
@@ -134,7 +133,7 @@ iD.renderer.Map = function(obj) {
     function selectClick(d) {
         select(d);
         drawVector();
-        inspector_elem.datum(d).call(iD.Inspector);
+        d3.select('.inspector-wrap').datum(d).call(iD.Inspector);
     }
 
     function nodeline(d) {

js/iD/ui/Inspector.js

@@ -1,25 +1,44 @@
 iD.Inspector = function(selection) {
     var inspector = {};
-    var width = 300,
-        height = 600;
 
+    // http://jsfiddle.net/7WQjr/
     selection.each(function(d, i) {
-        var rows = d3.select(this)
-            .attr('class', 'inspector')
-            .attr('width', width)
-            .attr('height', height)
-            .selectAll('div.row')
-            .data(d3.entries(d.tags));
+        var tagpairs = d3.entries(d.tags);
 
-        rows.exit().remove();
+        d3.select(this).selectAll('table').remove();
 
-        var row = rows.enter().append('div.row').data(function(d) { return d; });
-        row.enter().append('input')
-            .attr('type', 'text')
-            .attr('value', function(d) { return d[0]; });
+        var table = d3.select(this)
+            .append('table')
+            .attr('class', 'inspector');
 
-        row.enter().append('input')
-            .attr('type', 'text')
-            .attr('value', function(d) { return d[1]; });
+        var thead = table.append('thead');
+        var tbody = table.append('tbody');
+
+        thead.append('tr')
+            .selectAll('th')
+            .data(['tag', 'value'])
+            .enter()
+            .append('th')
+                .text(String);
+
+        var row = tbody.selectAll('tr')
+            .data(tagpairs)
+            .enter()
+            .append('tr');
+
+        row.selectAll('td')
+            .data(function(d) {
+                return [d.key, d.value];
+            })
+            .enter()
+            .append('td')
+            .append('input')
+                .attr('class', function(d, i) {
+                    return i === 0 ? 'tag-input' : 'value-input';
+                })
+                .attr('placeholder', function(d, i) {
+                    return i === 0 ? 'tag' : 'value';
+                })
+                .property('value', function(d) { return d; });
     });
 };