Make use of the wonders of inline-block to produce a much smaller DOM for XML

prettyprinting (fewer nodes, fewer frames, etc).  Speeds up prettyprinting by a
factor of 2 or so over here, with a 25% memory usage decrease.  Bug 379683,
r+sr=sicking


git-svn-id: svn://10.0.0.236/trunk@226370 18797224-902f-48f8-a5cc-f745e15eee43

mozilla/content/xml/document/resources/XMLMonoPrint.css

@@ -38,7 +38,7 @@
 
 @import url("chrome://global/content/xml/XMLPrettyPrint.css");
 
-#top > table {
+#top > .expander-open {
   font-family: monospace;
   white-space: pre;
 }

mozilla/content/xml/document/resources/XMLPrettyPrint.css

@@ -45,31 +45,25 @@
   margin-bottom: 1em;
 }
 
-table {
-  border-spacing: 0;
-  margin: 0;
-}
-
-td {
-  padding: 0;
-}
-
-.indent {
-  margin-left: 1em;
-}
-
-.spacer {
-  width: 1em;
+.expander-content {
+  padding-left: 1em;
 }
 
 .expander {
   cursor: pointer;
   -moz-user-select: none;
-  vertical-align: top;
   text-align: center;
+  vertical-align: top;
+  width: 1em;
+  display: inline-block;
+  margin-left: -1em;
 }
 
-.expander-closed > * > .expander-content {
+#top > .expander-open, #top > .expander-closed {
+  margin-left: 1em;
+}
+
+.expander-closed > .expander-content {
   display: none;
 }
 
@@ -77,3 +71,4 @@ td {
   font-family: monospace;
   white-space: pre;
 }
+

mozilla/content/xml/document/resources/XMLPrettyPrint.xml

@@ -62,9 +62,9 @@
       <![CDATA[
         try {
           var par = event.originalTarget;
-          if (par.nodeName == 'td' && par.className == 'expander') {
+          if (par.nodeName == 'div' && par.className == 'expander') {
             if (par.parentNode.className == 'expander-closed') {
-              par.parentNode.className = '';
+              par.parentNode.className = 'expander-open';
               event.originalTarget.firstChild.data = '\u2212';
             }
             else {

mozilla/content/xml/document/resources/XMLPrettyPrint.xsl

@@ -56,64 +56,61 @@
   </xsl:template>
 
   <xsl:template match="*">
-    <div class="indent">
-      <span class="markup">&lt;</span>
+    <div>
+      <xsl:text>&lt;</xsl:text>
       <span class="start-tag"><xsl:value-of select="name(.)"/></span>
       <xsl:apply-templates select="@*"/>
-      <span class="markup">/&gt;</span>
+      <xsl:text>/&gt;</xsl:text>
     </div>
   </xsl:template>
 
   <xsl:template match="*[node()]">
-    <div class="indent">
-      <span class="markup">&lt;</span>
+    <div>
+      <xsl:text>&lt;</xsl:text>
       <span class="start-tag"><xsl:value-of select="name(.)"/></span>
       <xsl:apply-templates select="@*"/>
-      <span class="markup">&gt;</span>
+      <xsl:text>&gt;</xsl:text>
 
       <span class="text"><xsl:value-of select="."/></span>
 
-      <span class="markup">&lt;/</span>
+      <xsl:text>&lt;/</xsl:text>
       <span class="end-tag"><xsl:value-of select="name(.)"/></span>
-      <span class="markup">&gt;</span>
+      <xsl:text>&gt;</xsl:text>
     </div>
   </xsl:template>
 
   <xsl:template match="*[* or processing-instruction() or comment() or string-length(.) &gt; 50]">
-    <table>
-      <tr>
-        <xsl:call-template name="expander"/>
-        <td>
-          <span class="markup">&lt;</span>
-          <span class="start-tag"><xsl:value-of select="name(.)"/></span>
-          <xsl:apply-templates select="@*"/>
-          <span class="markup">&gt;</span>
+    <div class="expander-open">
+      <xsl:call-template name="expander"/>
 
-          <div class="expander-content"><xsl:apply-templates/></div>
+      <xsl:text>&lt;</xsl:text>
+      <span class="start-tag"><xsl:value-of select="name(.)"/></span>
+      <xsl:apply-templates select="@*"/>
+      <xsl:text>&gt;</xsl:text>
 
-          <span class="markup">&lt;/</span>
-          <span class="end-tag"><xsl:value-of select="name(.)"/></span>
-          <span class="markup">&gt;</span>
-        </td>
-      </tr>
-    </table>
+      <div class="expander-content"><xsl:apply-templates/></div>
+
+      <xsl:text>&lt;/</xsl:text>
+      <span class="end-tag"><xsl:value-of select="name(.)"/></span>
+      <xsl:text>&gt;</xsl:text>
+    </div>
   </xsl:template>
 
   <xsl:template match="@*">
     <xsl:text> </xsl:text>
     <span class="attribute-name"><xsl:value-of select="name(.)"/></span>
-    <span class="markup">=</span>
+    <xsl:text>=</xsl:text>
     <span class="attribute-value">"<xsl:value-of select="."/>"</span>
   </xsl:template>
 
   <xsl:template match="text()">
     <xsl:if test="normalize-space(.)">
-      <div class="indent text"><xsl:value-of select="."/></div>
+      <xsl:value-of select="."/>
     </xsl:if>
   </xsl:template>
 
   <xsl:template match="processing-instruction()">
-    <div class="indent pi">
+    <div class="pi">
       <xsl:text>&lt;?</xsl:text>
       <xsl:value-of select="name(.)"/>
       <xsl:text> </xsl:text>
@@ -123,20 +120,20 @@
   </xsl:template>
 
   <xsl:template match="processing-instruction()[string-length(.) &gt; 50]">
-    <table>
-      <tr>
-        <xsl:call-template name="expander"/>
-        <td class="pi">
-          &lt;?<xsl:value-of select="name(.)"/>
-          <div class="indent expander-content"><xsl:value-of select="."/></div>
-          <xsl:text>?&gt;</xsl:text>
-        </td>
-      </tr>
-    </table>
+    <div class="expander-open">
+      <xsl:call-template name="expander"/>
+
+      <div class="pi">
+        <xsl:text> &lt;?</xsl:text>
+        <xsl:value-of select="name(.)"/>
+        <div class="expander-content"><xsl:value-of select="."/></div>
+        <xsl:text>?&gt;</xsl:text>
+      </div>
+    </div>
   </xsl:template>
 
   <xsl:template match="comment()">
-    <div class="comment indent">
+    <div class="comment">
       <xsl:text>&lt;!--</xsl:text>
       <xsl:value-of select="."/>
       <xsl:text>--&gt;</xsl:text>
@@ -144,20 +141,21 @@
   </xsl:template>
 
   <xsl:template match="comment()[string-length(.) &gt; 50]">
-    <table>
-      <tr>
-        <xsl:call-template name="expander"/>
-        <td class="comment">
-          <xsl:text>&lt;!--</xsl:text>
-          <div class="indent expander-content"><xsl:value-of select="."/></div>
-          <xsl:text>--&gt;</xsl:text>
-        </td>
-      </tr>
-    </table>
+    <div class="expander-open">
+      <xsl:call-template name="expander"/>
+
+      <div class="comment">
+        <xsl:text>&lt;!--</xsl:text>
+        <div class="expander-content">
+          <xsl:value-of select="."/>
+        </div>
+        <xsl:text>--&gt;</xsl:text>
+      </div>
+    </div>
   </xsl:template>
   
   <xsl:template name="expander">
-    <td class="expander">&#x2212;<div class="spacer"/></td>
+    <div class="expander">&#x2212;</div>
   </xsl:template>
 
 </xsl:stylesheet>