Add WithRemSize element (#11928)

This PR adds a new `WithRemSize` element to the `ui` crate.

This element can be used to create an element tree that has a different
rem size than the base window.

`WithRemSize` can be nested, allowing for subtrees that have a different
rem size than their parent and their children.

<img width="912" alt="Screenshot 2024-05-16 at 2 25 28 PM"
src="https://github.com/zed-industries/zed/assets/1486634/f599cd9f-c101-496b-93e8-06e570fbf74f">

Release Notes:

- N/A

crates/ui/src/ui.rs

@@ -13,12 +13,13 @@ mod styled_ext;
 mod styles;
 pub mod utils;
 mod visible_on_hover;
+mod with_rem_size;
 
 pub use clickable::*;
 pub use components::*;
 pub use disableable::*;
 pub use fixed::*;
 pub use prelude::*;
-
 pub use styled_ext::*;
 pub use styles::*;
+pub use with_rem_size::*;

crates/ui/src/with_rem_size.rs

@@ -0,0 +1,75 @@
+use gpui::{
+    div, AnyElement, Bounds, Div, DivFrameState, Element, ElementId, GlobalElementId, Hitbox,
+    IntoElement, LayoutId, ParentElement, Pixels, WindowContext,
+};
+
+/// An element that sets a particular rem size for its children.
+pub struct WithRemSize {
+    div: Div,
+    rem_size: Pixels,
+}
+
+impl WithRemSize {
+    pub fn new(rem_size: impl Into<Pixels>) -> Self {
+        Self {
+            div: div(),
+            rem_size: rem_size.into(),
+        }
+    }
+}
+
+impl ParentElement for WithRemSize {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.div.extend(elements)
+    }
+}
+
+impl Element for WithRemSize {
+    type RequestLayoutState = DivFrameState;
+    type PrepaintState = Option<Hitbox>;
+
+    fn id(&self) -> Option<ElementId> {
+        self.div.id()
+    }
+
+    fn request_layout(
+        &mut self,
+        id: Option<&GlobalElementId>,
+        cx: &mut WindowContext,
+    ) -> (LayoutId, Self::RequestLayoutState) {
+        cx.with_rem_size(Some(self.rem_size), |cx| self.div.request_layout(id, cx))
+    }
+
+    fn prepaint(
+        &mut self,
+        id: Option<&GlobalElementId>,
+        bounds: Bounds<Pixels>,
+        request_layout: &mut Self::RequestLayoutState,
+        cx: &mut WindowContext,
+    ) -> Self::PrepaintState {
+        cx.with_rem_size(Some(self.rem_size), |cx| {
+            self.div.prepaint(id, bounds, request_layout, cx)
+        })
+    }
+
+    fn paint(
+        &mut self,
+        id: Option<&GlobalElementId>,
+        bounds: Bounds<Pixels>,
+        request_layout: &mut Self::RequestLayoutState,
+        prepaint: &mut Self::PrepaintState,
+        cx: &mut WindowContext,
+    ) {
+        cx.with_rem_size(Some(self.rem_size), |cx| {
+            self.div.paint(id, bounds, request_layout, prepaint, cx)
+        })
+    }
+}
+
+impl IntoElement for WithRemSize {
+    type Element = Self;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}