feat(prompt): add prompt support (#250)

* feat(context-menu): create webview on wayland * dynamic generate menu items on html * add context_menu.html * add check mouse hit on context-menu webview * fix: context menu prompt back to verso * feat(context-menu): on linux, handle selection * fix: disble right click on context menu * organize code * adding cfg target linux * fix(linux): shift context menu to avoid overflow, best effort * prompt temp * add alert prompt * refactor: move prompt and context menu to components * remove redundant import * feat(prompt): add ok/cancel, yes/no prompt * feat(prompt): add input prompt dialog * fix: add serde to all platform's dep * refactor: organize verso html files * update gitignore * refactor: remove dialog show method depends on Window * refactor: code clean * fix: don't show context menu when prompt exist * update css * fix(prompt): handle resize when prompt exists * fix(prompt): close prompt when navigate to new url * chore: restore default home page * chore: fix linux mod path, remove unused pipeline fn * feat: handle EmbedderMsg::PromptPermission * refactor: rename components to webview and move WebView into it
versotile-org · Dec 4, 2024 · 6ca28dd · 6ca28dd
1 parent 0bcade2
commit 6ca28dd
Show file tree

Hide file tree

Showing 17 changed files with 741 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,6 @@ Cargo.lock
 libmozjs*
 cargo-sources.json
 
-resources/
-!resources/panel.html
-!resources/context-menu.html
+resources/*
+!resources/components/
+!resources/prefs.json
diff --git a/Cargo.toml b/Cargo.toml
@@ -106,8 +106,6 @@ cargo-packager-resource-resolver = { version = "0.1.1", features = [
 url = { workspace = true }
 headers = "0.3"
 versoview_messages = { path = "./versoview_messages" }
-
-[target.'cfg(all(unix, not(apple), not(android)))'.dependencies]
 serde_json = "1.0"
 serde = { workspace = true }
 

diff --git a/resources/context_menu.html → resources/components/context_menu.html b/resources/context_menu.html → resources/components/context_menu.html
diff --git a/resources/panel.html → resources/components/panel.html b/resources/panel.html → resources/components/panel.html
diff --git a/resources/components/prompt/alert.html b/resources/components/prompt/alert.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <style>
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        background-color: #7d818644;
+      }
+      .dialog {
+        display: flex;
+        background: #ffffff;
+        width: 400px;
+        min-height: 110px;
+        max-height: 300px;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 10px;
+        box-shadow: 0 0 50px #ccc;
+        box-sizing: border-box;
+        padding: 8px;
+        gap: 8px;
+      }
+      .msg {
+        display: inline-block;
+        width: 100%;
+        min-height: 90px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dialog">
+      <div id="msg" class="msg"></div>
+      <button onclick="sendToVersoAndClose()">Ok</button>
+    </div>
+  </body>
+  <script>
+    let url = URL.parse(window.location.href);
+    let msg = url.searchParams.get('msg');
+
+    // Set dialog message
+    const msgEl = document.getElementById('msg');
+    msgEl.textContent = msg ?? '';
+
+    function sendToVersoAndClose() {
+      window.alert(''); // Use as an IPC between Verso and WebView
+      window.close();
+    }
+  </script>
+</html>
diff --git a/resources/components/prompt/ok_cancel.html b/resources/components/prompt/ok_cancel.html
@@ -0,0 +1,57 @@
+<html>
+  <head>
+    <style>
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        background-color: #7d818644;
+      }
+      .dialog {
+        display: flex;
+        background: #ffffff;
+        width: 400px;
+        min-height: 110px;
+        max-height: 300px;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 10px;
+        box-shadow: 0 0 50px #ccc;
+        box-sizing: border-box;
+        padding: 8px;
+        gap: 8px;
+      }
+      .msg {
+        display: inline-block;
+        width: 100%;
+        min-height: 90px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dialog">
+      <div id="msg" class="msg"></div>
+      <div class="btn-group">
+        <button onclick="sendToVersoAndClose('cancel')">Cancel</button>
+        <button onclick="sendToVersoAndClose('ok')">Ok</button>
+      </div>
+    </div>
+  </body>
+  <script>
+    let url = URL.parse(window.location.href);
+    let msg = url.searchParams.get('msg');
+
+    // Set dialog message
+    const msgEl = document.getElementById('msg');
+    msgEl.textContent = msg ?? '';
+
+    function sendToVersoAndClose(action) {
+      window.alert(action); // Use as an IPC between Verso and WebView
+      window.close();
+    }
+  </script>
+</html>
diff --git a/resources/components/prompt/prompt.html b/resources/components/prompt/prompt.html
@@ -0,0 +1,72 @@
+<html>
+  <head>
+    <style>
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        background-color: #7d818644;
+      }
+      .dialog {
+        display: flex;
+        background: #ffffff;
+        width: 400px;
+        min-height: 110px;
+        max-height: 300px;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 10px;
+        box-shadow: 0 0 50px #ccc;
+        box-sizing: border-box;
+        padding: 8px;
+        gap: 8px;
+      }
+      .msg {
+        display: inline-block;
+        width: 100%;
+        min-height: 90px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dialog">
+      <div id="msg" class="msg"></div>
+      <input type="text" id="input" />
+      <div class="btn-group">
+        <button onclick="sendToVersoAndClose('cancel')">Cancel</button>
+        <button onclick="sendToVersoAndClose('ok')">Ok</button>
+      </div>
+    </div>
+  </body>
+  <script>
+    const inputEl = document.getElementById('input');
+    const msgEl = document.getElementById('msg');
+
+    const params = URL.parse(window.location.href).searchParams;
+
+    // Set input default value
+    const defaultValue = params.get('defaultValue');
+    if (typeof defaultValue === 'string' || defaultValue instanceof String) {
+      inputEl.defaultValue = defaultValue;
+    }
+
+    // Set dialog message
+    const msg = params.get('msg');
+    msgEl.textContent = msg ?? '';
+
+    function sendToVersoAndClose(action) {
+      // Use as an IPC between Verso and WebView
+      window.alert(
+        JSON.stringify({
+          action,
+          value: inputEl.value,
+        })
+      );
+      window.close();
+    }
+  </script>
+</html>
diff --git a/resources/components/prompt/prompt_test.html b/resources/components/prompt/prompt_test.html
@@ -0,0 +1,30 @@
+<html>
+  <body>
+    <div style="display: block">
+      <button onclick="window.alert('<a> HREF </a>');">alert</button>
+      <button onclick="sendConfirm();">confirm</button>
+      <button onclick="sendPrompt('');">prompt</button>
+      <button onclick="sendPrompt(null, '>> default value >>');">
+        prompt with default value
+      </button>
+    </div>
+
+    <div style="display: inline-block" id="result"></div>
+
+    <script>
+      const resultEl = document.getElementById('result');
+
+      function sendConfirm(text) {
+        let result = window.confirm(text);
+        resultEl.textContent = JSON.stringify(result);
+        console.log(result);
+      }
+
+      function sendPrompt(text, defaultValue) {
+        let result = window.prompt(text, defaultValue);
+        resultEl.textContent = JSON.stringify(result);
+        console.log(result);
+      }
+    </script>
+  </body>
+</html>
diff --git a/resources/components/prompt/yes_no.html b/resources/components/prompt/yes_no.html
@@ -0,0 +1,57 @@
+<html>
+  <head>
+    <style>
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        background-color: #7d818644;
+      }
+      .dialog {
+        display: flex;
+        background: #ffffff;
+        width: 400px;
+        min-height: 110px;
+        max-height: 300px;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 10px;
+        box-shadow: 0 0 50px #ccc;
+        box-sizing: border-box;
+        padding: 8px;
+        gap: 8px;
+      }
+      .msg {
+        display: inline-block;
+        width: 100%;
+        min-height: 90px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dialog">
+      <div id="msg" class="msg"></div>
+      <div class="btn-group">
+        <button onclick="sendToVersoAndClose('no')">No</button>
+        <button onclick="sendToVersoAndClose('yes')">Yes</button>
+      </div>
+    </div>
+  </body>
+  <script>
+    let url = URL.parse(window.location.href);
+    let msg = url.searchParams.get('msg');
+
+    // Set dialog message
+    const msgEl = document.getElementById('msg');
+    msgEl.textContent = msg ?? '';
+
+    function sendToVersoAndClose(action) {
+      window.alert(action); // Use as an IPC between Verso and WebView
+      window.close();
+    }
+  </script>
+</html>
diff --git a/src/compositor.rs b/src/compositor.rs
@@ -916,19 +916,6 @@ impl IOCompositor {
             .expect("Insert then get failed!")
     }
 
-    fn pipeline(&self, pipeline_id: PipelineId) -> Option<&CompositionPipeline> {
-        match self.pipeline_details.get(&pipeline_id) {
-            Some(details) => details.pipeline.as_ref(),
-            None => {
-                warn!(
-                    "Compositor layer has an unknown pipeline ({:?}).",
-                    pipeline_id
-                );
-                None
-            }
-        }
-    }
-
     /// Set the root pipeline for our WebRender scene to a display list that consists of an iframe
     /// for each visible top-level browsing context, applying a transformation on the root for
     /// pinch zoom, page zoom, and HiDPI scaling.
@@ -1246,6 +1233,10 @@ impl IOCompositor {
             w.set_size(content_size);
             self.on_resize_webview_event(w.webview_id, w.rect);
         }
+        if let Some(prompt) = &mut window.prompt {
+            prompt.resize(content_size);
+            self.on_resize_webview_event(prompt.webview().webview_id, rect);
+        }
 
         self.send_root_pipeline_display_list(window);
     }

diff --git a/src/config.rs b/src/config.rs
@@ -314,7 +314,9 @@ impl ProtocolHandler for ResourceReader {
         _done_chan: &mut net::fetch::methods::DoneChannel,
         _context: &net::fetch::methods::FetchContext,
     ) -> std::pin::Pin<Box<dyn std::future::Future<Output = Response> + Send>> {
-        let path = self.0.join(request.current_url().domain().unwrap());
+        let current_url = request.current_url();
+        let path = current_url.path();
+        let path = self.0.join(path.strip_prefix('/').unwrap_or(path));
 
         let response = if let Ok(file) = fs::read(path) {
             let mut response = Response::new(

diff --git a/src/lib.rs b/src/lib.rs
@@ -29,5 +29,3 @@ pub use errors::{Error, Result};
 pub use verso::Verso;
 /// Re-exporting Winit for the sake of convenience.
 pub use winit;
-/// Context
-pub mod context_menu;
diff --git a/src/context_menu.rs → src/webview/context_menu.rs b/src/context_menu.rs → src/webview/context_menu.rs
@@ -131,7 +131,10 @@ impl ContextMenu {
     /// Get resource URL of the context menu
     fn resource_url(&self) -> ServoUrl {
         let items_json: String = self.to_items_json();
-        let url_str = format!("verso://context_menu.html?items={}", items_json);
+        let url_str = format!(
+            "verso://resources/components/context_menu.html?items={}",
+            items_json
+        );
         ServoUrl::parse(&url_str).unwrap()
     }
 
@@ -221,8 +224,9 @@ impl MenuItem {
 /// Context Menu Click Result
 #[cfg(linux)]
 #[derive(Debug, Clone, Serialize, Deserialize)]
+
 pub struct ContextMenuResult {
-    /// The id of the menu ite    /// Get the label of the menu item
+    /// The id of the menu item
     pub id: String,
     /// Close the context menu
     pub close: bool,

diff --git a/src/webview/mod.rs b/src/webview/mod.rs
@@ -0,0 +1,7 @@
+mod webview;
+/// WebView
+pub use webview::{Panel, WebView};
+/// Context Menu
+pub mod context_menu;
+/// Prompt Dialog
+pub mod prompt;