Merge pull request #3017 from moniika/moniika-debug-render-checkmarks

Adding checkboxes for debug rendering options to playground.
2026-01-14 04:17:10 +01:00 · 2019-09-16 17:18:32 -07:00
parent 51fedc6fdb 94dd4e609b
commit e551db41e0
2 changed files with 127 additions and 68 deletions
--- a/core/renderers/common/debugger.js
+++ b/core/renderers/common/debugger.js
@@ -54,24 +54,21 @@ 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
-  };
+/**
+ * Configuration object containing booleans to enable and disable debug
+ * rendering of specific rendering components.
+ * @type {!Object.<string, boolean>}
+ */
+Blockly.blockRendering.Debug.config = {
+  rowSpacers: true,
+  elemSpacers: true,
+  rows: true,
+  elems: true,
+  connections: true,
+  blockBounds: true,
+  connectedBlockBounds: true
 };

 /**
@@ -94,7 +91,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 +118,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 +150,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 +171,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 +185,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 +229,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 +249,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',
@@ -295,7 +293,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.
@@ -315,7 +313,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,52 @@ 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 i = 0, optionInput;
+      (optionInput = renderDebugOptionInputs[i]); i++) {
+    var optionName = optionInput.getAttribute('data-optionName');
+    optionInput.checked = !!overrideOptions[optionName];
+  }
+}
+
+function updateRenderDebugOptions(e) {
+  var target = e.target;
+  var optionName = target.getAttribute('data-optionName');
+  var config = Blockly.blockRendering.Debug.config;
+  config[optionName] = !!target.checked;
+  sessionStorage.setItem(
+      'blockRenderDebugOptions', JSON.stringify(config));
+  workspace.render();
+}
+
+function addRenderDebugOptionsCheckboxes() {
+  var renderDebugConfig = Blockly.blockRendering.Debug.config;
+  var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
+  var optionNames = Object.keys(renderDebugConfig);
+  for (var i = 0, optionName; (optionName = optionNames[i]); i++) {
+    var optionCheckId = 'RenderDebug' + optionName + 'Check';
+    var optionLabel = document.createElement('label');
+    optionLabel.setAttribute('for', optionCheckId);
+    optionLabel.textContent = optionName;
+    var optionCheck = document.createElement('input');
+    optionCheck.setAttribute('type', 'checkbox');
+    optionCheck.setAttribute('id', optionCheckId);
+    optionCheck.setAttribute('data-optionName', optionName);
+    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 +403,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 +487,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 +590,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