Output indented XML from XML in instances

gistfile1.html

<xh:html xmlns:xf="http://www.w3.org/2002/xforms"
         xmlns:xh="http://www.w3.org/1999/xhtml"
         xmlns:xxf="http://orbeon.org/oxf/xml/xforms">
    <xh:head>
        <xh:style type="text/css">
            .output1, .output2 { white-space: pre-line; font-family: monospace }
        </xh:style>
        <xf:model>
            <xf:instance><foo>
    <bar>Gaga</bar>
</foo></xf:instance>
            <xf:instance id="serialized">
                <instance>&lt;foo>
    &lt;bar>Gaga&lt;/bar>
&lt;/foo></instance>
            </xf:instance>
        </xf:model>
    </xh:head>
    <xh:body>
        <xh:h2>As is</xh:h2>
        <xf:output mediatype="text/html" class="output1"
                   value="replace(replace(replace(replace(xxf:serialize(., 'xml'),
                   '&amp;', '&amp;amp;'), '&lt;', '&amp;lt;'), '&#x0a;', '&lt;br>'), ' ', '&#160;')"/>

        <xh:h2>Serialized</xh:h2>
        <xf:output mediatype="text/html" class="output1"
                   value="replace(replace(replace(replace(instance('serialized'),
                   '&amp;', '&amp;amp;'), '&lt;', '&amp;lt;'), '&#x0a;', '&lt;br>'), ' ', '&#160;')"/>
    </xh:body>
</xh:html>