How to add a stylesheet to a window programmatically?

[_yup_]

Can anybody explain how to add a styles sheet to a window programmatically?

I have revived the famous Firebug extension - restored the Console functionality, and added multiplatform support. But during this I discovered that for different browsers different style sheets should be used. So I can not hardcode them in the .XUL files, but have to add programmatically - by a window script. But I can't find a way to do this.

For example:

Code: Select all

const WinUtils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                       .getInterface(Components.interfaces.nsIDOMWindowUtils);

WinUtils.loadSheetUsingURIString("chrome://browser/content/browser.css", WinUtils.AUTHOR_SHEET);

Execution of this code results in no error messages in the browser console, but also in no changes in the document.styleSheets.

But execution of loadSheetUsingURIString() ones more results in the error message in the console, whereas execution of removeSheet(); loadSheetUsingURIString() finishes without error messages.

Obviously, loadSheetUsingURIString() does something, but this "something" does not add the style sheet to the window.

Can anybody explain, what I am missing here. What should I do to achieve the goal?

[vannilla]

If the window you are creating is loading a XUL definition under your control, you can specify the CSS there and write the skin directive in chrome.manifest to load different folders for different platforms.
I do not remember the syntax or other caveats right now and I can't do a deep search on UDN, but I'm pretty sure that is how you do it.

[_yup_]

you can specify the CSS there and write the skin directive in chrome.manifest to load different folders for different platforms.

Yes, I know how to do this, but, unfortunately, chrome.manifest trick is not suitable here.
For example, this is what one of the affected files contains:

Code: Select all

<?xml-stylesheet href="chrome://browser/skin/browser.css"?>
<?xml-stylesheet href="chrome://browser/content/browser.css"?>

and how this part should look for Seamonkey:

Code: Select all

<?xml-stylesheet href="chrome://navigator/skin/navigator.css"?>
<?xml-stylesheet href="chrome://navigator/content/navigator.css"?>

application= in the chrome.manifest allows to control the path, but not the name of file.

Of course, as a last resort I can put all lines into one file:

Code: Select all

<?xml-stylesheet href="chrome://browser/skin/browser.css"?>
<?xml-stylesheet href="chrome://browser/content/browser.css"?>
<?xml-stylesheet href="chrome://navigator/skin/navigator.css"?>
<?xml-stylesheet href="chrome://navigator/content/navigator.css"?>

and reconcile with warnings like No chrome package registered for chrome://navigator/skin/navigator.css in the console, but I really intrigued, why loadSheet()/loadSheetUsingURIString() do not do what I expect from them according the documentation (https://devdoc.net/web/developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils.html#loadSheet()):

Synchronously loads a style sheet from |sheetURI| and adds it to the list of additional style sheets of the document.
These additional style sheets are very much like user/agent sheets loaded with loadAndRegisterSheet. The only difference is that they are applied only on the document owned by this window.
Sheets added via this API take effect immediately on the document.

[_yup_]

After some further investigations I have discovered that after loadSheetUsingURIString(), despite absence in the document.styleSheets, style sheet file is really loaded, and browser applies it to the window.