iframe doesn't obey color styling

Question

As you can see here, I have set up an addon to replace some contents of the network-inspect-popup with pretty-printed values. The odd thing is, I'm setting background of both the iframe and the inner document (background;#FFF), but it still shows the bluish background of the net-inspector. What's wrong with this, and why does DOM Inspector addon not even let me inspect to see what's wrong here?

Answer 1

Your own code overrides your own style. You have:

netPanel.iframe.addEventListener('load',function(event) {
  var doc = event.originalTarget;
  doc.body.style.backgroundColor='rgb(85,87,128)';
  // ...
}, true);

This event listener will be called for all load events bubbling in the netPanel.iframe DOM, and that includes the load event the iframe document you insert creates. Change your code to first check the load is actually coming from a document you want to "overlay".

PS: You can actually use the DOM Inspector. But note that the "window" is not actually a window, but a <panel> in under the browser.xul top-level DOM.