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

* Fixes https://github.com/rerun-io/rerun/issues/6638
* Related? https://github.com/emilk/egui/issues/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)
* https://github.com/emilk/egui/issues/4723
* https://github.com/emilk/egui/issues/4724
* https://github.com/emilk/egui/issues/4725
* https://github.com/emilk/egui/issues/4726

crates/eframe/src/web/web_runner.rs

@@ -68,6 +68,16 @@ impl WebRunner {
         let text_agent = TextAgent::attach(self)?;
 
         let runner = AppRunner::new(canvas_id, web_options, app_creator, text_agent).await?;
+
+        {
+            // Make sure the canvas can be given focus.
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+            runner.canvas().set_tab_index(0);
+
+            // Don't outline the canvas when it has focus:
+            runner.canvas().style().set_property("outline", "none")?;
+        }
+
         self.runner.replace(Some(runner));
 
         {