Add WebView (#2)

- huacnlee/zed#6
- zed-industries/zed#13730

Cargo.toml

@@ -5,8 +5,7 @@ default-members = ["crates/app"]
 resolver = "2"
 
 [workspace.dependencies]
-# gpui = { path = "/Users/jason/github/zed/crates/gpui" }
-gpui = { git = "https://github.com/zed-industries/zed.git" }
+gpui = { git = "https://github.com/huacnlee/zed.git", branch = "export-platform-window" }
 ui = { path = "crates/ui" }
 story = { path = "crates/story" }
 workspace = { path = "crates/workspace" }

crates/app/src/story_workspace.rs

@@ -3,7 +3,7 @@ use prelude::FluentBuilder as _;
 use story::{
     ButtonStory, CheckboxStory, DropdownStory, ImageStory, InputStory, ListStory, PickerStory,
     PopoverStory, ProgressStory, ResizableStory, ScrollableStory, StoryContainer, SwitchStory,
-    TableStory, TooltipStory,
+    TableStory, TooltipStory, WebViewStory,
 };
 use workspace::{dock::DockPosition, TitleBar, Workspace};
 
@@ -50,21 +50,23 @@ impl StoryWorkspace {
         )
         .detach();
 
-        StoryContainer::add_panel(
+        StoryContainer::add_pane(
+            "Input",
+            "A control that allows the user to input text.",
             InputStory::view(cx).into(),
             workspace.clone(),
-            DockPosition::Right,
-            px(350.0),
             cx,
-        );
+        )
+        .detach();
 
-        StoryContainer::add_panel(
+        StoryContainer::add_pane(
+            "Checkbox",
+            "A control that allows the user to toggle between checked and not checked.",
             CheckboxStory::view(cx).into(),
             workspace.clone(),
-            DockPosition::Bottom,
-            px(200.),
             cx,
-        );
+        )
+        .detach();
 
         StoryContainer::add_pane(
             "Switch",
@@ -128,6 +130,14 @@ impl StoryWorkspace {
         )
         .detach();
 
+        StoryContainer::add_panel(
+            WebViewStory::view(cx).into(),
+            workspace.clone(),
+            DockPosition::Right,
+            px(450.),
+            cx,
+        );
+
         StoryContainer::add_pane(
             "Table",
             "Powerful table and datagrids built.",

crates/story/Cargo.toml

@@ -12,3 +12,7 @@ anyhow = "1"
 workspace.workspace = true
 charts-rs = "0.3"
 image = "0.25.1"
+wry = "0"
+
+[lints]
+workspace = true

crates/story/src/lib.rs

@@ -12,6 +12,7 @@ mod scrollable_story;
 mod switch_story;
 mod table_story;
 mod tooltip_story;
+mod webview_story;
 
 pub use button_story::ButtonStory;
 pub use checkbox_story::CheckboxStory;
@@ -27,6 +28,7 @@ pub use scrollable_story::ScrollableStory;
 pub use switch_story::SwitchStory;
 pub use table_story::TableStory;
 pub use tooltip_story::TooltipStory;
+pub use webview_story::WebViewStory;
 
 use gpui::{
     div, prelude::FluentBuilder as _, px, AnyElement, AnyView, AppContext, Div, EventEmitter,
@@ -46,14 +48,6 @@ pub fn init(cx: &mut AppContext) {
     input_story::init(cx);
 }
 
-pub fn story_case(
-    name: &'static str,
-    description: &'static str,
-    cx: &mut WindowContext,
-) -> StoryContainer {
-    StoryContainer::new(name, description, cx)
-}
-
 pub fn section(title: impl Into<SharedString>, cx: &WindowContext) -> Div {
     use ui::theme::ActiveTheme;
     let theme = cx.theme();
@@ -104,7 +98,7 @@ impl Item for StoryContainer {
         Label::new(self.name.clone()).into_any_element()
     }
 
-    fn deactivated(&mut self, _: &mut ViewContext<Self>) {
+    fn deactivated(&mut self, _cx: &mut ViewContext<Self>) {
         self.active = false;
     }
 

crates/story/src/webview_story.rs

@@ -0,0 +1,105 @@
+use gpui::{
+    div, ClickEvent, FocusHandle, FocusableView, ParentElement as _, Render, Styled as _, View,
+    ViewContext, VisualContext as _, WindowContext,
+};
+use ui::{
+    button::Button,
+    h_flex,
+    input::{TextEvent, TextInput},
+    theme::ActiveTheme,
+    v_flex,
+    webview::WebView,
+    Clickable, IconName,
+};
+
+pub struct WebViewStory {
+    focus_handle: FocusHandle,
+    webview: View<WebView>,
+    address_input: View<TextInput>,
+}
+
+impl WebViewStory {
+    pub fn view(cx: &mut WindowContext) -> View<Self> {
+        let focus_handle = cx.focus_handle();
+
+        let webview = cx.new_view(|cx| WebView::new(cx));
+
+        let address_input = cx.new_view(|cx| {
+            let mut input = TextInput::new(cx);
+            input.set_text("https://github.com/explore", cx);
+            input
+        });
+
+        let url = address_input.read(cx).text();
+        webview.update(cx, |view, _| {
+            view.load_url(&url);
+        });
+
+        cx.new_view(|cx| {
+            let this = WebViewStory {
+                focus_handle,
+                webview,
+                address_input: address_input.clone(),
+            };
+
+            cx.subscribe(
+                &address_input,
+                |this: &mut Self, input, event: &TextEvent, cx| match event {
+                    TextEvent::PressEnter => {
+                        let url = input.read(cx).text();
+                        this.webview.update(cx, |view, _| {
+                            view.load_url(&url);
+                        });
+                    }
+                    _ => {}
+                },
+            )
+            .detach();
+
+            this
+        })
+    }
+
+    pub fn hide(&self, cx: &mut WindowContext) {
+        self.webview.update(cx, |webview, _| webview.hide())
+    }
+
+    fn go_back(&mut self, _: &ClickEvent, cx: &mut ViewContext<Self>) {
+        self.webview.update(cx, |webview, _| {
+            webview.back().unwrap();
+        });
+    }
+}
+
+impl FocusableView for WebViewStory {
+    fn focus_handle(&self, _cx: &gpui::AppContext) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for WebViewStory {
+    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl gpui::IntoElement {
+        v_flex()
+            .p_2()
+            .gap_3()
+            .size_full()
+            .child(
+                h_flex()
+                    .gap_2()
+                    .items_center()
+                    .child(
+                        Button::new("go-back", cx)
+                            .icon(IconName::ArrowLeft)
+                            .on_click(cx.listener(Self::go_back)),
+                    )
+                    .child(self.address_input.clone()),
+            )
+            .child(
+                div()
+                    .size_full()
+                    .border_1()
+                    .border_color(cx.theme().border)
+                    .child(self.webview.clone()),
+            )
+    }
+}

crates/ui/Cargo.toml

@@ -14,7 +14,7 @@ anyhow = "1"
 log = "0.4"
 serde = "1.0.203"
 serde_json = "1"
-wry = "0"
+
 smallvec = "1.13.2"
 windows = "0.57.0"
 unicode-segmentation = "1.11.0"
@@ -24,6 +24,12 @@ usvg = { version = "0.41.0", default-features = false }
 taffy = "0.4.3"
 paste = "1"
 once_cell = "1.19.0"
+raw-window-handle = "0.6.2"
+winit = "0.30.3"
+objc = "0.2"
+objc_id = "0.1"
+cocoa = "0.25"
+wry = "0"
 
 [lints]
 workspace = true

crates/ui/src/icon.rs

@@ -23,6 +23,10 @@ pub enum IconName {
     CircleX,
     Loader,
     LoaderCircle,
+    ArrowLeft,
+    ArrowRight,
+    ChevronLeft,
+    ChevronRight,
 }
 
 impl IconName {
@@ -45,6 +49,10 @@ impl IconName {
             IconName::CircleX => "icons/circle-x.svg",
             IconName::Loader => "icons/loader.svg",
             IconName::LoaderCircle => "icons/loader-circle.svg",
+            IconName::ArrowLeft => "icons/arrow-left.svg",
+            IconName::ArrowRight => "icons/arrow-right.svg",
+            IconName::ChevronLeft => "icons/chevron-left.svg",
+            IconName::ChevronRight => "icons/chevron-right.svg",
         }
         .into()
     }

crates/ui/src/lib.rs

@@ -31,6 +31,7 @@ pub mod tab;
 pub mod table;
 pub mod theme;
 pub mod tooltip;
+pub mod webview;
 
 pub use clickable::Clickable;
 pub use disableable::Disableable;
@@ -52,4 +53,5 @@ pub fn init(cx: &mut gpui::AppContext) {
     popover::init(cx);
     popup_menu::init(cx);
     table::init(cx);
+    webview::init(cx)
 }