Gh 1767/bugfix/target blank links crash opera

app/panel/components/About.jsx

@@ -12,64 +12,34 @@
  */
 import React from 'react';
 import globals from '../../../src/classes/Globals';
-import { sendMessage } from '../utils/msg';
+import PanelToTabLink from './BuildingBlocks/PanelToTabLink';
 
 const { BROWSER_INFO, EXTENSION_VERSION } = globals;
 /**
- * @class Implement About view which opens from the main drop-down menu.
- * @memberof PanelClasses
+ * Render About view which opens from the main drop-down menu.
  */
-class About extends React.Component {
-	/**
-	 * Open internal Licenses page with licenses of
-	 * all third-party packages used by Ghostery.
-	 * @static
-	 */
-	static openNewTab() {
-		sendMessage('openNewTab', {
-			url: chrome.runtime.getURL('./app/templates/licenses.html'),
-			become_active: true,
-		});
-		window.close();
-	}
+const About = () => {
+	const licensesUrl = chrome.runtime.getURL('./app/templates/licenses.html');
 
-	/**
-	 * Render About panel.
-	 * @return {ReactComponent}   ReactComponent instance
-	 */
-	render() {
-		return (
-			<div id="content-about">
-				<div className="row">
-					<div className="small-12 columns">
-						<h1>{ t('panel_about_panel_header') }</h1>
-						<div className="support-section">
-							<h3>{ t('panel_about_version_header', [BROWSER_INFO.displayName, EXTENSION_VERSION]) }</h3>
-							<a href="https://github.com/ghostery/ghostery-extension/releases" target="_blank" rel="noopener noreferrer">
-								{ t('panel_about_release_notes') }
-							</a>
-							<a href="https://www.mozilla.org/en-US/MPL/2.0/" target="_blank" rel="noopener noreferrer">
-								{ t('panel_about_license') }
-							</a>
-							<a href="https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy/" target="_blank" rel="noopener noreferrer">
-								{ t('panel_about_privacy_statement') }
-							</a>
-							<a href="https://www.ghostery.com/about-ghostery/ghostery-terms-and-conditions/" target="_blank" rel="noopener noreferrer">
-								{ t('panel_about_terms_and_conditions') }
-							</a>
-							<a href="https://www.ghostery.com/about-ghostery/imprint/" target="_blank" rel="noopener noreferrer">
-								{ t('panel_about_imprint') }
-							</a>
-							<div onClick={About.openNewTab}>
-								{ t('panel_about_licenses') }
-							</div>
-							<a href="https://www.ghostery.com/" target="_blank" rel="noopener noreferrer">Ghostery.com</a>
-						</div>
+	return (
+		<div id="content-about">
+			<div className="row">
+				<div className="small-12 columns">
+					<h1>{ t('panel_about_panel_header') }</h1>
+					<div className="support-section">
+						<h3>{ t('panel_about_version_header', [BROWSER_INFO.displayName, EXTENSION_VERSION]) }</h3>
+						<PanelToTabLink href="https://github.com/ghostery/ghostery-extension/releases">{t('panel_about_release_notes')}</PanelToTabLink>
+						<PanelToTabLink href="https://www.mozilla.org/en-US/MPL/2.0/">{t('panel_about_license')}</PanelToTabLink>
+						<PanelToTabLink href="https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy/">{t('panel_about_privacy_statement')}</PanelToTabLink>
+						<PanelToTabLink href="https://www.ghostery.com/about-ghostery/ghostery-terms-and-conditions/">{t('panel_about_terms_and_conditions')}</PanelToTabLink>
+						<PanelToTabLink href="https://www.ghostery.com/about-ghostery/imprint/">{t('panel_about_imprint')}</PanelToTabLink>
+						<PanelToTabLink href={licensesUrl}>{t('panel_about_licenses')}</PanelToTabLink>
+						<PanelToTabLink href="https://www.ghostery.com/">Ghostery.com</PanelToTabLink>
 					</div>
 				</div>
 			</div>
-		);
-	}
-}
+		</div>
+	);
+};
 
 export default About;

app/panel/components/BuildingBlocks/PanelToTabLink.jsx

@@ -0,0 +1,29 @@
+/**
+ * PanelToTabLink Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React from 'react';
+import { handleClickOnNewTabLink } from '../../utils/msg';
+
+/**
+ * Implement panel -> new tab links. Used in Help, About, and other panel views
+ * @memberof PanelBuildingBlocks
+ */
+const PanelToTabLink = (props) => {
+	const { href, children } = props;
+
+	return (
+		<a href={href} onClick={handleClickOnNewTabLink}>{children}</a>
+	);
+};
+
+export default PanelToTabLink;

app/panel/components/CreateAccount.jsx

@@ -16,6 +16,7 @@ import { Link } from 'react-router-dom';
 import ClassNames from 'classnames';
 import RSVP from 'rsvp';
 import { validateEmail, validateConfirmEmail, validatePassword } from '../utils/utils';
+import I18nWithLink from '../../shared-components/I18nWithLink';
 
 /**
  * @class Implement Create Account view which opens
@@ -215,7 +216,9 @@ class CreateAccount extends React.Component {
 									<div id="create-account-legal-consent-checkbox" className={(legalConsentNotCheckedError ? 'checkbox-error' : '')}>
 										<input id="legalConsentChecked" name="legalConsentChecked" type="checkbox" checked={legalConsentChecked} onChange={this.handleCheckboxChange} />
 										{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-										<label htmlFor="legalConsentChecked" dangerouslySetInnerHTML={{ __html: t('create_account_form_legal_consent_checkbox_label') }} />
+										<label htmlFor="legalConsentChecked">
+											<I18nWithLink value="create_account_form_legal_consent_checkbox_label" />
+										</label>
 									</div>
 								</div>
 							</div>

app/panel/components/Help.jsx

@@ -12,61 +12,37 @@
  */
 
 import React from 'react';
-import { sendMessage, openSupportPage } from '../utils/msg';
+import { openSupportPage } from '../utils/msg';
+import PanelToTabLink from './BuildingBlocks/PanelToTabLink';
+
 /**
- * @class Implement Help view which opens from the main drop-down menu.
- * @memberof PanelClasses
+ * Render Help view that user can open from the header drop-down menu
  */
-class Help extends React.Component {
-	/**
-	 * Handle click on 'Set Up Ghostery' menu item
-	 */
-	openHubTab = (e) => {
-		e.preventDefault();
-		sendMessage('openNewTab', {
-			url: chrome.runtime.getURL('./app/templates/hub.html'),
-			become_active: true,
-		});
-		window.close();
-	}
-
-	/**
-	 * Handle click on 'Support' menu item
-	 */
-	openSupportTab = (e) => {
-		e.preventDefault();
-		openSupportPage();
-		window.close();
-	}
+const Help = () => {
+	const hubUrl = chrome.runtime.getURL('./app/templates/hub.html');
 
-	/**
-	 * Render Help view.
-	 * @return {ReactComponent}   ReactComponent instance
-	 */
-	render() {
-		return (
-			<div id="content-help">
-				<div className="row">
-					<div className="small-12 columns">
-						<h1>{ t('panel_help_panel_header') }</h1>
-						<div className="support-section">
-							<a href="#" onClick={this.openHubTab}>{ t('panel_help_setup') }</a>
-						</div>
-						<div className="support-section">
-							<h3>{ t('panel_help_questions_header') }</h3>
-							<a href="https://www.ghostery.com/faqs/" target="_blank" rel="noopener noreferrer">{ t('panel_help_faq') }</a>
-							<a href="https://www.ghostery.com/survey/in-app" target="_blank" rel="noopener noreferrer">{ t('panel_help_feedback') }</a>
-							<a href="#" onClick={this.openSupportTab}>{ t('panel_help_support') }</a>
-						</div>
-						<div className="support-section">
-							<h3>{ t('panel_help_contact_header') }</h3>
-							<a className="info" href="mailto:info@ghostery.com">info@ghostery.com</a>
-						</div>
+	return (
+		<div id="content-help">
+			<div className="row">
+				<div className="small-12 columns">
+					<h1>{ t('panel_help_panel_header') }</h1>
+					<div className="support-section">
+						<PanelToTabLink href={hubUrl}>{t('panel_help_setup')}</PanelToTabLink>
+					</div>
+					<div className="support-section">
+						<h3>{ t('panel_help_questions_header') }</h3>
+						<PanelToTabLink href="https://www.ghostery.com/faqs/">{t('panel_help_faq')}</PanelToTabLink>
+						<PanelToTabLink href="https://www.ghostery.com/survey/in-app">{t('panel_help_feedback')}</PanelToTabLink>
+						<a href="#" onClick={openSupportPage}>{ t('panel_help_support') }</a>
+					</div>
+					<div className="support-section">
+						<h3>{ t('panel_help_contact_header') }</h3>
+						<a className="info" href="mailto:info@ghostery.com">info@ghostery.com</a>
 					</div>
 				</div>
 			</div>
-		);
-	}
-}
+		</div>
+	);
+};
 
 export default Help;

app/panel/components/Subscribe.jsx

@@ -12,8 +12,10 @@
  */
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import PanelToTabLink from './BuildingBlocks/PanelToTabLink';
 import { sendMessage, openSubscriptionPage } from '../utils/msg';
 
+
 /**
  * Helper function to handle clicking on the Become a Subscriber button
  */
@@ -34,9 +36,9 @@ const Subscribe = (props) => {
 			<div className="pitch-container">
 				<span className="pitch-text" dangerouslySetInnerHTML={{ __html: t('subscribe_pitch') }} />
 			</div>
-			<a href="https://www.ghostery.com/products/plus/" target="_blank" rel="noopener noreferrer">
+			<PanelToTabLink href="https://www.ghostery.com/products/plus/">
 				<span className="pitch-learn-more">{t('subscribe_pitch_learn_more')}</span>
-			</a>
+			</PanelToTabLink>
 			<div>
 				<span className="pitch-become-subscriber" onClick={_handleBecomeClick}>{t('subscribe_pitch_button_label')}</span>
 			</div>

app/panel/utils/msg.js

@@ -140,6 +140,24 @@ export function sendRewardMessage(name, message, callback = defaultCallback()) {
 	}, callback);
 }
 
+/**
+ * Handle clicks on links with a fixed destination
+ */
+export function handleClickOnNewTabLink(e) {
+	e.preventDefault();
+
+	let linkTag = e.target;
+	while (!linkTag.href) {
+		linkTag = linkTag.parentElement;
+	}
+	const { href } = linkTag;
+
+	sendMessage('openNewTab', {
+		url: href,
+		become_active: true,
+	});
+}
+
 /**
  * Send a message to open a Subscription or Subscribe tab.
  * Which one is determined in background based on the current user state.
@@ -157,7 +175,8 @@ export function openSubscriptionPage() {
  * This should be used for messages that don't require a callback.
  * @memberOf PanelUtils
  */
-export function openSupportPage() {
+export function openSupportPage(e) {
+	e.preventDefault();
 	sendMessage('account.openSupportPage');
 	window.close();
 }

app/shared-components/I18nWithLink/I18nWithLink.jsx

@@ -0,0 +1,52 @@
+/**
+ * I18nWithLink Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React, { Component, createRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { handleClickOnNewTabLink } from '../../panel/utils/msg';
+
+/**
+ * A React component for i18n strings that need to include links
+ * @return {JSX} JSX for rendering an i18n string with embedded links
+ * @memberof SharedComponents
+ */
+class I18nWithLink extends Component {
+	constructor(props) {
+		super(props);
+		this.containerRef = createRef();
+	}
+
+	componentDidMount() {
+		const { current: { children } } = this.containerRef;
+		for (let i = 0; i < children.length; i++) {
+			const ele = children[i];
+			if (ele.nodeName.toLowerCase() === 'a') {
+				ele.onclick = e => handleClickOnNewTabLink(e);
+			}
+		}
+	}
+
+	render() {
+		const { value } = this.props;
+		return (
+			<span ref={this.containerRef} dangerouslySetInnerHTML={{ __html: t(value) }} />
+		);
+	}
+}
+
+export default I18nWithLink;
+
+I18nWithLink.propTypes = {
+	value: PropTypes.string.isRequired,
+};

app/shared-components/I18nWithLink/index.js

@@ -0,0 +1,16 @@
+/**
+ * Point of entry index.js file for I18nWithLink
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import I18nWithLink from './I18nWithLink';
+
+export default I18nWithLink;