chore(kiosk-browser): remove uses of non-trivial APIs

[eventualbuddha]

Overview

Refs #4531

Removes all uses of the following kiosk-browser APIs:

• captureScreenshot + saveAs (replaced with dev-dock/backend API + gnome-screenshot) this was restored because we need a way to capture the web rendering area and not the entire screen
• showOpenDialog (selecting election package to load in dev is removed) this was restored because we still need to pick election definitions
• showSaveDialog ("Save As" in a few places is removed)
• saveAs ("Save As" in a few places is removed, and writing the screenshot is now done on the backend)

kiosk.quit and kiosk.log remain unchanged.

Demo Video or Screenshot

Edit 11/27: The video below shows the screenshot flow using a wry-based version of kiosk-browser. This no longer works with the reversion to using kiosk.captureScreenshot, but the flow outlined in the video is the same.

CleanShot.2024-11-25.at.16.51.12.mp4

Click to view `wry` based app code

use clap::Parser;
use serde::Deserialize;
use tao::{
    event::{ElementState, Event, StartCause, WindowEvent},
    event_loop::{ControlFlow, EventLoop},
    keyboard::ModifiersState,
    window::{Fullscreen, WindowBuilder},
};
use wry::WebViewBuilderExtUnix;
use wry::{http::Uri, WebViewBuilder};

#[derive(Debug, Parser)]
struct Options {
    #[clap(short, long, default_value = "false")]
    allow_devtools: bool,

    #[clap(default_value = "http://localhost:3000/")]
    url: Uri,
}

#[derive(Debug, Deserialize)]
#[serde(tag = "type")]
enum IpcCommand {
    /// Log a message to stdout.
    #[serde(rename = "log")]
    Log { message: String },

    /// Quit the application.
    #[serde(rename = "quit")]
    Quit,
}

const INIT_JS: &str = "
    globalThis.kiosk = Object.freeze({
        quit() {
            window.ipc.postMessage(JSON.stringify({ type: 'quit' }));
        },

        log(message) {
            window.ipc.postMessage(JSON.stringify({ type: 'log', message }));
        },
    });
";

fn main() -> wry::Result<()> {
    let options = Options::parse();
    let event_loop = EventLoop::new();
    let window = WindowBuilder::new()
        .with_fullscreen(Some(Fullscreen::Borderless(None)))
        .with_title("kiosk-browser")
        .build(&event_loop)
        .unwrap();
    let builder = WebViewBuilder::new()
        .with_url(options.url.to_string())
        .with_initialization_script(INIT_JS)
        // allow devtools if the flag is set
        .with_devtools(options.allow_devtools)
        // deny clipboard access
        .with_clipboard(false)
        // deny downloads
        .with_download_started_handler(|_, _| false)
        // do not record browsing history, cookies, cache, etc.
        .with_incognito(true)
        // handle IPC messages, i.e. `kiosk.log` et al
        .with_ipc_handler(
            |ipc| match serde_json::from_str::<IpcCommand>(&ipc.body()) {
                Ok(IpcCommand::Log { message }) => println!("{message}"),
                Ok(IpcCommand::Quit) => std::process::exit(0),
                Err(err) => {
                    eprintln!(
                        "failed to parse IPC message: {body}\nError: {err}",
                        body = ipc.body()
                    );
                }
            },
        );

    let webview = {
        use tao::platform::unix::WindowExtUnix;
        let vbox = window.default_vbox().unwrap();
        builder.build_gtk(vbox)?
    };

    let mut modifiers = Default::default();
    event_loop.run(move |event, _, control_flow| {
        *control_flow = ControlFlow::Wait;

        match event {
            Event::NewEvents(StartCause::Init) => println!("kiosk-browser has started!"),
            Event::WindowEvent {
                event: WindowEvent::ModifiersChanged(new_modifiers),
                ..
            } => {
                modifiers = new_modifiers;
            }
            Event::WindowEvent {
                event: WindowEvent::KeyboardInput { event, .. },
                ..
            } => match (modifiers, event.state, event.text) {
                (ModifiersState::CONTROL, ElementState::Released, Some("w")) => {
                    println!("Ctrl+W pressed, closing the window");
                    *control_flow = ControlFlow::Exit;
                }
                (ModifiersState::CONTROL, ElementState::Released, Some("r")) => {
                    println!("Ctrl+R pressed, reloading the page");
                    webview.evaluate_script("location.reload()").unwrap();
                }
                (
                    ModifiersState::CONTROL | ModifiersState::SHIFT,
                    ElementState::Released,
                    Some("i"),
                ) => {
                    if options.allow_devtools {
                        println!("Ctrl+Shift+I pressed, toggling devtools");
                        if webview.is_devtools_open() {
                            webview.close_devtools();
                        } else {
                            webview.open_devtools();
                        }
                    }
                }
                _ => {
                    // ignore
                }
            },
            Event::WindowEvent {
                event: WindowEvent::CloseRequested,
                ..
            } => *control_flow = ControlFlow::Exit,
            _ => (),
        }
    });
}

Testing Plan

Tested in the original kiosk-browser and the new prototype wry-based kiosk-browser (see above). Standard browser usage remains unchanged since it doesn't have these APIs anyway.

[jonahkagan]

I called out two important dev dock features removed in this PR that I think we need to maintain or find another way to implement. Happy to help research/brainstorm alternatives