some redesign for better garbage collection of elements

source/Ox.UI/js/Core/Ox.Element.js

@@ -103,26 +103,7 @@ Ox.Element = function(options, self) {
         .addClass('OxElement')
         .mousedown(mousedown);
 
-    if (self.options.tooltip) {
-        if (Ox.isString(self.options.tooltip)) {
-            that.$tooltip = Ox.Tooltip({
-                title: self.options.tooltip,
-            });
-            that.bind({
-                mouseenter: mouseenter
-            });
-        } else {
-            that.$tooltip = Ox.Tooltip({
-                animate: false
-            });
-            that.bind({
-                mousemove: mousemove
-            });
-        }
-        that.bind({
-            mouseleave: mouseleave
-        });
-    }
+    setTooltip();
 
     function bind(action, event, callback) {
         self.$eventHandler[action]('ox_' + event, function(event, data) {
@@ -259,12 +240,40 @@ Ox.Element = function(options, self) {
         }).show(e);
     }
 
+    // FIXME: in other widgets, use this,
+    // rather than some self.$tooltip that
+    // will not get garbage collected
+    function setTooltip() {
+        if (self.options.tooltip) {
+            if (Ox.isString(self.options.tooltip)) {
+                that.$tooltip = Ox.Tooltip({
+                    title: self.options.tooltip,
+                });
+                that.bind({
+                    mouseenter: mouseenter
+                });
+            } else {
+                that.$tooltip = Ox.Tooltip({
+                    animate: false
+                });
+                that.bind({
+                    mousemove: mousemove
+                });
+            }
+            that.bind({
+                mouseleave: mouseleave
+            });
+        } else {
+            that.$tooltip && that.$tooltip.remove();
+        }
+    }
+
     self.setOption = function(key, value) {
         // self.setOption(key, value)
         // is called when an option changes
         // (to be implemented by widget)
         if (key == 'tooltip') {
-            that.$tooltip && that.$tooltip.options({title: value});
+            setTooltip();
         }
     };
 
@@ -320,18 +329,6 @@ Ox.Element = function(options, self) {
         return that;
     };
 
-    that.empty = function() {
-        that.$element.find('.OxElement').each(function() {
-            var oxid = $(this).data('oxid'),
-                element = Ox.UI.elements[oxid];
-            //!element && Ox.Log('Core', 'NO ELEMENT FOR', oxid, this.className)
-            //element && Ox.Log('Core', 'OK', oxid, this.className)
-            element && element.removeElement(false);
-        });
-        that.$element.empty();
-        return that;
-    };
-
     /*@
     gainFocus <function> Makes an element object gain focus
     () -> <obj> This element object
@@ -378,43 +375,27 @@ Ox.Element = function(options, self) {
         return Ox.getset(self.options, arguments, self.setOption, that);
     };
 
+    that.setElement = function($element) {
+        that.$element.replaceWith(that.$element = $element);
+        that.$element.data({oxid: that.id});
+        that[0] = that.$element[0];
+    };
+
     /*@
     removeElement <function> Removes an element object and its event handler
         () -> <obj> This element
     @*/
-    that.remove = that.removeElement = function(remove) {
-        //remove !== false && (len = Ox.len(Ox.UI.elements));
-        ///*
+    that.remove = function(remove) {
         remove !== false && that.$element.find('.OxElement').each(function() {
             var oxid = $(this).data('oxid'),
                 element = Ox.UI.elements[oxid];
-            //!element && Ox.Log('Core', 'NO ELEMENT FOR', oxid, this.className)
-            //element && Ox.Log('Core', 'OK', oxid, this.className)
-            element && element.removeElement(false);
+            element && element.remove(false);
         });
-        //*/
         Ox.Focus.remove(that.id);
         delete self.$eventHandler;
         delete Ox.UI.elements[that.id];
         that.$tooltip && that.$tooltip.remove();
         remove !== false && that.$element.remove();
-        /*
-        if (remove !== false) {
-            var orphaned = 0;
-            Ox.forEach(Ox.UI.elements, function(element) {
-                if (!element.parent().length) {
-                    orphaned++;
-                }
-            });
-            Ox.Log('Core', 'LEN', len, '-->', Ox.len(Ox.UI.elements), 'orphaned:', orphaned);
-        }
-        */
-        return that;
-    };
-
-    that.replaceWith = function($element) {
-        $element.insertAfter(that);
-        that.remove();
         return that;
     };
 

source/Ox.UI/js/Core/Ox.GarbageCollection.js

@@ -0,0 +1,43 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
+Ox.GarbageCollection = (function() {
+
+    var that = function() {
+        collect();
+    };
+
+    setInterval(collect, 60000);
+
+    function collect() {
+        var len = Ox.len(Ox.UI.elements);
+        Object.keys(Ox.UI.elements).forEach(function(id) {
+            if (
+                Ox.UI.elements[id]
+                && Ox.isUndefined(Ox.UI.elements[id].$element.data('oxid'))
+            ) {
+                Ox.UI.elements[id].remove();
+                delete Ox.UI.elements[id];
+            }
+        });
+        Ox.Log('GC', len, '-->', Ox.len(Ox.UI.elements));
+    }
+
+    that.debug = function() {
+        var classNames = {}, sorted = [];
+        Ox.forEach(Ox.UI.elements, function(element, id) {
+            var className = element.$element[0].className;
+            classNames[className] = (classNames[className] || 0) + 1;
+        });
+        Ox.forEach(classNames, function(count, className) {
+            sorted.push({className: className, count: count});
+        })
+        return sorted.sort(function(a, b) {
+            return a.count - b.count;
+        }).map(function(v) {
+            return v.count + ' ' + v.className
+        }).join('\n');
+    };
+
+    return that;
+
+}());

source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js

@@ -111,7 +111,7 @@ Ox.SyntaxHighlighter = function(options, self) {
                 .html(Ox.repeat(' ', self.options.lineLength))
                 .appendTo(that);
             width = $line.width() + 4; // add padding
-            $line.removeElement();
+            $line.remove();
             ['moz', 'webkit'].forEach(function(browser) {
                 $source.css({
                     background: '-' + browser +