From 3cbdba1673deb95fb91157e261ae9198ec7aae2a Mon Sep 17 00:00:00 2001
From: Max Ogden <max@maxogden.com>
Date: Wed, 20 Jul 2011 21:50:06 -0700
Subject: [PATCH] start to port over mikeals json tree visualizer from couchdb
 sammy futon

---
 attachments/pages/index.html       |  17 +-
 attachments/script/lib/traverse.js | 349 ++++++++++++++++++++++++++++-
 attachments/script/recline.js      |   6 +-
 attachments/script/site.js         |  17 ++
 attachments/script/util.js         | 134 ++++++++++-
 attachments/style/data-table.css   |   1 +
 attachments/style/style.css        | 125 ++++++++++-
 7 files changed, 637 insertions(+), 12 deletions(-)
 mode change 100755 => 100644 attachments/script/lib/traverse.js

diff --git a/attachments/pages/index.html b/attachments/pages/index.html
index f91a3d07..bed59a98 100644
--- a/attachments/pages/index.html
+++ b/attachments/pages/index.html
@@ -13,6 +13,7 @@
 	<script type="text/javascript" src="script/lib/sammy-0.6.3.min.js"></script>
 	<script type="text/javascript" src="script/lib/underscore.js"></script>
 	<script type="text/javascript" src="script/lib/microevent.js"></script>
+	<script type="text/javascript" src="script/lib/traverse.js"></script>
 	<script type="text/javascript" src="script/util.js"></script>
 	<script type="text/javascript" src="script/costco.js"></script>
 	<script type="text/javascript" src="script/recline.js"></script>
@@ -54,9 +55,9 @@
   </script>
 
   <script type='text/mustache' class="importActionsTemplate">
-    <li><a data-action="url" class="menuAction" href="JavaScript:void(0);">From an API</a></li>
-    <li><a data-action="paste" class="menuAction" href="JavaScript:void(0);">Copy & Paste</a></li>
-    <li><a data-action="upload" class="menuAction" href="JavaScript:void(0);">Upload File</a></li>
+    <li><a data-action="urlImport" class="menuAction" href="JavaScript:void(0);">From an API</a></li>
+    <li><a data-action="pasteImport" class="menuAction" href="JavaScript:void(0);">Copy & Paste</a></li>
+    <li><a data-action="uploadImport" class="menuAction" href="JavaScript:void(0);">Upload File</a></li>
   </script>
     
   <script type='text/mustache' class="exportActionsTemplate">
@@ -189,6 +190,10 @@
   	</div>
   	<div class="dialog-body">
   		<div class="grid-layout layout-full">
+  		  <p class="info">
+  		    Currently only <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a>-enabled APIs are supported, for example:
+  		    <code>https://api.github.com/repos/maxogden/recline/commits</code>
+  		  </p>
         <form name="api-import-form" id="sign-in-form">
           <table class="form-table">
             <tbody>
@@ -311,6 +316,12 @@
       </div>
     </div>
   </script>
+  
+  <script type='text/mustache' class="jsonTreeTemplate">
+    <div id="document-container">
+      <div id="document-editor"></div>
+    </div>
+  </script>
  
   <script type='text/mustache' class="editPreviewTemplate">
   	<div class="expression-preview-table-wrapper">
diff --git a/attachments/script/lib/traverse.js b/attachments/script/lib/traverse.js
old mode 100755
new mode 100644
index b645fe4c..442ad153
--- a/attachments/script/lib/traverse.js
+++ b/attachments/script/lib/traverse.js
@@ -1,7 +1,344 @@
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = Traverse;
+var require = function (file, cwd) {
+    var resolved = require.resolve(file, cwd || '/');
+    var mod = require.modules[resolved];
+    if (!mod) throw new Error(
+        'Failed to resolve module ' + file + ', tried ' + resolved
+    );
+    var res = mod._cached ? mod._cached : mod();
+    return res;
+}
+var __require = require;
+
+require.paths = [];
+require.modules = {};
+require.extensions = [".js",".coffee"];
+
+require.resolve = (function () {
+    var core = {
+        'assert': true,
+        'events': true,
+        'fs': true,
+        'path': true,
+        'vm': true
+    };
+    
+    return function (x, cwd) {
+        if (!cwd) cwd = '/';
+        
+        if (core[x]) return x;
+        var path = require.modules.path();
+        var y = cwd || '.';
+        
+        if (x.match(/^(?:\.\.?\/|\/)/)) {
+            var m = loadAsFileSync(path.resolve(y, x))
+                || loadAsDirectorySync(path.resolve(y, x));
+            if (m) return m;
+        }
+        
+        var n = loadNodeModulesSync(x, y);
+        if (n) return n;
+        
+        throw new Error("Cannot find module '" + x + "'");
+        
+        function loadAsFileSync (x) {
+            if (require.modules[x]) {
+                return x;
+            }
+            
+            for (var i = 0; i < require.extensions.length; i++) {
+                var ext = require.extensions[i];
+                if (require.modules[x + ext]) return x + ext;
+            }
+        }
+        
+        function loadAsDirectorySync (x) {
+            x = x.replace(/\/+$/, '');
+            var pkgfile = x + '/package.json';
+            if (require.modules[pkgfile]) {
+                var pkg = require.modules[pkgfile]();
+                var b = pkg.browserify;
+                if (typeof b === 'object' && b.main) {
+                    var m = loadAsFileSync(path.resolve(x, b.main));
+                    if (m) return m;
+                }
+                else if (typeof b === 'string') {
+                    var m = loadAsFileSync(path.resolve(x, b));
+                    if (m) return m;
+                }
+                else if (pkg.main) {
+                    var m = loadAsFileSync(path.resolve(x, pkg.main));
+                    if (m) return m;
+                }
+            }
+            
+            return loadAsFileSync(x + '/index');
+        }
+        
+        function loadNodeModulesSync (x, start) {
+            var dirs = nodeModulesPathsSync(start);
+            for (var i = 0; i < dirs.length; i++) {
+                var dir = dirs[i];
+                var m = loadAsFileSync(dir + '/' + x);
+                if (m) return m;
+                var n = loadAsDirectorySync(dir + '/' + x);
+                if (n) return n;
+            }
+            
+            var m = loadAsFileSync(x);
+            if (m) return m;
+        }
+        
+        function nodeModulesPathsSync (start) {
+            var parts;
+            if (start === '/') parts = [ '' ];
+            else parts = path.normalize(start).split('/');
+            
+            var dirs = [];
+            for (var i = parts.length - 1; i >= 0; i--) {
+                if (parts[i] === 'node_modules') continue;
+                var dir = parts.slice(0, i + 1).join('/') + '/node_modules';
+                dirs.push(dir);
+            }
+            
+            return dirs;
+        }
+    };
+})();
+
+require.alias = function (from, to) {
+    var path = require.modules.path();
+    var res = null;
+    try {
+        res = require.resolve(from + '/package.json', '/');
+    }
+    catch (err) {
+        res = require.resolve(from, '/');
+    }
+    var basedir = path.dirname(res);
+    
+    Object.keys(require.modules)
+        .forEach(function (x) {
+            if (x.slice(0, basedir.length + 1) === basedir + '/') {
+                var f = x.slice(basedir.length);
+                require.modules[to + f] = require.modules[basedir + f];
+            }
+            else if (x === basedir) {
+                require.modules[to] = require.modules[basedir];
+            }
+        })
+    ;
+};
+
+if (typeof process === 'undefined') process = {};
+
+if (!process.nextTick) process.nextTick = function (fn) {
+    setTimeout(fn, 0);
+};
+
+if (!process.title) process.title = 'browser';
+
+if (!process.binding) process.binding = function (name) {
+    if (name === 'evals') return require('vm')
+    else throw new Error('No such module')
+};
+
+if (!process.cwd) process.cwd = function () { return '.' };
+
+require.modules["path"] = function () {
+    var module = { exports : {} };
+    var exports = module.exports;
+    var __dirname = ".";
+    var __filename = "path";
+    
+    var require = function (file) {
+        return __require(file, ".");
+    };
+    
+    require.resolve = function (file) {
+        return __require.resolve(name, ".");
+    };
+    
+    require.modules = __require.modules;
+    __require.modules["path"]._cached = module.exports;
+    
+    (function () {
+        // resolves . and .. elements in a path array with directory names there
+// must be no slashes, empty elements, or device names (c:\) in the array
+// (so also no leading and trailing slashes - it does not distinguish
+// relative and absolute paths)
+function normalizeArray(parts, allowAboveRoot) {
+  // if the path tries to go above the root, `up` ends up > 0
+  var up = 0;
+  for (var i = parts.length; i >= 0; i--) {
+    var last = parts[i];
+    if (last == '.') {
+      parts.splice(i, 1);
+    } else if (last === '..') {
+      parts.splice(i, 1);
+      up++;
+    } else if (up) {
+      parts.splice(i, 1);
+      up--;
+    }
+  }
+
+  // if the path is allowed to go above the root, restore leading ..s
+  if (allowAboveRoot) {
+    for (; up--; up) {
+      parts.unshift('..');
+    }
+  }
+
+  return parts;
 }
 
+// Regex to split a filename into [*, dir, basename, ext]
+// posix version
+var splitPathRe = /^(.+\/(?!$)|\/)?((?:.+?)?(\.[^.]*)?)$/;
+
+// path.resolve([from ...], to)
+// posix version
+exports.resolve = function() {
+var resolvedPath = '',
+    resolvedAbsolute = false;
+
+for (var i = arguments.length; i >= -1 && !resolvedAbsolute; i--) {
+  var path = (i >= 0)
+      ? arguments[i]
+      : process.cwd();
+
+  // Skip empty and invalid entries
+  if (typeof path !== 'string' || !path) {
+    continue;
+  }
+
+  resolvedPath = path + '/' + resolvedPath;
+  resolvedAbsolute = path.charAt(0) === '/';
+}
+
+// At this point the path should be resolved to a full absolute path, but
+// handle relative paths to be safe (might happen when process.cwd() fails)
+
+// Normalize the path
+resolvedPath = normalizeArray(resolvedPath.split('/').filter(function(p) {
+    return !!p;
+  }), !resolvedAbsolute).join('/');
+
+  return ((resolvedAbsolute ? '/' : '') + resolvedPath) || '.';
+};
+
+// path.normalize(path)
+// posix version
+exports.normalize = function(path) {
+var isAbsolute = path.charAt(0) === '/',
+    trailingSlash = path.slice(-1) === '/';
+
+// Normalize the path
+path = normalizeArray(path.split('/').filter(function(p) {
+    return !!p;
+  }), !isAbsolute).join('/');
+
+  if (!path && !isAbsolute) {
+    path = '.';
+  }
+  if (path && trailingSlash) {
+    path += '/';
+  }
+  
+  return (isAbsolute ? '/' : '') + path;
+};
+
+
+// posix version
+exports.join = function() {
+  var paths = Array.prototype.slice.call(arguments, 0);
+  return exports.normalize(paths.filter(function(p, index) {
+    return p && typeof p === 'string';
+  }).join('/'));
+};
+
+
+exports.dirname = function(path) {
+  var dir = splitPathRe.exec(path)[1] || '';
+  var isWindows = false;
+  if (!dir) {
+    // No dirname
+    return '.';
+  } else if (dir.length === 1 ||
+      (isWindows && dir.length <= 3 && dir.charAt(1) === ':')) {
+    // It is just a slash or a drive letter with a slash
+    return dir;
+  } else {
+    // It is a full dirname, strip trailing slash
+    return dir.substring(0, dir.length - 1);
+  }
+};
+
+
+exports.basename = function(path, ext) {
+  var f = splitPathRe.exec(path)[2] || '';
+  // TODO: make this comparison case-insensitive on windows?
+  if (ext && f.substr(-1 * ext.length) === ext) {
+    f = f.substr(0, f.length - ext.length);
+  }
+  return f;
+};
+
+
+exports.extname = function(path) {
+  return splitPathRe.exec(path)[3] || '';
+};
+;
+    }).call(module.exports);
+    
+    __require.modules["path"]._cached = module.exports;
+    return module.exports;
+};
+
+require.modules["/node_modules/traverse/package.json"] = function () {
+    var module = { exports : {} };
+    var exports = module.exports;
+    var __dirname = "/node_modules/traverse";
+    var __filename = "/node_modules/traverse/package.json";
+    
+    var require = function (file) {
+        return __require(file, "/node_modules/traverse");
+    };
+    
+    require.resolve = function (file) {
+        return __require.resolve(name, "/node_modules/traverse");
+    };
+    
+    require.modules = __require.modules;
+    __require.modules["/node_modules/traverse/package.json"]._cached = module.exports;
+    
+    (function () {
+        module.exports = {"name":"traverse","version":"0.4.4","description":"Traverse and transform objects by visiting every node on a recursive walk","author":"James Halliday","license":"MIT/X11","main":"./index","repository":{"type":"git","url":"http://github.com/substack/js-traverse.git"},"devDependencies":{"expresso":"0.7.x"},"scripts":{"test":"expresso"}};
+    }).call(module.exports);
+    
+    __require.modules["/node_modules/traverse/package.json"]._cached = module.exports;
+    return module.exports;
+};
+
+require.modules["/node_modules/traverse/index.js"] = function () {
+    var module = { exports : {} };
+    var exports = module.exports;
+    var __dirname = "/node_modules/traverse";
+    var __filename = "/node_modules/traverse/index.js";
+    
+    var require = function (file) {
+        return __require(file, "/node_modules/traverse");
+    };
+    
+    require.resolve = function (file) {
+        return __require.resolve(name, "/node_modules/traverse");
+    };
+    
+    require.modules = __require.modules;
+    __require.modules["/node_modules/traverse/index.js"]._cached = module.exports;
+    
+    (function () {
+        module.exports = Traverse;
 function Traverse (obj) {
     if (!(this instanceof Traverse)) return new Traverse(obj);
     this.value = obj;
@@ -329,4 +666,10 @@ function copy (src) {
         return dst;
     }
     else return src;
-}
\ No newline at end of file
+}
+;
+    }).call(module.exports);
+    
+    __require.modules["/node_modules/traverse/index.js"]._cached = module.exports;
+    return module.exports;
+};
diff --git a/attachments/script/recline.js b/attachments/script/recline.js
index 61bc9439..f95ef500 100644
--- a/attachments/script/recline.js
+++ b/attachments/script/recline.js
@@ -20,9 +20,9 @@ var recline = function() {
         bulkEdit: function() { showDialog('bulkEdit', {name: app.currentColumn}) },
         csv: function() { window.location.href = app.csvUrl },
         json: function() { window.location.href = "_rewrite/api/json" },
-        url: function() { showDialog('urlImport') },
-        paste: function() { showDialog('pasteImport') },
-        upload: function() { showDialog('uploadImport') }
+        urlImport: function() { showDialog('urlImport') },
+        pasteImport: function() { showDialog('pasteImport') },
+        uploadImport: function() { showDialog('uploadImport') }
       }
       
       actions[$(e.target).attr('data-action')]();
diff --git a/attachments/script/site.js b/attachments/script/site.js
index 682286fc..ffb24189 100644
--- a/attachments/script/site.js
+++ b/attachments/script/site.js
@@ -132,6 +132,23 @@ app.after = {
       window.setTimeout(function(){costco.handleEditorChange(e)}, 1, true);
     });
     editor.keydown();
+  },
+  urlImport: function() {
+    $('.dialog-content .okButton').click(function(e) {
+      var apiURL = $('#url-input').val();
+      util.notify("Fetching data...", {persist: true, loader: true});
+      $.getJSON(apiURL + "?callback=?").then(
+        function(docs) {
+          util.notify("Data fetched successfully!");
+          util.render('jsonTree', 'dialog-body');
+          util.renderDoc(docs);
+        },
+        function (err) {
+          util.hide('dialog');
+          util.notify("Data fetch error: " + err.responseText);
+        }
+      );
+    })
   }
 }
 
diff --git a/attachments/script/util.js b/attachments/script/util.js
index 05e49616..ae8f81de 100644
--- a/attachments/script/util.js
+++ b/attachments/script/util.js
@@ -182,6 +182,137 @@ var util = function() {
      .removeAttr('selected');
   }
   
+  function largestWidth(selector, min) {
+    var min_width = min || 0;
+    $(selector).each(function(i, n){
+        var this_width = $(n).width();
+        if (this_width > min_width) {
+            min_width = this_width;
+        }
+    });
+    return min_width;
+  }
+  
+  function getType(obj) {
+    if (obj === null) {
+      return 'null';
+    }
+    if (typeof obj === 'object') {
+      if (obj.constructor.toString().indexOf("Array") !== -1) {
+        return 'array';
+      } else {
+        return 'object';
+      }
+    } else {
+      return typeof obj;
+    }
+  }
+  
+  var createValue = {
+    "string": function (obj, key) {
+      var val = $('<div class="doc-value string-type"></div>');
+      if (obj[key].length > 45) {
+        val.append($('<span class="string-type"></span>')
+        .click(function () {  })
+        .text(obj[key].slice(0, 45)))
+        .append(
+          $('<span class="expand">...</span>')
+          .click(function () {
+            val.html('')
+            .append($('<span class="string-type"></span>')
+              .click(function () {  })
+              .text(obj[key].length ? obj[key] : "   ")
+            )
+          })
+        )
+      }
+      else {
+        var val = $('<div class="doc-value string-type"></div>');
+        val.append(
+          $('<span class="string-type"></span>')
+          .click(function () {  })
+          .text(obj[key].length ? obj[key] : "   ")
+        )
+      }
+      return val;
+    }
+    , "number": function (obj, key) {
+      var val = $('<div class="doc-value number"></div>')
+      val.append($('<span class="number-type">' + obj[key] + '</span>').click(function () {  }))
+      return val;
+    }
+    , "null": function (obj, key) {
+      var val = $('<div class="doc-value null"></div>')
+      val.append($('<span class="null-type">' + obj[key] + '</span>').click(function () {  }))
+      return val;
+    }
+    , "boolean": function (obj, key) {
+      var val = $('<div class="doc-value null"></div>')
+      val.append($('<span class="null-type">' + obj[key] + '</span>').click(function () {  }))
+      return val;
+    }
+    , "array": function (obj, key, indent) {
+       if (!indent) indent = 1;
+        var val = $('<div class="doc-value array"></div>')
+        $('<span class="array-type">[</span><span class="expand" style="float:left">...</span><span class="array-type">]</span>')
+          .click(function (i, n) {
+            var n = $(this).parent();
+            var cls = 'sub-'+key+'-'+indent
+            n.html('')
+            n.append('<span style="padding-left:'+((indent - 1) * 10)+'px" class="array-type">[</span>')
+            for (i in obj[key]) {
+              n.append(
+                $('<div class="doc-field"></div>')
+                  .append('<div class="array-key '+cls+'" >'+i+'</div>')
+                  .append(createValue[getType(obj[key][i])](obj[key], i, indent + 1))
+                )
+            }
+            n.append('<span style="padding-left:'+((indent - 1) * 10)+'px" class="array-type">]</span>')
+            $('div.'+cls).width(largestWidth('div.'+cls))
+          })
+          .appendTo($('<div class="array-type"></div>').appendTo(val))
+        return val;
+    }
+    , "object": function (obj, key, indent) {
+      if (!indent) indent = 1;
+      var val = $('<div class="doc-value object"></div>')
+      $('<span class="object-type">{</span><span class="expand" style="float:left">...</span><span class="object-type">}</span>')
+        .click(function (i, n) {
+          var n = $(this).parent();
+          n.html('')
+          n.append('<span style="padding-left:'+((indent - 1) * 10)+'px" class="object-type">{</span>')
+          for (i in obj[key]) {
+            var field = $('<div class="doc-field"></div>')
+            var p = $('<div class="id-space" style="margin-left:'+(indent * 10)+'px"/>')
+            var di = $('<div class="object-key">'+i+'</div>')
+            field.append(p)
+              .append(di)
+              .append(createValue[getType(obj[key][i])](obj[key], i, indent + 1))
+            n.append(field)
+          }
+
+          n.append('<span style="padding-left:'+((indent - 1) * 10)+'px" class="object-type">}</span>')
+          di.width(largestWidth('div.object-key'))
+        })
+        .appendTo($('<div class="object-type"></div>').appendTo(val))
+      return val;
+    }
+  }
+
+  function renderDoc(doc) {
+    var d = $('div#document-editor');
+    for (i in doc) {
+      var field = $('<div class="doc-field"></div>');
+      $('<div class="id-space" />').appendTo(field);    
+      field.append('<div class="doc-key doc-key-base">'+i+'</div>')
+      field.append(createValue[getType(doc[i])](doc, i));
+      d.append(field);
+    }
+
+    $('div.doc-key-base').width(largestWidth('div.doc-key-base'))
+  }
+  
+  
   return {
     inURL: inURL,
     registerEmitter: registerEmitter,
@@ -196,6 +327,7 @@ var util = function() {
     getBaseURL:getBaseURL,
     resetForm: resetForm,
     delay: delay,
-    persist: persist
+    persist: persist,
+    renderDoc: renderDoc
   };
 }();
\ No newline at end of file
diff --git a/attachments/style/data-table.css b/attachments/style/data-table.css
index 4e3dc92d..ef610bc2 100644
--- a/attachments/style/data-table.css
+++ b/attachments/style/data-table.css
@@ -921,6 +921,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 }
 
 .dialog-body {
+  overflow: auto;
   font-size: 1.3em;
   padding: 15px;
 }
diff --git a/attachments/style/style.css b/attachments/style/style.css
index 56435d81..7afdb10d 100644
--- a/attachments/style/style.css
+++ b/attachments/style/style.css
@@ -40,7 +40,7 @@ a.button span.icon.loading { background-image: url(images/loader.gif); }
 .loading { background-image: url(images/loader.gif); background-repeat: no-repeat; padding-left: 15px; background-position: 0px 3px;}
 a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif); }
 #couchLogo {float: left; margin-right: 5px; margin-top: 3px}
-
+.info { padding: 0px 0px 10px 0px}
 .menu-overlay {
   position: fixed;
   top: 0;
@@ -78,4 +78,125 @@ ul.menu {
   ul.menu li {
     height: 24px; }
   ul.menu li:hover {
-    background-color: #DBE8F8 }
\ No newline at end of file
+    background-color: #DBE8F8 }
+
+
+/* Document Editor from CouchDB SammyFuton */
+
+div#document-container span#expand-all {
+  cursor:pointer; color:#FF0000;
+}
+
+div#document-editor { background: #fff; font-size:14px;}
+div#document-editor span.expand {cursor:pointer; color:#FF0000;}
+div#document-editor div.id-space {
+  border: none; float: left; margin: 3px 3px 0 3px; padding: 0;
+  width: 15px; height: 15px;
+}
+div#document-editor div.doc-field {width:100%; padding-bottom:2px;}
+div#document-editor div.doc-field, div.doc-value, div.doc-key {float:left;}
+div#document-editor div.doc-key {padding-right:5px;font-weight:bold;}
+
+div#document-editor div.string-type { white-space: pre-wrap; color:#393;}
+div#document-editor div.string-type:before { color: #ccc; content: "“";
+  left: -4px;
+}
+div#document-editor div.string-type:after { color: #ccc; content: "”"; }
+
+div#document-editor span.number-type { white-space: pre-wrap; color:#339; padding-left:6px;}
+
+div#document-editor span.array-type { color: #BD101D; float:left;}
+div#document-editor span.object-type { color: #BD101D; float:left;}
+div#document-editor span.null-type { color: #BD101D; float:left; color: #666666; padding-left:6px;}
+
+div#document-editor div.array-key {float:left; padding-right:15px; color:#666666;}
+div#document-editor div.object-key {float:left; padding-right:15px; font-weight:bold; }
+div#document-editor div.doc-key-base {float:left; padding-right:15px; font-weight:bold; }
+
+div#document-editor div.empty {
+  float:left;
+}
+
+div#document-editor input {
+  font: normal 90% arial, sans-serif;
+}
+
+div#document-editor span#save-button {
+  cursor:pointer; background-color:#ddd;
+  padding: 2px 5px 2px 5px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+}
+span#restore {
+  cursor:pointer; background-color:#ddd;
+  padding: 2px 5px 2px 5px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+}
+
+div#autosave {
+  float:right;
+}
+
+span.revision {
+  padding-right:10px;
+  cursor:pointer;
+  float:left;
+  margin-bottom:10px;
+}
+div#document-revisions {
+  padding-top:20px;
+}
+span#document-revisions-title {
+  padding-right:10px;
+  font-weight:bold;
+  float:left;
+  margin-bottom:80px;
+}
+span.current-revision {
+  font-weight:bold;
+  padding-right:10px;
+  float:left;
+  margin-bottom:10px;
+}
+span.revision {
+  padding-right:10px;
+  cursor:default;
+  float:left;
+  margin-bottom:10px;
+}
+span.revision-status-missing {
+  color:#8C8C8C;
+}
+span.revision-status-disk {
+  cursor:pointer;
+}
+span.revision-status-available {
+  cursor:pointer;
+}
+span.revision-status-deleted {
+  color:#8C8C8C;
+}
+
+.tooltip {
+  position:absolute;
+  font-size:12px;
+  padding:2px;
+  background-color:#B3B3B3;
+  border:checked;
+  color:black;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+}
+span.tooltip-status-title {
+  color:black;
+  font-weight:normal;
+  text-align:center;
+}
+span.tooltip-status {
+  font-weight:bold;
+  color:red;
+  text-align:center;
+}
\ No newline at end of file