From cd275ca67b712bfa9b0a4289fef3ac2b8602943e Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Tue, 23 Jul 2019 16:15:20 -0700 Subject: [PATCH] Add debug rendering to playground --- tests/compile/index.html | 3 +++ tests/playground.html | 55 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) 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:   + +

+