perf: runtime improvements

Author: DanielleHuisman

packages/utils/src/dom.rs

@@ -2,7 +2,9 @@
 
 use web_sys::{
     CssStyleDeclaration, Document, Element, HtmlElement, Node, ShadowRoot, Window, css,
-    js_sys::Object, wasm_bindgen::JsCast, window,
+    js_sys::Object,
+    wasm_bindgen::{JsCast, JsValue},
+    window,
 };
 
 use crate::ElementOrWindow;
@@ -134,7 +136,6 @@ pub fn is_html_element(node: &Node) -> bool {
 }
 
 const OVERFLOW_VALUES: [&str; 5] = ["auto", "scroll", "overlay", "hidden", "clip"];
-const INVALID_OVERFLOW_DISPLAY_VALUES: [&str; 2] = ["inline", "contents"];
 
 pub fn is_overflow_element(element: &Element) -> bool {
     let style = get_computed_style(element);
@@ -148,29 +149,19 @@ pub fn is_overflow_element(element: &Element) -> bool {
     OVERFLOW_VALUES
         .into_iter()
         .any(|s| overflow_combined.contains(s))
-        && !INVALID_OVERFLOW_DISPLAY_VALUES
-            .into_iter()
-            .any(|s| display == s)
+        && display != "inline"
+        && display != "contents"
 }
 
-const TABLE_ELEMENTS: [&str; 3] = ["table", "td", "th"];
-
 pub fn is_table_element(element: &Element) -> bool {
     let node_name = get_node_name(element.into());
-    TABLE_ELEMENTS.into_iter().any(|s| node_name == s)
+    node_name == "table" || node_name == "td" || node_name == "th"
 }
 
-const TOP_LAYER_SELECTORS: [&str; 2] = [":popover-open", ":modal"];
-
 pub fn is_top_layer(element: &Element) -> bool {
-    TOP_LAYER_SELECTORS
-        .into_iter()
-        .any(|selector| element.matches(selector).unwrap_or(false))
+    element.matches(":popover-open").unwrap_or(false) || element.matches(":modal").unwrap_or(false)
 }
 
-const TRANSFORM_PROPERTIES: [&str; 5] =
-    ["transform", "translate", "scale", "rotate", "perspective"];
-
 const WILL_CHANGE_VALUES: [&str; 6] = [
     "transform",
     "translate",
@@ -205,41 +196,36 @@ impl From<CssStyleDeclaration> for ElementOrCss<'_> {
     }
 }
 
+fn is_not_none(value: Result<String, JsValue>) -> bool {
+    value.is_ok_and(|value| value != "normal")
+}
+
 pub fn is_containing_block(element: ElementOrCss) -> bool {
-    let webkit = is_web_kit();
     let css = match element {
         ElementOrCss::Element(element) => get_computed_style(element),
         ElementOrCss::Css(css) => css,
     };
 
     // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
     // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-    TRANSFORM_PROPERTIES.into_iter().any(|property| {
-        css.get_property_value(property)
-            .map(|value| value != "none")
-            .unwrap_or(false)
-    }) || css
-        .get_property_value("container-type")
-        .map(|value| value != "normal")
-        .unwrap_or(false)
-        || (!webkit
-            && css
-                .get_property_value("backdrop-filter")
-                .map(|value| value != "none")
-                .unwrap_or(false))
-        || (!webkit
-            && css
-                .get_property_value("filter")
-                .map(|value| value != "none")
-                .unwrap_or(false))
-        || css
-            .get_property_value("will-change")
-            .map(|value| WILL_CHANGE_VALUES.into_iter().any(|v| v == value))
-            .unwrap_or(false)
-        || css
-            .get_property_value("contain")
-            .map(|value| CONTAIN_VALUES.into_iter().any(|v| v == value))
-            .unwrap_or(false)
+    is_not_none(css.get_property_value("transform"))
+        || is_not_none(css.get_property_value("translate"))
+        || is_not_none(css.get_property_value("scale"))
+        || is_not_none(css.get_property_value("rotate"))
+        || is_not_none(css.get_property_value("perspective"))
+        || (!is_web_kit()
+            && (is_not_none(css.get_property_value("backdrop-filter"))
+                || is_not_none(css.get_property_value("filter"))))
+        || WILL_CHANGE_VALUES.contains(
+            &css.get_property_value("will-change")
+                .unwrap_or_default()
+                .as_str(),
+        )
+        || CONTAIN_VALUES.contains(
+            &css.get_property_value("contain")
+                .unwrap_or_default()
+                .as_str(),
+        )
 }
 
 pub fn get_containing_block(element: &Element) -> Option<HtmlElement> {
@@ -269,13 +255,10 @@ pub fn is_web_kit() -> bool {
     css::supports_with_value("-webkit-backdrop-filter", "none").unwrap_or(false)
 }
 
-const LAST_TRAVERSABLE_NODE_NAMES: [&str; 3] = ["html", "body", "#document"];
-
 pub fn is_last_traversable_node(node: &Node) -> bool {
     let node_name = get_node_name(node.into());
-    LAST_TRAVERSABLE_NODE_NAMES
-        .into_iter()
-        .any(|s| node_name == s)
+
+    node_name == "html" || node_name == "body" || node_name == "#document"
 }
 
 pub fn get_computed_style(element: &Element) -> CssStyleDeclaration {