Merge branch 'main' into experimental/boxed-str-attributes

.github/workflows/rust.yml

@@ -37,7 +37,7 @@ jobs:
     - name: Check examples
       run: cargo check --examples
     - name: Lint
-      run: cargo clippy --workspace --examples --features "docs, use_camera" -- -D warnings
+      run: cargo clippy --workspace --examples --features "docs, use_camera, devtools" -- -D warnings
     - name: Format
       run: cargo +nightly fmt --all --check -- --error-on-unformatted --unstable-features
     - name: Run Linux tests

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

@@ -3,6 +3,15 @@ use std::sync::{
     Mutex,
     MutexGuard,
 };
+#[cfg(feature = "rc-dom")]
+use std::{
+    cell::{
+        Ref,
+        RefCell,
+        RefMut,
+    },
+    rc::Rc,
+};
 
 use dioxus_core::VirtualDom;
 use freya_common::{
@@ -52,14 +61,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 +78,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/core/src/node.rs

@@ -1,6 +1,7 @@
 use freya_engine::prelude::*;
 use freya_native_core::real_dom::NodeImmutable;
 use freya_node_state::{
+    AccessibilityNodeState,
     Border,
     CornerRadius,
     CursorState,
@@ -34,6 +35,7 @@ pub struct NodeState {
     pub size: LayoutState,
     pub style: StyleState,
     pub transform: TransformState,
+    pub accessibility: AccessibilityNodeState,
 }
 
 pub fn get_node_state(node: &DioxusNode) -> NodeState {
@@ -67,6 +69,11 @@ pub fn get_node_state(node: &DioxusNode) -> NodeState {
         .as_deref()
         .cloned()
         .unwrap_or_default();
+    let accessibility = node
+        .get::<AccessibilityNodeState>()
+        .as_deref()
+        .cloned()
+        .unwrap_or_default();
 
     NodeState {
         cursor,
@@ -75,6 +82,7 @@ pub fn get_node_state(node: &DioxusNode) -> NodeState {
         size,
         style,
         transform,
+        accessibility,
     }
 }
 

crates/devtools/Cargo.toml

@@ -22,11 +22,13 @@ 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 }
 dioxus-radio = "0.2"
+serde_json = "1.0.107"
+accesskit = { workspace = true }
 
 dioxus = { workspace = true }
 freya-native-core = { workspace = true }