Revert "gpui & ui: Use shader for dashed dividers" (#23850)

Reverts zed-industries/zed#23839

getting some reports of linux crashes – will investigate later today

Release Notes:

- N/A

crates/ui/src/components/divider.rs

@@ -1,7 +1,14 @@
-use gpui::{pattern_horizontal_dash, pattern_vertical_dash, Background, Hsla, IntoElement};
+#![allow(missing_docs)]
+use gpui::{Hsla, IntoElement};
 
 use crate::prelude::*;
 
+#[derive(Clone, Copy, PartialEq)]
+enum DividerStyle {
+    Solid,
+    Dashed,
+}
+
 #[derive(Clone, Copy, PartialEq)]
 enum DividerDirection {
     Horizontal,
@@ -11,15 +18,12 @@ enum DividerDirection {
 /// The color of a [`Divider`].
 #[derive(Default)]
 pub enum DividerColor {
-    /// The default border color.
-    #[default]
     Border,
-    /// Usually a de-emphasized border color.
+    #[default]
     BorderVariant,
 }
 
 impl DividerColor {
-    /// Returns the divider's HSLA color.
     pub fn hsla(self, cx: &mut App) -> Hsla {
         match self {
             DividerColor::Border => cx.theme().colors().border,
@@ -28,29 +32,71 @@ impl DividerColor {
     }
 }
 
-/// A component that can be used to separate sections of content.
-///
-/// Can be rendered horizontally or vertically.
 #[derive(IntoElement)]
 pub struct Divider {
+    style: DividerStyle,
     direction: DividerDirection,
     color: DividerColor,
     inset: bool,
-    is_dashed: bool,
 }
 
 impl RenderOnce for Divider {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
-        let color = self.color.hsla(cx);
-        let background = if self.is_dashed {
-            match self.direction {
-                DividerDirection::Horizontal => pattern_horizontal_dash(color),
-                DividerDirection::Vertical => pattern_vertical_dash(color),
-            }
-        } else {
-            Background::from(color)
-        };
+        match self.style {
+            DividerStyle::Solid => self.render_solid(cx).into_any_element(),
+            DividerStyle::Dashed => self.render_dashed(cx).into_any_element(),
+        }
+    }
+}
 
+impl Divider {
+    pub fn horizontal() -> Self {
+        Self {
+            style: DividerStyle::Solid,
+            direction: DividerDirection::Horizontal,
+            color: DividerColor::default(),
+            inset: false,
+        }
+    }
+
+    pub fn vertical() -> Self {
+        Self {
+            style: DividerStyle::Solid,
+            direction: DividerDirection::Vertical,
+            color: DividerColor::default(),
+            inset: false,
+        }
+    }
+
+    pub fn horizontal_dashed() -> Self {
+        Self {
+            style: DividerStyle::Dashed,
+            direction: DividerDirection::Horizontal,
+            color: DividerColor::default(),
+            inset: false,
+        }
+    }
+
+    pub fn vertical_dashed() -> Self {
+        Self {
+            style: DividerStyle::Dashed,
+            direction: DividerDirection::Vertical,
+            color: DividerColor::default(),
+            inset: false,
+        }
+    }
+
+    pub fn inset(mut self) -> Self {
+        self.inset = true;
+        self
+    }
+
+    pub fn color(mut self, color: DividerColor) -> Self {
+        self.color = color;
+        self
+    }
+
+    pub fn render_solid(self, cx: &mut App) -> impl IntoElement {
         div()
             .map(|this| match self.direction {
                 DividerDirection::Horizontal => {
@@ -60,60 +106,38 @@ impl RenderOnce for Divider {
                     this.w_px().h_full().when(self.inset, |this| this.my_1p5())
                 }
             })
-            .bg(background)
-    }
-}
-
-impl Divider {
-    /// Creates a solid horizontal divider.
-    pub fn horizontal() -> Self {
-        Self {
-            direction: DividerDirection::Horizontal,
-            color: DividerColor::default(),
-            inset: false,
-            is_dashed: false,
-        }
-    }
-
-    /// Creates a solid vertical divider.
-    pub fn vertical() -> Self {
-        Self {
-            direction: DividerDirection::Vertical,
-            color: DividerColor::default(),
-            inset: false,
-            is_dashed: false,
-        }
-    }
-
-    /// Creates a dashed horizontal divider.
-    pub fn horizontal_dashed() -> Self {
-        Self {
-            direction: DividerDirection::Horizontal,
-            color: DividerColor::default(),
-            inset: false,
-            is_dashed: true,
-        }
-    }
-
-    /// Creates a dashed vertical divider.
-    pub fn vertical_dashed() -> Self {
-        Self {
-            direction: DividerDirection::Vertical,
-            color: DividerColor::default(),
-            inset: false,
-            is_dashed: true,
-        }
-    }
-
-    /// Pads the divider with a margin.
-    pub fn inset(mut self) -> Self {
-        self.inset = true;
-        self
-    }
-
-    /// Sets the color of the divider.
-    pub fn color(mut self, color: DividerColor) -> Self {
-        self.color = color;
-        self
+            .bg(self.color.hsla(cx))
+    }
+
+    // TODO: Use canvas or a shader here
+    // This obviously is a short term approach
+    pub fn render_dashed(self, cx: &mut App) -> impl IntoElement {
+        let segment_count = 128;
+        let segment_count_f = segment_count as f32;
+        let segment_min_w = 6.;
+        let base = match self.direction {
+            DividerDirection::Horizontal => h_flex(),
+            DividerDirection::Vertical => v_flex(),
+        };
+        let (w, h) = match self.direction {
+            DividerDirection::Horizontal => (px(segment_min_w), px(1.)),
+            DividerDirection::Vertical => (px(1.), px(segment_min_w)),
+        };
+        let color = self.color.hsla(cx);
+        let total_min_w = segment_min_w * segment_count_f * 2.; // * 2 because of the gap
+
+        base.min_w(px(total_min_w))
+            .map(|this| {
+                if self.direction == DividerDirection::Horizontal {
+                    this.w_full().h_px()
+                } else {
+                    this.w_px().h_full()
+                }
+            })
+            .gap(px(segment_min_w))
+            .overflow_hidden()
+            .children(
+                (0..segment_count).map(|_| div().flex_grow().flex_shrink_0().w(w).h(h).bg(color)),
+            )
     }
 }