Animated inspector entry. Fixes #250, refs #287

css/app.css

@@ -399,10 +399,15 @@ button.Browse .label {
 
 .inspector-inner {
     padding: 10px;
+    min-width:400px;
 }
 
 .inspector-inner.head {
     border-bottom: 1px solid #ccc;
+    background:#fff;
+    height:80px;
+    z-index:99;
+    position:relative;
 }
 
 .inspector-wrap a.permalink {
@@ -415,6 +420,19 @@ button.Browse .label {
     overflow: auto;
 }
 
+.inspector-toggle {
+    padding:10px;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
+    text-align:center;
+    color:#fff;
+    cursor:pointer;
+    background:#7092ff;
+}
+
+.inspector-body {
+    position:relative;
+}
+
 .tag-row {
     width: 100%;
     padding-right: 70px;

js/id/ui/inspector.js

@@ -177,20 +177,40 @@ iD.Inspector = function() {
                 });
 
             selection.append('div')
-                .attr('class', 'head inspector-inner').call(drawhead);
+                .attr('class', 'head inspector-inner')
+                .call(drawhead);
 
-            var inspectorwrap = selection
+            var inspectorbody = selection.append('div')
+                .attr('class', 'inspector-body');
+
+            var inspectorwrap = inspectorbody
                 .append('ul').attr('class', 'inspector-inner tag-wrap fillL2');
 
             inspectorwrap.append('h4').text('Edit tags');
 
             var formsel = draw(inspectorwrap);
 
-            formsel.select('input').node().focus();
-
-            selection.append('div')
+            inspectorbody.append('div')
                 .attr('class', 'inspector-buttons').call(drawbuttons);
 
+            var inHeight = inspectorbody.node().offsetHeight;
+
+            inspectorbody.style('display', 'none')
+                .style('margin-top', (-inHeight) + 'px');
+
+            var inspectortoggle = selection.append('div')
+                .attr('class', 'inspector-toggle')
+                .text('Details')
+                .on('click', function() {
+                    inspectortoggle.style('display', 'none');
+                    inspectorbody
+                        .style('display', 'block')
+                        .transition()
+                        .style('margin-top', '0px');
+                });
+
+            formsel.select('input').node().focus();
+
         });
     }