iframe fallback

app/content-scripts/rewards/HotDog.jsx

@@ -14,23 +14,36 @@ class HotDog extends Component {
 		this.state = {
 			closed: false
 		};
+
+		this.iframeEl = parent.document.getElementById('ghostery-iframe-container');
+		if (this.iframeEl) {
+			this.iframeEl.classList = '';
+			this.iframeEl.classList.add('hot-dog');
+		}
+
 		this.close = this.close.bind(this);
 		this.navigate = this.navigate.bind(this);
 	}
 
 	navigate() {
+		if (this.iframeEl) {
+			this.iframeEl.classList.add('offer-card');
+		}
 		this.props.history.push('/offercard');
 	}
 
 	close() {
+		if (this.iframeEl) {
+			this.iframeEl.classList = '';
+		}
 		this.setState({
 			closed: true
 		});
 	}
 
 	render() {
 		return (
-			<div>
+			<div className="ghostery-rewards-component">
 				{ this.state.closed !== true &&
 					<div>
 						<div onClick={this.navigate} className="hot-dog-container">

app/content-scripts/rewards/OfferCard.jsx

@@ -16,13 +16,23 @@ class OfferCard extends Component {
 			copyText: t('rewards_copy_code')
 		};
 
+		this.iframeEl = parent.document.getElementById('ghostery-iframe-container');
+		if (this.iframeEl) {
+			this.iframeEl.classList = '';
+			this.iframeEl.classList.add('offer-card');
+		}
+
 		this.close = this.close.bind(this);
 		this.copyCode = this.copyCode.bind(this);
 	}
 
 	copyCode() {
 		// copy code to clipboard
-		document.getElementsByClassName('shadowroot')[0].shadowRoot.querySelector('.reward-code-input').select();
+		if (document.getElementById('ghostery-shadow-root')) {
+			document.getElementById('ghostery-shadow-root').shadowRoot.querySelector('.reward-code-input').select();
+		} else {
+			document.getElementById('ghostery-iframe-container').contentWindow.document.querySelector('.reward-code-input').select();
+		}
 		document.execCommand('copy');
 
 		// 'copied' feedback for user
@@ -40,6 +50,9 @@ class OfferCard extends Component {
 	}
 
 	close() {
+		if (this.iframeEl) {
+			this.iframeEl.classList = '';
+		}
 		this.setState({
 			closed: true
 		});
@@ -48,7 +61,7 @@ class OfferCard extends Component {
 	render() {
 		console.log('render props:', this.props);
 		return (
-			<div>
+			<div className="ghostery-rewards-component">
 				{ this.state.closed !== true &&
 				<div className="ghostery-reward-card">
 					<div className="reward-card-header">
@@ -76,7 +89,7 @@ class OfferCard extends Component {
 								{/* { this.state.description } */}
 							</p>
 						</div>
-						<div onClick={this.copyCode} className="reward-code">
+						<div className="reward-code">
 							<input readOnly className="reward-code-input" value={this.props.reward.rewardCode} type="text" />
 							<a onClick={this.copyCode}>{this.state.copyText}</a>
 						</div>

app/content-scripts/rewards/index.jsx

@@ -28,11 +28,15 @@ import ShadowDOM from 'react-shadow';
 
 const { BROWSER_INFO, onMessage } = globals;
 const viewport = document.getElementById('viewport');
-const rewardsContainer = document.createElement('div');
 const channelsSupported = (typeof chrome.runtime.connect === 'function');
-
+let rewardsContainer = document.createElement('div');
+let rewardsApp = document.createElement('div');
+let rewardsIframe;
+let iframeStyle;
 let port;
-/* TODO remove test reward data */
+let MainView;
+
+/* TODO massage offerz object into front end and remove mock data */
 const reward = {
 	rewardCode: 'SDF75DSUI90',
 	expireTime: '14 days',
@@ -43,16 +47,67 @@ const reward = {
 	description: 'Description of the offer. There is a lot of exciting stuff going on.'
 };
 
-rewardsContainer.id = 'ghostery-rewards-container';
-rewardsContainer.className = 'show ghostery-rewards-container';
-// rewardsContainer.attachShadow({mode: 'open'});
+rewardsApp.id = 'ghostery-rewards-app';
+rewardsApp.className = 'show';
+
+document.addEventListener('DOMContentLoaded', (event) => {
+	if (BROWSER_INFO.name === 'chrome') {
+		// use shadowDOM to encapsulate CSS - fully supported in Chrome
+		rewardsContainer.appendChild(rewardsApp);
+		document.body.appendChild(rewardsContainer);
+		MainView = (props) => {
+			return (
+				<Router history={history}>
+					<ShadowDOM include={[chrome.extension.getURL('dist/css/rewards_styles.css')]}>
+						<div id="ghostery-shadow-root">
+							<Route exact path="/" render={ ()=> <HotDog reward={props.reward} /> } />
+							<Route path="/hotdog" render={ ()=> <HotDog reward={props.reward} /> } />
+							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} /> } />
+						</div>
+					</ShadowDOM>
+				</Router>
+			);
+		}
+		ReactDOM.render(<MainView reward={reward} />, rewardsApp);
+	} else {
+		// use iframe to encapsulate CSS - fallback for everything else besides chrome
+		rewardsIframe = document.createElement('iframe');
+		rewardsIframe.id = 'ghostery-iframe-container';
+		rewardsIframe.classList.add('hot-dog')
+		document.body.appendChild(rewardsIframe);
+		rewardsIframe.onload = () => {
+			iframeStyle = document.createElement('link');
+			iframeStyle.rel = 'stylesheet';
+			iframeStyle.type = 'text/css';
+			iframeStyle.href = chrome.extension.getURL('dist/css/rewards_styles.css');
+
+			rewardsIframe.contentWindow.document.head.appendChild(iframeStyle);
+			rewardsContainer = rewardsIframe.contentWindow.document.body;
+
+			rewardsApp.classList.add('iframe-child');
+			rewardsContainer.appendChild(rewardsApp);
+			MainView = (props) => {
+				return (
+					<Router history={history}>
+						<div>
+							<Route exact path="/" render={ ()=> <HotDog reward={props.reward} /> } />
+							<Route path="/hotdog" render={ ()=> <HotDog reward={props.reward} /> } />
+							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} /> } />
+						</div>
+					</Router>
+				);
+			}
+			ReactDOM.render(<MainView reward={reward} />, rewardsApp);
+		}
+	};
+});
 
 function handleMessages(request, sender, response) {
 	console.log(request);
 	/* TODO get new reward from request, and set it as new reward */
 	if (document.readyState === 'complete') {
 		console.log('re render root react');
-		ReactDOM.render(<MainView reward={reward} />, document.getElementById('ghostery-rewards-container'));
+		ReactDOM.render(<MainView reward={reward} />, rewardsApp);
 	}
 }
 
@@ -65,37 +120,3 @@ if (channelsSupported) {
 } else {
 	onMessage.addListener(handleMessages);
 }
-
-let MainView;
-if (BROWSER_INFO.name === 'chrome') {
-	MainView = (props) => {
-		return (
-			<Router history={history}>
-				<ShadowDOM include={[chrome.extension.getURL('dist/css/rewards_styles.css')]}>
-					<div className="shadowroot">
-						<Route exact path="/" render={ ()=> <HotDog reward={props.reward} /> } />
-						<Route path="/hotdog" render={ ()=> <HotDog reward={props.reward} /> } />
-						<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} /> } />
-					</div>
-				</ShadowDOM>
-			</Router>
-		);
-	}
-} else {
-	MainView = (props) => {
-		return (
-			<Router history={history}>
-				<div>
-					<Route exact path="/" render={ ()=> <HotDog reward={props.reward} /> } />
-					<Route path="/hotdog" render={ ()=> <HotDog reward={props.reward} /> } />
-					<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} /> } />
-				</div>
-			</Router>
-		);
-	}
-}
-
-document.addEventListener('DOMContentLoaded', (event) => {
-	document.body.appendChild(rewardsContainer);
-	ReactDOM.render(<MainView reward={reward} />, document.getElementById('ghostery-rewards-container'));
-});

app/scss/rewards.scss

@@ -1,12 +1,29 @@
 //Import Global Partials
 @import "settings"; //includes _colors.scss
 
-.ghostery-rewards-container, :host {
+
+#ghostery-rewards-app, #ghostery-iframe-container {
 	z-index: 2147483647 !important;
 	font-family: $body-font-family!important;
 	position: fixed;
 	top: 30px;
 	right: 30px;
+}
+
+#ghostery-iframe-container {
+	border: none;
+	&.hot-dog {
+		height: 59px;
+		width: 266px;
+	}
+
+	&.offer-card {
+		width: 268px;
+		height: 531px;
+	}
+}
+
+.ghostery-rewards-component {
 
 	.hide {
 		visibility: hidden;
@@ -264,3 +281,8 @@
 	}
 
 }
+
+#ghostery-rewards-app.iframe-child {
+	top: 9px;
+	right: 1px;
+}

src/classes/EventHandlers.js

@@ -114,7 +114,7 @@ class EventHandlers {
 					tabInfo.setTabInfo(tabId, 'incognito', tab.incognito);
 					// purplebox.createBox() will first check to make sure this is a valid tab
 					this._createBox(tabId);
-					this.rewards.showCircle(tabId);
+					this.rewards.showHotDog(tabId);
 				}
 			}, () => {
 				// prefetched tabs will return an error from utils.getTab

src/classes/Rewards.js

@@ -30,12 +30,12 @@ const t = chrome.i18n.getMessage;
 class Rewards {
 	constructor() {
 		this.rewardsData = {
-			rewardName: 'test-reward'
+
 		};
 		this.ports = new Map();
 	}
 
-	showCircle(tab_id) {
+	showHotDog(tab_id) {
 		/* @TODO get any initial data from cmp event and add to this.rewardsData */
 
 		const tab = tabInfo.getTabInfo(tab_id);
@@ -56,26 +56,15 @@ class Rewards {
 					this.ports.set(tabId, port);
 					this.ports.get(tabId).onMessage.addListener((message) => {
 						if (message.name === 'rewardsLoaded') {
-							this.ports.get(tabId).postMessage({ name: 'showCircle', message: this.rewardsData });
+							this.ports.get(tabId).postMessage({ name: 'showHotDog', message: this.rewardsData });
 						}
-						// else if (message.name === 'onCreateBox') {
-						// 	this.updateBox(tabId);
-						// } else if (message.name === 'onDestroyBox') {
-						// 	this.destroyBox(tabId);
-						// } else if (message.name === 'updateAlertConf') {
-						// 	conf.alert_expanded = message.message.alert_expanded;
-						// 	conf.alert_bubble_pos = message.message.alert_bubble_pos;
-						// 	conf.alert_bubble_timeout = message.message.alert_bubble_timeout;
-						// 	// push new settings to API
-						// 	accounts.pushUserSettings({ conf: accounts.buildUserSettings() });
-						// }
 					});
 				}
 			}
 		});
 
 		// console.log('INJECT REWARDS');
-		return injectScript(tab_id, 'dist/rewards.js', null, 'document_start').then(() => {
+		return injectScript(tab_id, 'dist/rewards.js', 'dist/css/rewards_styles.css', 'document_start').then(() => {
 			// console.log('REWARDS INJECTED');
 		}).catch((err) => {
 			log('rewards injectScript error', err);