MozillaZine

about:performance table data

Discuss application theming and theme development.
Anonymosity
 
Posts: 8530
Joined: May 7th, 2007, 12:07 pm

Post Posted September 9th, 2018, 12:03 am

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
 
Posts: 2949
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 9th, 2018, 6:41 am


Anonymosity
 
Posts: 8530
Joined: May 7th, 2007, 12:07 pm

Post Posted September 9th, 2018, 12:10 pm

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
 
Posts: 2949
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 9th, 2018, 1:20 pm

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
 
Posts: 8530
Joined: May 7th, 2007, 12:07 pm

Post Posted September 9th, 2018, 3:13 pm

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

morat
 
Posts: 2949
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 9th, 2018, 7:42 pm

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();

  }

})();
Last edited by morat on September 10th, 2018, 7:29 am, edited 1 time in total.

Anonymosity
 
Posts: 8530
Joined: May 7th, 2007, 12:07 pm

Post Posted September 9th, 2018, 10:55 pm

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
 
Posts: 2949
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 10th, 2018, 7:33 am

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

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 0 guests