Why use createElement instead of XUL description?

Question

I was extending the css rule viewer in Firefox Devtools, and found something interesting: This is the content of chrome://browser/content/devtools/cssruleview.xul:

<?xml version="1.0"?>
<!-- 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/. -->
<?xml-stylesheet href="chrome://global/skin/global.css"?>
<?xml-stylesheet href="chrome://browser/content/devtools/styleinspector.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/csshtmltree.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>

<!DOCTYPE window [
  <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
  %inspectorDTD;
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&ruleViewTitle;">
  <script type="application/javascript;version=1.8">
    window.setPanel = function(panel, iframe) {
      Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
      this.ruleview = new RuleViewTool(panel, window, iframe);
    }
    window.onunload = function() {
      if (this.ruleview) {
        this.ruleview.destroy();
      }
    }
  </script>
</window>

However, the DOM inspector shows a lot of different elements, a menupopup with context menu items, etc. I tried to overlay the file with this, but it doesn't work.. probably because it is dynamically generated. This didn't work:

<?xml version="1.0" encoding="utf-8"?>
<overlay id="cssInspectorOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">


<menupopup id="rule-view-context-menu">
    <menuitem id="new-rule-devtooltweak"
        label="New Rule..."
        accesskey="N"
        oncommand="alert('yahoo')"/>
</menupopup>

</overlay>

Looking at CssRuleView.jsm in Mozilla, I found that the elements are created with createElement, not an xul file! I wonder why they are doing it this way - for performance concerns, or some other reason?

Answer 1

You are asking for speculations here. The code in question was originally introduced in bug 703643 and I don't see any discussion about the approach there - Michael Ratcliffe apparently considered this the best approach and nobody had any concerns. Developer tools generally prefer to generate content dynamically and use only minimal initial XUL/HTML content - usually this is justified as most of the content they display is dynamic. So it's not surprising that developers abuse dynamic content generation in cases where it isn't strictly necessary.

I can see two other reasons to generate content dynamically here:

• All localization data can be kept in .properties files rather than being split between .properties and .dtd.
• You have to attach event handlers dynamically anyway because the XUL document cannot "see" the JS module functions.