Merge branch 'main' into feat/redesigned-devtools-inspector

book/src/setup.md

@@ -3,8 +3,8 @@
 Make sure you have [Rust](https://www.rust-lang.org/) and your OS dependencies installed.
 
 ### Windows
-
-You will need C++ build tools which you can get through Visual Studio 2022, learn more [here](https://learn.microsoft.com/en-us/windows/dev-environment/rust/setup#install-visual-studio-recommended-or-the-microsoft-c-build-tools).
+Install Visual Studio 2022 with the `Desktop Development with C++` workflow. 
+You can learn learn more [here](https://learn.microsoft.com/en-us/windows/dev-environment/rust/setup#install-visual-studio-recommended-or-the-microsoft-c-build-tools).
 
 ### Linux
 

crates/components/src/dropdown.rs

@@ -14,6 +14,7 @@ use freya_hooks::{
     use_applied_theme,
     use_focus,
     use_platform,
+    DropdownItemTheme,
     DropdownItemThemeWith,
     DropdownTheme,
     DropdownThemeWith,
@@ -70,13 +71,25 @@ where
     let is_focused = focus.is_focused();
     let is_selected = *selected.read() == value;
 
+    let DropdownItemTheme {
+        font_theme,
+        background,
+        hover_background,
+        select_background,
+        border_fill,
+        select_border_fill,
+    } = &theme;
+
     let background = match *status.read() {
-        _ if is_selected => theme.select_background,
-        _ if is_focused => theme.hover_background,
-        DropdownItemStatus::Hovering => theme.hover_background,
-        DropdownItemStatus::Idle => theme.background,
+        _ if is_selected => select_background,
+        DropdownItemStatus::Hovering => hover_background,
+        DropdownItemStatus::Idle => background,
+    };
+    let border = if focus.is_selected() {
+        format!("2 inner {select_border_fill}")
+    } else {
+        format!("1 inner {border_fill}")
     };
-    let color = theme.font_theme.color;
 
     use_drop(move || {
         if *status.peek() == DropdownItemStatus::Hovering {
@@ -114,10 +127,11 @@ where
     rsx!(
         rect {
             width: "fill-min",
-            color: "{color}",
+            color: "{font_theme.color}",
             a11y_id,
-            a11y_role:"button",
+            a11y_role: "button",
             background: "{background}",
+            border,
             padding: "6 22 6 16",
             corner_radius: "6",
             main_align: "center",
@@ -249,13 +263,19 @@ where
         background_button,
         hover_background,
         border_fill,
+        focus_border_fill,
         arrow_fill,
     } = &theme;
 
-    let button_background = match *status.read() {
+    let background = match *status.read() {
         DropdownStatus::Hovering => hover_background,
         DropdownStatus::Idle => background_button,
     };
+    let border = if focus.is_selected() {
+        format!("2 inner {focus_border_fill}")
+    } else {
+        format!("1 inner {border_fill}")
+    };
 
     let selected = selected.read().to_string();
 
@@ -270,11 +290,11 @@ where
                 onglobalkeydown,
                 margin: "{margin}",
                 a11y_id,
-                background: "{button_background}",
+                background: "{background}",
                 color: "{font_theme.color}",
                 corner_radius: "8",
                 padding: "8 16",
-                border: "1 inner {border_fill}",
+                border,
                 shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
                 direction: "horizontal",
                 main_align: "center",

crates/components/src/network_image.rs

@@ -2,13 +2,10 @@ use bytes::Bytes;
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_hooks::{
-    use_applied_theme,
     use_asset_cacher,
     use_focus,
     AssetAge,
     AssetConfiguration,
-    NetworkImageTheme,
-    NetworkImageThemeWith,
 };
 use freya_node_state::dynamic_bytes;
 use reqwest::Url;
@@ -18,18 +15,18 @@ use crate::Loader;
 /// Properties for the [`NetworkImage`] component.
 #[derive(Props, Clone, PartialEq)]
 pub struct NetworkImageProps {
-    /// Theme override.
-    pub theme: Option<NetworkImageThemeWith>,
-
+    /// Width of the image container. Default to `fill`.
+    #[props(default = "fill".into())]
+    pub width: String,
+    /// Height of the image container. Default to `fill`.
+    #[props(default = "fill".into())]
+    pub height: String,
     /// URL of the image.
     pub url: ReadOnlySignal<Url>,
-
     /// Fallback element.
     pub fallback: Option<Element>,
-
     /// Loading element.
     pub loading: Option<Element>,
-
     /// Information about the image.
     pub alt: Option<String>,
 }
@@ -63,19 +60,26 @@ pub enum ImageState {
 ///     )
 /// }
 #[allow(non_snake_case)]
-pub fn NetworkImage(props: NetworkImageProps) -> Element {
+pub fn NetworkImage(
+    NetworkImageProps {
+        width,
+        height,
+        url,
+        fallback,
+        loading,
+        alt,
+    }: NetworkImageProps,
+) -> Element {
     let mut asset_cacher = use_asset_cacher();
     let focus = use_focus();
     let mut status = use_signal(|| ImageState::Loading);
     let mut cached_assets = use_signal::<Vec<AssetConfiguration>>(Vec::new);
     let mut assets_tasks = use_signal::<Vec<Task>>(Vec::new);
 
     let a11y_id = focus.attribute();
-    let NetworkImageTheme { width, height } = use_applied_theme!(&props.theme, network_image);
-    let alt = props.alt.as_deref();
 
     use_effect(move || {
-        let url = props.url.read().clone();
+        let url = url.read().clone();
         // Cancel previous asset fetching requests
         for asset_task in assets_tasks.write().drain(..) {
             asset_task.cancel();
@@ -132,7 +136,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
             })
         }
         ImageState::Loading => {
-            if let Some(loading_element) = props.loading {
+            if let Some(loading_element) = loading {
                 rsx!({ loading_element })
             } else {
                 rsx!(
@@ -147,7 +151,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
             }
         }
         _ => {
-            if let Some(fallback_element) = props.fallback {
+            if let Some(fallback_element) = fallback {
                 rsx!({ fallback_element })
             } else {
                 rsx!(

crates/components/src/overflowed_content.rs

@@ -128,6 +128,7 @@ mod test {
         utils.wait_for_update().await;
         utils.wait_for_update().await;
         utils.wait_for_update().await;
+        utils.wait_for_update().await;
         assert_ne!(label.layout().unwrap().area.min_x(), 50.);
     }
 }

crates/core/Cargo.toml

@@ -15,7 +15,7 @@ categories = ["gui", "asynchronous"]
 features = ["freya-engine/mocked-engine"]
 
 [features]
-shared = []
+rc-dom = []
 skia-engine = ["freya-engine/skia-engine"]
 fade-cached-incremental-areas = []
 

crates/core/src/dom/doms.rs

@@ -1,7 +1,15 @@
-use std::sync::{
-    Arc,
-    Mutex,
-    MutexGuard,
+use std::{
+    cell::{
+        Ref,
+        RefCell,
+        RefMut,
+    },
+    rc::Rc,
+    sync::{
+        Arc,
+        Mutex,
+        MutexGuard,
+    },
 };
 
 use dioxus_core::VirtualDom;
@@ -52,14 +60,14 @@ pub type DioxusNode<'a> = NodeRef<'a, CustomAttributeValues>;
 /// Tiny wrapper over [FreyaDOM] to make it thread-safe if desired.
 /// This is primarily used by the Devtools and Testing renderer.
 pub struct SafeDOM {
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fdom: FreyaDOM,
 
-    #[cfg(feature = "shared")]
-    pub fdom: Arc<Mutex<FreyaDOM>>,
+    #[cfg(feature = "rc-dom")]
+    pub fdom: Rc<RefCell<FreyaDOM>>,
 }
 
-#[cfg(feature = "shared")]
+#[cfg(feature = "rc-dom")]
 impl Clone for SafeDOM {
     fn clone(&self) -> Self {
         Self {
@@ -69,52 +77,46 @@ impl Clone for SafeDOM {
 }
 
 impl SafeDOM {
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn new(fdom: FreyaDOM) -> Self {
         Self { fdom }
     }
 
-    #[cfg(feature = "shared")]
+    #[cfg(feature = "rc-dom")]
     pub fn new(fdom: FreyaDOM) -> Self {
         Self {
-            fdom: Arc::new(Mutex::new(fdom)),
+            fdom: Rc::new(RefCell::new(fdom)),
         }
     }
 
     /// Get a reference to the DOM.
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn get(&self) -> &FreyaDOM {
         &self.fdom
     }
 
     /// Get a reference to the DOM.
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn try_get(&self) -> Option<&FreyaDOM> {
         Some(&self.fdom)
     }
 
     /// Get a mutable reference to the DOM.
-    #[cfg(not(feature = "shared"))]
+    #[cfg(not(feature = "rc-dom"))]
     pub fn get_mut(&mut self) -> &mut FreyaDOM {
         &mut self.fdom
     }
 
     /// Get a reference to the DOM.
-    #[cfg(feature = "shared")]
-    pub fn get(&self) -> MutexGuard<FreyaDOM> {
-        return self.fdom.lock().unwrap();
-    }
-
-    /// Get a reference to the DOM.
-    #[cfg(feature = "shared")]
-    pub fn try_get(&self) -> Option<MutexGuard<FreyaDOM>> {
-        return self.fdom.try_lock().ok();
+    #[cfg(feature = "rc-dom")]
+    pub fn get(&self) -> Ref<FreyaDOM> {
+        return self.fdom.borrow();
     }
 
     /// Get a mutable reference to the dom.
-    #[cfg(feature = "shared")]
-    pub fn get_mut(&self) -> MutexGuard<FreyaDOM> {
-        return self.fdom.lock().unwrap();
+    #[cfg(feature = "rc-dom")]
+    pub fn get_mut(&self) -> RefMut<FreyaDOM> {
+        return self.fdom.borrow_mut();
     }
 }
 

crates/devtools/Cargo.toml

@@ -22,7 +22,7 @@ freya-node-state = { workspace = true }
 freya-renderer = { workspace = true }
 freya-elements = { workspace = true }
 freya-hooks = { workspace = true }
-freya-core = { workspace = true, features = ["shared"] }
+freya-core = { workspace = true }
 freya-components = { workspace = true }
 freya-engine = { workspace = true }
 torin = { workspace = true }

crates/freya/src/_docs/development_setup.rs

@@ -4,7 +4,8 @@
 //!
 //! ### Windows
 //!
-//! You will need C++ build tools which you can get through Visual Studio 2022, learn more [here](https://learn.microsoft.com/en-us/windows/dev-environment/rust/setup#install-visual-studio-recommended-or-the-microsoft-c-build-tools).
+//! Install Visual Studio 2022 with the `Desktop Development with C++` workflow.
+//! You can learn learn more [here](https://learn.microsoft.com/en-us/windows/dev-environment/rust/setup#install-visual-studio-recommended-or-the-microsoft-c-build-tools).
 //!
 //! ### Linux
 //!

crates/hooks/src/theming/base.rs

@@ -126,12 +126,15 @@ pub(crate) const BASE_THEME: Theme = Theme {
             color: cow_borrowed!("key(color)"),
         },
         border_fill: cow_borrowed!("key(surface)"),
+        focus_border_fill: cow_borrowed!("key(focused_border)"),
         arrow_fill: cow_borrowed!("key(solid)"),
     },
     dropdown_item: DropdownItemTheme {
         background: cow_borrowed!("key(background)"),
-        select_background: cow_borrowed!("key(neutral_surface)"),
+        select_background: cow_borrowed!("key(secondary_surface)"),
         hover_background: cow_borrowed!("key(focused_surface)"),
+        border_fill: cow_borrowed!("none"),
+        select_border_fill: cow_borrowed!("key(focused_border)"),
         font_theme: FontTheme {
             color: cow_borrowed!("key(color)"),
         },
@@ -176,10 +179,6 @@ pub(crate) const BASE_THEME: Theme = Theme {
         width: cow_borrowed!("100%"),
         height: cow_borrowed!("100%"),
     },
-    network_image: NetworkImageTheme {
-        width: cow_borrowed!("100%"),
-        height: cow_borrowed!("100%"),
-    },
     icon: IconTheme {
         width: cow_borrowed!("10"),
         height: cow_borrowed!("10"),

crates/hooks/src/theming/mod.rs

@@ -192,6 +192,7 @@ define_theme! {
         background_button: str,
         hover_background: str,
         border_fill: str,
+        focus_border_fill: str,
         arrow_fill: str,
         %[subthemes]
         font_theme: FontTheme,
@@ -205,6 +206,8 @@ define_theme! {
         background: str,
         select_background: str,
         hover_background: str,
+        border_fill: str,
+        select_border_fill: str,
         %[subthemes]
         font_theme: FontTheme,
     }
@@ -385,15 +388,6 @@ define_theme! {
     }
 }
 
-define_theme! {
-    %[component]
-    pub NetworkImage {
-        %[cows]
-        width: str,
-        height: str,
-    }
-}
-
 define_theme! {
     %[component]
     pub Icon {
@@ -610,7 +604,6 @@ pub struct Theme {
     pub input: InputTheme,
     pub canvas: CanvasTheme,
     pub graph: GraphTheme,
-    pub network_image: NetworkImageTheme,
     pub icon: IconTheme,
     pub sidebar: SidebarTheme,
     pub sidebar_item: SidebarItemTheme,