Misc · Web: a web view proven with wry, and an iframe embed

misc::WebView lays wry 0.57's child WKWebView over the window at its
box, following it from a canvas in prepaint and hiding it out of view;
it loads an address or the owner's HTML, which makes it the HTML
preview. misc::IframeEmbed frames a page under its address with Open
in browser. EmbedCard points to chat::LinkPreviewCard, ShareSheet to
buttons::ShareButton; PrintButton is blocked, gpui 0.2.2 has no print
API.

examples/gallery/pages/misc/mod.rs

@@ -10,12 +10,13 @@ use crate::ui::{section, specimen, specimens};
 mod asking;
 mod codes;
 mod notices;
+mod web;
 
 pub const PAGE: Page = Page {
     number: 42,
     slug: "misc",
     title: "Misc",
-    summary: "Small tools that stand alone: clocks, a stopwatch, a calculator, a unit converter, a QR code scanner, a captcha, a poll, a survey, a quiz, flashcards, licenses, terms and a cookie banner.",
+    summary: "Small tools that stand alone: clocks, a stopwatch, a calculator, a unit converter, a QR code scanner, a captcha, a poll, a survey, a quiz, flashcards, licenses, terms, a cookie banner and web views.",
     render,
     script: &[
         Step::DownAt("stopwatch-start", 30.0, 62.0),
@@ -81,6 +82,7 @@ fn render(window: &mut Window, cx: &mut App) -> AnyElement {
         .child(codes::render(window, cx))
         .child(asking::render(window, cx))
         .child(notices::render(window, cx))
+        .child(web::render(cx))
         .into_any_element()
 }
 

examples/gallery/pages/misc/web.rs

@@ -0,0 +1,58 @@
+use ely_gpui_component::misc::{IframeEmbed, WebSource, WebView};
+use gpui::{App, IntoElement, ParentElement, Styled, div, px};
+
+use crate::ui::{blocked, section};
+
+const PAGE: &str = r#"<!doctype html>
+<meta charset="utf-8">
+<style>
+  :root { color-scheme: light dark; font: 15px -apple-system, sans-serif; }
+  body { margin: 0; height: 100vh; display: grid; place-items: center;
+         background: linear-gradient(135deg, #5b8cff33, #b35bff33); }
+  h1 { font-size: 22px; margin: 0 0 6px; }
+  p { margin: 0; opacity: .7; }
+</style>
+<main>
+  <h1>Hello from WebKit</h1>
+  <p>HTML the owner hands in, drawn by a native web view.</p>
+</main>"#;
+
+pub fn render(cx: &App) -> impl IntoElement + use<> {
+    div()
+        .child(
+            section(
+                "WebView / HTMLPreview",
+                "A native web view laid over its box: an address, or HTML the owner hands in, which makes it an HTML preview. It draws above everything gpui paints and follows the box each frame.",
+                cx,
+            )
+            .child(
+                div()
+                    .w(px(480.0))
+                    .h(px(200.0))
+                    .child(WebView::new("web", WebSource::Html(PAGE.into()))),
+            ),
+        )
+        .child(
+            section(
+                "IframeEmbed / EmbedCard",
+                "A page from another address in a frame of its own, with Open in browser. EmbedCard is chat::LinkPreviewCard, shown on the AI Chat page.",
+                cx,
+            )
+            .child(div().w(px(480.0)).child(IframeEmbed::new(
+                "iframe",
+                "https://example.com",
+                16.0 / 9.0,
+            ))),
+        )
+        .child(
+            section(
+                "PrintButton · ShareSheet",
+                "ShareSheet is buttons::ShareButton, shown on the Buttons & Actions page.",
+                cx,
+            )
+            .child(blocked(
+                "PrintButton: gpui 0.2.2 has no print API.",
+                cx,
+            )),
+        )
+}