fix(sidebar): improve color contrast

[marcysutton]

@dylanb I didn't see any other color values, so I wasn't sure if there was a safer way to handle this. Hard-coded a color to fix the issue.

Closes https://github.com/dequelabs/axe-firefox-devtools/issues/45

[dylanb]

@marcysutton is it possible to pull these values from the theme? We may need to at least create two different color schemes: one for the dark theme and one for the light theme.

[marcysutton]

Possibly. I did check light and dark themes though, and it worked for both. The dark theme as a whole has horrible contrast.

[marcysutton]

@dylanb the selected color is hard-coded along with the background colors, but they seem to work okay in both themes. I received a demo extension from Mozilla that shows how to store the default text color of a document in a blank CSS file–which we could then invert to set a selected color–but it seems like overkill given we are rearchitecting our extensions right now.

Here is some of the code that creates a new style rule based on the default text color, where kStyleSheet is a blank CSS file in the project directory:

function loadIntoWindow(window) {
  if (!window || window.document.documentElement.getAttribute("windowtype") != "navigator:browser")
    return;
  let doc = window.document;
  var ss = doc.createProcessingInstruction("xml-stylesheet", 'href="' + kStyleSheet + '" type="text/css"');
  doc.insertBefore(ss, doc.documentElement);
  ss.addEventListener("load", {
    handleEvent: function(e) {
      if (e.type === "load") {
        ss.removeEventListener("load", this);
        while (ss.sheet.cssRules.length > 0) {
          ss.sheet.deleteRule(0);
        }

        var color = window.getComputedStyle(window.document.documentElement, "").color;
        color = color.replace("0,", "255,")
        Components.utils.reportError(color);
        ss.sheet.insertRule("* {color: " + color + ";}", 0);
      }
    }
  });
}

[dylanb]

That is a good starting point but needs a lot of work because simply swapping all 0 color values for 255 is a bit simplistic. I'm going to merge this PR, perhaps you could add that to the React refactor project.