Add shim DOM for scroll bar wrapper

Author: fschutt

azul-core/src/styled_dom.rs

@@ -1536,8 +1536,12 @@ impl StyledDom {
     }
 
     /// Inject scroll bar DIVs with relevant event handlers into the DOM
+    ///
+    /// This function essentially takes
     pub fn inject_scroll_bars(&mut self) {
 
+        use azul_css_parser::CssApiWrapper;
+
         // allocate 14 nodes for every node
         //
         // 0: root component
@@ -1557,6 +1561,70 @@ impl StyledDom {
         // 14:          |- self.root
         //                  |- ... self.children
 
+        let dom_to_inject = Dom::div()
+        // .with_class("__azul-native-scroll-root-component".into())
+        .with_inline_style("display:flex; flex-grow:1; flex-direction:column;".into())
+        .with_children(vec![
+
+            Dom::div()
+            // .with_class("__azul-native-scroll-vertical-container".into())
+            .with_inline_style("display:flex; flex-grow:1; flex-direction:column-reverse;".into())
+            .with_children(vec![
+
+                Dom::div()
+                // .with_class("__azul-native-scroll-horizontal-scrollbar".into())
+                .with_inline_style("display:flex; flex-grow:1; flex-direction:row; height:15px; background:grey;".into())
+                .with_children(vec![
+                    Dom::div(),
+                    // .with_class("__azul-native-scroll-horizontal-scrollbar-track-left".into()),
+                    Dom::div()
+                    // .with_class("__azul-native-scroll-horizontal-scrollbar-track-middle".into())
+                    .with_children(vec![
+                        Dom::div()
+                        // .with_class("__azul-native-scroll-horizontal-scrollbar-track-thumb".into())
+                    ].into()),
+                    Dom::div()
+                    // .with_class("__azul-native-scroll-horizontal-scrollbar-track-right".into()),
+                ].into()),
+
+                Dom::div()
+                // .with_class("__azul-native-scroll-content-container-1".into())
+                .with_inline_style("display:flex; flex-grow:1; flex-direction:row-reverse;".into())
+                .with_children(vec![
+
+                    Dom::div()
+                    // .with_class("__azul-native-scroll-vertical-scrollbar".into())
+                    .with_inline_style("display:flex; flex-grow:1; flex-direction:column; width:15px; background:grey;".into())
+                    .with_children(vec![
+                       Dom::div(),
+                       // .with_class("__azul-native-scroll-vertical-scrollbar-track-top".into()),
+                       Dom::div()
+                       // .with_class("__azul-native-scroll-vertical-scrollbar-track-middle".into())
+                       .with_children(vec![
+                           Dom::div()
+                           // .with_class("__azul-native-scroll-vertical-scrollbar-track-thumb".into())
+                       ].into()),
+                       Dom::div()
+                       // .with_class("__azul-native-scroll-vertical-scrollbar-track-bottom".into()),
+                    ].into()),
+
+                    Dom::div()
+                    // .with_class("__azul-native-scroll-content-container-1".into())
+                    .with_inline_style("display:flex; flex-grow:1; flex-direction:column;".into())
+                    .with_children(vec![
+                        Dom::div() // <- this div is where the new children will be injected into
+                    ].into())
+                ].into())
+            ].into())
+        ].into())
+        .style(CssApiWrapper::empty());
+
+        // pre-allocate a new DOM tree with self.nodes.len() * dom_to_inject.nodes.len() nodes
+
+        // inject self.root as the nth node
+        let inject_as_id = 0;
+
+        println!("inject scroll bars:\r\n{}", dom_to_inject.get_html_string("", "", true));
     }
 
     /// Inject a menu bar into the root component