* Added onclick handlers for dynamically loaded note tree links and their

associated expanders.
 * Waged an epic battle against the dark forces of CSS. Did you know that the
   max-height property applies to nearly all HTML elements *except* tables? No?
   Well neither did I until I looked it up, seriously wondered what the W3C
   could have been smoking, and then proceeded to spend the next DAY AND A
   FRICKING HALF making my table have a max-height without breaking any of my
   other intricately arranged CSS. Victory is mine.

static/css/style.css

@@ -256,18 +256,20 @@ img {
   line-height: 140%;
   top: 80px;
   bottom: 1em;
-  overflow-y: visible;
+  padding-left: 0.5em;
 }
 
 #note_tree_area_holder {
-  height: 100%;
-  overflow-y: auto;
-  padding-left: 1em;
-  margin-right: 1em;
-  border-collapse: collapse;
+  max-height: 100%;
+  font-size: 90%;
+  overflow: auto;
   margin-left: 0.5em;
 }
 
+.note_tree_table {
+  border-collapse: collapse;
+}
+
 #note_tree_area_title {
   margin-top: 0.5em;
   margin-bottom: 0.25em;
@@ -275,17 +277,17 @@ img {
 
 .note_tree_link {
   background: url(/static/images/note_icon.png) left center no-repeat;
-  padding-left: 18px;
+  padding-left: 19px;
 }
 
 .note_tree_external_link {
   background: url(/static/images/web_icon.png) left center no-repeat;
-  padding-left: 18px;
+  padding-left: 19px;
 }
 
 .note_tree_file_link {
   background: url(/static/images/file_icon.png) left center no-repeat;
-  padding-left: 18px;
+  padding-left: 19px;
 }
 
 .note_tree_loading {
@@ -564,46 +566,47 @@ img {
 }
 
 .link_area_item {
-  padding: 0.2em 0.25em 0.2em 0.5em;
-  font-size: 90%;
+  padding: 0.25em 0.25em 0.25em 0.5em;
 }
 
 .note_tree_item {
-  padding: 0.2em 0.25em 0.2em 0;
-  font-size: 90%;
+  padding: 0.25em 0.25em 0.25em 0;
 }
 
 .tree_expander {
   float: left;
   width: 11px;
+  height: 11px;
   margin-right: 4px;
-  height: 1.5em;
-  background: url(/static/images/tree_arrow.png) no-repeat center center;
+  margin-top: 0.5em;
+  background: url(/static/images/tree_arrow.png) no-repeat center top;
+  cursor: pointer;
 }
 
 .tree_expander:hover {
-  background: url(/static/images/tree_arrow_hover.png) no-repeat center center;
-  cursor: pointer;
+  background: url(/static/images/tree_arrow_hover.png) no-repeat center top;
 }
 
 .tree_expander_expanded {
   float: left;
   width: 11px;
+  height: 11px;
   margin-right: 4px;
-  height: 1.5em;
-  background: url(/static/images/tree_arrow_down.png) no-repeat center center;
+  margin-top: 0.5em;
+  background: url(/static/images/tree_arrow_down.png) no-repeat center top;
+  cursor: pointer;
 }
 
 .tree_expander_expanded:hover {
-  background: url(/static/images/tree_arrow_down_hover.png) no-repeat center center;
-  cursor: pointer;
+  background: url(/static/images/tree_arrow_down_hover.png) no-repeat center top;
 }
 
 .tree_expander_empty {
   float: left;
   width: 11px;
+  height: 11px;
   margin-right: 4px;
-  height: 1.5em;
+  margin-top: 0.5em;
 }
 
 #storage_usage_area {

static/js/Wiki.js

@@ -2680,15 +2680,9 @@ Note_tree.prototype.expand_link = function ( event, note_id ) {
         "notebook_id": this.notebook_id,
         "note_id": note_id
       },
-      function ( result ) {
-        var span = createDOM( "span" );
-        span.innerHTML = result.tree_html;
-        replaceChildNodes( children_area, span );
-      }
+      function ( result ) { try{ self.display_child_links( result, children_area ); } catch(e){ alert(e); } }
     );
 
-    // TODO: add onclick handler for each link that's to a note
-
     return;
   }
 
@@ -2703,3 +2697,29 @@ Note_tree.prototype.expand_link = function ( event, note_id ) {
 
 Note_tree.prototype.collapse_link = function ( event, note_id ) {
 }
+
+Note_tree.prototype.display_child_links = function ( result, children_area ) {
+  var self = this;
+
+  function connect_expander( expander, note_id ) {
+    connect( expander, "onclick", function ( event ) { self.expand_link( event, note_id ); } );
+  }
+
+  var span = createDOM( "span" );
+  span.innerHTML = result.tree_html;
+  replaceChildNodes( children_area, span );
+
+  // add an onclick handler for each newly loaded expander and each note link
+  var links = getElementsByTagAndClassName( "a", null, children_area );
+  for ( var i in links ) {
+    var link = links[ i ];
+    connect( link, "onclick", function ( event ) { self.link_clicked( event ); } );
+    var expander = getFirstElementByTagAndClassName( "td", "tree_expander", link.parentNode.parentNode );
+
+    if ( expander ) {
+      var note_id = parse_query( link )[ "note_id" ];
+      if ( note_id )
+        connect_expander( expander, note_id );
+    }
+  }
+}

view/Note_tree_area.py

@@ -20,13 +20,13 @@ class Note_tree_area( Div ):
         self.make_tree(
           [ self.make_item(
             title = note.title,
-            link_attributes = u"href=/notebooks/%s?note_id=%s" % ( notebook.object_id, note.object_id ),
+            link_attributes = u'href="/notebooks/%s?note_id=%s"' % ( notebook.object_id, note.object_id ),
             link_class = u"note_tree_link",
             has_children = self.LINK_PATTERN.search( note.contents ),
             root_note_id = note.object_id,
           ) for note in root_notes ],
-          tree_id = u"note_tree_area_holder",
         ),
+        id = u"note_tree_area_holder",
       ),
       Span( id = "tree_arrow_hover_preload" ),
       Span( id = "tree_arrow_down_preload" ),
@@ -57,5 +57,5 @@ class Note_tree_area( Div ):
   def make_tree( items, tree_id = None ):
     return Table(
       items,
-      id = tree_id,
+      class_ = u"note_tree_table",
     )