feat: add box shadow to panel (#165)

* Add clipping

* Add box shadow

* Fix resize on 0

* Fix shadow on linux

* Update panel.html

* Add png files

* Update panel

* Update panel

* Update panel

* Disable svg and add webview set size method

---------

Co-authored-by: Wu Yuwei <Wu Yu Wei>

src/compositor.rs

@@ -11,7 +11,7 @@ use compositing_traits::{
 };
 use crossbeam_channel::Sender;
 use embedder_traits::Cursor;
-use euclid::{Point2D, Scale, Size2D, Transform3D, Vector2D};
+use euclid::{vec2, Point2D, Scale, Size2D, Transform3D, Vector2D};
 use gleam::gl;
 use ipc_channel::ipc;
 use log::{debug, error, trace, warn};
@@ -30,7 +30,8 @@ use webrender_api::units::{
     LayoutVector2D, WorldPoint,
 };
 use webrender_api::{
-    BuiltDisplayList, DirtyRect, DisplayListPayload, DocumentId, Epoch as WebRenderEpoch,
+    BorderRadius, BoxShadowClipMode, BuiltDisplayList, ClipMode, ColorF, CommonItemProperties,
+    ComplexClipRegion, DirtyRect, DisplayListPayload, DocumentId, Epoch as WebRenderEpoch,
     ExternalScrollId, FontInstanceOptions, HitTestFlags, PipelineId as WebRenderPipelineId,
     PropertyBinding, ReferenceFrameKind, RenderReasons, SampledScrollOffset, ScrollLocation,
     SpaceAndClipInfo, SpatialId, SpatialTreeItemKey, TransformStyle,
@@ -1030,20 +1031,51 @@ impl IOCompositor {
             LayoutRect::from_origin_and_size(LayoutPoint::zero(), scaled_viewport_size);
 
         let root_clip_id = builder.define_clip_rect(zoom_reference_frame, scaled_viewport_rect);
-        let clip_chain_id = builder.define_clip_chain(None, [root_clip_id]);
+        let root_clip_chain_id = builder.define_clip_chain(None, [root_clip_id]);
         for webview in window.painting_order() {
             if let Some(pipeline_id) = self.webviews.get(&webview.webview_id) {
-                let scaled_webview_rect = webview.rect.to_f32() / zoom_factor;
+                let scaled_webview_rect =
+                    LayoutRect::from_untyped(&(webview.rect.to_f32() / zoom_factor).to_untyped());
+                let complex = ComplexClipRegion::new(
+                    scaled_webview_rect,
+                    BorderRadius::uniform(10.), // TODO: add fields to webview
+                    ClipMode::Clip,
+                );
+                let clip_id = builder.define_clip_rounded_rect(zoom_reference_frame, complex);
+                let clip_chain_id = builder.define_clip_chain(Some(root_clip_chain_id), [clip_id]);
+                let root_space_and_clip = SpaceAndClipInfo {
+                    spatial_id: zoom_reference_frame,
+                    clip_chain_id,
+                };
+
                 builder.push_iframe(
-                    LayoutRect::from_untyped(&scaled_webview_rect.to_untyped()),
-                    LayoutRect::from_untyped(&scaled_webview_rect.to_untyped()),
-                    &SpaceAndClipInfo {
-                        spatial_id: zoom_reference_frame,
-                        clip_chain_id,
-                    },
+                    scaled_webview_rect,
+                    scaled_webview_rect,
+                    &root_space_and_clip,
                     pipeline_id.into(),
                     true,
                 );
+
+                let root_space = SpaceAndClipInfo {
+                    spatial_id: zoom_reference_frame,
+                    clip_chain_id: root_clip_chain_id,
+                };
+                let offset = vec2(0., 0.);
+                let color = ColorF::new(0.0, 0.0, 0.0, 0.4);
+                let blur_radius = 5.0;
+                let spread_radius = 0.0;
+                let box_shadow_type = BoxShadowClipMode::Outset;
+
+                builder.push_box_shadow(
+                    &CommonItemProperties::new(scaled_viewport_rect, root_space),
+                    scaled_webview_rect,
+                    offset,
+                    color,
+                    blur_radius,
+                    spread_radius,
+                    BorderRadius::uniform(10.),
+                    box_shadow_type,
+                );
             }
         }
 
@@ -1248,6 +1280,10 @@ impl IOCompositor {
     /// Resize the rendering context and all web views. Return true if the compositor should repaint and present
     /// after this.
     pub fn resize(&mut self, size: Size2D<i32, DevicePixel>, window: &mut Window) -> bool {
+        if size.height == 0 || size.width == 0 {
+            return false;
+        }
+
         let need_resize = self.on_resize_window_event(size, window);
 
         if let Some(panel) = &mut window.panel {
@@ -1257,10 +1293,9 @@ impl IOCompositor {
         }
 
         if let Some(w) = &mut window.webview {
-            let mut rect = DeviceIntRect::from_size(size);
-            rect.min.y = rect.max.y.min(76);
-            w.rect = rect;
-            self.on_resize_webview_event(w.webview_id, rect);
+            let rect = DeviceIntRect::from_size(size);
+            w.set_size(rect);
+            self.on_resize_webview_event(w.webview_id, w.rect);
         }
 
         self.send_root_pipeline_display_list(window);

src/webview.rs

@@ -45,6 +45,15 @@ impl WebView {
             rect,
         }
     }
+
+    /// Set the webview size corresponding to the window size.
+    pub fn set_size(&mut self, mut rect: DeviceIntRect) {
+        rect.min.y = rect.max.y.min(100);
+        rect.min.x += 10;
+        rect.max.y -= 10;
+        rect.max.x -= 10;
+        self.rect = rect;
+    }
 }
 
 impl Window {
@@ -153,9 +162,10 @@ impl Window {
                 let demo_url = ServoUrl::parse("https://example.com").unwrap();
                 let demo_id = WebViewId::new();
                 let size = self.size();
-                let mut rect = DeviceIntRect::from_size(size);
-                rect.min.y = rect.max.y.min(76);
-                self.webview = Some(WebView::new(demo_id, rect));
+                let rect = DeviceIntRect::from_size(size);
+                let mut webview = WebView::new(demo_id, rect);
+                webview.set_size(rect);
+                self.webview = Some(webview);
                 send_to_constellation(sender, ConstellationMsg::NewWebView(demo_url, demo_id));
                 log::debug!("Verso Window {:?} adds webview {}", self.id(), demo_id);
             }

src/window.rs

@@ -50,9 +50,11 @@ impl Window {
     /// Create a Verso window from Winit window and return the rendering context.
     pub fn new(evl: &ActiveEventLoop) -> (Self, RenderingContext) {
         let window = evl
-            .create_window(WinitWindow::default_attributes())
-            // .with_transparent(true)
-            // .with_decorations(false)
+            .create_window(
+                WinitWindow::default_attributes()
+                    .with_transparent(true)
+                    .with_decorations(false),
+            )
             .expect("Failed to create window.");
 
         #[cfg(macos)]
@@ -316,12 +318,12 @@ impl Window {
     /// Get the painting order of this window.
     pub fn painting_order(&self) -> Vec<&WebView> {
         let mut order = vec![];
-        if let Some(webview) = &self.webview {
-            order.push(webview);
-        }
         if let Some(panel) = &self.panel {
             order.push(panel);
         }
+        if let Some(webview) = &self.webview {
+            order.push(webview);
+        }
         order
     }