--- a/dom/xml/resources/XMLMonoPrint.css
+++ b/dom/xml/resources/XMLMonoPrint.css
@@ -1,10 +1,11 @@
 @charset "UTF-8";
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-#tree,
-.expandable-opening::-moz-list-bullet {
+@import url("chrome://global/content/xml/XMLPrettyPrint.css");
+
+#top > .expander-open {
   font-family: monospace;
   white-space: pre;
 }

--- a/dom/xml/resources/XMLPrettyPrint.css
+++ b/dom/xml/resources/XMLPrettyPrint.css
@@ -7,41 +7,35 @@
 
 #header {
   background-color: #ccc;
   border-bottom: 3px solid black;
   padding: 0.5em;
   margin-bottom: 1em;
 }
 
-#tree,
-.expandable-children {
-  margin-inline-start: 1em;
-}
-
-.expandable-body {
-  display: inline-block;
-}
-
-.expandable-body[open] {
-  display: block;
+.expander-content {
+  padding-left: 1em;
 }
 
-.expandable-opening {
-  list-style: '+' outside;
+.expander {
+  cursor: pointer;
+  -moz-user-select: none;
+  text-align: center;
+  vertical-align: top;
+  width: 1em;
+  display: inline-block;
+  margin-left: -1em;
 }
 
-[open] > .expandable-opening {
-  list-style-type: '−';
+#top > .expander-open, #top > .expander-closed {
+  margin-left: 1em;
 }
 
-.expandable-opening::-moz-list-bullet {
-  cursor: pointer;
-  padding-inline-end: 2px;
-  /* Don't want to inherit the styling from pi and comment elements */
-  color: initial;
-  font: initial;
+.expander-closed > .expander-content {
+  display: none;
 }
 
 .comment {
   font-family: monospace;
   white-space: pre;
 }
+

--- a/dom/xml/resources/XMLPrettyPrint.xml
+++ b/dom/xml/resources/XMLPrettyPrint.xml
@@ -3,21 +3,39 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <bindings xmlns="http://www.mozilla.org/xbl"
           xmlns:html="http://www.w3.org/1999/xhtml">
 
   <binding id="prettyprint" bindToUntrustedContent="true">
 
-    <content><html:div id="top"/>
+    <content><html:div id='top' class="highlight"/>
       <html:span style="display: none;"><children/></html:span>
     </content>
 
     <handlers>
+      <handler event="click" button="0">
+      <![CDATA[
+        try {
+          var par = event.originalTarget;
+          if (par.nodeName == 'div' && par.className == 'expander') {
+            if (par.parentNode.className == 'expander-closed') {
+              par.parentNode.className = 'expander-open';
+              event.originalTarget.firstChild.data = '\u2212';
+            }
+            else {
+              par.parentNode.className = 'expander-closed';
+              event.originalTarget.firstChild.data = '+';
+            }
+          }
+        } catch (e) {
+        }
+      ]]>
+      </handler>
       <handler event="prettyprint-dom-created" allowuntrusted="false">
         <![CDATA[
           document.getAnonymousNodes(this).item(0).appendChild(event.detail);
         ]]>
       </handler>
     </handlers>
 
   </binding>

--- a/dom/xml/resources/XMLPrettyPrint.xsl
+++ b/dom/xml/resources/XMLPrettyPrint.xsl
@@ -19,19 +19,17 @@
   <xsl:template match="/">
     <link href="chrome://global/content/xml/XMLPrettyPrint.css" type="text/css" rel="stylesheet"/>
     <link title="Monospace" href="chrome://global/content/xml/XMLMonoPrint.css" type="text/css" rel="alternate stylesheet"/>
     <div id="header" dir="&locale.dir;">
       <p>
         &xml.nostylesheet;
       </p>
     </div>
-    <main id="tree" class="highlight">
-      <xsl:apply-templates/>
-    </main>
+    <xsl:apply-templates/>
   </xsl:template>
 
   <xsl:template match="*">
     <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>
@@ -49,33 +47,29 @@
 
       <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="*[* or processing-instruction() or comment() or string-length(.) &gt; 50]">
-    <div>
-      <details open="" class="expandable-body">
-        <summary class="expandable-opening">
-          <xsl:text>&lt;</xsl:text>
-          <span class="start-tag"><xsl:value-of select="name(.)"/></span>
-          <xsl:apply-templates select="@*"/>
-          <xsl:text>&gt;</xsl:text>
-        </summary>
+    <div class="expander-open">
+      <xsl:call-template name="expander"/>
 
-        <div class="expandable-children"><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>
 
-      </details>
-      <span class="expandable-closing">
-        <xsl:text>&lt;/</xsl:text>
-        <span class="end-tag"><xsl:value-of select="name(.)"/></span>
-        <xsl:text>&gt;</xsl:text>
-      </span>
+      <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>
     <xsl:text>=</xsl:text>
     <span class="attribute-value">"<xsl:value-of select="."/>"</span>
@@ -93,47 +87,51 @@
       <xsl:value-of select="name(.)"/>
       <xsl:text> </xsl:text>
       <xsl:value-of select="."/>
       <xsl:text>?&gt;</xsl:text>
     </div>
   </xsl:template>
 
   <xsl:template match="processing-instruction()[string-length(.) &gt; 50]">
-    <div class="pi">
-      <details open="" class="expandable-body">
-        <summary class="expandable-opening">
-          <xsl:text>&lt;?</xsl:text>
-          <xsl:value-of select="name(.)"/>
-        </summary>
-        <div class="expandable-children"><xsl:value-of select="."/></div>
-      </details>
-      <span class="expandable-closing">
+    <div class="expander-open">
+      <xsl:call-template name="expander"/>
+
+      <span class="pi">
+        <xsl:text> &lt;?</xsl:text>
+        <xsl:value-of select="name(.)"/>
+      </span>
+      <div class="expander-content pi"><xsl:value-of select="."/></div>
+      <span class="pi">
         <xsl:text>?&gt;</xsl:text>
       </span>
     </div>
   </xsl:template>
 
   <xsl:template match="comment()">
     <div class="comment">
       <xsl:text>&lt;!--</xsl:text>
       <xsl:value-of select="."/>
       <xsl:text>--&gt;</xsl:text>
     </div>
   </xsl:template>
 
   <xsl:template match="comment()[string-length(.) &gt; 50]">
-    <div class="comment">
-      <details open="" class="expandable-body">
-        <summary class="expandable-opening">
-          <xsl:text>&lt;!--</xsl:text>
-        </summary>
-        <div class="expandable-children">
-          <xsl:value-of select="."/>
-        </div>
-      </details>
-      <span class="expandable-closing">
+    <div class="expander-open">
+      <xsl:call-template name="expander"/>
+
+      <span class="comment">
+        <xsl:text>&lt;!--</xsl:text>
+      </span>
+      <div class="expander-content comment">
+        <xsl:value-of select="."/>
+      </div>
+      <span class="comment">
         <xsl:text>--&gt;</xsl:text>
-      </span>
+      </span> 
     </div>
   </xsl:template>
+  
+  <xsl:template name="expander">
+    <div class="expander">&#x2212;</div>
+  </xsl:template>
 
 </xsl:stylesheet>