[L2Ork-dev] Excalibur Bug

[Jonathan Wilkes]

Hi list,

If anyone here can wrest the following bug from the guts of our
codebase I'll immediately add you as a maintainer of Purr Data.
(Careful, though-- there's some Tom Sawyer style mischief going on in
that offer... :)

You start your quest armed with three snippets:

1. Trusty menu:

// Create an empty menubar
var menu = new nw.Menu({type: 'menubar'});

// Create a submenu as the 2nd level menu
var submenu = new nw.Menu();
submenu.append(new nw.MenuItem({ label: 'Item A' }));
submenu.append(new nw.MenuItem({ label: 'Item B' }));

// Create and append the 1st level menu to the menubar
menu.append(new nw.MenuItem({
  label: 'First Menu',
  submenu: submenu
}));

// Assign it to `window.menu` to get the menu displayed
nw.Window.get().menu = menu;

End trusty menu

2. SVG-spawning potion

var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
document.body.style.padding = "0px";
document.body.style.margin = "0px";
var svg_string = ['<svg width="', w, '" height="', h, '"><rect
width="20" height="20"/></svg>'].join("");
document.body.innerHTML = svg_string;

End SVG-spawning potion

3. Lightning bolt

document.body.innerHTML = '';

End lightning bolt

Ok, let's go:

1. Run nw directly to get the demo app (~/purr-data/pd/nw/nw/nw)
2. Right click and choose "Inspect"
3. Click the "Console" tab
4. Paste the lightning bolt to erase the demo
5. Paste your SVG-spawning potion in the console and hit <Enter>

Notice that the SVG fills the entire viewport of the document
*without* creating scrollbars. You can click the "Elements" tab and
make the SVG height/width one pixel larger and that will trigger the
scrollbars. Change them back and boom-- no scrollbars anymore. Simple,
deterministic behavior which works exactly the same in any version of
Chromium.

Next:

1. Run nw directly to get the demo app
2. Right click and choose "Inspect"
3. Click the "Console" tab
4. Paste the lightning bolt to erase the demo
5. Paste the trusty menu
6. Paste your SVG-spawning potion in the console

Again-- notice that the viewport is is covered completely by the SVG
without spawning any scrollbars. Again you can change width/height
values to watch scrollbars appear/disappear.

Okay, now some fun:

1. Run nw directly to get the demo app
2. Right click and choose "Inspect"
3. Click the "Console" tab
4. Paste the lightning bolt to erase the demo
5. Paste your SVG-spawning potion in the console
6. Paste the trusty menu

Ah, now we get some scrollbars because the menu takes up some of our
viewport and pushes the SVG down.

But fear not-- we can go to the console and do this to get the new
height of the viewport minus that menubar:

window.innerHeight;

Now type that value into the height for the SVG in the "Elements" tab
and poof-- scrollbars disappear. Predictable, consistent behavior.

And now, Excalibur:

1. Run Purr Data
2. Open a new Patch
3. Click "Help" then "Show DevTools" and click the "Console" tab
4. Paste the lightning bolt
5. Paste you SVG-spawning potion

Oops, now we have scrollbars.

Same GUI toolkit, but different behavior here.

What is responsible for the difference, and how can we get the
predictable, consistent behavior we witnessed when running the nw
demo?

Btw-- I'm on Debian Stretch on an older version of nw.js. But I've
tested the consistent, predictable behavior in a Chromium browser
and it works. Browsers obviously know how to fill a cavity with
content in 2020.

That means that somewhere in our codebase we are setting
some state that causes the window to shift the content down,
but I don't know what it could be.

Good luck on your quest,
Jonathan