about:performance table data

[Anonymosity]

What stylesheet in a theme controls the colours in the data part of the table in about:performance? I cannot find a stylesheet called aboutPerformance.css, so where are these colours set up? It is not in common.css.

[morat]

There is an internal style sheet within the aboutPerformance.xhtml file.

Reference
http://dxr.mozilla.org/mozilla-release/source/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
http://dxr.mozilla.org/mozilla-release/search?q=%23subprocess-reports

[Anonymosity]

I see that one of these files has this line:
@import url("chrome://global/skin/in-content/common.css");
I added the variable "--aboutSupport-table-background" to global > in-content > common.css, but it did nothing. What do I have to add to a theme to get the table background to change? Failing that, how would I get the text in the table data to change colour?

[morat]

I don't know what file to edit in a theme. I can change the style with the userContent.css file.

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("about:performance"),
url-prefix("chrome://global/content/aboutPerformance.xhtml") {
  #subprocess-reports td {
    color: red !important;
    background-color: pink !important;
  }
}

[Anonymosity]

If that works in userContent.css, why does it not work in common.css? The about:performance page loads common.css.

[morat]

I can change the style when I add the following entry in the common.css file in the style editor in the browser toolbox.

Code: Select all

#subprocess-reports td {
  color: red !important;
  background-color: pink !important;
}

Did you remember to purge the caches when you start up the application?

http://developer.mozilla.org/en/Extensions/Updating_extensions_for_Firefox_4#Caching

P.S.

I can change the style when I run the following code in the scratchpad window in the browser environment. (run once to set style and run twice to reset style)

Code: Select all

(function () {

  if (typeof document.getElementsByAttribute == "undefined") {

    alert("Scratchpad: not in browser context");

  } else {

    var css = `@-moz-document url-prefix("about:performance"),
    url-prefix("chrome://global/content/aboutPerformance.xhtml") {
    #subprocess-reports td {
        color: red !important;
        background-color: pink !important;
      }
    }`;
    var ios = Components.classes["@mozilla.org/network/io-service;1"].
      getService(Components.interfaces.nsIIOService);
    var uri = ios.newURI("data:text/css," + encodeURIComponent(css), null, null);
    var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].
      getService(Components.interfaces.nsIStyleSheetService);
    // var type =  sss.AGENT_SHEET;
       var type =  sss.USER_SHEET;
    // var type = sss.AUTHOR_SHEET;
    if (sss.sheetRegistered(uri, type)) sss.unregisterSheet(uri, type);
    else sss.loadAndRegisterSheet(uri, type);
    BrowserReload();

  }

})();

[Anonymosity]

After I cleared the cache, the first suggestion worked. I did not have to use the style editor to add that code. All I had to do was extract common.css from the theme .xpi file, add the code to it, then put it back in. Thanks for the solution.

The second block of code produces an error:
Exception: TypeError: Components.classes is undefined

[morat]

You're welcome.

P.S.

You likely ran the code in the content environment, not the browser environment.

Instructions:

* set devtools.chrome.enabled preference to true
* open scratchpad window
* environment > browser
* edit > paste
* execute > run