From cb812e1c7087fbe122e2e3f985db48335e83a72d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 23 Jul 2019 16:22:19 -0400 Subject: [PATCH 01/15] Modify the way links are implemented in the Help view so that they work on Opera as well as in other browsers --- app/panel/components/Help.jsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/app/panel/components/Help.jsx b/app/panel/components/Help.jsx index e1b0e3e0f..2fbb38572 100644 --- a/app/panel/components/Help.jsx +++ b/app/panel/components/Help.jsx @@ -19,12 +19,13 @@ import { sendMessage, openSupportPage } from '../utils/msg'; */ class Help extends React.Component { /** - * Handle click on 'Set Up Ghostery' menu item + * Handle clicks on links with a fixed destination */ - openHubTab = (e) => { + openTab = (e) => { e.preventDefault(); + const { href } = e.target; sendMessage('openNewTab', { - url: chrome.runtime.getURL('./app/templates/hub.html'), + url: href, become_active: true, }); window.close(); @@ -44,18 +45,20 @@ class Help extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { + const hubUrl = chrome.runtime.getURL('./app/templates/hub.html'); + return (

{ t('panel_help_panel_header') }

- { t('panel_help_setup') } + { t('panel_help_setup') }

{ t('panel_help_questions_header') }

- { t('panel_help_faq') } - { t('panel_help_feedback') } + { t('panel_help_faq') } + { t('panel_help_feedback') } { t('panel_help_support') }
From 628482708cf610b81612bf56ef9af493052af848 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 23 Jul 2019 16:55:58 -0400 Subject: [PATCH 02/15] Factor generic handler for clicks on fixed destination links out to msg utils file --- app/panel/components/Help.jsx | 21 ++++----------------- app/panel/utils/msg.js | 13 +++++++++++++ 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/panel/components/Help.jsx b/app/panel/components/Help.jsx index 2fbb38572..5ff8ce93a 100644 --- a/app/panel/components/Help.jsx +++ b/app/panel/components/Help.jsx @@ -12,25 +12,12 @@ */ import React from 'react'; -import { sendMessage, openSupportPage } from '../utils/msg'; +import { openFixedDestinationLinkInNewTab, openSupportPage } from '../utils/msg'; /** * @class Implement Help view which opens from the main drop-down menu. * @memberof PanelClasses */ class Help extends React.Component { - /** - * Handle clicks on links with a fixed destination - */ - openTab = (e) => { - e.preventDefault(); - const { href } = e.target; - sendMessage('openNewTab', { - url: href, - become_active: true, - }); - window.close(); - } - /** * Handle click on 'Support' menu item */ @@ -53,12 +40,12 @@ class Help extends React.Component {

{ t('panel_help_panel_header') }

diff --git a/app/panel/utils/msg.js b/app/panel/utils/msg.js index 3ac8904dd..1d8be3973 100644 --- a/app/panel/utils/msg.js +++ b/app/panel/utils/msg.js @@ -140,6 +140,19 @@ export function sendRewardMessage(name, message, callback = defaultCallback()) { }, callback); } +/** + * Handle clicks on links with a fixed destination + */ +export function openFixedDestinationLinkInNewTab(e) { + e.preventDefault(); + const { href } = e.target; + sendMessage('openNewTab', { + url: href, + become_active: true, + }); + window.close(); +} + /** * Send a message to open a Subscription or Subscribe tab. * Which one is determined in background based on the current user state. From 2473de4863e8969eee1101c2ec8bf0eeb8176c15 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 23 Jul 2019 17:12:49 -0400 Subject: [PATCH 03/15] Simplify Help view to render using a function component --- app/panel/components/Help.jsx | 62 ++++++++++++++--------------------- app/panel/utils/msg.js | 3 +- 2 files changed, 26 insertions(+), 39 deletions(-) diff --git a/app/panel/components/Help.jsx b/app/panel/components/Help.jsx index 5ff8ce93a..23bda0e39 100644 --- a/app/panel/components/Help.jsx +++ b/app/panel/components/Help.jsx @@ -13,50 +13,36 @@ import React from 'react'; import { openFixedDestinationLinkInNewTab, openSupportPage } from '../utils/msg'; + /** - * @class Implement Help view which opens from the main drop-down menu. - * @memberof PanelClasses + * Functional component for rendering the Help view which opens from the header drop-down menu + * @constructor */ -class Help extends React.Component { - /** - * Handle click on 'Support' menu item - */ - openSupportTab = (e) => { - e.preventDefault(); - openSupportPage(); - window.close(); - } - - /** - * Render Help view. - * @return {ReactComponent} ReactComponent instance - */ - render() { - const hubUrl = chrome.runtime.getURL('./app/templates/hub.html'); +function Help() { + const hubUrl = chrome.runtime.getURL('./app/templates/hub.html'); - return ( -
-
-
-

{ t('panel_help_panel_header') }

- - -
-

{ t('panel_help_contact_header') }

- info@ghostery.com -
+ return ( +
+
+
+

{ t('panel_help_panel_header') }

+ + +
+

{ t('panel_help_contact_header') }

+ info@ghostery.com
- ); - } +
+ ); } export default Help; diff --git a/app/panel/utils/msg.js b/app/panel/utils/msg.js index 1d8be3973..ec7644465 100644 --- a/app/panel/utils/msg.js +++ b/app/panel/utils/msg.js @@ -170,7 +170,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(); } From af1b63b06ce7109257d521b85b783f04a3e7e198 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 24 Jul 2019 11:00:37 -0400 Subject: [PATCH 04/15] Revise doc comment for Help component. Convert Subscribe view to Opera-safe linking --- app/panel/components/Help.jsx | 5 ++--- app/panel/components/Subscribe.jsx | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app/panel/components/Help.jsx b/app/panel/components/Help.jsx index 23bda0e39..5e8b74daa 100644 --- a/app/panel/components/Help.jsx +++ b/app/panel/components/Help.jsx @@ -15,10 +15,9 @@ import React from 'react'; import { openFixedDestinationLinkInNewTab, openSupportPage } from '../utils/msg'; /** - * Functional component for rendering the Help view which opens from the header drop-down menu - * @constructor + * Render Help view that user can open from the header drop-down menu */ -function Help() { +const Help = () => { const hubUrl = chrome.runtime.getURL('./app/templates/hub.html'); return ( diff --git a/app/panel/components/Subscribe.jsx b/app/panel/components/Subscribe.jsx index b1cfc6834..f28ce0a1c 100644 --- a/app/panel/components/Subscribe.jsx +++ b/app/panel/components/Subscribe.jsx @@ -12,7 +12,7 @@ */ import React from 'react'; import { NavLink } from 'react-router-dom'; -import { sendMessage, openSubscriptionPage } from '../utils/msg'; +import { sendMessage, openFixedDestinationLinkInNewTab, openSubscriptionPage } from '../utils/msg'; /** * Helper function to handle clicking on the Become a Subscriber button @@ -34,7 +34,7 @@ const Subscribe = (props) => {
- + {t('subscribe_pitch_learn_more')}
From 82f96ae7bf097ea6fd16a0ec6f94016b26a9674f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 25 Jul 2019 12:37:54 -0400 Subject: [PATCH 05/15] Factor out fixed destination panel to tab link to building block function component. Use this component in About view to fix the broken-in-Opera links there --- app/panel/components/About.jsx | 72 ++++++------------- .../BuildingBlocks/PanelToTabLink.jsx | 12 ++++ app/panel/components/Help.jsx | 2 +- 3 files changed, 34 insertions(+), 52 deletions(-) create mode 100644 app/panel/components/BuildingBlocks/PanelToTabLink.jsx diff --git a/app/panel/components/About.jsx b/app/panel/components/About.jsx index 66bc2017d..eac3c6c1d 100644 --- a/app/panel/components/About.jsx +++ b/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 ( -
-
-
-

{ t('panel_about_panel_header') }

- + return ( +
+
+
+

{ t('panel_about_panel_header') }

+
+

{ t('panel_about_version_header', [BROWSER_INFO.displayName, EXTENSION_VERSION]) }

+ + + + + + +
- ); - } -} +
+ ); +}; export default About; diff --git a/app/panel/components/BuildingBlocks/PanelToTabLink.jsx b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx new file mode 100644 index 000000000..3922649d3 --- /dev/null +++ b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { openFixedDestinationLinkInNewTab } from '../../utils/msg'; + +const PanelToTabLink = (props) => { + const { href, label } = props; + + return ( + {label} + ); +}; + +export default PanelToTabLink; diff --git a/app/panel/components/Help.jsx b/app/panel/components/Help.jsx index 5e8b74daa..fe440d05c 100644 --- a/app/panel/components/Help.jsx +++ b/app/panel/components/Help.jsx @@ -42,6 +42,6 @@ const Help = () => {
); -} +}; export default Help; From add416d921403ed5b3e4b556900016bb669505b9 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 25 Jul 2019 12:44:03 -0400 Subject: [PATCH 06/15] Convert links in Help to use PanelToTabLink --- app/panel/components/Help.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/panel/components/Help.jsx b/app/panel/components/Help.jsx index fe440d05c..f285e9779 100644 --- a/app/panel/components/Help.jsx +++ b/app/panel/components/Help.jsx @@ -12,7 +12,8 @@ */ import React from 'react'; -import { openFixedDestinationLinkInNewTab, openSupportPage } from '../utils/msg'; +import { openSupportPage } from '../utils/msg'; +import PanelToTabLink from './BuildingBlocks/PanelToTabLink'; /** * Render Help view that user can open from the header drop-down menu @@ -26,12 +27,12 @@ const Help = () => {

{ t('panel_help_panel_header') }

From 75b52e12f3602fe89ab2f48ce4981b594a521636 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 25 Jul 2019 16:38:20 -0400 Subject: [PATCH 07/15] Modify the legal consent checkbox label implementation in the create account view in the panel so that the links work on Opera --- _locales/en/messages.json | 35 +++++++++++++------------- app/panel/components/CreateAccount.jsx | 26 +++++++++++++++++-- 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c4da83e77..77e8c5481 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2235,23 +2235,6 @@ "cliqz_feature_status_off": { "message": "Off" }, - "create_account_form_legal_consent_checkbox_label": { - "message": "I accept the $LINK_TERMS_START$Terms and Conditions$LINK_END$, the $LINK_LICENSE_START$Public License Agreement$LINK_END$, and consent to data practices found in the $LINK_PRIVACY_START$Privacy Policy$LINK_END$.", - "placeholders": { - "link_end": { - "content": "" - }, - "link_license_start": { - "content": "" - }, - "link_privacy_start": { - "content": "" - }, - "link_terms_start": { - "content": "" - } - } - }, "ghostery_rewards": { "message": "ghostery rewards" }, @@ -2263,5 +2246,23 @@ }, "unknown_description": { "message": "Unknown trackers scrubbed by Anti-Tracking" + }, + "i_accept_the": { + "message": "I accept the" + }, + "terms_and_conditions": { + "message": "Terms and Conditions" + }, + "and": { + "message": "and" + }, + "public_license_agreement": { + "message": "Public License Agreement" + }, + "and_consent_to_data_practices_found_in_the": { + "message": "and consent to data practices found in the" + }, + "privacy_policy": { + "message": "Privacy Policy" } } diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index fab828e02..b97354f73 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -15,6 +15,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import ClassNames from 'classnames'; import RSVP from 'rsvp'; +import PanelToTabLink from './BuildingBlocks/PanelToTabLink'; import { validateEmail, validateConfirmEmail, validatePassword } from '../utils/utils'; /** @@ -133,6 +134,28 @@ class CreateAccount extends React.Component { }); } + _renderLegalConsentLabel() { + const termsUrl = 'https://www.ghostery.com/about-ghostery/ghostery-terms-and-conditions'; + const licenseUrl = 'https://www.mozilla.org/en-US/MPL/2.0/'; + const privacyUrl = 'https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy'; + + return ( + + {t('i_accept_the')} +   + +   + {t('and')} +   + +   + {t('and_consent_to_data_practices_found_in_the')} +   + + + ); + } + /** * Render Create Account panel. * @return {ReactComponent} ReactComponent instance @@ -214,8 +237,7 @@ class CreateAccount extends React.Component {
From d4387566520ebf321683c466e538edf24fd1c9e8 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 25 Jul 2019 16:58:44 -0400 Subject: [PATCH 08/15] Add doc comment and explanatory note to CreateAccount#_renderLegalConsentCheckboxLabel --- app/panel/components/CreateAccount.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index b97354f73..d53fde21d 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -134,11 +134,20 @@ class CreateAccount extends React.Component { }); } - _renderLegalConsentLabel() { + /** + * Render helper for the legal consent checkbox label + * @returns {ReactElement} React element representing the legal consent checkbox label + * @private + */ + _renderLegalConsentCheckboxLabel() { const termsUrl = 'https://www.ghostery.com/about-ghostery/ghostery-terms-and-conditions'; const licenseUrl = 'https://www.mozilla.org/en-US/MPL/2.0/'; const privacyUrl = 'https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy'; + // Using this ungainly monstrosity instead of our svelte frenemy dangerouslySetInnerHTML + // because the latter breaks Opera, which requires panel-to-tab links to be opened using chrome.tabs.create. + // See GH-1767 for more details. + // ~ Ilya, July 2019 return ( {t('i_accept_the')} @@ -237,7 +246,7 @@ class CreateAccount extends React.Component {
From c7405d62036a25c43961e915f95952da77bfbfa9 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 25 Jul 2019 17:09:43 -0400 Subject: [PATCH 09/15] Add a period to the end of the legal consent checkbox label. --- app/panel/components/CreateAccount.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index d53fde21d..08dca1bf3 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -161,6 +161,7 @@ class CreateAccount extends React.Component { {t('and_consent_to_data_practices_found_in_the')}   + . ); } From 93457f37391d54739e691fcd265c6c70bc6b944a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Mar=C3=ADa=20Signanini?= Date: Fri, 26 Jul 2019 13:14:45 -0400 Subject: [PATCH 10/15] GH-1767: operra target blank crash fix. --- app/panel/components/CreateAccount.jsx | 6 ++- .../I18nWithLink/I18nWithLink.jsx | 42 +++++++++++++++++++ app/shared-components/I18nWithLink/index.js | 16 +++++++ 3 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 app/shared-components/I18nWithLink/I18nWithLink.jsx create mode 100644 app/shared-components/I18nWithLink/index.js diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index fab828e02..e2349b54c 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -15,7 +15,9 @@ import React from 'react'; 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 +217,9 @@ class CreateAccount extends React.Component {
diff --git a/app/shared-components/I18nWithLink/I18nWithLink.jsx b/app/shared-components/I18nWithLink/I18nWithLink.jsx new file mode 100644 index 000000000..17c76339e --- /dev/null +++ b/app/shared-components/I18nWithLink/I18nWithLink.jsx @@ -0,0 +1,42 @@ +import React, { Component, createRef } from 'react'; +import PropTypes from 'prop-types'; + +import { sendMessage } from '../../panel/utils/msg'; + +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') { + return; + } + ele.onclick = (e) => { + e.preventDefault(); + const { href } = e.target; + sendMessage('openNewTab', { + url: href, + become_active: true, + }); + }; + } + } + + render() { + const { value } = this.props; + return ( + + ); + } +} + +export default I18nWithLink; + +I18nWithLink.propTypes = { + value: PropTypes.string.isRequired, +}; diff --git a/app/shared-components/I18nWithLink/index.js b/app/shared-components/I18nWithLink/index.js new file mode 100644 index 000000000..c8dfa5de1 --- /dev/null +++ b/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; From 6b1061daba13fbbeddeff9a057a349d9e339256d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 29 Jul 2019 12:46:01 -0400 Subject: [PATCH 11/15] Reuse openFixedDestinationLinkInNewTab in the new I18nWithLink component to reduce duplication --- app/panel/utils/msg.js | 1 - app/shared-components/I18nWithLink/I18nWithLink.jsx | 11 ++--------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/app/panel/utils/msg.js b/app/panel/utils/msg.js index ec7644465..76e636339 100644 --- a/app/panel/utils/msg.js +++ b/app/panel/utils/msg.js @@ -150,7 +150,6 @@ export function openFixedDestinationLinkInNewTab(e) { url: href, become_active: true, }); - window.close(); } /** diff --git a/app/shared-components/I18nWithLink/I18nWithLink.jsx b/app/shared-components/I18nWithLink/I18nWithLink.jsx index 17c76339e..4a9039e19 100644 --- a/app/shared-components/I18nWithLink/I18nWithLink.jsx +++ b/app/shared-components/I18nWithLink/I18nWithLink.jsx @@ -1,7 +1,7 @@ import React, { Component, createRef } from 'react'; import PropTypes from 'prop-types'; -import { sendMessage } from '../../panel/utils/msg'; +import { openFixedDestinationLinkInNewTab } from '../../panel/utils/msg'; class I18nWithLink extends Component { constructor(props) { @@ -16,14 +16,7 @@ class I18nWithLink extends Component { if (ele.nodeName.toLowerCase() !== 'a') { return; } - ele.onclick = (e) => { - e.preventDefault(); - const { href } = e.target; - sendMessage('openNewTab', { - url: href, - become_active: true, - }); - }; + ele.onclick = e => openFixedDestinationLinkInNewTab(e); } } From f6225b83412b96b16304347f784f7d5441a50fb9 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 29 Jul 2019 12:47:12 -0400 Subject: [PATCH 12/15] Add doc header to I18nWithLink --- app/shared-components/I18nWithLink/I18nWithLink.jsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app/shared-components/I18nWithLink/I18nWithLink.jsx b/app/shared-components/I18nWithLink/I18nWithLink.jsx index 4a9039e19..66643174d 100644 --- a/app/shared-components/I18nWithLink/I18nWithLink.jsx +++ b/app/shared-components/I18nWithLink/I18nWithLink.jsx @@ -1,3 +1,15 @@ +/** + * 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'; From ccddcc564556c5c925ea27aec84db892b243a7fc Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 29 Jul 2019 12:54:38 -0400 Subject: [PATCH 13/15] Add documentation to PanelToTabLink and I18nWithLink --- .../BuildingBlocks/PanelToTabLink.jsx | 17 +++++++++++++++++ .../I18nWithLink/I18nWithLink.jsx | 6 ++++++ 2 files changed, 23 insertions(+) diff --git a/app/panel/components/BuildingBlocks/PanelToTabLink.jsx b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx index 3922649d3..6dab9d0dd 100644 --- a/app/panel/components/BuildingBlocks/PanelToTabLink.jsx +++ b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx @@ -1,6 +1,23 @@ +/** + * Pause Button 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 { openFixedDestinationLinkInNewTab } from '../../utils/msg'; +/** + * Implements panel -> new tab links. Used in Help, About, and other panel views + * @memberof PanelBuildingBlocks + */ const PanelToTabLink = (props) => { const { href, label } = props; diff --git a/app/shared-components/I18nWithLink/I18nWithLink.jsx b/app/shared-components/I18nWithLink/I18nWithLink.jsx index 66643174d..3a3b8c2cc 100644 --- a/app/shared-components/I18nWithLink/I18nWithLink.jsx +++ b/app/shared-components/I18nWithLink/I18nWithLink.jsx @@ -10,11 +10,17 @@ * 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 { openFixedDestinationLinkInNewTab } 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); From 79b0224a784b609fe4070f95b46b9549725bc567 Mon Sep 17 00:00:00 2001 From: Christopher Tino Date: Mon, 29 Jul 2019 15:32:43 -0400 Subject: [PATCH 14/15] update doc haeder --- app/panel/components/BuildingBlocks/PanelToTabLink.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/BuildingBlocks/PanelToTabLink.jsx b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx index 6dab9d0dd..99fe0b00a 100644 --- a/app/panel/components/BuildingBlocks/PanelToTabLink.jsx +++ b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx @@ -1,5 +1,5 @@ /** - * Pause Button Component + * PanelToTab Link Component * * Ghostery Browser Extension * https://www.ghostery.com/ From 97fd48c3b0b02a2ed87c97c18e0b28cbb052976b Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 29 Jul 2019 19:37:38 -0400 Subject: [PATCH 15/15] Refactor PanelToTabLink to work with arbitrary child elements. Renamed openFixedDestinationLinkInNewTab. Fix bug in I18nWithLink#componentDidMount. --- app/panel/components/About.jsx | 14 +++++++------- .../components/BuildingBlocks/PanelToTabLink.jsx | 10 +++++----- app/panel/components/Help.jsx | 6 +++--- app/panel/components/Subscribe.jsx | 8 +++++--- app/panel/utils/msg.js | 10 ++++++++-- .../I18nWithLink/I18nWithLink.jsx | 7 +++---- 6 files changed, 31 insertions(+), 24 deletions(-) diff --git a/app/panel/components/About.jsx b/app/panel/components/About.jsx index eac3c6c1d..4688c5e04 100644 --- a/app/panel/components/About.jsx +++ b/app/panel/components/About.jsx @@ -28,13 +28,13 @@ const About = () => {

{ t('panel_about_panel_header') }

{ t('panel_about_version_header', [BROWSER_INFO.displayName, EXTENSION_VERSION]) }

- - - - - - - + {t('panel_about_release_notes')} + {t('panel_about_license')} + {t('panel_about_privacy_statement')} + {t('panel_about_terms_and_conditions')} + {t('panel_about_imprint')} + {t('panel_about_licenses')} + Ghostery.com
diff --git a/app/panel/components/BuildingBlocks/PanelToTabLink.jsx b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx index 99fe0b00a..32748e1b1 100644 --- a/app/panel/components/BuildingBlocks/PanelToTabLink.jsx +++ b/app/panel/components/BuildingBlocks/PanelToTabLink.jsx @@ -1,5 +1,5 @@ /** - * PanelToTab Link Component + * PanelToTabLink Component * * Ghostery Browser Extension * https://www.ghostery.com/ @@ -12,17 +12,17 @@ */ import React from 'react'; -import { openFixedDestinationLinkInNewTab } from '../../utils/msg'; +import { handleClickOnNewTabLink } from '../../utils/msg'; /** - * Implements panel -> new tab links. Used in Help, About, and other panel views + * Implement panel -> new tab links. Used in Help, About, and other panel views * @memberof PanelBuildingBlocks */ const PanelToTabLink = (props) => { - const { href, label } = props; + const { href, children } = props; return ( - {label} + {children} ); }; diff --git a/app/panel/components/Help.jsx b/app/panel/components/Help.jsx index f285e9779..057a47736 100644 --- a/app/panel/components/Help.jsx +++ b/app/panel/components/Help.jsx @@ -27,12 +27,12 @@ const Help = () => {

{ t('panel_help_panel_header') }

- + {t('panel_help_setup')}

{ t('panel_help_questions_header') }

- - + {t('panel_help_faq')} + {t('panel_help_feedback')} { t('panel_help_support') }
diff --git a/app/panel/components/Subscribe.jsx b/app/panel/components/Subscribe.jsx index f28ce0a1c..62797e8e2 100644 --- a/app/panel/components/Subscribe.jsx +++ b/app/panel/components/Subscribe.jsx @@ -12,7 +12,9 @@ */ import React from 'react'; import { NavLink } from 'react-router-dom'; -import { sendMessage, openFixedDestinationLinkInNewTab, openSubscriptionPage } from '../utils/msg'; +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) => {
- + {t('subscribe_pitch_learn_more')} - +
{t('subscribe_pitch_button_label')}
diff --git a/app/panel/utils/msg.js b/app/panel/utils/msg.js index 76e636339..c417f1194 100644 --- a/app/panel/utils/msg.js +++ b/app/panel/utils/msg.js @@ -143,9 +143,15 @@ export function sendRewardMessage(name, message, callback = defaultCallback()) { /** * Handle clicks on links with a fixed destination */ -export function openFixedDestinationLinkInNewTab(e) { +export function handleClickOnNewTabLink(e) { e.preventDefault(); - const { href } = e.target; + + let linkTag = e.target; + while (!linkTag.href) { + linkTag = linkTag.parentElement; + } + const { href } = linkTag; + sendMessage('openNewTab', { url: href, become_active: true, diff --git a/app/shared-components/I18nWithLink/I18nWithLink.jsx b/app/shared-components/I18nWithLink/I18nWithLink.jsx index 3a3b8c2cc..16f60e996 100644 --- a/app/shared-components/I18nWithLink/I18nWithLink.jsx +++ b/app/shared-components/I18nWithLink/I18nWithLink.jsx @@ -14,7 +14,7 @@ import React, { Component, createRef } from 'react'; import PropTypes from 'prop-types'; -import { openFixedDestinationLinkInNewTab } from '../../panel/utils/msg'; +import { handleClickOnNewTabLink } from '../../panel/utils/msg'; /** * A React component for i18n strings that need to include links @@ -31,10 +31,9 @@ class I18nWithLink extends Component { const { current: { children } } = this.containerRef; for (let i = 0; i < children.length; i++) { const ele = children[i]; - if (ele.nodeName.toLowerCase() !== 'a') { - return; + if (ele.nodeName.toLowerCase() === 'a') { + ele.onclick = e => handleClickOnNewTabLink(e); } - ele.onclick = e => openFixedDestinationLinkInNewTab(e); } }