obsproject / obs-browser

CEF-based OBS Studio browser plugin
GNU General Public License v2.0
776 stars 220 forks source link

Render JavaScript dialogs using Qt #331

Closed WizardCM closed 2 years ago

WizardCM commented 2 years ago

Description

This replaces the blocking CEF dialog with a non-blocking Qt dialog, ensuring that normal OBS user interaction can continue when a browser dock requests user input. Additionally, the dialog specifies which browser dock it originates from.

HTML is also rendered in plaintext (forcefully for the QInputDialog) to avoid arbitrary styling, while retaining newlines.

Depends on

Before:

image

image

image

After:

image

image

image

Motivation and Context

Firstly, and most importantly, we don't want a browser dock to have the power of blocking a user from interacting with OBS.

This also ensures a consistent style with other aspects of OBS instead of a poor imitation of a system dialog.

How Has This Been Tested?

Create a .html document with the following contents, load it in a custom browser dock, and press each of the 3 buttons.

<!DOCTYPE html>
<html>

<head>
  <script>
    function ok(dT, text) {
      console.log("OK", dT, text);
      document.querySelector(`span.${dT}.resp`).innerHTML = text || 'OK';
    }
    function cancel(dT, text) {
      console.log("Cancel", dT, text);
      document.querySelector(`span.${dT}.resp`).innerHTML = text || 'Cancel';
    }
    function triggerAlert() {
      const resp = window.alert("This is an alert <span>Hi</span>");
    }
    function triggerConfirm() {
      const resp = window.confirm("This is a confirm?");
      resp ? ok('confirm') : cancel('confirm');
    }
    function triggerPrompt() {
      const resp = window.prompt("This is a confirm?");
      resp ? ok('prompt', resp) : cancel('prompt', resp);
    }
    /* TODO: Similar test for onbeforeunload */
    /* window.onbeforeunload = function () {} */
  </script>
  <style>
    button {
      margin-bottom: 4px;
      padding: 4px 14px;
    }
  </style>
</head>

<body>
  <div>
    <button onclick="triggerAlert()">Trigger window.alert() with text</button>
  </div>
  <div>
    <button onclick="triggerConfirm()">Trigger window.confirm() with text</button><br>
    <span class="confirm resp">&nbsp;</span>
  </div>
  <div>
    <button onclick="triggerPrompt()">Trigger window.prompt() with text</button><br>
    <span class="prompt resp">&nbsp;</span>
  </div>
</body>

</html>

Types of changes

Checklist: