Use adoptedStyleSheets

Signed-off-by: Andrew Stein <steinlink@gmail.com>

Author: texodus

rust/perspective-viewer/src/rust/components/copy_dropdown.rs

@@ -28,6 +28,7 @@ pub type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
 pub struct CopyDropDownMenuProps {
     pub renderer: Renderer,
     pub callback: Callback<ExportFile>,
+    pub root: web_sys::HtmlElement,
 
     #[prop_or_default]
     weak_link: WeakScope<CopyDropDownMenu>,
@@ -54,7 +55,7 @@ impl Component for CopyDropDownMenu {
         let is_chart = plugin.name().as_str() != "Datagrid";
         let has_selection = ctx.props().renderer.get_selection().is_some();
         html! {
-            <StyleProvider>
+            <StyleProvider root={ctx.props().root.clone()}>
                 <DropDownMenu<ExportFile>
                     values={Rc::new(get_menu_items(is_chart, has_selection))}
                     callback={&ctx.props().callback}

rust/perspective-viewer/src/rust/components/export_dropdown.rs

@@ -30,6 +30,7 @@ pub struct ExportDropDownMenuProps {
     pub renderer: Renderer,
     pub presentation: Presentation,
     pub callback: Callback<ExportFile>,
+    pub root: web_sys::HtmlElement,
 
     #[prop_or_default]
     weak_link: WeakScope<ExportDropDownMenu>,
@@ -99,7 +100,7 @@ impl Component for ExportDropDownMenu {
         // js_intern::js_intern!("render")).unwrap();
         let is_chart = plugin.name().as_str() != "Datagrid";
         html! {
-            <StyleProvider>
+            <StyleProvider root={ctx.props().root.clone()}>
                 <span class="dropdown-group-label">{ "Save as" }</span>
                 <input
                     class={if self.invalid { "invalid" } else { "" }}

rust/perspective-viewer/src/rust/components/number_column_style.rs

@@ -89,8 +89,8 @@ impl NumberColumnStyleProps {
                 let view = session.get_view().unwrap();
                 let min_max = view.get_min_max(column_name).await.unwrap();
                 let abs_max = max!(
-                    min_max.0.parse::<f64>().unwrap().abs(),
-                    min_max.1.parse::<f64>().unwrap().abs()
+                    min_max.0.parse::<f64>().unwrap_or_default().abs(),
+                    min_max.1.parse::<f64>().unwrap_or_default().abs()
                 );
                 let gradient = (abs_max * 100.).round() / 100.;
                 NumberColumnStyleMsg::DefaultGradientChanged(gradient)

rust/perspective-viewer/src/rust/components/style/style_cache.rs

@@ -11,13 +11,11 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use std::cell::RefCell;
-use std::collections::BTreeMap;
+use std::collections::{BTreeMap, BTreeSet};
 use std::ops::Deref;
 use std::rc::Rc;
 
-use perspective_js::utils::global;
 use wasm_bindgen::JsCast;
-use web_sys::HtmlStyleElement;
 
 use crate::*;
 
@@ -28,6 +26,17 @@ type CSSResource = (&'static str, &'static str);
 /// their styles registered).
 static DOM_STYLES: &[CSSResource] = &[css!("dom/checkbox"), css!("dom/select")];
 
+thread_local! {
+    /// Cache of `CssStyleSheet` objects, which can safely be re-used across
+    /// `HTMLPerspectiveViewerElement` instances
+    static STYLE_SHEET_CACHE: RefCell<BTreeMap<&'static str, web_sys::CssStyleSheet>> = RefCell::new(
+        DOM_STYLES
+            .iter()
+            .map(|x| (x.0, StyleCache::into_style(x.1)))
+            .collect(),
+    );
+}
+
 /// A state object for `<style>` snippets used by a yew `Component` with a
 /// `<StyleProvider>` at the root.
 #[derive(Clone)]
@@ -48,8 +57,8 @@ impl PartialEq for StyleCache {
 }
 
 impl StyleCache {
-    pub fn new(is_shadow: bool) -> StyleCache {
-        StyleCache(Rc::new(StyleCacheData::new(is_shadow)))
+    pub fn new(is_shadow: bool, elem: &web_sys::HtmlElement) -> StyleCache {
+        StyleCache(Rc::new(StyleCacheData::new(is_shadow, elem)))
     }
 
     /// Insert a new stylesheet into this manager, _immediately_ inserting it
@@ -63,63 +72,61 @@ impl StyleCache {
     /// attached _before_ the style's target nodes are attached.
     pub fn add_style(&self, name: &'static str, css: &'static str) {
         let mut map = self.0.styles.borrow_mut();
-        if !map.contains_key(name) {
-            let style = Self::into_style(name, css, self.0.is_shadow);
-            let first = map.values().next().cloned();
-            map.insert(name, style.clone());
-            let mut values = map.values();
-            if let Some(mut x) = first {
-                while let Some(y) = values.next()
-                    && y.get_attribute("name").as_deref() < Some(name)
-                {
-                    x = y.clone();
+        STYLE_SHEET_CACHE.with_borrow_mut(|cache| {
+            if !map.contains(name) {
+                map.insert(name);
+                if !cache.contains_key(name) {
+                    let style = Self::into_style(css);
+                    cache.insert(name, style);
                 }
 
-                x.parent_node()
-                    .unwrap_or_else(|| x.get_root_node())
-                    .insert_before(&style, x.next_sibling().as_ref())
-                    .unwrap();
+                self.adopted_style_sheets.splice(
+                    map.iter().position(|x| x == &name).unwrap() as u32,
+                    0,
+                    cache.get(name).unwrap(),
+                );
             }
-        }
+        });
     }
 
     /// Concert a CSS string to an `HtmlStyleElement`, which are memoized due
     /// to their size and DOM performance impact.
-    fn into_style(name: &str, css: &str, is_shadow: bool) -> web_sys::HtmlStyleElement {
-        let elem = global::document().create_element("style").unwrap();
-        if is_shadow {
-            elem.set_text_content(Some(css));
-        } else {
-            let new_css = css.replace(":host", ":root");
-            elem.set_text_content(Some(&new_css));
-        }
-
-        elem.set_attribute("name", name).unwrap();
-        elem.unchecked_into()
-    }
-
-    pub fn iter_styles(&self) -> impl Iterator<Item = (&'static str, HtmlStyleElement)> {
-        self.styles.borrow().clone().into_iter()
+    fn into_style(css: &str) -> web_sys::CssStyleSheet {
+        let sheet = web_sys::CssStyleSheet::new().unwrap();
+        sheet.replace_sync(css).unwrap();
+        sheet
     }
 }
 
 /// Using a `BTreeMap` so the resulting `<style>` elements have a stable order
 /// when rendered to the DOM.
 pub struct StyleCacheData {
-    styles: RefCell<BTreeMap<&'static str, web_sys::HtmlStyleElement>>,
-    is_shadow: bool,
+    styles: RefCell<BTreeSet<&'static str>>,
+    adopted_style_sheets: js_sys::Array,
 }
 
 impl StyleCacheData {
-    fn new(is_shadow: bool) -> Self {
-        let styles = DOM_STYLES
-            .iter()
-            .map(|x| (x.0, StyleCache::into_style(x.0, x.1, is_shadow)))
-            .collect();
+    fn new(is_shadow: bool, elem: &web_sys::HtmlElement) -> Self {
+        let styles: RefCell<BTreeSet<&'static str>> =
+            RefCell::new(DOM_STYLES.iter().map(|x| x.0).collect());
+
+        let root: &JsValue = if is_shadow {
+            &elem.shadow_root().unwrap()
+        } else {
+            &web_sys::window().unwrap().document().unwrap()
+        };
+
+        let adopted_style_sheets = js_sys::Reflect::get(root, &"adoptedStyleSheets".into())
+            .unwrap()
+            .unchecked_into::<js_sys::Array>();
+
+        for name in styles.borrow().iter() {
+            STYLE_SHEET_CACHE.with_borrow(|x| adopted_style_sheets.push(x.get(name).unwrap()));
+        }
 
         Self {
-            styles: RefCell::new(styles),
-            is_shadow,
+            styles,
+            adopted_style_sheets,
         }
     }
 }

rust/perspective-viewer/src/rust/components/style/style_provider.rs

@@ -18,6 +18,7 @@ use super::style_cache::StyleCache;
 
 #[derive(Properties, PartialEq)]
 pub struct StyleProviderProps {
+    pub root: web_sys::HtmlElement,
     #[prop_or(true)]
     pub is_shadow: bool,
     pub children: Children,
@@ -37,24 +38,15 @@ impl Component for StyleProvider {
     type Properties = StyleProviderProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        let cache = StyleCache::new(ctx.props().is_shadow);
+        let cache = StyleCache::new(ctx.props().is_shadow, &ctx.props().root);
         Self { cache }
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let styles = self.cache.iter_styles();
-
         html! {
-            <>
-                { for styles.map(|x| {
-                html! {
-                    <StyleKeyed key={ x.0 } elem={ x.1 } />
-                }
-            }) }
-                <ContextProvider<StyleCache> context={self.cache.clone()}>
-                    { for ctx.props().children.iter() }
-                </ContextProvider<StyleCache>>
-            </>
+            <ContextProvider<StyleCache> context={self.cache.clone()}>
+                { for ctx.props().children.iter() }
+            </ContextProvider<StyleCache>>
         }
     }
 }

rust/perspective-viewer/src/rust/components/viewer.rs

@@ -544,7 +544,7 @@ impl Component for PerspectiveViewer {
 
         html! {
             <>
-                <StyleProvider>
+                <StyleProvider root={ctx.props().elem.clone()}>
                     <LocalStyle href={css!("viewer")} />
                     if self.settings_open && ctx.props().session.has_table() {
                         if self.debug_open {

rust/perspective-viewer/src/rust/custom_elements/copy_dropdown.rs

@@ -100,7 +100,12 @@ impl CopyDropDownMenuElement {
         });
 
         let renderer = model.renderer().clone();
-        let props = props!(CopyDropDownMenuProps { renderer, callback });
+        let props = props!(CopyDropDownMenuProps {
+            renderer,
+            callback,
+            root: self.elem.clone()
+        });
+
         let modal = ModalElement::new(self.elem.clone(), props, true, None);
         *self.modal.borrow_mut() = Some(modal);
     }

rust/perspective-viewer/src/rust/custom_elements/export_dropdown.rs

@@ -102,7 +102,8 @@ impl ExportDropDownMenuElement {
         let props = props!(ExportDropDownMenuProps {
             renderer,
             presentation,
-            callback
+            callback,
+            root: self.elem.clone()
         });
 
         let modal = ModalElement::new(self.elem.clone(), props, true, None);