Adding checkboxes for debug rendering options to playground.

2026-03-09 14:50:09 +01:00 · 2019-09-12 17:02:04 -07:00
parent e05e26ab45
commit 02e5b77a20
2 changed files with 131 additions and 68 deletions
--- a/core/renderers/common/debugger.js
+++ b/core/renderers/common/debugger.js
@@ -54,24 +54,20 @@ Blockly.blockRendering.Debug = function() {
   * @type {SVGElement}
   */
  this.svgRoot_ = null;
-
-  /**
-   * @type {Object} Configuration object containing booleans to enable and
-   *     disable debug rendering of specific rendering components.
-   */
-  this.config_ = Blockly.blockRendering.Debug.getDebugConfig();
 };

-Blockly.blockRendering.Debug.getDebugConfig = function() {
-  return {
-    // rowSpacers: true,
-    // elemSpacers: true,
-    // rows: true,
-    elems: true,
-    // connections: true,
-    blockBounds: true,
-    // connectedBlockBounds: true
-  };
+/**
+ * @type {!Object.<string, boolean>} Configuration object containing booleans
+ *    to enable and disable debug rendering of specific rendering components.
+ */
+Blockly.blockRendering.Debug.config = {
+  rowSpacers: true,
+  elemSpacers: true,
+  rows: true,
+  elems: true,
+  connections: true,
+  blockBounds: true,
+  connectedBlockBounds: true
 };

 /**
@@ -94,7 +90,7 @@ Blockly.blockRendering.Debug.prototype.clearElems = function() {
 * @package
 */
 Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, isRtl) {
-  if (!this.config_.rowSpacers) {
+  if (!Blockly.blockRendering.Debug.config.rowSpacers) {
    return;
  }

@@ -121,7 +117,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, is
 * @package
 */
 Blockly.blockRendering.Debug.prototype.drawSpacerElem = function(elem, rowHeight, isRtl) {
-  if (!this.config_.elemSpacers) {
+  if (!Blockly.blockRendering.Debug.config.elemSpacers) {
    return;
  }

@@ -153,7 +149,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerElem = function(elem, rowHeight
 * @package
 */
 Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl) {
-  if (this.config_.elems) {
+  if (Blockly.blockRendering.Debug.config.elems) {
    var xPos = elem.xPos;
    if (isRtl) {
      xPos = -(xPos + elem.width);
@@ -174,7 +170,8 @@ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl)
  }


-  if (Blockly.blockRendering.Types.isInput(elem) && this.config_.connections) {
+  if (Blockly.blockRendering.Types.isInput(elem) &&
+      Blockly.blockRendering.Debug.config.connections) {
    this.drawConnection(elem.connection);
  }
 };
@@ -187,7 +184,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl)
 * @package
 */
 Blockly.blockRendering.Debug.prototype.drawConnection = function(conn) {
-  if (!this.config_.connections) {
+  if (!Blockly.blockRendering.Debug.config.connections) {
    return;
  }

@@ -231,7 +228,7 @@ Blockly.blockRendering.Debug.prototype.drawConnection = function(conn) {
 * @package
 */
 Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY, isRtl) {
-  if (!this.config_.rows) {
+  if (!Blockly.blockRendering.Debug.config.rows) {
    return;
  }
  this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
@@ -251,7 +248,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY,
    return;
  }

-  if (this.config_.connectedBlockBounds) {
+  if (Blockly.blockRendering.Debug.config.connectedBlockBounds) {
    this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
        {
          'class': 'connectedBlockWidth blockRenderDebug',
@@ -293,7 +290,7 @@ Blockly.blockRendering.Debug.prototype.drawRowWithElements = function(row, curso
 * @package
 */
 Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) {
-  if (!this.config_.blockBounds) {
+  if (!Blockly.blockRendering.Debug.config.blockBounds) {
    return;
  }
  // Bounding box without children.
@@ -313,7 +310,7 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) {
      },
      this.svgRoot_));

-  if (this.config_.connectedBlockBounds) {
+  if (Blockly.blockRendering.Debug.config.connectedBlockBounds) {
    // Bounding box with children.
    xPos = info.RTL ? -info.widthWithChildren : 0;
    this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -134,6 +134,7 @@ function start() {
          }
      });
  addToolboxButtonCallbacks();
+  addRenderDebugOptionsCheckboxes();
  // Restore previously displayed text.
  if (sessionStorage) {
    var text = sessionStorage.getItem('textarea');
@@ -146,6 +147,10 @@ function start() {
    // Restore render debug state.
    var renderDebugState = sessionStorage.getItem('blockRenderDebug');
    toggleRenderingDebug(Boolean(Number(renderDebugState)));
+    // Restore render debug options state.
+    var renderDebugOptionsState =
+        JSON.parse(sessionStorage.getItem('blockRenderDebugOptions'));
+    setRenderDebugOptionCheckboxState(renderDebugOptionsState);
  } else {
    // MSIE 11 does not support sessionStorage on file:// URLs.
    logEvents(false);
@@ -260,6 +265,57 @@ function addToolboxButtonCallbacks() {
      'removeDynamicOption', Blockly.TestBlocks.removeDynamicDropdownOption_);
 }

+function setRenderDebugOptionCheckboxState(overrideOptions) {
+  Blockly.blockRendering.Debug.config = overrideOptions || {};
+  if(!overrideOptions) return;
+  var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
+  var renderDebugOptionInputs =
+      renderDebugOptionsListEl.getElementsByTagName('INPUT');
+  for (var optionInput of renderDebugOptionInputs) {
+    var optionId = optionInput.getAttribute('id');
+    var checkboxMatch = optionId.match('^RenderDebug(.*)Check$');
+    if (!checkboxMatch) continue;
+    var optionName = checkboxMatch[1];
+    optionInput.checked = !!overrideOptions[optionName];
+  }
+}
+
+function updateRenderDebugOptions() {
+  var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
+  var renderDebugOptionInputs =
+      renderDebugOptionsListEl.getElementsByTagName('INPUT');
+  var debugOptions = {};
+  for (var optionInput of renderDebugOptionInputs) {
+    var optionId = optionInput.getAttribute('id');
+    var checkboxMatch = optionId.match('^RenderDebug(.*)Check$');
+    if (!checkboxMatch) continue;
+    var optionName = checkboxMatch[1];
+    debugOptions[optionName] = optionInput.checked;
+  }
+  Blockly.blockRendering.Debug.config = debugOptions;
+  sessionStorage.setItem(
+      'blockRenderDebugOptions',JSON.stringify(debugOptions));
+}
+
+function addRenderDebugOptionsCheckboxes() {
+  var renderDebugConfig = Blockly.blockRendering.Debug.config;
+  var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
+  for (var optionName in renderDebugConfig) {
+    var optionCheckId = 'RenderDebug' + optionName + 'Check';
+    var optionLabel = document.createElement('LABEL');
+    optionLabel.setAttribute('htmlFor', optionCheckId);
+    optionLabel.innerHTML = optionName;
+    var optionCheck = document.createElement('INPUT');
+    optionCheck.setAttribute('type', 'checkbox');
+    optionCheck.setAttribute('id', optionCheckId);
+    optionCheck.onclick = updateRenderDebugOptions;
+    var optionLi = document.createElement('li');
+    optionLi.appendChild(optionLabel);
+    optionLi.appendChild(optionCheck);
+    renderDebugOptionsListEl.appendChild(optionLi);
+  }
+}
+
 function changeTheme() {
  var theme = document.getElementById('themeChanger');
  if (theme.value === "modern") {
@@ -352,9 +408,11 @@ function toggleRenderingDebug(state) {
  if (state) {
    document.getElementById('blocklyDiv').className = 'renderingDebug';
    Blockly.blockRendering.startDebugger();
+    document.getElementById('renderDebugOptions').style.display = 'block';
  } else {
    document.getElementById('blocklyDiv').className = '';
    Blockly.blockRendering.stopDebugger();
+    document.getElementById('renderDebugOptions').style.display = 'none';
  }
 }

@@ -434,39 +492,46 @@ var spaghettiXml = [
 </script>

 <style>
-html, body {
-  height: 100%;
-}
-body {
-  background-color: #fff;
-  font-family: sans-serif;
-  overflow: hidden;
-}
-h1 {
-  font-weight: normal;
-  font-size: 140%;
-}
-#blocklyDiv {
-  float: right;
-  height: 95%;
-  width: 70%;
-}
-#importExport {
-  font-family: monospace;
-}
+  html, body {
+    height: 100%;
+  }
+  body {
+    background-color: #fff;
+    font-family: sans-serif;
+    overflow: hidden;
+  }
+  h1 {
+    font-weight: normal;
+    font-size: 140%;
+  }
+  #blocklyDiv {
+    float: right;
+    height: 95%;
+    width: 70%;
+  }
+  #importExport {
+    font-family: monospace;
+  }

-.ioLabel>.blocklyFlyoutLabelText {
-  font-style: italic;
-}
+  .ioLabel>.blocklyFlyoutLabelText {
+    font-style: italic;
+  }

-#blocklyDiv.renderingDebug .blockRenderDebug {
-  display: block;
-}
+  #blocklyDiv.renderingDebug .blockRenderDebug {
+    display: block;
+  }

-.blockRenderDebug {
-  display: none;
-}
+  .playgroundToggleOptions {
+    list-style: none;
+    padding: 0;
+  }
+  .playgroundToggleOptions li {
+    margin-top: 1em;
+  }

+  .blockRenderDebug {
+    display: none;
+  }
 </style>
 </head>
 <body onload="start()">
@@ -530,20 +595,21 @@ h1 {
    <input type="button" value="Airstrike!" onclick="airstrike(100)">
    <input type="button" value="Spaghetti!" onclick="spaghetti(8)">
  </p>
-  <p>
-    Log events: &nbsp;
-    <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
-  </p>
-
-  <p>
-    Block rendering debug: &nbsp;
-    <input type="checkbox" onclick="toggleRenderingDebug(this.checked)" id="blockRenderDebugCheck">
-  </p>
-
-  <p>
-    Enable Accessibility Mode: &nbsp;
-    <input type="checkbox" onclick="toggleAccessibilityMode(this.checked)" id="accessibilityModeCheck">
-  </p>
+  <ul class="playgroundToggleOptions">
+    <li>
+      <label for="logCheck">Log events:</label>
+      <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
+    </li>
+    <li>
+      <label for="blockRenderDebugCheck">Enable block rendering debug:</label>
+      <input type="checkbox" onclick="toggleRenderingDebug(this.checked)" id="blockRenderDebugCheck">
+      <ul id="renderDebugOptions"></ul>
+    </li>
+    <li>
+      <label for="accessibilityModeCheck">Enable Accessibility Mode:</label>
+      <input type="checkbox" onclick="toggleAccessibilityMode(this.checked)" id="accessibilityModeCheck">
+    </li>
+  </ul>


  <!-- The next three blocks of XML are sample toolboxes for testing basic