Add simple hint api

css/app.css

@@ -171,8 +171,8 @@ div.buttons-joined {
 }
 
 #bar button.active:not([disabled]) {
-    background:#eee;
-    color:#000;
+    background:#7392ff;
+    color:#fff;
 }
 
 #bar button.save {
@@ -216,13 +216,18 @@ div.buttons-joined {
 }
 
 .inspector-wrap {
+    border-radius:3px;
+    border:1px solid #ccc;
     position:absolute;
-    top:45px;
-    right:0px;
+    top:50px;
+    left:50%;
+    margin-left:-175px;
     overflow:auto;
     padding:10px;
     background:#fff;
     width:350px;
+    opacity:0;
+    display:none;
 }
 
 .inspector-wrap a.permalink {

js/id/modes/add_area.js

@@ -6,6 +6,7 @@ iD.modes.AddArea = function() {
 
     mode.enter = function() {
         mode.map.dblclickEnable(false);
+        mode.map.hint('Click on the map to start drawing an area, like a park, lake, or building.');
 
         mode.map.surface.on('click.addarea', function() {
             var datum = d3.select(d3.event.target).datum() || {},
@@ -34,6 +35,7 @@ iD.modes.AddArea = function() {
         window.setTimeout(function() {
             mode.map.dblclickEnable(true);
         }, 1000);
+        mode.map.hint(false);
         mode.map.surface.on('click.addarea', null);
         mode.map.keybinding().on('⎋.addarea', null);
     };

js/id/modes/add_place.js

@@ -5,6 +5,8 @@ iD.modes.AddPlace = function() {
     };
 
     mode.enter = function() {
+        mode.map.hint('Click on the map to add a place.');
+
         mode.map.surface.on('click.addplace', function() {
             var node = iD.Node({loc: mode.map.mouseCoordinates(), _poi: true});
             mode.history.perform(iD.actions.addNode(node));
@@ -17,6 +19,7 @@ iD.modes.AddPlace = function() {
     };
 
     mode.exit = function() {
+        mode.map.hint(false);
         mode.map.surface.on('click.addplace', null);
         mode.map.keybinding().on('⎋.addplace', null);
     };

js/id/modes/add_road.js

@@ -7,6 +7,8 @@ iD.modes.AddRoad = function() {
     mode.enter = function() {
         mode.map.dblclickEnable(false);
 
+        mode.map.hint('Click on the map to start drawing an road, path, or route.');
+
         mode.map.surface.on('click.addroad', function() {
             var datum = d3.select(d3.event.target).datum() || {},
                 node,
@@ -57,6 +59,7 @@ iD.modes.AddRoad = function() {
 
     mode.exit = function() {
         mode.map.dblclickEnable(true);
+        mode.map.hint(false);
         mode.map.surface.on('click.addroad', null);
         mode.map.keybinding().on('⎋.addroad', null);
     };

js/id/modes/draw_area.js

@@ -2,6 +2,9 @@ iD.modes.DrawArea = function(way_id) {
     var mode = {};
 
     mode.enter = function() {
+
+        mode.map.hint('Click on the map to add points to your area. Finish the ' +
+                      'area by clicking on your first point');
         mode.map.dblclickEnable(false);
 
         var way = mode.history.graph().entity(way_id),
@@ -47,6 +50,7 @@ iD.modes.DrawArea = function(way_id) {
     };
 
     mode.exit = function() {
+        mode.map.hint(false);
         mode.map.surface
             .on('mousemove.drawarea', null)
             .on('click.drawarea', null);

js/id/modes/draw_road.js

@@ -3,6 +3,9 @@ iD.modes.DrawRoad = function(way_id, direction) {
 
     mode.enter = function() {
         mode.map.dblclickEnable(false);
+        mode.map.hint('Click to add more points to the road. ' +
+                      'Click on other roads to connect to them, and double-click to ' +
+                      'end the road.');
         mode.map.dragEnable(false);
 
         var index = (direction === 'forward') ? undefined : -1,
@@ -64,6 +67,7 @@ iD.modes.DrawRoad = function(way_id, direction) {
     };
 
     mode.exit = function() {
+        mode.map.hint(false);
         mode.map.surface
             .on('mousemove.drawroad', null)
             .on('click.drawroad', null);

js/id/renderer/map.js

@@ -419,6 +419,20 @@ iD.Map = function() {
         return map;
     };
 
+    map.hint = function (_) {
+        if (_ === false) {
+            d3.select('div.inspector-wrap')
+                .style('opacity', 0)
+                .style('display', 'none');
+        } else {
+            d3.select('div.inspector-wrap')
+                .style('display', 'block')
+                .transition()
+                .style('opacity', 1)
+                .text(_);
+        }
+    };
+
     map.history = function (_) {
         if (!arguments.length) return history;
         history = _;