add ui.buildDom method

plugins/c9.ide.ace/ace.js

@@ -185,10 +185,9 @@ define(function(require, exports, module) {
                     
                     var cssClass = theme.cssClass;
                     
-                    var div = document.createElement("div");
+                    var div = ui.buildDom(["div", { class: cssClass }, [
-                    document.body.appendChild(div);
+                        "span", { class: "ace_gutter" }
-                    div.innerHTML = "<div class='ace_gutter'></div>";
+                    ]], document.body);
-                    div.className = cssClass;
                     
                     theme.bg = ui.getStyle(div.firstChild, "backgroundColor");
                     theme.fg = ui.getStyle(div.firstChild, "color");

plugins/c9.ide.ace/themes.js

@@ -180,14 +180,14 @@ define(function(require, exports, module) {
             
             rb1.$group.on("afterchange", change);
             
-            intro.$int.innerHTML = 
+            ui.buildDom([
-                '<h1>Themes</h1><p>You can also style Cloud9 by editing '
+                ["h1", null, "Themes"],
-                + ' <a href="javascript:void(0)">your stylesheet</a>.</p>'
+                ["p", null, "You can also style Cloud9 by editing",
-                + '<p class="hint">Set all the colors free!</p>';
+                    ["a", { href: "javascript:void(0)", onclick: function() { configure.editStylesCss(); } },
-            
+                        "your stylesheet"]
-            intro.$int.querySelector("a").onclick = function() { 
+                ],
-                configure.editStylesCss(); 
+                ["p", { class: "hint" }, "Set all the colors free!"]
-            };
+            ], intro.$int);
         }
         
         /***** Methods *****/

plugins/c9.ide.collab/collab.js

@@ -50,10 +50,10 @@ define(function(require, exports, module) {
         var emit = plugin.getEmitter();
 
         // open collab documents
-        var documents = {};
+        var documents = Object.create(null);
-        var openFallbackTimeouts = {};
+        var openFallbackTimeouts = Object.create(null);
-        var saveFallbackTimeouts = {};
+        var saveFallbackTimeouts = Object.create(null);
-        var usersLeaving = {};
+        var usersLeaving = Object.create(null);
         var failedSaveAttempts = 0;
         var OPEN_FILESYSTEM_FALLBACK_TIMEOUT = 6000;
         var SAVE_FILESYSTEM_FALLBACK_TIMEOUT = 30000;

plugins/c9.ide.collab/cursor_layer.js

@@ -1,14 +1,15 @@
 /*global define console document apf */
 define(function(require, module, exports) {
     main.consumes = ["Plugin", "ace", "settings", "tabManager",
-        "collab.util", "collab.workspace", "timeslider"];
+        "collab.util", "collab.workspace", "timeslider", "ui"];
     main.provides = ["CursorLayer"];
     return main;
 
     function main(options, imports, register) {
-        var Plugin = imports.Plugin;
         var settings = imports.settings;
+        var Plugin = imports.Plugin;
         var ace = imports.ace;
+        var ui = imports.ui;
         var tabs = imports.tabManager;
         var util = imports["collab.util"];
         var workspace = imports["collab.workspace"];
@@ -254,22 +255,15 @@ define(function(require, module, exports) {
             }
 
             function drawTooltip(selection, fullname) {
-                var node = document.createElement("div");
+                var html = ui.buildDom([
-                document.body.appendChild(node);
+                    ["div", { class: "cool_tooltip_cursor", style: "display:none" }, 
+                        ["span", { class: "cool_tooltip_cursor_caption" }, fullname]
+                    ],
+                    ["div", { class: "cool_tooltip_cursor_arrow", style: "display:none" }]
+                ], document.body);
 
-                node.className = "cool_tooltip_cursor";
+                selection.tooltip = html[0];
-                node.innerHTML = "<span class='cool_tooltip_cursor_caption'>" + util.escapeHTML(fullname) + "</span>";
+                selection.arrow = html[1];
-
-                // create the arrow
-                var arrow = document.createElement("div");
-                document.body.appendChild(arrow);
-                arrow.className = "cool_tooltip_cursor_arrow";
-
-                arrow.style.display = "none";
-                node.style.display = "none";
-
-                selection.tooltip = node;
-                selection.arrow = arrow;
             }
 
             function showTooltip(selection, user, coords) {

plugins/c9.ide.ui/lib_apf.js

@@ -583,7 +583,47 @@ document.documentElement.className += " has_apf";
 apf.browserDetect();
 
 
-
+apf.buildDom = function buildDom(arr, parent) {
+    if (typeof arr == "string") {
+        var txt = document.createTextNode(arr);
+        if (parent)
+            parent.appendChild(txt);
+        return txt;
+    }
+    
+    if (!Array.isArray(arr))
+        return arr;
+    if (typeof arr[0] == "object") {
+        var els = [];
+        for (var i = 0; i < arr.length; i++) {
+            var ch = buildDom(arr[i]);
+            els.push(ch);
+            if (parent)
+                parent.appendChild(ch);
+        }
+        return els;
+    }
+    
+    var el = document.createElement(arr[0]);
+    var options = arr[1];
+    if (options) {
+        Object.keys(options).forEach(function(n) {
+            var val = options[n];
+            if (n == "class") {
+                el.className = Array.isArray(val) ? val.join(" ") : val;
+            } 
+            else if (typeof val == "function")
+                el[n] = val;
+            else    
+                el.setAttribute(n, val);
+        });
+    }
+    for (var i = 2; i < arr.length; i++)
+        buildDom(arr[i], el);
+    if (parent)
+        parent.appendChild(el);
+    return el;
+};
 
 
 

plugins/c9.ide.ui/ui.js

@@ -573,6 +573,10 @@ define(function(require, module, exports) {
              */
             insertByIndex: insertByIndex,
             
+            /**
+             * 
+             */
+            buildDom: apf.buildDom,
             
             /**
              * Escapes "&", greater than, less than signs, quotation marks,