dock: Add cache to panel view. (#600)

crates/story/src/table_story.rs

@@ -33,8 +33,8 @@ impl_internal_actions!(table_story, [ChangeSize, OpenDetail]);
 #[derive(Clone, Debug, Default)]
 struct Stock {
     id: usize,
-    symbol: String,
-    name: String,
+    symbol: SharedString,
+    name: SharedString,
     price: f64,
     change: f64,
     change_percent: f64,
@@ -103,8 +103,8 @@ fn random_stocks(size: usize) -> Vec<Stock> {
     (0..size)
         .map(|id| Stock {
             id,
-            symbol: Faker.fake::<String>(),
-            name: Faker.fake::<String>(),
+            symbol: Faker.fake::<String>().into(),
+            name: Faker.fake::<String>().into(),
             change: (-100.0..100.0).fake(),
             change_percent: (-1.0..1.0).fake(),
             volume: (0.0..1000.0).fake(),

crates/ui/src/dock/dock.rs

@@ -3,9 +3,10 @@
 use std::sync::Arc;
 
 use gpui::{
-    div, prelude::FluentBuilder as _, px, App, AppContext, Axis, Context, Element, Empty, Entity,
-    InteractiveElement as _, IntoElement, MouseMoveEvent, MouseUpEvent, ParentElement as _, Pixels,
-    Point, Render, StatefulInteractiveElement, Style, Styled as _, WeakEntity, Window,
+    div, prelude::FluentBuilder as _, px, AnyView, App, AppContext, Axis, Context, Element, Empty,
+    Entity, InteractiveElement as _, IntoElement, MouseMoveEvent, MouseUpEvent, ParentElement as _,
+    Pixels, Point, Render, StatefulInteractiveElement, Style, StyleRefinement, Styled as _,
+    WeakEntity, Window,
 };
 use serde::{Deserialize, Serialize};
 
@@ -394,6 +395,8 @@ impl Render for Dock {
             return div();
         }
 
+        let cache_style = StyleRefinement::default().v_flex().size_full();
+
         div()
             .relative()
             .overflow_hidden()
@@ -408,8 +411,10 @@ impl Render for Dock {
             })
             .map(|this| match &self.panel {
                 DockItem::Split { view, .. } => this.child(view.clone()),
-                DockItem::Tabs { view, .. } => this.child(view.clone()),
-                DockItem::Panel { view, .. } => this.child(view.clone().view()),
+                DockItem::Tabs { view, .. } => {
+                    this.child(AnyView::from(view.clone()).cached(cache_style))
+                }
+                DockItem::Panel { view, .. } => this.child(view.clone().view().cached(cache_style)),
                 // Not support to render Tiles and Tile into Dock
                 DockItem::Tiles { .. } => this,
             })

crates/ui/src/dock/tab_panel.rs

@@ -4,7 +4,7 @@ use gpui::{
     div, prelude::FluentBuilder, px, rems, App, AppContext, Context, Corner, DefiniteLength,
     DismissEvent, DragMoveEvent, Empty, Entity, EventEmitter, FocusHandle, Focusable,
     InteractiveElement as _, IntoElement, ParentElement, Pixels, Render, ScrollHandle,
-    SharedString, StatefulInteractiveElement, Styled, WeakEntity, Window,
+    SharedString, StatefulInteractiveElement, StyleRefinement, Styled, WeakEntity, Window,
 };
 use rust_i18n::t;
 
@@ -14,7 +14,7 @@ use crate::{
     h_flex,
     popup_menu::{PopupMenu, PopupMenuExt},
     tab::{Tab, TabBar},
-    v_flex, ActiveTheme, AxisExt, IconName, Placement, Selectable, Sizable,
+    v_flex, ActiveTheme, AxisExt, IconName, Placement, Selectable, Sizable, StyledExt as _,
 };
 
 use super::{
@@ -767,7 +767,11 @@ impl TabPanel {
             .overflow_y_scroll()
             .overflow_x_hidden()
             .flex_1()
-            .child(active_panel.view())
+            .child(
+                active_panel
+                    .view()
+                    .cached(StyleRefinement::default().v_flex().size_full()),
+            )
             .when(state.droppable, |this| {
                 this.on_drag_move(cx.listener(Self::on_panel_drag_move))
                     .child(

crates/ui/src/scroll/scrollbar.rs

@@ -589,6 +589,11 @@ impl Element for Scrollbar {
         let is_visible = self.state.get().is_scrollbar_visible();
         let is_hover_to_show = cx.theme().scrollbar_show.is_hover();
 
+        window.with_content_mask(
+            Some(ContentMask {
+                bounds: hitbox_bounds,
+            }),
+            |window| {
                 for state in prepaint.states.iter() {
                     let axis = state.axis;
                     let radius = state.radius;
@@ -627,7 +632,9 @@ impl Element for Scrollbar {
                             border_color: state.border,
                         });
 
-                cx.paint_quad(fill(state.thumb_fill_bounds, state.thumb_bg).corner_radii(radius));
+                        cx.paint_quad(
+                            fill(state.thumb_fill_bounds, state.thumb_bg).corner_radii(radius),
+                        );
                     });
 
                     window.on_mouse_event({
@@ -638,11 +645,10 @@ impl Element for Scrollbar {
                         move |event: &ScrollWheelEvent, phase, _, cx| {
                             if phase.bubble() && hitbox_bounds.contains(&event.position) {
                                 if scroll_handle.offset() != state.get().last_scroll_offset {
-                            state.set(
-                                state
-                                    .get()
-                                    .with_last_scroll(scroll_handle.offset(), Some(Instant::now())),
-                            );
+                                    state.set(state.get().with_last_scroll(
+                                        scroll_handle.offset(),
+                                        Some(Instant::now()),
+                                    ));
                                     cx.notify(view_id);
                                 }
                             }
@@ -785,5 +791,7 @@ impl Element for Scrollbar {
                         }
                     });
                 }
+            },
+        );
     }
 }