Initial checkin

app/panel/actions/PanelActions.js

@@ -87,6 +87,7 @@ export const getTheme = name => dispatch => (
 	sendMessageInPromise('setPanelData', { current_theme: name })
 		.then(() => sendMessageInPromise('account.getTheme'))
 		.then((res) => {
+			console.log('GOT THEME', res);
 			if (res) {
 				dispatch({
 					type: SET_THEME,

app/panel/components/Panel.jsx

@@ -58,6 +58,12 @@ class Panel extends React.Component {
 		});
 	}
 
+	shouldComponentUpdate(nextProps, nextState) {
+		console.log('COMPONENT DID UPDATE CALLED', nextProps, nextState);
+		this.forceUpdate();
+		return false;
+	}
+
 	/**
 	 * Lifecycle event
 	 */
@@ -130,6 +136,7 @@ class Panel extends React.Component {
 		const { panel, summary, blocking } = payload;
 		const { current_theme, account } = panel;
 
+		console.log('INIT SET THEME', current_theme);
 		setTheme(document, current_theme, account);
 
 		this.props.actions.updatePanelData(panel);

app/panel/components/Subscription/SubscriptionThemes.jsx

@@ -48,6 +48,7 @@ const SubscriptionThemes = (props) => {
 
 	const handleThemeClick = (index) => {
 		const theme = themes[index];
+		console.log('CLICK', index, themes, theme);
 		props.changeTheme(theme.name);
 	};
 

app/panel/reducers/panel.js

@@ -77,10 +77,12 @@ export default (state = initialState, action) => {
 		}
 		case SET_THEME: {
 			const { name, css } = action.data;
+			console.log('PANEL ACTION SET THEME', name, css);
 			setTheme(document, name, { themeData: { [name]: { name, css } } });
 			return Object.assign({}, state, { current_theme: name });
 		}
 		case CLEAR_THEME: {
+			console.log('CLEAR THEME IS CALLED');
 			setTheme(document, initialState.current_theme);
 			return Object.assign({}, state, { current_theme: initialState.current_theme });
 		}

app/panel/utils/utils.js

@@ -216,7 +216,7 @@ export function setTheme(doc, name, account) {
 	// if themeName is 'default' all we have to do is to remove style element
 	const styleTitlePrefix = 'Ghostery Theme';
 	// First remove all other style elements which may be there
-	const styleList = doc.head.getElementsByTagName('style');
+	const styleList = doc.head.getElementsByTagName('link');
 	// Other kinds of loops are not supported equally across browsers
 	for (let i = 0; i < styleList.length; i++) {
 		const style = styleList[i];
@@ -236,12 +236,14 @@ export function setTheme(doc, name, account) {
 		const { css } = themeData[name];
 
 		// Create element for the theme being set, if it is not there
-		const themeStyle = doc.createElement('style');
-		themeStyle.id = name;
+		const themeStyle = doc.createElement('link');
+		themeStyle.rel = 'stylesheet';
+		themeStyle.media = 'screen';
+		themeStyle.type = 'text/css';
 		themeStyle.title = `${styleTitlePrefix} ${name}`;
 
 		// Set content of style element to the theme text.
-		themeStyle.textContent = css;
-		document.head.appendChild(themeStyle);
+		themeStyle.href = css;
+		doc.head.appendChild(themeStyle);
 	}
 }