Revert "web: Use browser focus events for focus management"

This reverts commit 5441749e3e.

web/Cargo.toml

@@ -74,7 +74,7 @@ features = [
     "EventTarget", "GainNode", "Headers", "HtmlCanvasElement", "HtmlDocument", "HtmlElement", "HtmlFormElement",
     "HtmlInputElement", "HtmlTextAreaElement", "KeyboardEvent", "Location", "PointerEvent",
     "Request", "RequestInit", "Response", "Storage", "WheelEvent", "Window", "ReadableStream", "RequestCredentials",
-    "Url", "Clipboard", "FocusEvent"
+    "Url", "Clipboard",
 ]
 
 [package.metadata.cargo-machete]

web/src/builder.rs

@@ -574,8 +574,6 @@ impl RuffleInstanceBuilder {
 
         let (renderer, canvas) = self.create_renderer().await?;
 
-        canvas.set_tab_index(-1);
-
         let mut builder = PlayerBuilder::new()
             .with_boxed_renderer(renderer)
             .with_boxed_audio(self.create_audio_backend(log_subscriber.clone()))

web/src/lib.rs

@@ -36,8 +36,8 @@ use url::Url;
 use wasm_bindgen::convert::FromWasmAbi;
 use wasm_bindgen::prelude::*;
 use web_sys::{
-    AddEventListenerOptions, ClipboardEvent, Element, Event, EventTarget, FocusEvent,
+    AddEventListenerOptions, ClipboardEvent, Element, Event, EventTarget, HtmlCanvasElement,
-    HtmlCanvasElement, HtmlElement, KeyboardEvent, PointerEvent, WheelEvent, Window,
+    HtmlElement, KeyboardEvent, PointerEvent, WheelEvent, Window,
 };
 
 static RUFFLE_GLOBAL_PANIC: Once = Once::new();
@@ -125,15 +125,14 @@ struct RuffleInstance {
     mouse_enter_callback: Option<JsCallback<PointerEvent>>,
     mouse_leave_callback: Option<JsCallback<PointerEvent>>,
     mouse_down_callback: Option<JsCallback<PointerEvent>>,
+    player_mouse_down_callback: Option<JsCallback<PointerEvent>>,
+    window_mouse_down_callback: Option<JsCallback<PointerEvent>>,
     mouse_up_callback: Option<JsCallback<PointerEvent>>,
     mouse_wheel_callback: Option<JsCallback<WheelEvent>>,
     key_down_callback: Option<JsCallback<KeyboardEvent>>,
     key_up_callback: Option<JsCallback<KeyboardEvent>>,
     paste_callback: Option<JsCallback<ClipboardEvent>>,
     unload_callback: Option<JsCallback<Event>>,
-    focusin_callback: Option<JsCallback<FocusEvent>>,
-    focusout_callback: Option<JsCallback<FocusEvent>>,
-    focus_on_press_callback: Option<JsCallback<PointerEvent>>,
     has_focus: bool,
     trace_observer: Rc<RefCell<JsValue>>,
     log_subscriber: Arc<Layered<WASMLayer, Registry>>,
@@ -477,15 +476,14 @@ impl RuffleHandle {
             mouse_enter_callback: None,
             mouse_leave_callback: None,
             mouse_down_callback: None,
+            player_mouse_down_callback: None,
+            window_mouse_down_callback: None,
             mouse_up_callback: None,
             mouse_wheel_callback: None,
             key_down_callback: None,
             key_up_callback: None,
             paste_callback: None,
             unload_callback: None,
-            focusin_callback: None,
-            focusout_callback: None,
-            focus_on_press_callback: None,
             timestamp: None,
             has_focus: false,
             trace_observer: player.trace_observer,
@@ -606,6 +604,35 @@ impl RuffleHandle {
                 },
             ));
 
+            // Create player mouse down handler.
+            instance.player_mouse_down_callback = Some(JsCallback::register(
+                &js_player,
+                "pointerdown",
+                false,
+                move |_js_event| {
+                    let _ = ruffle.with_instance_mut(|instance| {
+                        instance.has_focus = true;
+                        // Ensure the parent window gets focus. This is necessary for events
+                        // to be received when the player is inside a frame.
+                        instance.window.focus().warn_on_error();
+                    });
+                },
+            ));
+
+            // Create window mouse down handler.
+            instance.window_mouse_down_callback = Some(JsCallback::register(
+                &window,
+                "pointerdown",
+                true,
+                move |_js_event| {
+                    let _ = ruffle.with_instance_mut(|instance| {
+                        // If we actually clicked on the player, this will be reset to true
+                        // after the event bubbles down to the player.
+                        instance.has_focus = false;
+                    });
+                },
+            ));
+
             // Create mouse up handler.
             instance.mouse_up_callback = Some(JsCallback::register(
                 &player.canvas,
@@ -757,48 +784,6 @@ impl RuffleHandle {
                         core.flush_shared_objects();
                     });
                 }));
-
-            instance.focusin_callback = Some(JsCallback::register(
-                &player.canvas,
-                "focusin",
-                false,
-                move |_js_event: FocusEvent| {
-                    let _ = ruffle.with_instance_mut(|instance| {
-                        if !instance.has_focus {
-                            instance.has_focus = true;
-                            let _ = instance.with_core_mut(|core| {
-                                core.handle_event(PlayerEvent::FocusGained);
-                            });
-                        }
-                    });
-                },
-            ));
-
-            instance.focusout_callback = Some(JsCallback::register(
-                &player.canvas,
-                "focusout",
-                false,
-                move |_js_event: FocusEvent| {
-                    let _ = ruffle.with_instance_mut(|instance| {
-                        if instance.has_focus {
-                            let _ = instance.with_core_mut(|core| {
-                                core.handle_event(PlayerEvent::FocusLost);
-                            });
-                            instance.has_focus = false;
-                        }
-                    });
-                },
-            ));
-
-            let canvas = player.canvas.clone();
-            instance.focus_on_press_callback = Some(JsCallback::register(
-                &player.canvas,
-                "pointerdown",
-                false,
-                move |_js_event| {
-                    canvas.focus().warn_on_error();
-                },
-            ));
         })?;
 
         // Set initial timestamp and do initial tick to start animation loop.