Improved performance of rendering large index pages, by replacing images in the tables by spans

src/doxygen.css

@@ -670,12 +670,12 @@ span.mlabel {
 
 /* @end */
 
-/* these are for tree view when not used as main index */
+/* these are for tree view inside a (index) page */
 
 div.directory {
         margin: 10px 0px;
-        border-top: 1px solid #A8B8D9;
-        border-bottom: 1px solid #A8B8D9;
+        border-top: 1px solid ##AA;
+        border-bottom: 1px solid ##AA;
         width: 100%;
 }
 
@@ -734,6 +734,80 @@ div.directory {
 	color: ##50;
 }
 
+.arrow {
+    color: ##AA;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    font-size: 80%;
+    display: inline-block;
+    width: 16px;
+    height: 22px;
+}
+
+.icon {
+    font-family: Arial, Helvetica;
+    font-weight: bold;
+    font-size: 12px;
+    height: 14px;
+    width: 16px;
+    display: inline-block;
+    background-color: ##88;
+    color: white;
+    text-align: center;
+    border-radius: 4px;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+.icona {
+    width: 24px;
+    height: 22px;
+    display: inline-block;
+}
+
+.iconfopen {
+    width: 24px;
+    height: 18px;
+    margin-bottom: 4px;
+    background-image:url('ftv2folderopen.png');
+    background-position: 0px -4px;
+    background-repeat: repeat-y;
+    vertical-align:top;
+    display: inline-block;
+}
+
+.iconfclosed {
+    width: 24px;
+    height: 18px;
+    margin-bottom: 4px;
+    background-image:url('ftv2folderclosed.png');
+    background-position: 0px -4px;
+    background-repeat: repeat-y;
+    vertical-align:top;
+    display: inline-block;
+}
+
+.icondoc {
+    width: 24px;
+    height: 18px;
+    margin-bottom: 4px;
+    background-image:url('ftv2doc.png');
+    background-position: 0px -4px;
+    background-repeat: repeat-y;
+    vertical-align:top;
+    display: inline-block;
+}
+
+table.directory {
+    font: 400 14px Roboto,sans-serif;
+}
+
+/* @end */
+
 div.dynheader {
         margin-top: 8px;
 	-webkit-touch-callout: none;

src/dynsections.js

@@ -24,19 +24,20 @@ function updateStripes()
   $('table.directory tr').
        removeClass('even').filter(':visible:even').addClass('even');
 }
+
 function toggleLevel(level)
 {
-  $('table.directory tr').each(function(){ 
+  $('table.directory tr').each(function() {
     var l = this.id.split('_').length-1;
     var i = $('#img'+this.id.substring(3));
     var a = $('#arr'+this.id.substring(3));
     if (l<level+1) {
-      i.attr('src','ftv2folderopen.png');
-      a.attr('src','ftv2mnode.png');
+      i.removeClass('iconfopen iconfclosed').addClass('iconfopen');
+      a.html('&#9660;');
       $(this).show();
     } else if (l==level+1) {
-      i.attr('src','ftv2folderclosed.png');
-      a.attr('src','ftv2pnode.png');
+      i.removeClass('iconfclosed iconfopen').addClass('iconfclosed');
+      a.html('&#9658;');
       $(this).show();
     } else {
       $(this).hide();
@@ -47,34 +48,33 @@ function toggleLevel(level)
 
 function toggleFolder(id)
 {
-  //The clicked row
+  // the clicked row
   var currentRow = $('#row_'+id);
-  var currentRowImages = currentRow.find("img");
 
-  //All rows after the clicked row
+  // all rows after the clicked row
   var rows = currentRow.nextAll("tr");
 
-  //Only match elements AFTER this one (can't hide elements before)
-  var childRows = rows.filter(function() {
-    var re = new RegExp('^row_'+id+'\\d+_$', "i"); //only one sub
-    return this.id.match(re);
-  });
+  var re = new RegExp('^row_'+id+'\\d+_$', "i"); //only one sub
 
-  //First row is visible we are HIDING
-  if (childRows.filter(':first').is(':visible')===true) {
-    currentRowImages.filter("[id^=arr]").attr('src', 'ftv2pnode.png');
-    currentRowImages.filter("[id^=img]").attr('src', 'ftv2folderclosed.png');
-    rows.filter("[id^=row_"+id+"]").hide();
-  } else { //We are SHOWING
-    //All sub images
-    var childImages = childRows.find("img");
-    var childImg = childImages.filter("[id^=img]");
-    var childArr = childImages.filter("[id^=arr]");
+  // only match elements AFTER this one (can't hide elements before)
+  var childRows = rows.filter(function() { return this.id.match(re); });
 
-    currentRow.find("[id^=arr]").attr('src', 'ftv2mnode.png'); //open row
-    currentRow.find("[id^=img]").attr('src', 'ftv2folderopen.png'); //open row
-    childImg.attr('src','ftv2folderclosed.png'); //children closed
-    childArr.attr('src','ftv2pnode.png'); //children closed
+  // first row is visible we are HIDING
+  if (childRows.filter(':first').is(':visible')===true) {
+    // replace down arrow by right arrow for current row
+    var currentRowSpans = currentRow.find("span");
+    currentRowSpans.filter(".iconfopen").removeClass("iconfopen").addClass("iconfclosed");
+    currentRowSpans.filter(".arrow").html('&#9658;');
+    rows.filter("[id^=row_"+id+"]").hide(); // hide all children
+  } else { // we are SHOWING
+    // replace right arrow by down arrow for current row
+    var currentRowSpans = currentRow.find("span");
+    currentRowSpans.filter(".iconfclosed").removeClass("iconfclosed").addClass("iconfopen");
+    currentRowSpans.filter(".arrow").html('&#9660;');
+    // replace down arrows by right arrows for child rows
+    var childRowsSpans = childRows.find("span");
+    childRowsSpans.filter(".iconfopen").removeClass("iconfopen").addClass("iconfclosed");
+    childRowsSpans.filter(".arrow").html('&#9658;');
     childRows.show(); //show all children
   }
   updateStripes();

src/ftvhelp.cpp

@@ -234,6 +234,7 @@ static unsigned char doc_a_png[528] =
     0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0
 };
 
+#if 0
 static unsigned char module_png[528] =
 {
   255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
@@ -338,6 +339,7 @@ static unsigned char letter_a_png[528] =
     0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,
     0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0
 };
+#endif
 
 
 static unsigned char arrow_right_png[352] =
@@ -507,6 +509,7 @@ struct FTVImageInfo
 
 //extern FTVImageInfo image_info[];
 
+#if 0
 #define FTVIMG_blank        0
 #define FTVIMG_doc          1
 #define FTVIMG_folderclosed 2
@@ -553,6 +556,7 @@ static FTVImageInfo image_info[] =
   { "M",  "ftv2mo.png",           0 /*ftv2vertline_png*/     /*,352*/,24,22 },
   {   0,  0,                      0                          /*,  0*/, 0, 0 }
 };
+#endif
 
 static ColoredImgDataItem ftv_image_data[] =
 {
@@ -560,9 +564,9 @@ static ColoredImgDataItem ftv_image_data[] =
   { "ftv2doc.png",          24,  22, doc_png,          doc_a_png          },
   { "ftv2folderclosed.png", 24,  22, folderclosed_png, folderclosed_a_png },
   { "ftv2folderopen.png",   24,  22, folderopen_png,   folderopen_a_png   },
-  { "ftv2ns.png",           24,  22, namespace_png,    letter_a_png       },
-  { "ftv2mo.png",           24,  22, module_png,       letter_a_png       },
-  { "ftv2cl.png",           24,  22, class_png,        letter_a_png       },
+//  { "ftv2ns.png",           24,  22, namespace_png,    letter_a_png       },
+//  { "ftv2mo.png",           24,  22, module_png,       letter_a_png       },
+//  { "ftv2cl.png",           24,  22, class_png,        letter_a_png       },
   { "ftv2lastnode.png",     16,  22, blank_png,        blank_png          },
   { "ftv2link.png",         24,  22, doc_png,          doc_a_png          },
   { "ftv2mlastnode.png",    16,  22, arrow_down_png,   arrow_down_a_png   },
@@ -784,64 +788,23 @@ QCString FTVHelp::generateIndentLabel(FTVNode *n,int level)
   return result;
 }
 
-void FTVHelp::generateIndent(FTextStream &t, FTVNode *n,int level, bool opened)
+void FTVHelp::generateIndent(FTextStream &t, FTVNode *n,bool opened)
 {
-  if (n->parent)
+  int indent=0;
+  FTVNode *p = n->parent;
+  while (p) { indent++; p=p->parent; }
+  if (n->isDir)
   {
-    generateIndent(t,n->parent,level+1,opened);
+    QCString dir = opened ? "▼" : "►";
+    t << "<span style=\"width:" << (indent*16) << "px;display:inline-block;\">&#160;</span>"
+      << "<span id=\"arr_" << generateIndentLabel(n,0) << "\" class=\"arrow\" ";
+    t << "onclick=\"toggleFolder('" << generateIndentLabel(n,0) << "')\"";
+    t << ">" << dir
+      << "</span>";
   }
-  // from the root up to node n do...
-  if (level==0) // item before a dir or document
+  else
   {
-    if (n->isLast)
-    {
-      if (n->isDir)
-      {
-        t << "<img id=\"arr_" << generateIndentLabel(n,0) 
-          << "\" ";
-        if (opened)
-          t << FTV_IMGATTRIBS(mlastnode);
-        else 
-          t << FTV_IMGATTRIBS(plastnode);
-        t << "onclick=\"toggleFolder('" 
-          << generateIndentLabel(n,0) 
-          << "')\"/>";
-      }
-      else
-      {
-        t << "<img " << FTV_IMGATTRIBS(lastnode) << "/>";
-      }
-    }
-    else
-    {
-      if (n->isDir)
-      {
-        t << "<img id=\"arr_" << generateIndentLabel(n,0)
-          << "\" ";
-        if (opened)
-          t << FTV_IMGATTRIBS(mnode);
-        else
-          t << FTV_IMGATTRIBS(pnode);
-        t << "onclick=\"toggleFolder('" 
-          << generateIndentLabel(n,0)
-          << "')\"/>";
-      }
-      else
-      {
-        t << "<img " << FTV_IMGATTRIBS(node) << "/>";
-      }
-    }
-  }
-  else // item at another level
-  {
-    if (n->isLast)
-    {
-      t << "<img " << FTV_IMGATTRIBS(blank) << "/>";
-    }
-    else
-    {
-      t << "<img " << FTV_IMGATTRIBS(vertline) << "/>";
-    }
+    t << "<span style=\"width:" << ((indent+1)*16) << "px;display:inline-block;\">&#160;</span>";
   }
 }
 
@@ -912,7 +875,7 @@ void FTVHelp::generateTree(FTextStream &t, const QList<FTVNode> &nl,int level,in
       index++;
     t << "><td class=\"entry\">";
     bool nodeOpened = level+1<maxLevel;
-    generateIndent(t,n,0,nodeOpened);
+    generateIndent(t,n,nodeOpened);
     if (n->isDir)
     {
       if (n->def && n->def->definitionType()==Definition::TypeGroup)
@@ -925,29 +888,19 @@ void FTVHelp::generateTree(FTextStream &t, const QList<FTVNode> &nl,int level,in
       }
       else if (n->def && n->def->definitionType()==Definition::TypeNamespace)
       {
-        t << "<img ";
-        t << FTV_IMGATTRIBS(ns);
-        t << "/>";
+        t << "<span class=\"icona\"><span class=\"icon\">N</span></span>";
       }
       else if (n->def && n->def->definitionType()==Definition::TypeClass)
       {
-        t << "<img ";
-        t << FTV_IMGATTRIBS(cl);
-        t << "/>";
+        t << "<span class=\"icona\"><span class=\"icon\">C</span></span>";
       }
       else
       {
-        t << "<img ";
-        t << "id=\"img_" << generateIndentLabel(n,0) 
-          << "\" ";
-        if (nodeOpened)
-          t << FTV_IMGATTRIBS(folderopen);
-        else
-          t << FTV_IMGATTRIBS(folderclosed);
-        t << "onclick=\"toggleFolder('"
-          << generateIndentLabel(n,0)
-          << "')\"";
-        t << "/>";
+        t << "<span id=\"img_" << generateIndentLabel(n,0)
+          << "\" class=\"iconf"
+          << (nodeOpened?"open":"closed")
+          << "\" onclick=\"toggleFolder('" << generateIndentLabel(n,0)
+          << "')\">&#160;</span>";
       }
       generateLink(t,n);
       t << "</td><td class=\"desc\">";
@@ -983,21 +936,15 @@ void FTVHelp::generateTree(FTextStream &t, const QList<FTVNode> &nl,int level,in
       }
       else if (n->def && n->def->definitionType()==Definition::TypeNamespace)
       {
-        t << "<img ";
-        t << FTV_IMGATTRIBS(ns);
-        t << "/>";
+        t << "<span class=\"icona\"><span class=\"icon\">N</span></span>";
       }
       else if (n->def && n->def->definitionType()==Definition::TypeClass)
       {
-        t << "<img ";
-        t << FTV_IMGATTRIBS(cl);
-        t << "/>";
+        t << "<span class=\"icona\"><span class=\"icon\">C</span></span>";
       }
       else
       {
-        t << "<img ";
-        t << FTV_IMGATTRIBS(doc);
-        t << "/>";
+        t << "<span class=\"icondoc\"></span>";
       }
       if (srcRef)
       {

src/ftvhelp.h

@@ -64,7 +64,7 @@ class FTVHelp : public IndexIntf
     //bool generateJSTree(FTextStream &tidx,FTextStream &t,const QList<FTVNode> &nl,int level,bool &first);
     //bool generateJSTreeTopLevel(FTextStream &tidx,FTextStream &t,const QList<FTVNode> &nl,int level,bool &first);
     QCString generateIndentLabel(FTVNode *n,int level);
-    void generateIndent(FTextStream &t,FTVNode *n,int level,bool opened);
+    void generateIndent(FTextStream &t,FTVNode *n,bool opened);
     void generateLink(FTextStream &t,FTVNode *n);
     //void generateJSLink(FTextStream &t,FTVNode *n);
     QList<FTVNode> *m_indentNodes;