More debug versatility

css/app.css

@@ -2356,7 +2356,6 @@ img.tile-removing {
     z-index: 10;
 }
 
-.bbox,
 .map-in-map-bbox {
     fill: none;
     stroke: rgba(255, 255, 0, 0.75);
@@ -2368,6 +2367,25 @@ img.tile-removing {
     stroke-width: 5;
 }
 
+
+/* Debug
+------------------------------------------------------- */
+.debug {
+    fill: none;
+    stroke-width: 2;
+    shape-rendering: crispEdges;
+}
+.red     { stroke: rgba(255, 0, 0, 0.75); }
+.green   { stroke: rgba(0, 255, 0, 0.75); }
+.blue    { stroke: rgba(0, 0, 255, 0.75); }
+.yellow  { stroke: rgba(255, 255, 0, 0.75); }
+.cyan    { stroke: rgba(0, 255, 255, 0.75); }
+.magenta { stroke: rgba(255, 0, 255, 0.75); }
+.orange  { stroke: rgba(255, 153, 0, 0.75); }
+.pink    { stroke: rgba(255, 0, 153, 0.75); }
+.purple  { stroke: rgba(153, 0, 255, 0.75); }
+
+
 /* Info Box
 ------------------------------------------------------- */
 .infobox {

js/id/id.js

@@ -216,18 +216,24 @@ window.iD = function () {
 
 
     /* Debug */
-    var debugTile = false, debugCollision = false;
-    context.debugTile = function(_) {
-        if (!arguments.length) return debugTile;
-        debugTile = _;
+    var debugFlags = {
+        tile: false,
+        collision: false,
+        imagery: false,
+        imperial: false,
+        driveLeft: false
+    };
+    context.debugFlags = function() {
+        return debugFlags;
+    };
+    context.setDebug = function(flag, val) {
+        if (arguments.length === 1) val = true;
+        debugFlags[flag] = val;
         dispatch.change();
         return context;
     };
-    context.debugCollision = function(_) {
-        if (!arguments.length) return debugCollision;
-        debugCollision = _;
-        dispatch.change();
-        return context;
+    context.getDebug = function(flag) {
+        return flag && debugFlags[flag];
     };
 
 

js/id/renderer/tile_layer.js

@@ -78,7 +78,7 @@ iD.TileLayer = function(context) {
     // rentered when tiles load/error (see #644).
     function render(selection) {
         var requests = [];
-        var showDebug = context.debugTile() && !source.overlay;
+        var showDebug = context.getDebug('tile') && !source.overlay;
 
         if (source.validZoom(z)) {
             tile().forEach(function(d) {

js/id/svg/labels.js

@@ -425,7 +425,7 @@ iD.svg.Labels = function(projection, context) {
         drawAreaIcons(label, labelled.area, filter, 'arealabel-icon', positions.area);
 
         // debug
-        var showDebug = context.debugCollision();
+        var showDebug = context.getDebug('collision');
         var debug = label.selectAll('.layer-label-debug')
             .data(showDebug ? [true] : []);
 
@@ -447,11 +447,11 @@ iD.svg.Labels = function(projection, context) {
                 ]]};
             });
 
-            var debugboxes = debug.selectAll('.bbox').data(gj);
+            var debugboxes = debug.selectAll('.debug').data(gj);
 
             debugboxes.enter()
                 .append('path')
-                .attr('class', 'bbox');
+                .attr('class', 'debug yellow');
 
             debugboxes.exit()
                 .remove();

test/spec/id.js

@@ -100,4 +100,29 @@ describe('iD', function() {
             expect(context.presets().match(way, graph).id).to.eql('mines');
         });
     });
+
+    describe('#debug', function() {
+        it('sets and gets debug flags', function() {
+            var context = iD(),
+                flags = {
+                    tile: false,
+                    collision: false,
+                    imagery: false,
+                    imperial: false,
+                    driveLeft: false
+                };
+
+            expect(context.debugFlags()).to.eql(flags);
+
+            context.setDebug('tile', true);
+            expect(context.getDebug('tile')).to.be.true;
+
+            context.setDebug('collision');
+            expect(context.getDebug('collision')).to.be.true;
+
+            context.setDebug('tile', false);
+            expect(context.getDebug('tile')).to.be.false;
+        });
+    });
+
 });