Question

After calling window.getComputedStyle, how can I tell whether a style a style is from the page itself (rather than being from the browser)? I’m interested in doing so in pure javascript, though I would settle for a solution which ran in the context of an add-on.

Answer 1

You will have a hard time figuring out where the rules that getComputedStyle gives you came from. Note that the code provided by MaxArt isn’t a complete solution – there are also inherited styles so one would have to repeat everything for parent nodes. The simpler approach would be using inIDOMUtils.getCSSStyleRules(), along these lines:

function isPageStyle(styleSheet)
{
  if (styleSheet.ownerNode)
    return true;

  if (styleSheet.ownerRule instanceof Components.interfaces.nsIDOMCSSImportRule)
    return isPageStyle(styleSheet.parentStyleSheet);

  return false;
}

var domUtils = Components.classes["@mozilla.org/inspector/dom-utils;1"]
                         .getService(Components.interfaces.inIDOMUtils);
var rules = domUtils.getCSSStyleRules(element);
for (var i = 0; i < rules.Count(); i++)
{
  var rule = rules.GetElementAt(i);
  if (isPageStyle(rule.parentStyleSheet))
    alert(rule.cssText);
}

You will have to do it for the parent nodes as well. For a complete example you can look at the implementation of the Inspector feature in Firefox (isPageStyle function in my answer shamelessly “borrowed” from here).