Bug 1432636 - Switch XMLPrettyPrint to use HTML <details> instead of click handlers for expandables.
Also remove duplicate import from the XMLMonoPrint sheet (unnamed default sheets
stay applied when switching to alternates, only named are unapplied).
Additionally fix some regressions from
bug 379683:
* top-level collapsed and uncollapsible elements weren't monospaced in monospace
style.
* top-level uncollapsible elements weren't indented.
* there was an extra space between PIs and their expander control.
Based on prototype by bgrins.
MozReview-Commit-ID: 2Pikm41FMWY
--- a/dom/base/test/file_bug590812-ref.xhtml
+++ b/dom/base/test/file_bug590812-ref.xhtml
@@ -1,3 +1,3 @@
-<out><div id="top" class="highlight" xmlns="http://www.w3.org/1999/xhtml"><link href="chrome://global/content/xml/XMLPrettyPrint.css" type="text/css" rel="stylesheet"/><div id="header"><p>
+<out><div id="top" xmlns="http://www.w3.org/1999/xhtml"><link href="chrome://global/content/xml/XMLPrettyPrint.css" type="text/css" rel="stylesheet"/><div id="header"><p>
This XML file does not appear to have any style information associated with it. The document tree is shown below.
- </p></div><div><<span class="start-tag">out</span>><span class="text">Here be sea hags</span></<span class="end-tag">out</span>></div></div></out>
+ </p></div><main id="tree" class="highlight"><div><<span class="start-tag">out</span>><span class="text">Here be sea hags</span></<span class="end-tag">out</span>></div></main></div></out>
--- a/dom/xml/resources/XMLMonoPrint.css
+++ b/dom/xml/resources/XMLMonoPrint.css
@@ -1,11 +1,10 @@
@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/. */
-@import url("chrome://global/content/xml/XMLPrettyPrint.css");
-
-#top > .expander-open {
+#tree,
+.expandable-opening::-moz-list-bullet {
font-family: monospace;
white-space: pre;
}
--- a/dom/xml/resources/XMLPrettyPrint.css
+++ b/dom/xml/resources/XMLPrettyPrint.css
@@ -7,35 +7,41 @@
#header {
background-color: #ccc;
border-bottom: 3px solid black;
padding: 0.5em;
margin-bottom: 1em;
}
-.expander-content {
- padding-left: 1em;
+#tree,
+.expandable-children {
+ margin-inline-start: 1em;
+}
+
+.expandable-body {
+ display: inline-block;
+}
+
+.expandable-body[open] {
+ display: block;
}
-.expander {
- cursor: pointer;
- -moz-user-select: none;
- text-align: center;
- vertical-align: top;
- width: 1em;
- display: inline-block;
- margin-left: -1em;
+.expandable-opening {
+ list-style: '+' outside;
}
-#top > .expander-open, #top > .expander-closed {
- margin-left: 1em;
+[open] > .expandable-opening {
+ list-style-type: '−';
}
-.expander-closed > .expander-content {
- display: none;
+.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;
}
.comment {
font-family: monospace;
white-space: pre;
}
-
--- a/dom/xml/resources/XMLPrettyPrint.xml
+++ b/dom/xml/resources/XMLPrettyPrint.xml
@@ -3,39 +3,21 @@
- 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' class="highlight"/>
+ <content><html:div id="top"/>
<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,17 +19,19 @@
<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>
- <xsl:apply-templates/>
+ <main id="tree" class="highlight">
+ <xsl:apply-templates/>
+ </main>
</xsl:template>
<xsl:template match="*">
<div>
<xsl:text><</xsl:text>
<span class="start-tag"><xsl:value-of select="name(.)"/></span>
<xsl:apply-templates select="@*"/>
<xsl:text>/></xsl:text>
@@ -47,29 +49,33 @@
<xsl:text></</xsl:text>
<span class="end-tag"><xsl:value-of select="name(.)"/></span>
<xsl:text>></xsl:text>
</div>
</xsl:template>
<xsl:template match="*[* or processing-instruction() or comment() or string-length(.) > 50]">
- <div class="expander-open">
- <xsl:call-template name="expander"/>
+ <div>
+ <details open="" class="expandable-body">
+ <summary class="expandable-opening">
+ <xsl:text><</xsl:text>
+ <span class="start-tag"><xsl:value-of select="name(.)"/></span>
+ <xsl:apply-templates select="@*"/>
+ <xsl:text>></xsl:text>
+ </summary>
- <xsl:text><</xsl:text>
- <span class="start-tag"><xsl:value-of select="name(.)"/></span>
- <xsl:apply-templates select="@*"/>
- <xsl:text>></xsl:text>
+ <div class="expandable-children"><xsl:apply-templates/></div>
- <div class="expander-content"><xsl:apply-templates/></div>
-
- <xsl:text></</xsl:text>
- <span class="end-tag"><xsl:value-of select="name(.)"/></span>
- <xsl:text>></xsl:text>
+ </details>
+ <span class="expandable-closing">
+ <xsl:text></</xsl:text>
+ <span class="end-tag"><xsl:value-of select="name(.)"/></span>
+ <xsl:text>></xsl:text>
+ </span>
</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>
@@ -87,51 +93,47 @@
<xsl:value-of select="name(.)"/>
<xsl:text> </xsl:text>
<xsl:value-of select="."/>
<xsl:text>?></xsl:text>
</div>
</xsl:template>
<xsl:template match="processing-instruction()[string-length(.) > 50]">
- <div class="expander-open">
- <xsl:call-template name="expander"/>
-
- <span class="pi">
- <xsl:text> <?</xsl:text>
- <xsl:value-of select="name(.)"/>
- </span>
- <div class="expander-content pi"><xsl:value-of select="."/></div>
- <span class="pi">
+ <div class="pi">
+ <details open="" class="expandable-body">
+ <summary class="expandable-opening">
+ <xsl:text><?</xsl:text>
+ <xsl:value-of select="name(.)"/>
+ </summary>
+ <div class="expandable-children"><xsl:value-of select="."/></div>
+ </details>
+ <span class="expandable-closing">
<xsl:text>?></xsl:text>
</span>
</div>
</xsl:template>
<xsl:template match="comment()">
<div class="comment">
<xsl:text><!--</xsl:text>
<xsl:value-of select="."/>
<xsl:text>--></xsl:text>
</div>
</xsl:template>
<xsl:template match="comment()[string-length(.) > 50]">
- <div class="expander-open">
- <xsl:call-template name="expander"/>
-
- <span class="comment">
- <xsl:text><!--</xsl:text>
+ <div class="comment">
+ <details open="" class="expandable-body">
+ <summary class="expandable-opening">
+ <xsl:text><!--</xsl:text>
+ </summary>
+ <div class="expandable-children">
+ <xsl:value-of select="."/>
+ </div>
+ </details>
+ <span class="expandable-closing">
+ <xsl:text>--></xsl:text>
</span>
- <div class="expander-content comment">
- <xsl:value-of select="."/>
- </div>
- <span class="comment">
- <xsl:text>--></xsl:text>
- </span>
</div>
</xsl:template>
-
- <xsl:template name="expander">
- <div class="expander">−</div>
- </xsl:template>
</xsl:stylesheet>