From c0693168664eb2c708007235d5fdf642f752e0b6 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 29 Aug 2019 16:19:42 -0700
Subject: [PATCH] Debug configurability

---
 core/renderers/common/block_rendering.js |  2 ++
 core/renderers/common/debugger.js        | 28 ++++++++++++++++---
 core/renderers/common/drawer.js          |  5 ++--
 tests/playground.html                    | 35 ++----------------------
 4 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/core/renderers/common/block_rendering.js b/core/renderers/common/block_rendering.js
index 568c717be..fa07e66e7 100644
--- a/core/renderers/common/block_rendering.js
+++ b/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
diff --git a/core/renderers/common/debugger.js b/core/renderers/common/debugger.js
index 5c829ff2b..e527b39bb 100644
--- a/core/renderers/common/debugger.js
+++ b/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();
 
diff --git a/core/renderers/common/drawer.js b/core/renderers/common/drawer.js
index c61b4fa43..a49f811cf 100644
--- a/core/renderers/common/drawer.js
+++ b/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_();
 };
 
diff --git a/tests/playground.html b/tests/playground.html
index c62630375..c8e62cb56 100644
--- a/tests/playground.html
+++ b/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()">