wip: refactor

crates/ui/src/scroll/scrollable.rs

@@ -1,11 +1,11 @@
-use std::{cell::Cell, rc::Rc};
-
-use super::{Scrollbar, ScrollbarAxis, ScrollbarState};
 use gpui::{
     canvas, div, relative, AnyElement, Div, Element, ElementId, EntityId, GlobalElementId,
     InteractiveElement, IntoElement, ParentElement, Pixels, Position, ScrollHandle, SharedString,
     Size, Stateful, StatefulInteractiveElement, Style, StyleRefinement, Styled, WindowContext,
 };
+use std::{cell::Cell, rc::Rc};
+
+use super::{Scrollbar, ScrollbarAxis, ScrollbarState};
 
 /// A scroll view is a container that allows the user to scroll through a large amount of content.
 pub struct Scrollable<E> {
@@ -121,6 +121,7 @@ where
         }
     }
 }
+
 impl<E> StatefulInteractiveElement for Scrollable<E> where E: Element + StatefulInteractiveElement {}
 
 impl<E> IntoElement for Scrollable<E>
@@ -202,8 +203,8 @@ where
                         ),
                 )
                 .into_any_element();
-            let element_id = element.request_layout(cx);
 
+            let element_id = element.request_layout(cx);
             let layout_id = cx.request_layout(style, vec![element_id]);
 
             (layout_id, element)

crates/ui/src/scroll/scrollbar.rs

@@ -1,12 +1,8 @@
+use gpui::*;
+use serde::{Deserialize, Serialize};
 use std::{cell::Cell, rc::Rc, time::Instant};
 
 use crate::theme::ActiveTheme;
-use gpui::{
-    fill, point, px, relative, AppContext, Bounds, ContentMask, CursorStyle, Edges, Element,
-    EntityId, Hitbox, Hsla, IntoElement, MouseDownEvent, MouseMoveEvent, MouseUpEvent, PaintQuad,
-    Pixels, Point, Position, ScrollHandle, ScrollWheelEvent, Style, UniformListScrollHandle,
-};
-use serde::{Deserialize, Serialize};
 
 /// Scrollbar show mode.
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, Hash, Default)]
@@ -22,6 +18,7 @@ impl ScrollbarShow {
     }
 }
 
+const BORDER_WIDTH: Pixels = px(0.);
 const MIN_THUMB_SIZE: f32 = 80.;
 const THUMB_RADIUS: Pixels = Pixels(3.0);
 const THUMB_INSET: Pixels = Pixels(4.);
@@ -357,11 +354,12 @@ pub struct AxisPrepaintState {
     axis: ScrollbarAxis,
     bar_hitbox: Hitbox,
     bounds: Bounds<Pixels>,
-    border_width: Pixels,
     radius: Pixels,
     bg: Hsla,
     border: Hsla,
     thumb_bounds: Bounds<Pixels>,
+    // Bounds of thumb to be rendered.
+    thumb_fill_bounds: Bounds<Pixels>,
     thumb_bg: Hsla,
     scroll_size: Pixels,
     container_size: Pixels,
@@ -387,7 +385,7 @@ impl Element for Scrollbar {
             position: Position::Absolute,
             flex_grow: 1.0,
             flex_shrink: 1.0,
-            size: gpui::Size {
+            size: Size {
                 width: relative(1.).into(),
                 height: relative(1.).into(),
             },
@@ -517,11 +515,21 @@ impl Element for Scrollbar {
                     idle_state
                 };
 
-            let border_width = px(0.);
             let thumb_bounds = if is_vertical {
+                Bounds::from_corners(
+                    point(bounds.origin.x, bounds.origin.y + thumb_start),
+                    point(bounds.origin.x + self.width, bounds.origin.y + thumb_end),
+                )
+            } else {
+                Bounds::from_corners(
+                    point(bounds.origin.x + thumb_start, bounds.origin.y),
+                    point(bounds.origin.x + thumb_end, bounds.origin.y + self.width),
+                )
+            };
+            let thumb_fill_bounds = if is_vertical {
                 Bounds::from_corners(
                     point(
-                        bounds.origin.x + inset + border_width,
+                        bounds.origin.x + inset + BORDER_WIDTH,
                         bounds.origin.y + thumb_start + inset,
                     ),
                     point(
@@ -533,7 +541,7 @@ impl Element for Scrollbar {
                 Bounds::from_corners(
                     point(
                         bounds.origin.x + thumb_start + inset,
-                        bounds.origin.y + inset + border_width,
+                        bounds.origin.y + inset + BORDER_WIDTH,
                     ),
                     point(
                         bounds.origin.x + thumb_end - inset,
@@ -550,11 +558,11 @@ impl Element for Scrollbar {
                 axis,
                 bar_hitbox,
                 bounds,
-                border_width,
                 radius,
                 bg: bar_bg,
                 border: bar_border,
                 thumb_bounds,
+                thumb_fill_bounds,
                 thumb_bg,
                 scroll_size: scroll_area_size,
                 container_size,
@@ -603,11 +611,11 @@ impl Element for Scrollbar {
                             top: px(0.),
                             right: px(0.),
                             bottom: px(0.),
-                            left: state.border_width,
+                            left: BORDER_WIDTH,
                         }
                     } else {
                         Edges {
-                            top: state.border_width,
+                            top: BORDER_WIDTH,
                             right: px(0.),
                             bottom: px(0.),
                             left: px(0.),
@@ -616,7 +624,7 @@ impl Element for Scrollbar {
                     border_color: state.border,
                 });
 
-                cx.paint_quad(fill(thumb_bounds, state.thumb_bg).corner_radii(radius));
+                cx.paint_quad(fill(state.thumb_fill_bounds, state.thumb_bg).corner_radii(radius));
             });
 
             cx.on_mouse_event({