Index: src/browse.c
==================================================================
--- src/browse.c
+++ src/browse.c
@@ -386,24 +386,10 @@
     pNew->isLast = 1;
     while( zPath[i]=='/' ){ i++; }
     pParent = pNew;
   }
 }
-
-/*
-** Render parent lines for pNode
-*/
-static void tree_indentation(FileTreeNode *p){
-  if( p==0 ) return;
-  tree_indentation(p->pParent);
-  if( p->isLast ){
-    cgi_append_content("    ", 4);
-  }else{
-    cgi_append_content("│   ", 11);
-  }
-}
-
 
 /*
 ** WEBPAGE: tree
 **
 ** Query parameters:
@@ -422,16 +408,16 @@
   Manifest *pM = 0;
   int nFile = 0;           /* Number of files */
   int linkTrunk = 1;       /* include link to "trunk" */
   int linkTip = 1;         /* include link to "tip" */
   const char *zRE;         /* the value for the re=REGEXP query parameter */
-  char *zPrefix;           /* Prefix on all filenames */
   char *zREx = "";         /* Extra parameters for path hyperlinks */
   ReCompiled *pRE = 0;     /* Compiled regular expression */
   FileTreeNode *p;         /* One line of the tree */
   FileTree sTree;          /* The complete tree of files */
   HQuery sURI;             /* Hyperlink */
+  char *zProjectName = db_get("project-name", 0);
 
   if( strcmp(PD("type",""),"flat")==0 ){ page_dir(); return; }
   memset(&sTree, 0, sizeof(sTree));
   login_check_credentials();
   if( !g.perm.Read ){ login_needed(); return; }
@@ -474,18 +460,16 @@
   if( zD ){
     url_add_parameter(&sURI, "name", zD);
     blob_append(&dirname, "within directory ", -1);
     hyperlinked_path(zD, &dirname, zCI, "tree", zREx);
     if( zRE ) blob_appendf(&dirname, " matching \"%s\"", zRE);
-    zPrefix = mprintf("%T/", zD);
     style_submenu_element("Top-Level", "Top-Level", "%s",
                           url_render(&sURI, "name", 0, 0, 0));
   }else{
     if( zRE ){
       blob_appendf(&dirname, "matching \"%s\"", zRE);
     }
-    zPrefix = "";
   }
   if( zCI ){
     style_submenu_element("All", "All", "%s",
                           url_render(&sURI, "ci", 0, 0, 0));
   }
@@ -519,11 +503,11 @@
            || pFile->zName[nD-1]!='/')
       ){
         continue;
       }
       if( pRE && re_match(pRE, (const u8*)pFile->zName, -1)==0 ) continue;
-      db_bind_text(&ins, ":f", &pFile->zName[nD]);
+      db_bind_text(&ins, ":f", pFile->zName);
       db_bind_text(&ins, ":u", pFile->zUuid);
       db_step(&ins);
       db_reset(&ins);
     }
     db_finalize(&ins);
@@ -540,11 +524,11 @@
       const char *z = db_column_text(&q, 0);
       if( nD>0 && (fossil_strncmp(z, zD, nD-1)!=0 || z[nD-1]!='/') ){
         continue;
       }
       if( pRE && re_match(pRE, (const u8*)z, -1)==0 ) continue;
-      tree_add_node(&sTree, z+nD, 0);
+      tree_add_node(&sTree, z, 0);
       nFile++;
     }
     db_finalize(&q);
   }
 
@@ -560,39 +544,52 @@
 
 
   /* Generate a multi-column table listing the contents of zD[]
   ** directory.
   */
-  @ <pre>
+  @ <div class="filetree"><ul>
   if( nD ){
-    cgi_printf("%.*h\n", nD, zD);
-  }else{
-    @ .
-  }
-  for(p=sTree.pFirst; p; p=p->pNext){
-    tree_indentation(p->pParent);
-    if( p->isLast ){
-      cgi_append_content("&#x2514;&#x2500;&#x2500; ", 25);
-    }else{
-      cgi_append_content("&#x251c;&#x2500;&#x2500; ", 25);
-    }
+    char *zLink = href("%s", url_render(&sURI, "name", 0, 0, 0));
+    @ <li class="dir">
+    @ %z(zLink)%h(zProjectName)</a>
+  }else{
+    @ <li class="dir subdir">
+    @ <a>%h(zProjectName)</a>
+  }
+  @ <ul>
+  for(p=sTree.pFirst; p; p=p->pNext){
     if( p->isDir ){
-      char *zName = mprintf("%s%T", zPrefix, p->zFullName);
-      char *zLink = href("%s", url_render(&sURI, "name", zName, 0, 0));
-      fossil_free(zName);
-      @ %z(zLink)%h(p->zName)</a>
+      if( nD && strlen(p->zFullName)==nD-1 ){
+        @ <li class="dir subdir">
+      }else{
+        @ <li class="dir">
+      }
+      if( fossil_strcmp(p->zFullName, zD)==0 ){
+        @ <a>%h(p->zName)</a>
+      }else{
+        char *zLink = href("%s", url_render(&sURI, "name", p->zFullName, 0, 0));
+        @ %z(zLink)%h(p->zName)</a>
+      }
+      @ <ul>
     }else{
       char *zLink;
       if( zCI ){
         zLink = href("%R/artifact/%s",p->zUuid);
       }else{
-        zLink = href("%R/finfo?name=%s%T",zPrefix,p->zFullName);
+        zLink = href("%R/finfo?name=%T",p->zFullName);
       }
-      @ %z(zLink)%h(p->zName)</a>
+      @ <li class="%z(fileext_class(p->zName))">%z(zLink)%h(p->zName)</a>
+    }
+    if( p->isLast ){
+      int nClose = p->iLevel - (p->pNext ? p->pNext->iLevel : 0);
+      while( nClose-- > 0 ){
+        @ </ul>
+      }
     }
   }
-  @ </pre>
+  @ </ul>
+  @ </ul></div>
   style_footer();
 
   /* We could free memory used by sTree here if we needed to.  But
   ** the process is about to exit, so doing so would not really accomplish
   ** anything useful. */

Index: src/style.c
==================================================================
--- src/style.c
+++ src/style.c
@@ -771,10 +771,79 @@
     "format for the list in the file browser",
     @   margin-left: 0.5em;
     @   padding-left: 0.5em;
     @   white-space: nowrap;
   },
+  { ".filetree",
+    "",
+    @   margin: 1em 0;
+    @   line-height: 1.5;
+  },
+  { ".filetree ul",
+    "file tree lists",
+    @   display: inline;
+    @   margin: 0;
+    @   padding: 0;
+  },
+  { ".filetree li",
+    "file tree list items",
+    @   display: inline;
+  },
+  { ".filetree .subdir ul",
+    "file tree lists below subdir",
+    @   position: relative;
+    @   display: block;
+    @   margin: 0 0 0 21px;
+    @   padding: 0;
+  },
+  { ".filetree .subdir li",
+    "file tree lists items below subdir",
+    @   position: relative;
+    @   display: block;
+    @   margin: 0;
+    @   padding: 0;
+  },
+  { ".filetree .subdir li:before",
+    "file tree node lines",
+    @   content: '';
+    @   position: absolute;
+    @   top: -.8em;
+    @   left: -14px;
+    @   width: 14px;
+    @   height: 1.5em;
+    @   border-left: 2px solid #aaa;
+    @   border-bottom: 2px solid #aaa;
+  },
+  { ".filetree .subdir > ul ul:before",
+    "file tree directory lines",
+    @   content: '';
+    @   position: absolute;
+    @   top: -1.5em;
+    @   bottom: 0;
+    @   left: -35px;
+    @   border-left: 2px solid #aaa;
+  },
+  { ".filetree .subdir li:last-child > ul:before",
+    "",
+    @   display: none;
+  },
+  { ".filetree a",
+    "file tree links",
+    @   position: relative;
+    @   z-index: 1;
+    @   display: inline-block;
+    @   min-height: 16px;
+    @   margin-right: .5em;
+    @   padding-left: 21px;
+    @   background-image: url(data:image/gif;base64,R0lGODlhEAAQAJEAAP\/\/\/yEhIf\/\/\/wAAACH5BAEHAAIALAAAAAAQABAAAAIvlIKpxqcfmgOUvoaqDSCxrEEfF14GqFXImJZsu73wepJzVMNxrtNTj3NATMKhpwAAOw==);
+    @   background-position: center left;
+    @   background-repeat: no-repeat;
+  },
+  { ".filetree .dir > a",
+    "file tree directory link",
+    @   background-image: url(data:image/gif;base64,R0lGODlhEAAQAJEAAP/WVCIiIv\/\/\/wAAACH5BAEHAAIALAAAAAAQABAAAAInlI9pwa3XYniCgQtkrAFfLXkiFo1jaXpo+jUs6b5Z/K4siDu5RPUFADs=);
+  },
   { "table.login_out",
     "table format for login/out label/input table",
     @   text-align: left;
     @   margin-right: 10px;
     @   margin-left: 10px;