css.js

function load_styles_jquery_tree() {
  jQuery("head").append("\
<style>\
\
li.tree_node label {\
  display: inline; }\
li.tree_node label, li.tree_node input.tag_name {\
  color: blue;\
  font-weight: bold; }\
li.tree_node .element {\
  display: inline;\
  position: relative;\
  line-height: 20px; }\
li.tree_node .element:before, li.tree_node .element:after {\
  color: #999; }\
li.tree_node .element:before {\
  content: \"<\"; }\
li.tree_node .element:after {\
  content: \">\"; }\
li.tree_node .element * {\
  cursor: text; }\
\
li.tree_node .id {\
  display: inline;\
  color: red; }\
li.tree_node .id:before, li.tree_node .id_input:before {\
  content: \"#\"; }\
\
li.tree_node .classes {\
  color: green; }\
li.tree_node ul.classes {\
  display: inline;\
  padding: 0;\
  margin: 0; }\
li.tree_node ul.classes li {\
  padding: 0;\
  margin: 0;\
  background: transparent;\
  display: inline; }\
li.tree_node ul.classes li:before {\
  content: \".\";\
  color: black;\
  font-weight: bold; }\
\
li.tree_node input.attr {\
  color: blue; }\
li.tree_node input.value {\
  color: red; }\
li.tree_node .attributes, li.tree_node dd, li.tree_node dt {\
  display: inline;\
  margin: 0;\
  padding: 0; }\
li.tree_node .attributes> li, li.tree_node dd> li, li.tree_node dt> li {\
  margin: 0;\
  padding: 0;\
  display: inline; }\
li.tree_node dt {\
  color: blue;\
  margin-left: .3em; }\
li.tree_node dt:after {\
  content: \"=\";\
  color: black; }\
li.tree_node dd {\
  color: red; }\
li.tree_node dd:before, li.tree_node dd:after {\
  content: '\"';\
  color: black; }\
.tree {\
  list-style: none;\
  padding: 0px;\
  margin: 0px;\
  font-size: 12px;\
  font-family: monospace; }\
.tree .tree_node {\
  line-height: 20px;\
  padding-left: 10px;\
  white-space: nowrap;\
  display: block;\
  clear: both;\
  margin-left: 0px; }\
.tree input {\
  border: 2px solid black;\
  border-top: 0;\
  border-bottom: 0;\
  margin: 0;\
  padding: 0;\
  -moz-border-radius: 5px;\
  padding-left: 5px;\
  background-color: #fffaaa;\
  font-size: 12px;\
  font-family: monospace; }\
.tree .inspected {\
  background-color: #fcc; }\
.tree .inspected .tree_node {\
  background-color: white; }\
.tree .disabled div, .tree .disabled div * {\
  opacity: .5; }\
.tree ol, .tree ul {\
  list-style: none; }\
.tree ol {\
  white-space: nowrap;\
  background-color: white;\
  padding: 0; }\
\
</style>");
}
if(document.body) load_styles_jquery_tree();
else jQuery(load_styles_jquery_tree);

fuckyes.js

jQuery.tree.toggle_button = "\
<button class='toggle'></button>\
";

jQuery.tree.disable_button = "\
<button class='disable'></button>\
";

jQuery.tree.destroy_button = "\
<button class='destroy'></button>\
";

jQuery.tree.tag_name_button = "\
<button class='tag_name'></button>\
";

jQuery.tree.tag_name_input = "\
<input class='tag_name' type='text' />\
";

jQuery.tree.tag_name_label = "\
<label class='tag_name'></label>\
";

jQuery.tree.dom_node = "\
<li class='tree_node empty'>\
  <div class='element'></div>\
  <ol>\
    ={?(node_type):child_nodes}\
  </ol>\
</li>\
";

jQuery.tree.id_label = "\
<div class=\"id\"/>\
";

jQuery.tree.id_input = "\
<input class='id' type='text' />\
";

jQuery.tree.classes_input = "\
<input class='classes' type='text' value='#{value}' />\
";

jQuery.tree.classes_label = "\
<ul class='classes'>={class:classes}</ul>\
";

jQuery.tree.attribute_label = "\
<li>\
  <dt class='attr'>#{attr}</dt>\
  <dd class='value'>#{value}</dd>\
</li>\
";

jQuery.tree.attributes_label = "\
<dl class='attributes'>={attribute_label:attributes}</dl>\
";

jQuery.tree.value_input = "\
<input class='value' type='text' value='#{value}' />\
";

jQuery.tree.attr_input = "\
<input class='attr' type='text' value='#{value}' />\
";

jQuery.tree.tree_node_input = "\
<input class='tree_node' type='text' value='#{value}' />\
";

jQuery.tree.autocomplete_item = "\
<li>#{value}</li>\
";

jQuery.tree.autocomplete_list = "\
<ol class='autocomplete'>\
  ={autocomplete_item:autocomplete_items}\
</ol>\
";

jQuery.tree.tree_node = "\
<li class='tree_node empty'>\
  <span class='label'>\
    #{name}\
  </span>\
  <ol>\
    ={?(node_type):child_nodes}\
  </ol>\
</li>\
";

jQuery.tree.tree_node_input = "\
<input class='label' type='text' value='#{value}' />\
";