eframe web: ignore keyboard events unless canvas has focus (emilk#4718)

* Fixes rerun-io/rerun#6638
* Related? emilk#4563

This improves how an eframe canvas works inside of a larger web page,
and how it works when there are multiple eframe apps in the same page.

`eframe` will set `tabindex="0"` on the canvas automatically, making it
focusable.
It will also set `outline: none` on the CSS, so the focused canvas won't
have an ugly outline.


## Breaking changes
You may wanna add this to your `index.html` to give the canvas focus on
startup:
```js
document.getElementById("the_canvas_id").focus();
```

## Test setup
```sh
./scripts/build_demo_web.sh
./scripts/start_server.sh
open http://localhost:8888/multiple_apps.html
```
Then open the "Input Event History" and "Text Edit" windows

## Tested
* Chromium
	* [x] drag-and-drop of files
	* Test both when a `TextEdit` is focused and when it is not:
	  * [x] `Event::Key`
	  * [x] `Event::Text`
	  * [x] copy-cut-paste
	  * [x] Wheel scroll
	* [x] `Event::PointerGone`
	* [x] Mouse drag
	* [x] Mouse click
	* [x] Mouse right-click
	* [x] Defocus all eframe canvas, and then start typing text
* [x] Firefox (all of the above)
* [x] Desktop Safari (all of the above)
* [x] Mobile Safari


## Future work (pre-existing issues)
* emilk#4723
* emilk#4724
* emilk#4725
* emilk#4726

Author: emilk

crates/eframe/src/web/app_runner.rs

@@ -187,6 +187,10 @@ impl AppRunner {
     ///
     /// The result can be painted later with a call to [`Self::run_and_paint`] or [`Self::paint`].
     pub fn logic(&mut self) {
+        // We sometimes miss blur/focus events due to the text agent, so let's just poll each frame:
+        self.input
+            .set_focus(super::has_focus(self.canvas()) || self.text_agent.has_focus());
+
         let canvas_size = super::canvas_size_in_points(self.canvas(), self.egui_ctx());
         let mut raw_input = self.input.new_frame(canvas_size);
 

crates/eframe/src/web/backend.rs

@@ -36,8 +36,12 @@ impl WebInput {
         raw_input
     }
 
-    /// On alt-tab and similar.
-    pub fn on_web_page_focus_change(&mut self, focused: bool) {
+    /// On alt-tab, or user clicking another HTML element.
+    pub fn set_focus(&mut self, focused: bool) {
+        if self.raw.focused == focused {
+            return;
+        }
+
         // log::debug!("on_web_page_focus_change: {focused}");
         self.raw.modifiers = egui::Modifiers::default(); // Avoid sticky modifier keys on alt-tab:
         self.raw.focused = focused;