diff --git a/examples/reddit-panel/lib/main.js b/examples/reddit-panel/lib/main.js
index b6a696b..ab3fbb2 100644
--- a/examples/reddit-panel/lib/main.js
+++ b/examples/reddit-panel/lib/main.js
@@ -1,9 +1,13 @@
var data = require("self").data;
+let url = "http://www.reddit.com/.mobile?keep_extension=True";
+
+url = "data:text/html,Foobar";
+
var reddit_panel = require("panel").Panel({
width: 240,
height: 320,
- contentURL: "http://www.reddit.com/.mobile?keep_extension=True",
+ contentURL: url,
contentScriptFile: [data.url("jquery-1.4.4.min.js"),
data.url("panel.js")]
});
diff --git a/packages/addon-kit/lib/panel.js b/packages/addon-kit/lib/panel.js
index 4899620..f930025 100644
--- a/packages/addon-kit/lib/panel.js
+++ b/packages/addon-kit/lib/panel.js
@@ -300,6 +300,24 @@ const Panel = Symbiont.resolve({
if (!this._inited) // defer if not initialized yet
return this.on('inited', this._onShow.bind(this));
this._frameLoadersSwapped = true;
+
+ // Retrieve computed text color style in order to apply to to the iframe
+ // document. As MacOS background is dark gray, we need to use skin's text
+ // color.
+ let win = this._xulPanel.ownerDocument.defaultView;
+ let node = win.document.getAnonymousElementByAttribute(this._xulPanel,
+ "class", "panel-inner-arrowcontent");
+ let textColor = win.getComputedStyle(node).getPropertyValue("color");
+ let doc = this._xulPanel.firstChild.contentDocument;
+ let style = doc.createElement("style");
+ style.textContent = "body {color: " + textColor + ";}";
+ let container = doc.head ? doc.head : doc.documentElement;
+ if (container.firstChild)
+ container.insertBefore(style, container.firstChild);
+ else
+ container.appendChild(style);
+
+
this._emit('show');
} catch(e) {
this._emit('error', e);
diff --git a/packages/addon-kit/tests/test-panel.js b/packages/addon-kit/tests/test-panel.js
index 7a03dc9..7b104ff 100644
--- a/packages/addon-kit/tests/test-panel.js
+++ b/packages/addon-kit/tests/test-panel.js
@@ -230,6 +230,24 @@ tests.testAnchorAndArrow = function(test) {
};
+tests.testPanelTextColor = function(test) {
+ test.waitUntilDone();
+ let html = "" +
+ "Foo
";
+ let panel = Panel({
+ contentURL: "data:text/html," + encodeURI(html),
+ contentScript: "self.port.emit('color', " +
+ "window.getComputedStyle(document.body.firstChild, null). " +
+ " getPropertyValue('color'));"
+ });
+ panel.port.on("color", function (color) {
+ test.assertEqual(color, "rgb(255, 255, 0)",
+ "The panel text color style is preserved when a style exists.");
+ panel.destroy();
+ test.done();
+ });
+};
+
function makeEventOrderTest(options) {
let expectedEvents = [];