perf(native): smoother scrolling on Rune, less work per frame, code block line breaks

apps/native/bench/interaction/run.ts

@@ -36,7 +36,9 @@ const OVERLAYS: ReadonlyArray<Overlay> = [
 	{ name: "org menu", open: [{ clickText: "Hazel" }], shows: "Switch Server", toggles: true },
 	{
 		name: "sidebar channel menu",
-		open: [{ move: [200, 220] }, { wait: 250 }, { clickLabel: "Channel options" }],
+		// Over Favorites' first channel, the first row with a dots trigger: `clickLabel` presses
+		// the first trigger in the tree, which shows only while its own row is hovered.
+		open: [{ move: [200, 270] }, { wait: 250 }, { clickLabel: "Channel options" }],
 		// The item a panel drawn inside its row (clipped there) would still show.
 		shows: "Settings",
 		toggles: true,

apps/native/host/Cargo.toml

@@ -13,11 +13,12 @@ publish = false
 # El::focusable_by_script and El::clip_fade_linear_frac (Makisuo/rune's `hazel-grid` branch), plus
 # iOS's full-screen window, safe area and motion frames (`hazel-ios`), plus a soft keyboard's
 # return as Enter, iOS's display link and El::pin_insets (`hazel-ios-followups`), plus a
-# long-press opening an element's context menu (`hazel-long-press`), until they land upstream.
-rune = { git = "https://github.com/Makisuo/rune", rev = "3b676200f9ab1923059651c4e81c0b77cb8699a2", features = [
+# long-press opening an element's context menu (`hazel-long-press`), plus Tx::scroll_by (`hazel-scroll-by`),
+# until they land upstream.
+rune = { git = "https://github.com/Makisuo/rune", rev = "c3536c225a3a7e0bb8af798e011ef56fd4a8bb92", features = [
 	"native-file-dialog",
 ] }
-rune-fx = { git = "https://github.com/Makisuo/rune", rev = "3b676200f9ab1923059651c4e81c0b77cb8699a2" }
+rune-fx = { git = "https://github.com/Makisuo/rune", rev = "c3536c225a3a7e0bb8af798e011ef56fd4a8bb92" }
 base64 = "0.22"
 # Decodes a picture and its mask picture to composite them (Rune's own decoder, same features).
 image = { version = "0.25", default-features = false, features = ["png", "jpeg", "webp", "gif"] }

apps/native/host/ios/Cargo.toml

@@ -7,7 +7,7 @@ publish = false
 [dependencies]
 hazel-native = { path = ".." }
 # The same revision as `hazel-native`'s (`../Cargo.toml`).
-rune = { git = "https://github.com/Makisuo/rune", rev = "3b676200f9ab1923059651c4e81c0b77cb8699a2" }
+rune = { git = "https://github.com/Makisuo/rune", rev = "c3536c225a3a7e0bb8af798e011ef56fd4a8bb92" }
 serde_json = "1"
 
 # The hidden web view the runtime's worker runs in (`src/bridge.rs`), and the UIKit views of

apps/native/host/ios/src/islands.rs

@@ -119,6 +119,9 @@ struct Island {
     spec: IslandSpec,
     /// The size of the part that shows and the holes in it, when anything covers the view.
     mask: Option<([f32; 2], Vec<Rect>)>,
+    /// A tab bar's height for a width, as `sizeThatFits` last said: asked once per width, not
+    /// in every frame (it lays the bar out).
+    fitted: Option<(f32, f32)>,
 }
 
 thread_local! {
@@ -478,6 +481,7 @@ fn create(mtm: MainThreadMarker, parent: &UIView, spec: &IslandSpec) -> Option<I
         native,
         spec: spec.clone(),
         mask: None,
+        fitted: None,
     })
 }
 
@@ -502,6 +506,7 @@ fn update(mtm: MainThreadMarker, island: &mut Island, spec: &IslandSpec) {
             };
             if titles(spec) != titles(&island.spec) {
                 bar.setItems(Some(&tab_items(mtm, spec)));
+                island.fitted = None;
             }
             *delegate.ivars().items.borrow_mut() = spec.items.clone();
             tint_tab_bar(bar, spec);
@@ -520,7 +525,14 @@ fn put(island: &mut Island, placement: &Placement, bottom_inset: f32) {
         // box it spreads its icons and titles apart. The nav pads itself down to that edge.
         Native::TabBar { bar, .. } => {
             let bottom = y + h;
-            let fitted = bar.sizeThatFits(CGSize::new(w as f64, 0.0)).height as f32;
+            let fitted = match island.fitted {
+                Some((width, height)) if width == w => height,
+                _ => {
+                    let height = bar.sizeThatFits(CGSize::new(w as f64, 0.0)).height as f32;
+                    island.fitted = Some((w, height));
+                    height
+                }
+            };
             // The bar adds the home indicator's inset itself once it is in the window.
             let height = if fitted > bottom_inset + 1.0 {
                 fitted

apps/native/host/ios/src/page.rs

@@ -95,14 +95,15 @@ window.__hazel = {{
         worker.onmessage = (event) => host.postMessage(event.data)
         worker.onerror = (event) =>
             host.postMessage({{ log: `[worker] ${{event.message}} ${{event.filename}}:${{event.lineno}}` }})
-        for (const line of early.splice(0)) worker.postMessage(line)
+        for (const batch of early.splice(0)) worker.postMessage(batch)
     }},
     reply(message) {{
         worker?.postMessage(message)
     }},
+    // A frame's lines cross in one message, as they do down the desktop's pipe: the worker
+    // splits them, and handles a frame's reports in one task.
     toWorker(text) {{
-        for (const line of text.split("\n"))
-            if (line !== "") worker === undefined ? early.push(line) : worker.postMessage(line)
+        if (text !== "") worker === undefined ? early.push(text) : worker.postMessage(text)
     }},
 }}
 host.postMessage({{ ready: {id} }})
@@ -215,8 +216,8 @@ mod tests {
         assert!(ready < start);
         // Lines that arrive before the worker exists wait for it, in order.
         assert!(
-            page.contains("worker === undefined ? early.push(line) : worker.postMessage(line)")
+            page.contains("worker === undefined ? early.push(text) : worker.postMessage(text)")
         );
-        assert!(page.contains("for (const line of early.splice(0)) worker.postMessage(line)"));
+        assert!(page.contains("for (const batch of early.splice(0)) worker.postMessage(batch)"));
     }
 }

apps/native/host/src/capture.rs

@@ -12,7 +12,8 @@ use serde_json::json;
 
 use hazel_native::wire::{Node, RuntimeMsg};
 use hazel_native::{
-    PRESS_EVENTS, State, TEXT_SMOOTHING, images, note_scroll, outbox, view, window_key,
+    PRESS_EVENTS, State, TEXT_SMOOTHING, apply_scroll, images, note_scroll, outbox, view,
+    window_key,
 };
 
 use crate::runtime::{FromRuntime, RuntimeChild, spawn_runtime};
@@ -268,13 +269,9 @@ impl Session {
                 self.timings.trees += 1;
                 self.rt.update_if(move |s, _| s.apply(tree));
             }
-            RuntimeMsg::Scroll { path, top, seq } => {
+            RuntimeMsg::Scroll { path, top, seq, by } => {
                 note_scroll(&path, seq);
-                if std::env::var("NATIVE_DEBUG").is_ok() {
-                    eprintln!("[host] scroll_to {top}")
-                }
-                self.rt
-                    .update(move |_, tx| tx.scroll_to_instant(path, 0.0, top))
+                self.rt.update(move |_, tx| apply_scroll(tx, path, top, by))
             }
             request => {
                 if let Some(run) = request.request() {

apps/native/host/src/outbox.rs

@@ -32,7 +32,12 @@ pub fn set_writer(out: Box<dyn Write + Send>) {
 }
 
 pub fn write_line(message: serde_json::Value) {
-    let line = format!("{message}\n");
+    write_text(format!("{message}\n"));
+}
+
+/// A line already serialized, newline included: for reports sent every frame (a scrolling
+/// row's rect), which skip building a `serde_json::Value` each time.
+pub fn write_text(line: String) {
     // Tests read what was sent right after the frame that sent it.
     if cfg!(test) {
         write_now(&line);

apps/native/host/src/render/handlers.rs

@@ -8,7 +8,7 @@ use serde_json::json;
 
 use crate::html::{focusable, is_checkable, script_focusable};
 use crate::layout::focus_styles;
-use crate::outbox::write_line;
+use crate::outbox::{write_line, write_text};
 use crate::wire::Style;
 
 use super::Ctx;
@@ -211,12 +211,13 @@ pub(super) fn behaviour(
 
 /// An element a runtime Mount observes: report its layout, and its offset when it scrolls.
 pub(super) fn observe(e: El, path: &str, st: &Style) -> El {
-    let layout_path = path.to_string();
+    // Serialized once per build: inside a scrolling list every observed row reports each frame.
+    let prefix = format!(r#"{{"t":"layout","path":{},"#, json!(path));
     // A report for the runtime, no change to the host's own state: no need to build its view
     // again, which inside a scrolling list would be every frame.
-    let e = e.on_layout_tx(move |_: &mut State, [x, y, w, h]: [f32; 4], tx| {
+    let e = e.on_layout_tx(move |_: &mut State, rect: [f32; 4], tx| {
         tx.live_only();
-        write_line(json!({ "t": "layout", "path": layout_path, "x": x, "y": y, "w": w, "h": h }));
+        write_text(layout_line(&prefix, rect));
     });
     if st.scroll_y != Some(true) {
         return e;
@@ -241,6 +242,13 @@ pub(super) fn observe(e: El, path: &str, st: &Style) -> El {
     })
 }
 
+/// A layout report after its serialized `{"t":"layout","path":…,` prefix. A coordinate that is
+/// not finite has no JSON number and reports as zero.
+fn layout_line(prefix: &str, rect: [f32; 4]) -> String {
+    let [x, y, w, h] = rect.map(|v| if v.is_finite() { v } else { 0.0 });
+    format!("{prefix}\"x\":{x},\"y\":{y},\"w\":{w},\"h\":{h}}}\n")
+}
+
 /// The last runtime scroll the host applied to each viewport: its offset reports carry that
 /// scroll's `seq`, so the runtime can tell the ones sent before it apart.
 pub(crate) fn scroll_seqs() -> &'static std::sync::Mutex<HashMap<String, u64>> {
@@ -249,6 +257,21 @@ pub(crate) fn scroll_seqs() -> &'static std::sync::Mutex<HashMap<String, u64>> {
     SEQS.get_or_init(Default::default)
 }
 
+/// Applies a runtime scroll: `by` shifts the viewport from where it is now (`element.scrollBy`),
+/// which leaves a finger's drag and a fling's momentum running; otherwise it jumps to `top`.
+pub fn apply_scroll(tx: &mut rune::Tx, path: String, top: f32, by: Option<f32>) {
+    if std::env::var("NATIVE_DEBUG").is_ok() {
+        match by {
+            Some(by) => eprintln!("[host] scroll_by {by}"),
+            None => eprintln!("[host] scroll_to {top}"),
+        }
+    }
+    match by {
+        Some(by) => tx.scroll_by(path, by),
+        None => tx.scroll_to_instant(path, 0.0, top),
+    }
+}
+
 /// Notes a runtime scroll's `seq` for the offset reports after it.
 pub fn note_scroll(path: &str, seq: Option<u64>) {
     if let Some(seq) = seq {
@@ -265,3 +288,24 @@ pub(super) fn focus_field_on_press(e: El, path: &str) -> El {
     e.cursor(Cursor::Text)
         .on_press_tx(move |_: &mut State, tx| tx.focus(field.clone()))
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn a_layout_line_is_the_json_the_runtime_reads() {
+        let path = r#"r/0/k"quoted" key"#;
+        let prefix = format!(r#"{{"t":"layout","path":{},"#, json!(path));
+        let line = layout_line(&prefix, [1.5, -20.25, 300.0, f32::NAN]);
+        assert!(line.ends_with('\n'));
+        let parsed: serde_json::Value = serde_json::from_str(line.trim_end()).unwrap();
+        assert_eq!(parsed["t"], "layout");
+        assert_eq!(parsed["path"], path);
+        let at = |k: &str| parsed[k].as_f64().unwrap();
+        assert_eq!(
+            [at("x"), at("y"), at("w"), at("h")],
+            [1.5, -20.25, 300.0, 0.0]
+        );
+    }
+}