Colabtools: Allow alert() dialog box, (sandbox="allow-modals")

[korakot]

Bug report for Colab: http://colab.research.google.com/.

For questions about colab usage, please use stackoverflow.

• Describe the current behavior:

I use alert() in html/javascript output.

• Describe the expected behavior:

Alert dialog is shown.

• The web browser you are using (Chrome, Firefox, Safari, etc.):

Chrome

• Link to self-contained notebook that reproduces this issue
  (click the Share button, then Get Shareable Link):

https://colab.research.google.com/drive/1aEa3xplSxgMDpyt0cySXVpgV5JRcGPl4

[tnovikoff]

Tracking at b/145818994

[blois]

Can you explain how an alert() would be used in a way which would be better than displaying a more conventional dialog?

The UX of alerts are not great- Colab only uses it right now as part of the window.onbeforeunload flow for which there is no alternative.

[tnovikoff]

FWIW, if you are looking for a way to get input from the user see here:
https://stackoverflow.com/questions/50516990/google-colab-python-jupyter-notebook-terminal-input

[korakot]

alert() is the shortest way to show data or debug.
I use it for a "Hello World"-style example.

2 longer alternatives

• console.log("Hello") (user must open console)
• document.body.append(document.createTextNode("Hello")) (too long)

Or, is there another short way to print data?

[tnovikoff]

You mean other than print()? That should work, as in
print("Hello")

[korakot]

print() only works in Python, not JavaScript.
Normally, I would define a print = document.body.append(...). But for simplicity, alert() still wins.

[blois]

What context is the alert() being used from?

Right now you can do:

from IPython.display import Javascript
Javascript("element.innerHTML = '<b>Here!</b>';")

And we can tweak that so that this works as well:

from IPython.display import Javascript
Javascript("element.textContent = 'Here!';")

We'd have to do a bit more to support:

HTML('''
<script>
  element.innerHTML = 'Here!';
</script>
''')

Or:

Javascript('''
document.body.onmousedown = () => {
  element.textContent = 'Here!';    
};
''')

Curious if any of those would help.

[korakot]

%%html will work as well, right?

That will surely help. Although, alert() still win on brevity.

And I don't think "allow-modals" has any security issue. So, please allow it. 😊

[korakot]

@blois Can you tell me why this work?

%%js
element.innerHTML = "<b>Hello</b>"

But this wouldn't work.

%%js
element.innerHTML = "Hello"

The content must be strictly HTML, but not Text. Why?

[blois]

I will put together a fix.

For the original alert() request, Chrome has announced that they will be removing support for this and have opened a spec change: https://github.com/whatwg/html/issues/5407.

[blois]

Fix should hopefully be out in a few days. I'm going to close this bug based on Chrome's intent to remove support for cross-origin iframe alerts.