Add clssses and css to inspector

Author: laffra

ltk/ltk.css

@@ -31,7 +31,10 @@
     color: black;
     padding: 0 8px;
     height: fit-content;
-    width: fit-content;
+    max-width: 600px;
+    max-height: 400px;
+    overflow: hidden;
+    overflow-y: scroll;
     min-height: 24px;
 }
 

ltk/ltk.js

@@ -153,6 +153,19 @@
     window.getWidget = function(id) {
         return undefined;
     };
+    
+    window.getStyle = function(node) {
+        const result = {};
+        const div = $(`<${node[0].tagName}>`).appendTo("body");
+        const default_styles = window.getComputedStyle(div[0])
+        const widget_styles = window.getComputedStyle(node[0])
+        for (let prop in widget_styles) {
+            if (widget_styles[prop] !== default_styles[prop]) {
+                result[prop] = widget_styles[prop];
+            }
+        }
+        return result;
+    }
 
     $.fn.widget = function() {
         return window.getWidget($(this))

ltk/widgets.py

@@ -64,8 +64,10 @@ def show(self, widget):
                 An LTK Python widget of class <tt>{widget.__class__.__name__}</tt><ul>
                 <li>{widget.__class__.__doc__.replace("<", "&lt;")}
                 {self.get_attrs(widget)}
+                {self.get_classes(widget)}
                 <li>{self.get_creation_link(widget)}
                 <li>{widget.children().length} children
+                {self.get_css(widget)}
             """)
         details_left = max(0, left - self.details.outerWidth() + 2) \
              if left + width > find("body").width() * 3 / 4 else left + width - 2
@@ -79,6 +81,20 @@ def hide(self):
         self.right.css("display", "none")
         self.details.css("display", "none")
 
+    def get_css(self, widget):
+        """ Show the CSS of a widget """
+        js_styles = window.getStyle(widget.element)
+        return "<li> css:<pre style='font-size: 12px;'>" + window.JSON.stringify(js_styles, None, 4) + "</pre>"
+
+    def get_classes(self, widget):
+        """ Show the classes of a widget """
+        result = []
+        for name, value in widget.__class__.__dict__.items():
+            if name.startswith("_") or name in INSPECT_IGNORE_ATTRIBUTES:
+                continue
+            result.append(f"{name} = {value}")
+        return ("<li>" if result else "") + "<li>".join(result)
+
     def get_attrs(self, widget):
         """ Show the attributes of a widget """
         result = []

pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pyscript-ltk"
-version = "0.2.21"
+version = "0.2.22"
 description = "A little toolkit for writing UIs in PyScript"
 readme = "README.md"
 authors = [{ name = "Chris Laffra", email = "[email protected]" }]