[Blockly Developer Tools] Switching between tabs causes the workspace to be misaligned

[BeksOmega]

Describe the bug

If you switch back and forth between the Block Factory tab and the other tabs, then the other tabs, the workspaces will disappear. I think this is because they're becoming misaligned.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://blockly-demo.appspot.com/static/demos/blockfactory/index.html
2. Switch to the Workspace Factory tab (if it asks you about unsaved work just hit 'ok')
3. Switch back to the Blocks Factory tab.
4. Switch to the Workspace Factory tab. Observe how the workspace has lost its grid.
5. Switch back to the Blocks Factory tab. Observe how the workspace is empty.

Expected behavior

No disappearing.

Screenshots

Desktop (please complete the following information):

• OS: ChromeOS
• Browser Chrome
• Version 92

Additional context

Originally reported on the forums: https://groups.google.com/g/blockly/c/ys1bwF5WH6o/m/qG4IGBHHAQAJ

[Apoorvgarg-creator]

@BeksOmega I would like to contribute to this. Can I work on the issue with you?

[BeksOmega]

@BeksOmega I would like to contribute to this. Can I work on the issue with you?

Sure thing @Apoorvgarg-creator ! I'm not actually working on this issue at the moment, but I'm happy to help in any way I can =)

To get started you'll want to get set up for development if you haven't already. Then open up the block factory index.html file in your browser, and make sure you can reproduce the issue given the above steps. After that, you'll have do some debugging to figure out what the issue is, because I'm not exactly sure hehe. A good place to start is probably the onTab function, because that's what controls changing the what is shown and what is hidden.

We would definitely love help with this bug, but it may not be the best starter issue (because I'm not even sure what's going on!) If you get stuck or bored and still want to contribute, feel free to pick up a different issue, like #5273 or #5374

And if you need help, always feel free to drop a message here! Best of luck :D

[Apoorvgarg-creator]

@BeksOmega, Thank you for the guidance.

[Apoorvgarg-creator]

@BeksOmega While I was debugging the problem. I came across this, does it give you any ideas where to look for the issue?

https://user-images.githubusercontent.com/57873504/130550031-b40d4c47-281f-4a82-a2c1-127b19c46c96.mov

[Apoorvgarg-creator]

@BeksOmega, I guess the problematic function is AppController.prototype.onresize

This function also creates problems in block factory

[BeksOmega]

While I was debugging the problem. I came across this...

Wow nice find! That's a really weird behavior, because it only fixes the problem if you change the position of the console, not if you just resize it...

@BeksOmega, I guess the problematic function is AppController.prototype.onresize

This function also creates problems in block factory

Oh sweet I'm glad you found something! I spent some time debugging, and I think there might be an issue with the workspace resizing before it is actually visible. But I'm not sure :/

[Apoorvgarg-creator]

I think there might be an issue with the workspace resizing before it is actually visible.

@BeksOmega Can you tell me where to look for this? Maybe I could find something there. I have been trying to figure out the problem but on even making the changes some corner cases are creating the problem.

[BeksOmega]

@BeksOmega Can you tell me where to look for this? Maybe I could find something there. I have been trying to figure out the problem but on even making the changes some corner cases are creating the problem.

I'm sorry man that sucks :/

If I were to try to debug this, I would probably add a breakpoint in the workspace's resize function to see if (a) it's getting called when it should be called, and (b) that it's updating everything it's supposed to correctly.

But my instinct could be totally wrong, and that may not even be the problem :/ This is a really tricky issue!

[Apoorvgarg-creator]

If I were to try to debug this, I would probably add a breakpoint in the workspace's resize function to see if (a) it's getting called when it should be called, and (b) that it's updating everything it's supposed to correctly.

I added the breakpoints in the stated function, but it was running perfectly. I will keep those breakpoints and will try with other functions as well.

[QuirkyCort]

A few observations about this issue...

1) The blocklySvg for workspace Block Factory and Workspace Factory do not behave in the same way. When switching back to Block Factory, the css width remains zero, but the height is set. For the Workspace Factory, both the width and height remains at zero. This appears to be caused by the next observation.

2) There seems to be another bug in Block Factory, while the height is set, it is reduced by 2px each time (ie. it gets shorter each time I switch to it). I suspect this is a bug in the demo and not in Blockly itself.

3) Resizing the developer console does work (...sort of). It's just that it only updates one of the dimension. So if the developer console is on the right, resizing it will update the width but not the height (...which remains zero). Switching position of the console updates both.

I suspect the issue is in workspace_svg.setCachedParentSvgSize and blockly.svgResize. setCachedParentSvgSize will only update the width/height if they evaluate to true. If the width/height is zero, they evaluate to false, and the cache is not updated.

So I suspect the sequence of events goes something like this...

1) css display is set to none. 2) A resize event occurs. Cached size is NOT updated. css width/height is set to zero. 3) css display none is unset. 4) A resize event occurs. The new size is compared with the cached size and found to be the same. css width/height is not set.

I'm guessing that changing "if (width)" and "if (height)" in workspace_svg.setCachedParentSvgSize to "if (width != null)" and "if (width != null)" will fix this.

[Apoorvgarg-creator]

2. There seems to be another bug in Block Factory, while the height is set, it is reduced by 2px each time (ie. it gets shorter each time I switch to it). I suspect this is a bug in the demo and not in Blockly itself.

Yes, I have observed the same while debugging the problem.

I suspect the issue is in workspace_svg.setCachedParentSvgSize and blockly.svgResize. setCachedParentSvgSize will only update the width/height if they evaluate to true. If the width/height is zero, they evaluate to false, and the cache is not updated.

Thank you for the insight. I will add some breakpoints and try resolving the issue. Thank you @QuirkyCort.