diff --git a/tests/compile/index.html b/tests/compile/index.html
index ab10643ac..a0b19183e 100644
--- a/tests/compile/index.html
+++ b/tests/compile/index.html
@@ -13,6 +13,9 @@
font-weight: normal;
font-size: 140%;
}
+ .blockRenderDebug {
+ display: none;
+ }
diff --git a/tests/playground.html b/tests/playground.html
index b49326a5e..0498fdcd0 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -136,6 +136,9 @@ function start() {
// Restore event logging state.
var state = sessionStorage.getItem('logEvents');
logEvents(Boolean(Number(state)));
+ // Restore render debug state.
+ var renderDebugState = sessionStorage.getItem('blockRenderDebug');
+ toggleRenderingDebug(Boolean(Number(renderDebugState)));
} else {
// MSIE 11 does not support sessionStorage on file:// URLs.
logEvents(false);
@@ -327,6 +330,19 @@ function logEvents(state) {
}
}
+function toggleRenderingDebug(state) {
+ var checkbox = document.getElementById('blockRenderDebugCheck');
+ checkbox.checked = state;
+ if (sessionStorage) {
+ sessionStorage.setItem('blockRenderDebug', Number(state));
+ }
+ if (state) {
+ document.getElementById('blocklyDiv').className = 'renderingDebug';
+ } else {
+ document.getElementById('blocklyDiv').className = '';
+ }
+}
+
function logger(e) {
console.log(e);
}
@@ -420,6 +436,40 @@ h1 {
font-style: italic;
}
+#blocklyDiv.renderingDebug .blockRenderDebug {
+ display: block;
+}
+
+.blockRenderDebug {
+ 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;
+}
+
@@ -483,6 +533,11 @@ h1 {
+
+ Block rendering debug:
+
+
+