CSS for Coloring in Folder Pane

[morat]

@Qwerky

In general, I don't like posting code that loops the entire folder structure. If a user has more than 20,000 folders, then my code may max out their memory and crash the app.

I guess I didn't need to use the setStringProperty method. I could put the logic within the functions. I don't remember why I wrote the code like that in 2014.

Here is how the addon styles the folder pane.

accountcolors-3panewindow.js (see gFolderTreeView.getCellProperties and gFolderTreeView.getRowProperties)
http://pastebin.com/raw/DYSKU6un

Reference
http://searchfox.org/comm-esr91/search? ... Properties
http://searchfox.org/comm-esr91/search? ... Properties

[Qwerky]

@morat

Sorry to be dense. I think what you are saying, is that to give each folder an individual color, the previous JavaScript code would need to iterate through and enumerate each folder. What I would like more simply to do, is to give all of the folders within an account, the same foreground and background colors as given to the parent account. Would that make it much easier?

[morat]

Try this:

Code: Select all

/* Thunderbird 91 userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

treechildren::-moz-tree-cell-text(folderNameCol, cowabunga-server1)
{ color: red !important;
  font-weight: bold !important; }

treechildren::-moz-tree-cell-text(folderNameCol, cowabunga-server3)
{ color: green !important;
  font-weight: bold !important; }

treechildren::-moz-tree-row(cowabunga-server1)
{ background-color: lightpink !important; }

treechildren::-moz-tree-row(cowabunga-server3)
{ background-color: lightgreen !important; }

Code: Select all

/* Thunderbird 91 userChrome.js */

(function () {

if (location == "chrome://messenger/content/messenger.xhtml") {

  gFolderTreeView.originalGetCellProperties = gFolderTreeView.getCellProperties;
  gFolderTreeView.getCellProperties = function (row, col) {
    var props = gFolderTreeView.originalGetCellProperties(row, col);
    if (col.id == "folderNameCol") {
      var folder = gFolderTreeView.getFolderForIndex(row);
      var key = folder.server.key;
      if (key == "server1") {
        props += " cowabunga-server1";
      } else if (key == "server2") {
        props += " cowabunga-server2";
      } else if (key == "server3") {
        props += " cowabunga-server3";
      } else if (key == "server4") {
        props += " cowabunga-server4";
      } else if (key == "server5") {
        props += " cowabunga-server5";
      } else if (key == "server6") {
        props += " cowabunga-server6";
      }
    }
    return props;
  };
  gFolderTreeView.originalGetRowProperties = gFolderTreeView.getRowProperties;
  gFolderTreeView.getRowProperties = function (row) {
    var props = gFolderTreeView.originalGetRowProperties(row);
    var folder = gFolderTreeView.getFolderForIndex(row);
    var key = folder.server.key;
    if (key == "server1") {
      props += " cowabunga-server1";
    } else if (key == "server2") {
      props += " cowabunga-server2";
    } else if (key == "server3") {
      props += " cowabunga-server3";
    } else if (key == "server4") {
      props += " cowabunga-server4";
    } else if (key == "server5") {
      props += " cowabunga-server5";
    } else if (key == "server6") {
      props += " cowabunga-server6";
    }
    return props;
  };
  var tree = document.getElementById("folderTree");
  tree.invalidate();

}

})();

It works here. I styled all folders cell text and row for 2 imap accounts.

How to identify the key (e.g. server2) for each account (e.g. Local Folders):

* open config editor
* type ^mail\.server\.server*\.name$ in search box

Config Editor
http://support.mozilla.org/kb/config-editor

Similar thread: http://forums.mozillazine.org/viewtopic ... &t=3088564 (styling message header bottom border)

[Qwerky]

Superb! Using this JavaScript/CSS in place of the previous, all of my accounts with their folders are colored as desired.

In the thread at the link that you provided above, there are some images from another poster which show what the Account Colors add-on provided for earlier versions of Thunderbird. And that's how my folder pane looks now with this code.

Thank you!

[morat]

I wrote these code snippets for the error console to help users create treechildren::-moz-tree-cell-text and treechildren::-moz-tree-row styles for the folder and thread panes in the userChrome.css file.

* Show cell text, cell properties, row properties for selected row in folder tree

Code: Select all

(function () {
  var tree = document.getElementById("folderTree");
  var row = tree.view.selection.currentIndex;
  for (var i = 0; i < tree.columns.length; i++) {
    var col = tree.columns.getColumnAt(i);
    if (tree.columns[i].id == "folderNameCol") {
      console.log("Cell Text: "       + tree.view.getCellText(row, col));
      console.log("Cell Properties: " + tree.view.getCellProperties(row, col));
      console.log("Row Properties: "  + tree.view.getRowProperties(row));
    }}})();

* Show cell text, cell properties, row properties for all rows in folder tree

Code: Select all

(function () {
  var tree = document.getElementById("folderTree");
  for (var row = 0; row < tree.view.rowCount; row++) {
    for (var i = 0; i < tree.columns.length; i++) {
      var col = tree.columns.getColumnAt(i);
      if (tree.columns[i].id == "folderNameCol") {
        console.log("Cell Text: "       + tree.view.getCellText(row, col));
        console.log("Cell Properties: " + tree.view.getCellProperties(row, col));
        console.log("Row Properties: "  + tree.view.getRowProperties(row));
      }}}})();

* Show cell text, cell properties, row properties for selected row in thread tree

Code: Select all

(function () {
  var tree = document.getElementById("threadTree");
  var row = tree.view.selection.currentIndex;
  for (var i = 0; i < tree.columns.length; i++) {
    var col = tree.columns.getColumnAt(i);
    if (tree.columns[i].id == "subjectCol") {
      console.log("Cell Text: "       + tree.view.getCellText(row, col));
      console.log("Cell Properties: " + tree.view.getCellProperties(row, col));
      console.log("Row Properties: "  + tree.view.getRowProperties(row));
    }}})();

* Show cell text, cell properties, row properties for all rows in thread tree

Code: Select all

(function () {
  var tree = document.getElementById("threadTree");
  for (var row = 0; row < tree.view.rowCount; row++) {
    for (var i = 0; i < tree.columns.length; i++) {
      var col = tree.columns.getColumnAt(i);
      if (tree.columns[i].id == "subjectCol") {
        console.log("Cell Text: "       + tree.view.getCellText(row, col));
        console.log("Cell Properties: " + tree.view.getCellProperties(row, col));
        console.log("Row Properties: "  + tree.view.getRowProperties(row));
      }}}})();

Reference
http://searchfox.org/comm-esr102/source ... erPane.css
http://searchfox.org/comm-esr102/search ... -cell-text
http://searchfox.org/comm-esr102/search?q=-moz-tree-row

Styling a Tree
http://www.devdoc.net/web/developer.moz ... _Tree.html
http://docs.huihoo.com/mozilla/xul/xultu/treestyle.html
http://developer.mozilla.org/en-US/docs ... ing_a_Tree (enter url on archive.org)
http://archive.org/

note: code snippets don't show default properties, like focus hover selected odd even

* Test styles

Code: Select all

(function () {

    var css = `#menubar-items {
      -moz-appearance: none !important;
      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);
 // setTimeout(function () { ReloadMessage(); }, 10); // Thunderbird 3pane window

})();

userChrome.css and userContent.css are both USER_SHEET, but each with its own specifics.
userChrome.css stylizes chrome areas only. userContent.css stylizes content area only.
JavaScript loaded USER_SHEET style stylize both chrome and content.
Some styles must be registered on the agent level and not on the user level.

[pauljayd]

In order to make folder selection more visible, I have the following coded in file userChrome.css --

treecols#folderPaneCols~ treechildren::-moz-tree-row(hover) {
background-color: #5beb92 !important; /* green */
border: 2px dashed black !important;
}

and,

treecols#folderPaneCols~ treechildren::-moz-tree-row(selected) {
background-color: yellow !important;
}

I want to also change the (selected) folder text to black.

I tried adding the following:

font-color: black !important;
color: black !important;

but it doesn't work.

In Developer/Inspector, in the section named "Inherited from html#messengerWindow"
I can change the following definition successfully:

--sidebar-highlight-text-color: black;

which yields the desired result. So, I tried the following, but it also didn't work:

treecols#folderPaneCols
~ treechildren::-moz-tree-row(selected)
::-moz-tree-cell-text {
::-sidebar-highlight-text-color: black !important;
}

Any help would be appreciated.

[morat]

@pauljayd

The following style work for me.

Code: Select all

#folderTree > treechildren::-moz-tree-row(hover) {
  background-color: lime !important;
  border: 2px dashed black !important;
}
#folderTree > treechildren::-moz-tree-row(selected) {
  background-color: cyan !important;
}
#folderTree > treechildren::-moz-tree-cell-text(selected) {
  color: cyan !important;
}

[pauljayd]

I think you made a slight transcription error above, as the 'cyan' in both the last 2 specifications results in invisible text.
However, following your example, I used yellow for the background-color, and black for the color.
It is perfect now.
Thanks again.

[USBrit]

Terrific piece of work. Thank you. It worked for me.
The question I have is if it was so simple to do why was the original "Account Colors" not reworked?
Regards,
ROb