Debug configurability

core/renderers/common/block_rendering.js

@@ -46,6 +46,8 @@ goog.require('Blockly.zelos.ConstantProvider');
 // TODO (#2702): Pick an API for choosing a renderer.
 Blockly.blockRendering.rendererName = 'geras';
 
+Blockly.blockRendering.useDebugger = false;
+
 /**
  * Initialize anything needed for rendering (constants, etc).
  * @package

core/renderers/common/debugger.js

@@ -58,7 +58,11 @@ Blockly.blockRendering.Debug = function() {
    * @type {Object} Configuration object containing booleans to enable and
    *     disable debug rendering of specific rendering components.
    */
-  this.config_ = {
+  this.config_ = Blockly.blockRendering.Debug.getDebugConfig();
+};
+
+Blockly.blockRendering.Debug.getDebugConfig = function() {
+  return {
     rowSpacers: true,
     elemSpacers: true,
     rows: true,
@@ -68,7 +72,6 @@ Blockly.blockRendering.Debug = function() {
   };
 };
 
-
 /**
  * Remove all elements the this object created on the last pass.
  * @package
@@ -100,6 +103,10 @@ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, is
         'y': cursorY,
         'width': row.width,
         'height': row.height,
+        'stroke': 'blue',
+        'fill': 'blue',
+        'fill-opacity': '0.5',
+        'stroke-width': '1px'
       },
       this.svgRoot_));
 };
@@ -129,6 +136,10 @@ Blockly.blockRendering.Debug.prototype.drawSpacerElem = function(elem, rowHeight
         'y': yPos,
         'width': elem.width,
         'height': debugRenderedHeight,
+        'stroke': 'pink',
+        'fill': 'pink',
+        'fill-opacity': '0.5',
+        'stroke-width': '1px'
       },
       this.svgRoot_));
 };
@@ -156,6 +167,9 @@ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl)
         'y': yPos,
         'width': elem.width,
         'height': elem.height,
+        'stroke': 'black',
+        'fill': 'none',
+        'stroke-width': '1px'
       },
       this.svgRoot_));
 
@@ -227,6 +241,9 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY,
         'y': cursorY,
         'width': row.width,
         'height': row.height,
+        'stroke': 'red',
+        'fill': 'none',
+        'stroke-width': '1px'
       },
       this.svgRoot_));
 
@@ -235,7 +252,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY,
   }
   this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
       {
-        'class': 'blockRenderDebug',
+        'class': 'connectedBlockWidth blockRenderDebug',
         'x': isRtl ? -(row.xPos + row.widthWithConnectedBlocks) : row.xPos,
         'y': cursorY,
         'width': row.widthWithConnectedBlocks,
@@ -288,6 +305,10 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) {
         'y': yPos,
         'width': info.width,
         'height': info.height,
+        'stroke': 'black',
+        'fill': 'none',
+        'stroke-width': '1px',
+        'stroke-dasharray': '5,5'
       },
       this.svgRoot_));
 
@@ -316,7 +337,6 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) {
  * @package
  */
 Blockly.blockRendering.Debug.prototype.drawDebug = function(block, info) {
-  this.config_.rowSpacers = false;
   this.clearElems();
   this.svgRoot_ = block.getSvgRoot();
 

core/renderers/common/drawer.js

@@ -73,8 +73,9 @@ Blockly.blockRendering.Drawer.prototype.draw = function() {
   this.pathObject_.inlineSteps = [this.inlinePath_];
 
   this.block_.setPaths_(this.pathObject_);
-  // Uncomment to enable debug rendering.
-  // this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
+  if (Blockly.blockRendering.useDebugger) {
+    this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
+  }
   this.recordSizeOnBlock_();
 };
 

tests/playground.html

@@ -340,8 +340,10 @@ function toggleRenderingDebug(state) {
   }
   if (state) {
     document.getElementById('blocklyDiv').className = 'renderingDebug';
+    Blockly.blockRendering.useDebugger = true;
   } else {
     document.getElementById('blocklyDiv').className = '';
+    Blockly.blockRendering.useDebugger = false;
   }
 }
 
@@ -446,39 +448,6 @@ h1 {
   display: none;
 }
 
-.rowRenderingRect {
-  stroke: black;
-  fill: none;
-  stroke-width: 1px;
-}
-
-.elemRenderingRect {
-  stroke: red;
-  fill: none;
-  stroke-width: 1px;
-}
-
-.rowSpacerRect {
-  stroke: blue;
-  fill-opacity: 0.5;
-  fill: blue;
-  stroke-width: 1px;
-}
-
-.elemSpacerRect {
-  stroke: pink;
-  fill-opacity: 0.5;
-  fill: pink;
-  stroke-width: 1px;
-}
-
-.blockBoundingBox {
-  stroke: black;
-  stroke-dasharray: 5,5;
-  fill: none;
-  stroke-width: 1px;
-}
-
 </style>
 </head>
 <body onload="start()">