X-Face custom colors

[stanio]

Given the black&white nature of X-Faces I want to make them blend with my UI colors better by having the white as the "dialog" color, and the black as the "dialog" text color. So I'm trying to apply the following CSS rules (either using userChrome.css, or using the Stylish extension):

  #fromBuddyIconXFace {
    image-rendering: -moz-crisp-edges;
    color: -moz-DialogText;
    background-color: transparent;
  }

If -moz-DialogText is actually green on my system, I'm currently seeing:

while I would like to see:

This has been previously implemented by the Mnenhy extension:

function ReadCSSColor(aoComputedStyle, asColorName, asDefaultValue)
{
  let sColor = aoComputedStyle.getPropertyCSSValue(asColorName).cssText;
  if (/^rgba\(/.test(sColor))
  {
    // have rgba values
    sColor = sColor.substr(5, sColor.length - 6);
  }
  else if (/^rgb\(/.test(sColor))
  {
    // only rgb values, assume opaque
    sColor = sColor.substr(4, sColor.length - 5) + ",1";
  }
  else if (sColor == "transparent")
  {
    // special value
    sColor = "0,0,0,0";
  }
  else
  {
    // default: plain opaque white
    sColor = asDefaultValue;
  }
  return sColor;
}

//
//  Create data URL for X-Face-PNG
//
let goPNGFace = new PNGFace();

function FaceURL(asFace, aoComputedStyle)
{
  UnCompAll(asFace.replace(/[^!-~]/g, "")); // eliminate illegal chars
  Gen();

  // set colour values:
  //  #fromBuddyIcon
  //  {
  //    color:            green;
  //    color:            -moz-rgba(50%, 50%, 50%, 0.5);
  //    background-color: red;
  //    background-color: transparent;
  //    padding:          0 ! important;
  //    margin:           5px;
  //  }
  // Unfortunately, the alpha channel value of -moz-rgba is retrievable
  // only on trunk since about 2007-01-24...

  // background; defaults to plain opaque white
  let sBackColors = ReadCSSColor(aoComputedStyle, "background-color", "255,255,255,1");
  goPNGFace.Color(0, sBackColors);
  // foreground; defaults to plain opaque black
  let oForeColors = ReadCSSColor(aoComputedStyle, "color", "0,0,0,1");
  goPNGFace.Color(1, oForeColors);

  return "data:image/png;base64," + btoa(goPNGFace.URL(F));
}

[JohnDDuncanIII]

Hello. I don't want to make you use userChrome hacks to get this functionality, especially if it's something that people want. I will try to quickly implement this tonight (with some sort of preference dialog button, perhaps)?

[stanio]

Yes, explicit preference (probably accessible via about:config) would be o.k. too. Not sure if UI is necessary, unless other people want this. I already need to tweak other extensions.messagefaces settings like maxsize to make Gravatars look o.k. on a high-dpi screen, but that's a different issue. For the later I also need to apply additional CSS, for what is worth.

[stanio]

Here's more realistic example of what I'm after.

Current:

Wanted:

(Note, the text color is not exactly black.)

---

Personally, I don't consider user style sheets as a hack. It's a convenience to more tech-savvy users, and for developers not needing to complicate an application with too many options in the GUI.

[JohnDDuncanIII]

Okay, as I understand it, mnenhy's modification to xface.js simply adds support for css modifications to the #fromBuddyIconXFace element. I can easily include this in the next update, I believe. I am just working on some final fixes for the upcoming custom column support that I am adding.

[JohnDDuncanIII]

I am planning on adding the mnenhy changes to xface.js, and adding an about:config option to enable the "blend x-face with system UI colors" that will add the following css properties to the x-face element (removing the need to add these changes to the userChrome.css file):

  #fromBuddyIconXFace {
    image-rendering: -moz-crisp-edges;
    color: -moz-DialogText;
    background-color: transparent;
  }

[stanio]

  #fromBuddyIconXFace {
    image-rendering: -moz-crisp-edges;

This bit is to adjust for high-dpi screens for having "sharp" X-Face pixels. This is again just my preference. There's another high-dpi related issue I'll try to describe separately.

[JohnDDuncanIII]

okay. perhaps there could be two separate hidden preferences then; one for hi-dpi screens (the -moz-crisp-edges one that disables bilinear filtering for image scaling [I actually use this myself in my userContent.css]), and one to blend X-Faces to the system UI colors.