From b64fdaec5a48eeff72705a62d79b54bd8d7b2a62 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 20 Mar 2019 17:47:20 -0400 Subject: [PATCH 001/131] Remove old Plus banner/logo --- app/panel/components/Header.jsx | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 52af7f89a..954239922 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -17,7 +17,7 @@ import ReactSVG from 'react-svg'; import ClassNames from 'classnames'; import Tooltip from './Tooltip'; import HeaderMenu from './HeaderMenu'; -import { sendMessage, sendMessageInPromise } from '../utils/msg'; +import { sendMessageInPromise } from '../utils/msg'; import { log } from '../../../src/utils/common'; /** * @class Implements header component which is common to all panel views @@ -145,12 +145,6 @@ class Header extends React.Component { return this.props.is_expert ? '/detail/blocking' : '/'; } - clickBadge = () => { - sendMessage('ping', 'plus_panel_from_badge'); - const subscriber = this.props.user && this.props.user.subscriptionsPlus; - this.props.history.push(subscriber ? '/subscription/info' : `/subscribe/${!!this.props.user}`); - } - /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Header Component of the panel @@ -170,10 +164,6 @@ class Header extends React.Component { const { loggedIn, user } = this.props; const subscriber = this.props.user && this.props.user.subscriptionsPlus; const rightLink = this.generateLink(); - const badgeClasses = ClassNames('columns', 'shrink', { - 'non-subscriber-badge': !subscriber, - 'subscriber-badge': subscriber - }); return (
@@ -203,14 +193,6 @@ class Header extends React.Component {
{rightLink}
-
- - - - - - -
{ this.kebab = node; }}> From a131dfb6e966549e1dbfc52a940428fa4aa39436 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 8 Apr 2019 13:20:02 -0400 Subject: [PATCH 002/131] Add green upgrade banner to Summary component --- .../panel/upgrade-to-plus-cta-green-banner.svg | 12 ++++++++++++ app/panel/components/Summary.jsx | 3 +++ 2 files changed, 15 insertions(+) create mode 100644 app/images/panel/upgrade-to-plus-cta-green-banner.svg diff --git a/app/images/panel/upgrade-to-plus-cta-green-banner.svg b/app/images/panel/upgrade-to-plus-cta-green-banner.svg new file mode 100644 index 000000000..9f7b14bb3 --- /dev/null +++ b/app/images/panel/upgrade-to-plus-cta-green-banner.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 443a03cc5..d4bf93b46 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -12,6 +12,7 @@ */ import React from 'react'; +import ReactSVG from 'react-svg'; import ClassNames from 'classnames'; import Tooltip from './Tooltip'; import NavButton from './BuildingBlocks/NavButton'; @@ -463,6 +464,8 @@ class Summary extends React.Component {
+ + ); } From 8e409d6e7f12067e6ef01c6ae702b651809c0736 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 08:39:08 -0400 Subject: [PATCH 003/131] Add upgrade banner class --- ...o-plus-cta-green-banner.svg => green-upgrade-banner.svg} | 0 app/panel/components/Summary.jsx | 6 +++++- 2 files changed, 5 insertions(+), 1 deletion(-) rename app/images/panel/{upgrade-to-plus-cta-green-banner.svg => green-upgrade-banner.svg} (100%) diff --git a/app/images/panel/upgrade-to-plus-cta-green-banner.svg b/app/images/panel/green-upgrade-banner.svg similarity index 100% rename from app/images/panel/upgrade-to-plus-cta-green-banner.svg rename to app/images/panel/green-upgrade-banner.svg diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index d4bf93b46..be382fe19 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -334,6 +334,10 @@ class Summary extends React.Component { hide: is_expert }); + const greenUpgradeBanner = ClassNames('upgrade-banner', { + hide: is_expert, + }); + let trackersBlockedCount; if (paused_blocking || sitePolicy === 2) { trackersBlockedCount = 0; @@ -465,7 +469,7 @@ class Summary extends React.Component { - + ); } From a8f46029e53950ec548f4fe44589e9080139c953 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 09:15:09 -0400 Subject: [PATCH 004/131] Fix classNames -> className typo --- app/panel/components/Summary.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index be382fe19..bbd79e44d 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -469,7 +469,7 @@ class Summary extends React.Component { - + ); } From cd6148ab0fc749b0c9d761d2940b1e37503dcecf Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 16:23:16 -0400 Subject: [PATCH 005/131] Implement CSS for green upgrade banner --- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_summary.scss | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index bbd79e44d..b09145767 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -334,7 +334,7 @@ class Summary extends React.Component { hide: is_expert }); - const greenUpgradeBanner = ClassNames('upgrade-banner', { + const greenUpgradeBanner = ClassNames('green-upgrade-banner', { hide: is_expert, }); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index d1c71daa1..9eea68fff 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -70,7 +70,7 @@ width: 120px; } &.ab-pause .donut-graph-container { - margin-top: 0px; + margin-top: 0; margin-bottom: 30px; } &.expert .donut-graph-container { @@ -80,7 +80,7 @@ margin-bottom: 20px; } &.expert.ab-pause .donut-graph-container { - margin-top: 0px; + margin-top: 0; margin-bottom: 16px; } @@ -202,4 +202,9 @@ border: 1px lightgray solid; border-radius: 5px 0 0 5px; } + .green-upgrade-banner { + position: absolute; + left: 0; + top: 10px; + } } From 208fcd4f0b4a818dc37e39aa471cb2f59ba6337d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 16:44:25 -0400 Subject: [PATCH 006/131] Display smaller upgrade banner in summary view when on detailed tab --- app/images/panel/green-upgrade-banner-small.svg | 12 ++++++++++++ app/panel/components/Summary.jsx | 11 +++++------ 2 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 app/images/panel/green-upgrade-banner-small.svg diff --git a/app/images/panel/green-upgrade-banner-small.svg b/app/images/panel/green-upgrade-banner-small.svg new file mode 100644 index 000000000..d28dec6cd --- /dev/null +++ b/app/images/panel/green-upgrade-banner-small.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b09145767..b38447585 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -334,10 +334,6 @@ class Summary extends React.Component { hide: is_expert }); - const greenUpgradeBanner = ClassNames('green-upgrade-banner', { - hide: is_expert, - }); - let trackersBlockedCount; if (paused_blocking || sitePolicy === 2) { trackersBlockedCount = 0; @@ -468,8 +464,11 @@ class Summary extends React.Component { - - + { + is_expert && + || + + } ); } From dd1de6f1c2fba8a91133203ab02319764a94a981 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 16:50:41 -0400 Subject: [PATCH 007/131] Adjust position of smaller upgrade banner upwards a little to avoid overlapping the donut --- app/scss/partials/_summary.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 9eea68fff..eb257afb2 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -207,4 +207,7 @@ left: 0; top: 10px; } + &.expert .green-upgrade-banner { + top: 7px; + } } From ec592268b43123fcf5788750f8baa0c74677b936 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 17:19:06 -0400 Subject: [PATCH 008/131] Add gold subscriber icon to display when a subscribed user is signed in --- app/images/panel/gold-plus-icon.svg | 15 +++++++++++++++ app/panel/components/Summary.jsx | 14 +++++++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 app/images/panel/gold-plus-icon.svg diff --git a/app/images/panel/gold-plus-icon.svg b/app/images/panel/gold-plus-icon.svg new file mode 100644 index 000000000..ca28de312 --- /dev/null +++ b/app/images/panel/gold-plus-icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b38447585..756c295c6 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -287,8 +287,12 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the Summary View of the panel */ render() { + console.error(this.state); + console.error(this.props); + const { abPause } = this.state; const { + account, is_expert, is_expanded, enable_anti_tracking, @@ -301,6 +305,7 @@ class Summary extends React.Component { sitePolicy, trackerCounts, } = this.props; + const plusSubscriber = account && account.user && account.user.subscriptionsPlus; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; @@ -464,10 +469,13 @@ class Summary extends React.Component { + { - is_expert && - || - + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) } ); From b3a380b763a3ba2e263c7ea202c4a4b2aafd4702 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 14 Apr 2019 00:48:40 -0400 Subject: [PATCH 009/131] Finish implementation of plus upgrade banner and gold icon display logic for the case when the panel is not both in detailed view and expanded --- app/panel/components/Summary.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 756c295c6..87da5a48c 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -306,6 +306,7 @@ class Summary extends React.Component { trackerCounts, } = this.props; const plusSubscriber = account && account.user && account.user.subscriptionsPlus; + const is_expanded_and_expert = is_expert && is_expanded; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; @@ -471,10 +472,12 @@ class Summary extends React.Component { { - (plusSubscriber && ) || - ( - (is_expert && ) || - + !is_expanded_and_expert && ( + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) ) } From 4e0af1ef9a60e734f66a964fd17a3caa542711e7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 14 Apr 2019 00:57:22 -0400 Subject: [PATCH 010/131] Remove debug code and redundant variable from Summary#render --- app/panel/components/Summary.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 87da5a48c..bc2acc687 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -287,9 +287,6 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the Summary View of the panel */ render() { - console.error(this.state); - console.error(this.props); - const { abPause } = this.state; const { account, @@ -306,7 +303,6 @@ class Summary extends React.Component { trackerCounts, } = this.props; const plusSubscriber = account && account.user && account.user.subscriptionsPlus; - const is_expanded_and_expert = is_expert && is_expanded; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; @@ -472,7 +468,7 @@ class Summary extends React.Component { { - !is_expanded_and_expert && ( + !showCondensed && ( (plusSubscriber && ) || ( (is_expert && ) || From 901e06e797bab12747c1547a928dcd527a3ab666 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 11:52:53 -0400 Subject: [PATCH 011/131] Refactor Summary#render for clarity --- app/panel/components/Summary.jsx | 207 +++++++++++++++++-------------- 1 file changed, 114 insertions(+), 93 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index bc2acc687..80eb79832 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -349,33 +349,120 @@ class Summary extends React.Component { invisible: hidePageHost }); + const pauseButtonComponent = ( + ); + + const pauseButtonContainerDiv = ( +
+ pauseButtonComponent +
+ ); + + const pageStatsDiv = ( +
+
+ {t('trackers_blocked')} + + {trackersBlockedCount} + +
+
+ {t('page_load')} + + {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} + +
+
+ ); + + const ghosteryFeaturesContainerDiv = ( +
+ + + {!abPause && pauseButtonComponent} +
+ ); + + const cliqzFeaturesContainerDiv = ( +
+ +
+ ); + + const statsNavButtonComponent = (); + + if (showCondensed) { + return ( +
+ {abPause && pauseButtonContainerDiv} + + {!this.state.disableBlocking && ( +
+ + {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + + +
+ )} + + {!this.state.disableBlocking && pageStatsDiv} + + {this.state.disableBlocking && is_expert && ( +
+ )} + + {ghosteryFeaturesContainerDiv} + + {cliqzFeaturesContainerDiv} + + {statsNavButtonComponent} +
+ ); + } + + // !showCondensed return (
- {abPause && ( -
- -
- )} + {abPause && pauseButtonContainerDiv} - {this.state.disableBlocking && !showCondensed && ( - - )} + {this.state.disableBlocking && ()} - {abPause && !this.state.disableBlocking && is_expert && !showCondensed && ( + {abPause && !this.state.disableBlocking && is_expert && (
{pageHost}
)} - {!this.state.disableBlocking && !showCondensed && ( + {!this.state.disableBlocking && (
)} - {!this.state.disableBlocking && showCondensed && ( -
- - {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} - - -
- )} - {!this.state.disableBlocking && (!abPause || !is_expert) && !showCondensed && ( + {!this.state.disableBlocking && (!abPause || !is_expert) && (
{pageHost}
)} - {!this.state.disableBlocking && ( -
-
- {t('trackers_blocked')} - - {trackersBlockedCount} - -
-
- {t('page_load')} - - {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} - -
-
- )} + {!this.state.disableBlocking && pageStatsDiv} - {this.state.disableBlocking && is_expert && showCondensed && ( -
- )} + {ghosteryFeaturesContainerDiv} -
- - - {!abPause && ( - - )} -
- -
- -
+ {cliqzFeaturesContainerDiv} - + {statsNavButtonComponent} { - !showCondensed && ( - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) + (plusSubscriber && ) || + ( + (is_expert && ) || + ) }
From 5c861d99136f2f31f3472b4dda62881ec82b4aad Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 12:08:09 -0400 Subject: [PATCH 012/131] Add green upgrade banner and gold plus icon SVGs for expanded view --- app/images/panel/gold-plus-icon-expanded-view.svg | 15 +++++++++++++++ .../panel/green-upgrade-banner-expanded-view.svg | 12 ++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 app/images/panel/gold-plus-icon-expanded-view.svg create mode 100644 app/images/panel/green-upgrade-banner-expanded-view.svg diff --git a/app/images/panel/gold-plus-icon-expanded-view.svg b/app/images/panel/gold-plus-icon-expanded-view.svg new file mode 100644 index 000000000..2f4ea1ad0 --- /dev/null +++ b/app/images/panel/gold-plus-icon-expanded-view.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/images/panel/green-upgrade-banner-expanded-view.svg b/app/images/panel/green-upgrade-banner-expanded-view.svg new file mode 100644 index 000000000..511276171 --- /dev/null +++ b/app/images/panel/green-upgrade-banner-expanded-view.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From d4dedb321e1c4d531c23e1871944914c1ecbe3ee Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 17:42:54 -0400 Subject: [PATCH 013/131] Add expanded view upgrade banner div stub to Header#render. Refactor and clean up Header#render a bit. --- app/panel/components/Header.jsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 9f0c3452a..fa6da8016 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -150,19 +150,24 @@ class Header extends React.Component { * @return {JSX} JSX for rendering the Header Component of the panel */ render() { - const { pathname } = this.props.location; + const { + is_expert, + location, + loggedIn, + user, + } = this.props; + const { pathname } = location; const showTabs = pathname === '/' || pathname.startsWith('/detail'); const headerArrowClasses = ClassNames('back-arrow', { 'show-back-arrow': (pathname !== '/' && !pathname.startsWith('/detail')), }); const tabSimpleClassNames = ClassNames('header-tab', { - active: !this.props.is_expert, + active: !is_expert, }); const tabDetailedClassNames = ClassNames('header-tab', { - active: this.props.is_expert, + active: is_expert, }); - const { loggedIn, user } = this.props; - const subscriber = this.props.user && this.props.user.subscriptionsPlus; + const subscriber = user && user.subscriptionsPlus; const rightLink = this.generateLink(); return ( @@ -193,6 +198,9 @@ class Header extends React.Component {
{rightLink}
+
+ +
{ this.kebab = node; }}> @@ -208,7 +216,7 @@ class Header extends React.Component { email={user && user.email} language={this.props.language} tab_id={this.props.tab_id} - location={this.props.location} + location={location} history={this.props.history} actions={this.props.actions} toggleDropdown={this.toggleDropdown} From 499051f3ffa6d1b7ba55f0522321bb43b71b69b5 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 22:08:52 -0400 Subject: [PATCH 014/131] Display gold icon in expanded view if user is a logged-in subscriber --- app/panel/components/Header.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index fa6da8016..b6a9144fc 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -199,7 +199,10 @@ class Header extends React.Component { {rightLink}
- + { + (subscriber && ) || + + }
{ this.kebab = node; }}> From 6273e6e09453cfac9e7cd2cd2cd6c20f5404b0ec Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 22:15:23 -0400 Subject: [PATCH 015/131] Stub click on badge in expanded view --- app/panel/components/Header.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index b6a9144fc..e808f8627 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -145,6 +145,10 @@ class Header extends React.Component { return this.props.is_expert ? '/detail/blocking' : '/'; } + clickBadge = () => { + console.error('IVZ you clicked the badge!!'); + } + /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Header Component of the panel @@ -198,7 +202,7 @@ class Header extends React.Component {
{rightLink}
-
+
{ (subscriber && ) || From 8c8b7fd0235b5400259883bf2e55b11c6abf9c03 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 22:57:12 -0400 Subject: [PATCH 016/131] Replicate dev behavior of badge clicking in Header in expanded view --- app/panel/components/Header.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index e808f8627..a561c4dab 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -17,7 +17,7 @@ import ReactSVG from 'react-svg'; import ClassNames from 'classnames'; import Tooltip from './Tooltip'; import HeaderMenu from './HeaderMenu'; -import { sendMessageInPromise } from '../utils/msg'; +import { sendMessage, sendMessageInPromise } from '../utils/msg'; import { log } from '../../../src/utils/common'; /** * @class Implements header component which is common to all panel views @@ -146,7 +146,11 @@ class Header extends React.Component { } clickBadge = () => { - console.error('IVZ you clicked the badge!!'); + // TODO check whether this is the message we want to be sending now + sendMessage('ping', 'plus_panel_from_badge'); + const { user } = this.props; + const subscriber = user && user.subscriptionsPlus; + this.props.history.push(subscriber ? 'subscriptions/info' : `/subscribe/${!!user}`); } /** From 8e7abf16b2473b7564771a950162efbbdeb283d3 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 10:17:11 -0400 Subject: [PATCH 017/131] Rename upgrade banner / gold plus badge click handler for clarity --- app/panel/components/Header.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index a561c4dab..274019ec2 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -145,7 +145,7 @@ class Header extends React.Component { return this.props.is_expert ? '/detail/blocking' : '/'; } - clickBadge = () => { + clickUpgradeBannerOrGoldPlusIcon = () => { // TODO check whether this is the message we want to be sending now sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; @@ -206,7 +206,7 @@ class Header extends React.Component {
{rightLink}
-
+
{ (subscriber && ) || From dbdea1e8eb1047b2284d10126d10e7f837dae0c7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 10:23:14 -0400 Subject: [PATCH 018/131] Add badge CSS classes to extended view badges. These need updating --- app/panel/components/Header.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 274019ec2..9ba42a419 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -177,6 +177,10 @@ class Header extends React.Component { }); const subscriber = user && user.subscriptionsPlus; const rightLink = this.generateLink(); + const badgeClasses = ClassNames('columns', 'shrink', { + 'non-subscriber-badge': !subscriber, + 'subscriber-badge': subscriber + }); return (
@@ -206,7 +210,7 @@ class Header extends React.Component {
{rightLink}
-
+
{ (subscriber && ) || From 9aedc219062c0d310c9c18d5f715042cf7e31b08 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 10:29:31 -0400 Subject: [PATCH 019/131] Correct subscriber redirect path for gold plus icon click handler in Header --- app/panel/components/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 9ba42a419..cbe36ccdd 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -150,7 +150,7 @@ class Header extends React.Component { sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; const subscriber = user && user.subscriptionsPlus; - this.props.history.push(subscriber ? 'subscriptions/info' : `/subscribe/${!!user}`); + this.props.history.push(subscriber ? '/subscription/info' : `/subscribe/${!!user}`); } /** From 43b5e81847a272518216b3973fbc0fe721bfc906 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 11:29:59 -0400 Subject: [PATCH 020/131] Update badge CSS --- app/scss/partials/_header.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 08600cb03..d452c5a74 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -72,20 +72,12 @@ } .base-badge { @extend %pointer; - width: 38px; - height: 36px; - display: block; - margin-left: 10px; } .subscriber-badge { @extend .base-badge; - path {fill: $white;} - path.text {fill: $ghosty-blue;} } .non-subscriber-badge { @extend .base-badge; - path {fill: #d3af36;} - path.text {fill: #ffffff;} } .header-kebab { @extend %pointer; From 4cc227b2101d8f2d2c907caf64629b9657264efe Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 11:40:44 -0400 Subject: [PATCH 021/131] Tweak CSS for expanded view upgrade banner and gold plus icon to spec --- app/scss/partials/_header.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index d452c5a74..266a566db 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -72,12 +72,15 @@ } .base-badge { @extend %pointer; + display: block; } .subscriber-badge { @extend .base-badge; + margin-top: 4px; } .non-subscriber-badge { @extend .base-badge; + margin-left: 6px; } .header-kebab { @extend %pointer; From 8c4a316b5af0b7a7b91a84ae06fc230b63aab06c Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 12:08:17 -0400 Subject: [PATCH 022/131] Remove reference to non-extant state.header from header container mapStateToProps. pass state.panel.is_expanded to Header --- app/panel/containers/HeaderContainer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/panel/containers/HeaderContainer.js b/app/panel/containers/HeaderContainer.js index a957e6ccb..5d375a4ea 100644 --- a/app/panel/containers/HeaderContainer.js +++ b/app/panel/containers/HeaderContainer.js @@ -26,8 +26,9 @@ import { logout } from '../../Account/AccountActions'; * @todo We are not using ownProps, so we better not specify it explicitly, * in this case it won't be passed by React (see https://github.com/reactjs/react-redux/blob/master/docs/api.md). */ -const mapStateToProps = state => Object.assign({}, state.header, state.account, { +const mapStateToProps = state => Object.assign({}, state.account, { // get properties from panel redux store + is_expanded: state.panel.is_expanded, is_expert: state.panel.is_expert, language: state.panel.language, tab_id: state.panel.tab_id, From 740f61b54f9736b173a5b04618d731eaf5292c1f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 14:22:29 -0400 Subject: [PATCH 023/131] Implement show/hide logic for header upgrade banner and gold plus icon --- app/panel/components/Header.jsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index cbe36ccdd..a458c47c0 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -159,6 +159,7 @@ class Header extends React.Component { */ render() { const { + is_expanded, is_expert, location, loggedIn, @@ -182,6 +183,15 @@ class Header extends React.Component { 'subscriber-badge': subscriber }); + const upgradeBannerOrGoldPlusIconDiv = ( +
+ { + (subscriber && ) || + + } +
+ ); + return (
{ showTabs && ( @@ -210,12 +220,7 @@ class Header extends React.Component {
{rightLink}
-
- { - (subscriber && ) || - - } -
+ { (is_expert && is_expanded) && upgradeBannerOrGoldPlusIconDiv }
{ this.kebab = node; }}> From 5ebbd1e375c58e5cba9bb31f22409b031e6d7ba1 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 14:26:36 -0400 Subject: [PATCH 024/131] Factor kebab div out to const for clarity in Header#render --- app/panel/components/Header.jsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index a458c47c0..668e1a608 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -183,7 +183,7 @@ class Header extends React.Component { 'subscriber-badge': subscriber }); - const upgradeBannerOrGoldPlusIconDiv = ( + const upgradeBannerOrGoldPlusIcon = (
{ (subscriber && ) || @@ -192,6 +192,16 @@ class Header extends React.Component {
); + const kebab = ( +
{ this.kebab = node; }}> + + + + + +
+ ); + return (
{ showTabs && ( @@ -220,14 +230,8 @@ class Header extends React.Component {
{rightLink}
- { (is_expert && is_expanded) && upgradeBannerOrGoldPlusIconDiv } -
{ this.kebab = node; }}> - - - - - -
+ {(is_expert && is_expanded) && upgradeBannerOrGoldPlusIcon } + {kebab}
{ this.state.dropdownOpen && Date: Tue, 16 Apr 2019 16:00:32 -0400 Subject: [PATCH 025/131] Tweak gold plus icon expanded view SVG to make sure Plus is more centered, with Vinnie's approval. Refactor Header#render for clarity --- .../panel/gold-plus-icon-expanded-view.svg | 29 +++--- app/panel/components/Header.jsx | 98 +++++++++++-------- 2 files changed, 72 insertions(+), 55 deletions(-) diff --git a/app/images/panel/gold-plus-icon-expanded-view.svg b/app/images/panel/gold-plus-icon-expanded-view.svg index 2f4ea1ad0..06d4f74ea 100644 --- a/app/images/panel/gold-plus-icon-expanded-view.svg +++ b/app/images/panel/gold-plus-icon-expanded-view.svg @@ -1,15 +1,16 @@ - - - - - - - - - - - - - + + + + + + + + + + + + - + + + \ No newline at end of file diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 668e1a608..2f85d935a 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -95,7 +95,7 @@ class Header extends React.Component { }); } - generateLink = () => { + generateAccountLogo = () => { const { loggedIn, user } = this.props; let text = ''; @@ -177,13 +177,45 @@ class Header extends React.Component { active: is_expert, }); const subscriber = user && user.subscriptionsPlus; - const rightLink = this.generateLink(); + const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !subscriber, 'subscriber-badge': subscriber }); - const upgradeBannerOrGoldPlusIcon = ( + const simpleTab = ( +
+ + {t('panel_header_simple_view')} + +
+ ); + + const detailedTab = ( +
+ + {t('panel_header_detailed_view')} + +
+ ); + + const tabs = ( +
+ {simpleTab} + {detailedTab} +
+ ); + + const backArrowAndGhostieLogo = ( + + + + + + + ); + + const plusUpgradeBannerOrSubscriberBadgeLogolink = (
{ (subscriber && ) || @@ -192,7 +224,7 @@ class Header extends React.Component {
); - const kebab = ( + const headerMenuKebab = (
{ this.kebab = node; }}> @@ -202,51 +234,35 @@ class Header extends React.Component {
); + const headerMenu = ( + + ); + return (
- { showTabs && ( -
-
- - {t('panel_header_simple_view')} - -
-
- - {t('panel_header_detailed_view')} - -
-
- )} + { showTabs && tabs }
- - - - - - + { backArrowAndGhostieLogo }
- {rightLink} + {accountLogolink}
- {(is_expert && is_expanded) && upgradeBannerOrGoldPlusIcon } - {kebab} + {(is_expert && is_expanded) && plusUpgradeBannerOrSubscriberBadgeLogolink } + {headerMenuKebab}
- { this.state.dropdownOpen && - - } + { this.state.dropdownOpen && headerMenu }
From 6035749df28ad478294fa8e3f8a91f1b41a9ab96 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 17:38:26 -0400 Subject: [PATCH 026/131] Finish clarity refactor of Summary#render --- app/panel/components/Summary.jsx | 115 +++++++++++++++---------------- 1 file changed, 54 insertions(+), 61 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 80eb79832..ec177536b 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -360,13 +360,39 @@ class Summary extends React.Component { isCondensed={showCondensed} />); - const pauseButtonContainerDiv = ( + const pauseButton = (
pauseButtonComponent
); - const pageStatsDiv = ( + const totalTrackersFound = ( +
+ + {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + + +
+ ); + + const donut = ( +
+ +
+ ); + + const totalTrackersBlockedAndPageLoadTime = (
{t('trackers_blocked')} @@ -383,7 +409,8 @@ class Summary extends React.Component {
); - const ghosteryFeaturesContainerDiv = ( + // Trust, Restrict, Pause + const ghosteryFeatures = (
); - const cliqzFeaturesContainerDiv = ( + // Enhanced Anti-Tracking, Enhanced Ad Blocking, Smart Blocking + const cliqzFeatures = (
); - const statsNavButtonComponent = (); + const statsNavButton = (); + + const plusUpgradeBannerOrSubscriberIcon = ( + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) + ); if (showCondensed) { return (
- {abPause && pauseButtonContainerDiv} - - {!this.state.disableBlocking && ( -
- - {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} - - -
- )} - - {!this.state.disableBlocking && pageStatsDiv} - + {abPause && pauseButton} + {!this.state.disableBlocking && totalTrackersFound} + {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} {this.state.disableBlocking && is_expert && (
)} - - {ghosteryFeaturesContainerDiv} - - {cliqzFeaturesContainerDiv} - - {statsNavButtonComponent} + {ghosteryFeatures} + {cliqzFeatures} + {statsNavButton}
); } @@ -452,51 +472,24 @@ class Summary extends React.Component { // !showCondensed return (
- {abPause && pauseButtonContainerDiv} - + {abPause && pauseButton} {this.state.disableBlocking && ()} - {abPause && !this.state.disableBlocking && is_expert && (
{pageHost}
)} - - {!this.state.disableBlocking && ( -
- -
- )} - + {!this.state.disableBlocking && donut} {!this.state.disableBlocking && (!abPause || !is_expert) && (
{pageHost}
)} - - {!this.state.disableBlocking && pageStatsDiv} - - {ghosteryFeaturesContainerDiv} - - {cliqzFeaturesContainerDiv} - - {statsNavButtonComponent} - - { - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) - } + {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} + {ghosteryFeatures} + {cliqzFeatures} + {statsNavButton} + {plusUpgradeBannerOrSubscriberIcon}
); } From a0170deb6fed23cfba18cea74e0757de6e27a486 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 18:16:28 -0400 Subject: [PATCH 027/131] Nudge summary content down in expert view so green upgrade banner can fit. Delete two unused scss partials --- app/scss/partials/_summary.scss | 7 +- app/scss/partials/_summary_expert.scss | 103 -------------- .../partials/_summary_expert_collapsed.scss | 127 ------------------ 3 files changed, 6 insertions(+), 231 deletions(-) delete mode 100644 app/scss/partials/_summary_expert.scss delete mode 100644 app/scss/partials/_summary_expert_collapsed.scss diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index eb257afb2..d568050c9 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -15,7 +15,12 @@ position: absolute; height: 479px; width: 100%; - &.expert { width: 235px; } + + &.expert { + width: 235px; + margin-top: 15px; + } + &.expert.condensed { width: 66px; background-color: #f9f6f6; diff --git a/app/scss/partials/_summary_expert.scss b/app/scss/partials/_summary_expert.scss deleted file mode 100644 index 7c7a20f81..000000000 --- a/app/scss/partials/_summary_expert.scss +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Summary Expert Panel Sass - * - * 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 - */ - -#content-summary.expert { - width: 232px; - .tracker-category-wheel { - path { - cursor: pointer; - } - margin-top: 20px; - #categories-donut { - height: 94px; - width: 94px; - .donut-text { - font-size: 11px; - .categories-donut-count { - font-size: 24px; - } - } - } - } - #tracker-host { - margin-top: 9px; - } - .info { - display: table; - width: 100%; - font-size: 12px; - margin: 9px auto 9px; - > .columns { - flex: none; - max-width: none; - width: 100%; - text-align: center; - } - .alert-info { - display: table-header-group; - } - .alert-info, - .block-info { - @extend %pointer; - } - .block-info, - .alert-info { - padding-top: 10px; - } - .load-info { - padding-top: 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .tracker-count-alerts { - width: 100%; - text-align: center; - } - } - #controls { - padding-bottom: 8px; - .blocking-controls { - margin: 7px; - } - #cliqz-controls { - width: 173px; - margin-top: 0; - } - #ghostery-controls { - padding-top: 22px; - margin-top: 0; - .button { - .title, .select-title, .undo { - text-align: left; - margin-left: 40px; - } - } - .columns { - width: 100%; - max-width: none; - flex: none; - } - button { - margin: 0 0 14px 0; - } - } - } - .toggleExpert { - background-image: url('../images/panel/icon-simple-mode.svg'); - height: 14px; - left: 11px; - top: 11px; - width: 22px; - } -} diff --git a/app/scss/partials/_summary_expert_collapsed.scss b/app/scss/partials/_summary_expert_collapsed.scss deleted file mode 100644 index 9858e97c5..000000000 --- a/app/scss/partials/_summary_expert_collapsed.scss +++ /dev/null @@ -1,127 +0,0 @@ -/** - * Summary Expert Expanded Panel Sass - * - * 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 - */ - -#content-summary.expanded.expert { - width: 70px; - background-color: #F9F6F6; - .columns { - padding-left: 0; - padding-right: 0; - } - .toggleExpert { - position: static; - padding: 30px 0; - margin: 0; - width: 100%; - background-position: center; - } - .tracker-count-total-expanded-expert { - text-align: center; - color: #4a4a4a; - width: 100%; - font-size: 24px; - font-weight: 700; - display: inline-block; - } - #tracker-host { - display: none; - } - .info { - font-size: 14px; - .text { - display: none; - } - } - #controls { - padding-bottom: 0; - .blocking-controls { - border: 0; - border-top: 1px solid #ccc; - border-collapse: collapse; - } - .blocking-controls, .cliqz-controls { - width: 100%; - height: 40px; - margin: 0; - padding: 0; - border-radius: 0px; - text-align: center; - svg { - float: none !important; - margin: 0px; - } - > div { - position: static; - margin: 0 auto; - } - } - #cliqz-controls { - height: auto; - width: 100%; - border: none; - > .row { - max-width: 100%; - margin: 0; - } - .columns { - width: 100%; - max-width: none; - flex: none; - } - button { - height: 30px; - width: 30px; - background-size: auto 20px; - margin: 0 0 15px 0; - } - } - #ghostery-controls { - padding-top: 0; - > .row { - max-width: 100%; - margin: 0; - > .columns { - padding: 0; - } - } - button { - border: 0; - border-radius: 0; - border-top: 1px solid #ccc; - margin: 0; - position: relative; - height: 40px; - &.blocking-controls {width: 100%;} - &.active:hover .undo, .title, .select-title { - display: none; - } - .icon { - margin: 0 auto; - left: 0; - right: 0; - } - &.controls-pause .icon { - margin: 0px 20px; - left: 0; - &.resume { - margin: 6px 14px; - } - } - &.select-button.right-button { - border-left: 1px solid #ccc; - } - } - .select-button {width: 100%;} - } - } -} From 8534297fbabc5e9b1b5f9901ccd10fad7b5439b0 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Apr 2019 09:41:40 -0400 Subject: [PATCH 028/131] Adjust positioning of simple/detailed view upgrade banners and gold icons to spec --- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_summary.scss | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index ec177536b..5863f3f2a 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -446,7 +446,7 @@ class Summary extends React.Component { const statsNavButton = (); const plusUpgradeBannerOrSubscriberIcon = ( - (plusSubscriber && ) || + (plusSubscriber && ) || ( (is_expert && ) || diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index d568050c9..5d4b20dde 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -213,6 +213,14 @@ top: 10px; } &.expert .green-upgrade-banner { - top: 7px; + top: -4px; + } + .gold-plus-icon { + position: absolute; + left: 10px; + top: 11px; + } + &.expert .gold-plus-icon { + top: -4px; } } From 2a43fa9ecc9c24e923707c198c5cc8725abfc6ff Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Apr 2019 10:01:12 -0400 Subject: [PATCH 029/131] Add click handling for simple and detailed view upgrade banner and gold badge. Adjust CSS for them. --- app/panel/components/Summary.jsx | 25 +++++++++++++++++++----- app/panel/containers/SummaryContainer.js | 1 + app/scss/partials/_summary.scss | 2 ++ 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 5863f3f2a..43e4f4555 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -282,6 +282,17 @@ class Summary extends React.Component { this.props.actions.toggleCliqzFeature(feature, status); } + /** + * Handles clicking on the green upgrade banner or gold subscriber badge + */ + clickUpgradeBannerOrGoldPlusIcon = () => { + // TODO check whether this is the message we want to be sending now + sendMessage('ping', 'plus_panel_from_badge'); + const { user } = this.props; + const plusSubscriber = user && user.subscriptionsPlus; + this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); + } + /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Summary View of the panel @@ -446,11 +457,15 @@ class Summary extends React.Component { const statsNavButton = (); const plusUpgradeBannerOrSubscriberIcon = ( - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) +
+ { + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) + } +
); if (showCondensed) { diff --git a/app/panel/containers/SummaryContainer.js b/app/panel/containers/SummaryContainer.js index 09aadbe26..826400617 100644 --- a/app/panel/containers/SummaryContainer.js +++ b/app/panel/containers/SummaryContainer.js @@ -29,6 +29,7 @@ const mapStateToProps = state => Object.assign({}, state.summary, state.panel, { is_expanded: state.panel.is_expanded, is_expert: state.panel.is_expert, tab_id: state.panel.tab_id, + user: state.account.user }); /** * Bind Summary view component action creators using Redux's bindActionCreators diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 5d4b20dde..132fd1179 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -208,6 +208,7 @@ border-radius: 5px 0 0 5px; } .green-upgrade-banner { + @extend %pointer; position: absolute; left: 0; top: 10px; @@ -216,6 +217,7 @@ top: -4px; } .gold-plus-icon { + @extend %pointer; position: absolute; left: 10px; top: 11px; From dfb95962b2f4a521a455f153333bf6cf717de5de Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Apr 2019 11:56:30 -0400 Subject: [PATCH 030/131] Switch between upgrade banner and gold icon in Summary view on sign in / out instead of on panel reopen --- app/panel/components/Summary.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 43e4f4555..90d1beb13 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -300,7 +300,6 @@ class Summary extends React.Component { render() { const { abPause } = this.state; const { - account, is_expert, is_expanded, enable_anti_tracking, @@ -312,8 +311,9 @@ class Summary extends React.Component { paused_blocking, sitePolicy, trackerCounts, + user } = this.props; - const plusSubscriber = account && account.user && account.user.subscriptionsPlus; + const plusSubscriber = user && user.subscriptionsPlus; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; From 10631abde4964810b36a43cb5af834ac55003d59 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 18 Apr 2019 12:02:10 -0400 Subject: [PATCH 031/131] Decompose totalTrackersBlockedAndPageLoadTime in Summary#render --- app/panel/components/Summary.jsx | 43 ++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 90d1beb13..82b28b2e0 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -403,20 +403,21 @@ class Summary extends React.Component {
); - const totalTrackersBlockedAndPageLoadTime = ( -
-
- {t('trackers_blocked')} - - {trackersBlockedCount} - -
-
- {t('page_load')} - - {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} - -
+ const totalTrackersBlocked = ( +
+ {t('trackers_blocked')} + + {trackersBlockedCount} + +
+ ); + + const pageLoadTime = ( +
+ {t('page_load')} + + {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} +
); @@ -473,7 +474,12 @@ class Summary extends React.Component {
{abPause && pauseButton} {!this.state.disableBlocking && totalTrackersFound} - {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} + {!this.state.disableBlocking && +
+ {totalTrackersBlocked} + {pageLoadTime} +
+ } {this.state.disableBlocking && is_expert && (
)} @@ -500,7 +506,12 @@ class Summary extends React.Component { {pageHost}
)} - {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} + {!this.state.disableBlocking && +
+ {totalTrackersBlocked} + {pageLoadTime} +
+ } {ghosteryFeatures} {cliqzFeatures} {statsNavButton} From be447e73eb8d17e1dd010378585a4cd4dc68f207 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 18 Apr 2019 12:17:19 -0400 Subject: [PATCH 032/131] Remove duplication from return of Summary#render --- app/panel/components/Summary.jsx | 42 ++++++++++++-------------------- 1 file changed, 15 insertions(+), 27 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 82b28b2e0..07b2fe81f 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -469,53 +469,41 @@ class Summary extends React.Component {
); - if (showCondensed) { - return ( -
- {abPause && pauseButton} - {!this.state.disableBlocking && totalTrackersFound} - {!this.state.disableBlocking && -
- {totalTrackersBlocked} - {pageLoadTime} -
- } - {this.state.disableBlocking && is_expert && ( -
- )} - {ghosteryFeatures} - {cliqzFeatures} - {statsNavButton} -
- ); - } - - // !showCondensed return (
{abPause && pauseButton} - {this.state.disableBlocking && ()} - {abPause && !this.state.disableBlocking && is_expert && ( + + {!showCondensed && this.state.disableBlocking && ()} + {!showCondensed && abPause && !this.state.disableBlocking && is_expert && (
{pageHost}
)} - {!this.state.disableBlocking && donut} - {!this.state.disableBlocking && (!abPause || !is_expert) && ( + {!showCondensed && !this.state.disableBlocking && donut} + {!showCondensed && !this.state.disableBlocking && (!abPause || !is_expert) && (
{pageHost}
)} + + {showCondensed && !this.state.disableBlocking && totalTrackersFound} + {!this.state.disableBlocking &&
{totalTrackersBlocked} {pageLoadTime}
} + + {showCondensed && this.state.disableBlocking && is_expert && ( +
+ )} + {ghosteryFeatures} {cliqzFeatures} {statsNavButton} - {plusUpgradeBannerOrSubscriberIcon} + + {!showCondensed && plusUpgradeBannerOrSubscriberIcon}
); } From c38b4b531ad63805703227c98e011aecf623debf Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 18 Apr 2019 15:55:57 -0400 Subject: [PATCH 033/131] Fix Summary view display in Midnight theme on Detailed tab. Realign green upgrade banner and gold icon accordingly. Add debug and log truebools back into manifest --- app/scss/partials/_summary.scss | 8 +------- manifest.json | 4 +++- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 132fd1179..54dacac63 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -18,7 +18,7 @@ &.expert { width: 235px; - margin-top: 15px; + padding-top: 15px; } &.expert.condensed { @@ -213,16 +213,10 @@ left: 0; top: 10px; } - &.expert .green-upgrade-banner { - top: -4px; - } .gold-plus-icon { @extend %pointer; position: absolute; left: 10px; top: 11px; } - &.expert .gold-plus-icon { - top: -4px; - } } diff --git a/manifest.json b/manifest.json index 4ec457b83..c629b7a6c 100644 --- a/manifest.json +++ b/manifest.json @@ -12,6 +12,8 @@ "version": "8.3.2", "version_name": "8.3.2", "default_locale": "en", + "debug": true, + "log": true, "description": "__MSG_short_description__", "icons": { "16": "app/images/icon16.png", @@ -100,4 +102,4 @@ "app/images/*", "dist/css/rewards_styles.css" ] -} \ No newline at end of file +} From ce7158b4d9e9adee0a10ffac07c7b82596fe98d4 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 11:52:17 -0400 Subject: [PATCH 034/131] Display subscriber badge in header in gold in Midnight theme --- app/panel/components/Header.jsx | 2 +- app/scss/partials/_header.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 2f85d935a..45a31ef2d 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -180,7 +180,7 @@ class Header extends React.Component { const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !subscriber, - 'subscriber-badge': subscriber + 'gold-subscriber-badge': subscriber }); const simpleTab = ( diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 266a566db..2c29a8281 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -74,7 +74,7 @@ @extend %pointer; display: block; } - .subscriber-badge { + .gold-subscriber-badge { @extend .base-badge; margin-top: 4px; } From 80a1736740290bc0cf03e36cb0af90d624ca5e93 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 15:25:50 -0400 Subject: [PATCH 035/131] Add upgrade banner text to locale strings file. Remove SVG upgarde text. Replace it with a text span. --- _locales/en/messages.json | 3 +++ app/images/panel/green-upgrade-banner-no-text.svg | 13 +++++++++++++ app/panel/components/Summary.jsx | 5 ++++- app/scss/partials/_summary.scss | 12 +++++++++--- 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 app/images/panel/green-upgrade-banner-no-text.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 8170e57da..c23068f07 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2130,6 +2130,9 @@ "subscription_submit_issue": { "message": "Submit Issue" }, + "subscription_upgrade_to": { + "message": "Upgrade to" + }, "panel_stats_menu_cumulative": { "message": "Cumulative" }, diff --git a/app/images/panel/green-upgrade-banner-no-text.svg b/app/images/panel/green-upgrade-banner-no-text.svg new file mode 100644 index 000000000..090b60ffd --- /dev/null +++ b/app/images/panel/green-upgrade-banner-no-text.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 07b2fe81f..def4f48a5 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -463,9 +463,12 @@ class Summary extends React.Component { (plusSubscriber && ) || ( (is_expert && ) || - + ) } + {!plusSubscriber && !is_expert && + {t('subscription_upgrade_to')} + }
); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 54dacac63..ae6624b99 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -207,15 +207,21 @@ border: 1px lightgray solid; border-radius: 5px 0 0 5px; } - .green-upgrade-banner { + .base-badge { @extend %pointer; position: absolute; + } + .green-upgrade-banner { + @extend .base-badge; left: 0; top: 10px; } + .green-upgrade-banner text { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 13px; + } .gold-plus-icon { - @extend %pointer; - position: absolute; + @extend .base-badge; left: 10px; top: 11px; } From 26c6ab030e7afb096de7bc3c975ac9c4e33a098f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 16:56:18 -0400 Subject: [PATCH 036/131] Finalize CSS for upgrade banner text. Delete duplicate upgrade banner SVG --- .../panel/green-upgrade-banner-no-text.svg | 13 ----------- app/images/panel/green-upgrade-banner.svg | 23 ++++++++++--------- app/panel/components/Summary.jsx | 18 +++++++++------ app/scss/partials/_summary.scss | 10 +++++--- 4 files changed, 30 insertions(+), 34 deletions(-) delete mode 100644 app/images/panel/green-upgrade-banner-no-text.svg diff --git a/app/images/panel/green-upgrade-banner-no-text.svg b/app/images/panel/green-upgrade-banner-no-text.svg deleted file mode 100644 index 090b60ffd..000000000 --- a/app/images/panel/green-upgrade-banner-no-text.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/app/images/panel/green-upgrade-banner.svg b/app/images/panel/green-upgrade-banner.svg index 9f7b14bb3..090b60ffd 100644 --- a/app/images/panel/green-upgrade-banner.svg +++ b/app/images/panel/green-upgrade-banner.svg @@ -1,12 +1,13 @@ - - - - - - - - - - - + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index def4f48a5..73fe836c5 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -459,15 +459,19 @@ class Summary extends React.Component { const plusUpgradeBannerOrSubscriberIcon = (
- { - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) + {plusSubscriber && + + } + + {!plusSubscriber && is_expert && + + } + + {!plusSubscriber && !is_expert && + } {!plusSubscriber && !is_expert && - {t('subscription_upgrade_to')} + {t('subscription_upgrade_to')} }
); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index ae6624b99..71e6895d5 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -213,12 +213,16 @@ } .green-upgrade-banner { @extend .base-badge; - left: 0; top: 10px; } - .green-upgrade-banner text { + .green-upgrade-banner-text { + @extend .base-badge; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 13px; + font-size: 12px; + font-weight: bold; + top: 13px; + left: 14px; + color: white; } .gold-plus-icon { @extend .base-badge; From de6aa6b5d3508bde51c63b700cd89145ae5a3d77 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 17:21:33 -0400 Subject: [PATCH 037/131] Convert 'upgrade to' text in the green banner from SVG to text for smaller detail view banner --- .../panel/green-upgrade-banner-small.svg | 25 ++++++++++--------- app/panel/components/Summary.jsx | 13 ++++++---- app/scss/partials/_summary.scss | 16 +++++++++--- 3 files changed, 34 insertions(+), 20 deletions(-) diff --git a/app/images/panel/green-upgrade-banner-small.svg b/app/images/panel/green-upgrade-banner-small.svg index d28dec6cd..210cc4245 100644 --- a/app/images/panel/green-upgrade-banner-small.svg +++ b/app/images/panel/green-upgrade-banner-small.svg @@ -1,12 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 73fe836c5..3045092ba 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -464,14 +464,17 @@ class Summary extends React.Component { } {!plusSubscriber && is_expert && - +
+ + {t('subscription_upgrade_to')} +
} {!plusSubscriber && !is_expert && - - } - {!plusSubscriber && !is_expert && - {t('subscription_upgrade_to')} +
+ + {t('subscription_upgrade_to')} +
}
); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 71e6895d5..0d2aa3f9c 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -215,14 +215,24 @@ @extend .base-badge; top: 10px; } - .green-upgrade-banner-text { + .base-green-upgrade-banner-text { @extend .base-badge; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 12px; font-weight: bold; + color: white; + + } + .green-upgrade-banner-text { + @extend .base-green-upgrade-banner-text; + font-size: 12px; top: 13px; left: 14px; - color: white; + } + .green-upgrade-banner-text-small { + @extend .base-green-upgrade-banner-text; + font-size: 10px; + top: 13px; + left: 6px; } .gold-plus-icon { @extend .base-badge; From c7a43eef8975ddc0a542360a1bf95e87fd0a1085 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 17:31:20 -0400 Subject: [PATCH 038/131] Make sure upgrade banner or subscriber badge display in the hamburger dropdown views --- app/panel/components/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 45a31ef2d..61dc8aba8 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -259,7 +259,7 @@ class Header extends React.Component {
{accountLogolink}
- {(is_expert && is_expanded) && plusUpgradeBannerOrSubscriberBadgeLogolink } + {((is_expert && is_expanded) || !showTabs) && plusUpgradeBannerOrSubscriberBadgeLogolink } {headerMenuKebab}
{ this.state.dropdownOpen && headerMenu } From 18733883c5eb86e565b2ae4b0813fbc7cd376a34 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 21 Apr 2019 22:24:41 -0400 Subject: [PATCH 039/131] Stub out Requests Modified readout. Begin to specify CSS, click handler. --- app/panel/components/Summary.jsx | 17 +++++++++++++++++ app/scss/partials/_summary.scss | 1 + 2 files changed, 18 insertions(+) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 3045092ba..096ad85b0 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -222,6 +222,10 @@ class Summary extends React.Component { } } + clickRequestsModified() { + console.error('Summary#clickRequestsModified invoked'); + } + /** * Handles clicking on Ghostery Features: Trust Site, Restrict Site, Custom Settings @@ -338,6 +342,9 @@ class Summary extends React.Component { const blockedTrackersClassNames = ClassNames('blocked-trackers', { clickable: is_expert, }); + const modifiedRequestsClassNames = ClassNames('modified-requests', { + clickable: is_expert, + }); const pageLoadClassNames = ClassNames('page-load', { fast: this.state.trackerLatencyTotal < 5, slow: this.state.trackerLatencyTotal > 10, @@ -412,6 +419,15 @@ class Summary extends React.Component {
); + const totalRequestsModified = ( +
+ Bananas Modified + + {86} + +
+ ); + const pageLoadTime = (
{t('page_load')} @@ -501,6 +517,7 @@ class Summary extends React.Component { {!this.state.disableBlocking &&
{totalTrackersBlocked} + {totalRequestsModified} {pageLoadTime}
} diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 0d2aa3f9c..1ece3961e 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -114,6 +114,7 @@ .page-load.slow .value { color: #e74055; } .blocked-trackers, + .modified-requests, .page-load { display: inline-block; padding: 0 20px; From 977b6103e2f93b2b2c3be6cd9be5daffe306bba8 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 21 Apr 2019 22:33:58 -0400 Subject: [PATCH 040/131] Swap locale string in for stub for Requests Modified --- _locales/en/messages.json | 3 +++ app/panel/components/Summary.jsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c23068f07..34c67f3ee 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1092,6 +1092,9 @@ "page_load": { "message": "Page Load:" }, + "requests_modified": { + "message": "Requests Modified:" + }, "trackers_blocked": { "message": "Trackers Blocked:" }, diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 096ad85b0..fadd48ce6 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -421,7 +421,7 @@ class Summary extends React.Component { const totalRequestsModified = (
- Bananas Modified + {t('requests_modified')} {86} From 4517abc7a1d857c41e6db915b9fc7ce08c712e97 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 21 Apr 2019 22:40:46 -0400 Subject: [PATCH 041/131] Display the Requests Modified total in the spec shade of blue --- app/scss/partials/_summary.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 1ece3961e..e9f067b1d 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -109,6 +109,7 @@ font-weight: 600; margin-bottom: 40px; .blocked-trackers .value { color: #e74055; } + .modified-requests .value { color: #00aef0; } .page-load .value { color: #ffc063; } .page-load.fast .value { color: #9ecc42; } .page-load.slow .value { color: #e74055; } From ad9da951a04c55d4a37337bd4571ac129467b0ca Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 22 Apr 2019 11:20:35 -0400 Subject: [PATCH 042/131] Add tooltip for Requests Modified readout --- _locales/en/messages.json | 3 +++ app/panel/components/Summary.jsx | 6 ++---- app/scss/partials/_tooltip.scss | 4 ++++ 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 34c67f3ee..095075ad8 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1095,6 +1095,9 @@ "requests_modified": { "message": "Requests Modified:" }, + "requests_modified_tooltip": { + "message": "Total number of tracking requests & elements modified by Anti-Tracking, Ad Blocking, and Smart Blocking" + }, "trackers_blocked": { "message": "Trackers Blocked:" }, diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index fadd48ce6..ff52dd86e 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -342,9 +342,6 @@ class Summary extends React.Component { const blockedTrackersClassNames = ClassNames('blocked-trackers', { clickable: is_expert, }); - const modifiedRequestsClassNames = ClassNames('modified-requests', { - clickable: is_expert, - }); const pageLoadClassNames = ClassNames('page-load', { fast: this.state.trackerLatencyTotal < 5, slow: this.state.trackerLatencyTotal > 10, @@ -420,11 +417,12 @@ class Summary extends React.Component { ); const totalRequestsModified = ( -
+
{t('requests_modified')} {86} +
); diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index 2a203bb9d..fe09d498c 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -139,6 +139,10 @@ margin-top: -12px; margin-left: 28px; } +.expert .modified-requests.g-tooltip .tooltip-content.right { + margin-top: -51px; + margin-left: -26px; +} .sub-component.pause-button .g-tooltip .tooltip-content.top { left: 75px; } From 86abd2066d73ee5fe5970d99a7929d866ba6646a Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 22 Apr 2019 11:29:05 -0400 Subject: [PATCH 043/131] Adjust expert mode Summary view CSS so everything fits nicely with the new upgrade banner and Requests Modified readout --- app/scss/partials/_summary.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index e9f067b1d..cddbd15f5 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -18,7 +18,7 @@ &.expert { width: 235px; - padding-top: 15px; + padding-top: 10px; } &.expert.condensed { @@ -62,7 +62,7 @@ } &.expert .page-host { margin-top: 20px; - margin-bottom: 20px; + margin-bottom: 10px; } &.expert.ab-pause .page-host { margin-top: 8px; @@ -83,6 +83,7 @@ width: 94px; margin-top: 21px; margin-bottom: 20px; + padding-top: 5px; } &.expert.ab-pause .donut-graph-container { margin-top: 0; From 7d5c5cd4948fb539107f95a0bcfdb0c39eca886d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 22 Apr 2019 11:38:05 -0400 Subject: [PATCH 044/131] Tweak Summary condensed view CSS so everything fits nicely with the new Requests Modified readout --- app/scss/partials/_summary.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index cddbd15f5..ff1a51a3c 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -23,6 +23,7 @@ &.expert.condensed { width: 66px; + padding-top: 0; background-color: #f9f6f6; } @@ -96,7 +97,7 @@ color: #4a4a4a; font-size: 24px; font-weight: 600; - margin: 18px 0; + margin: 10px 0; } &.expert.condensed.ab-pause .total-tracker-count { margin: 13px 0; @@ -139,7 +140,7 @@ div { text-align: center; padding: 0; - margin: 21px 0; + margin: 5px 0; } .text { display: none; } } From 3ce8e6b08db6bb4edcf828e04a4e8349143ddc2e Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 22 Apr 2019 11:51:20 -0400 Subject: [PATCH 045/131] Position Requests Modified tooltip correctly in Condensed version of Summary view --- app/scss/partials/_tooltip.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index fe09d498c..36c412ed6 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -143,6 +143,10 @@ margin-top: -51px; margin-left: -26px; } +.expert.condensed .modified-requests.g-tooltip .tooltip-content.right { + margin-top: -44px; + margin-left: 33px; +} .sub-component.pause-button .g-tooltip .tooltip-content.top { left: 75px; } From 44c8b5c7a61eeb24f440e5a8269bf67b483b1b5f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 22 Apr 2019 17:36:35 -0400 Subject: [PATCH 046/131] Remove unusued click handler from Summary. Make Requests Modified readout value dynamic --- app/panel/components/Summary.jsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index ff52dd86e..56cd5a0ff 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -222,11 +222,6 @@ class Summary extends React.Component { } } - clickRequestsModified() { - console.error('Summary#clickRequestsModified invoked'); - } - - /** * Handles clicking on Ghostery Features: Trust Site, Restrict Site, Custom Settings * @param {String} button The button that was clicked: trust, restrict, custom @@ -332,6 +327,7 @@ class Summary extends React.Component { sbAllowed = 0; } const sbAdjust = enable_smart_block && (sbBlocked - sbAllowed) || 0; + const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked + sbBlocked + sbAllowed; const summaryClassNames = ClassNames('', { expert: is_expert, @@ -417,10 +413,10 @@ class Summary extends React.Component { ); const totalRequestsModified = ( -
+
{t('requests_modified')} - {86} + {requestsModifiedCount}
From ae24d6df57a4ac7d4df4b16e39198247eec2587e Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 29 Apr 2019 13:22:47 -0400 Subject: [PATCH 047/131] Remove smart blocking from Requests Modified total. Update tooltip copy to reflect this. --- _locales/en/messages.json | 2 +- app/panel/components/Summary.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 095075ad8..03124f325 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1096,7 +1096,7 @@ "message": "Requests Modified:" }, "requests_modified_tooltip": { - "message": "Total number of tracking requests & elements modified by Anti-Tracking, Ad Blocking, and Smart Blocking" + "message": "Total number of tracking requests & elements modified by Anti-Tracking and Ad Blocking" }, "trackers_blocked": { "message": "Trackers Blocked:" diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 515194a1f..4bc640056 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -327,7 +327,7 @@ class Summary extends React.Component { sbAllowed = 0; } const sbAdjust = enable_smart_block && (sbBlocked - sbAllowed) || 0; - const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked + sbBlocked + sbAllowed; + const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; const summaryClassNames = ClassNames('', { expert: is_expert, From 8ae8d7c29df7a7e621cd63cb9a01e3c41a17929a Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 2 May 2019 14:39:48 -0400 Subject: [PATCH 048/131] Remove obsolete abPause code in Summary and related files --- _locales/en/messages.json | 12 ----- .../BuildingBlocks/GhosteryFeatures.jsx | 29 +--------- .../components/BuildingBlocks/PauseButton.jsx | 22 +++----- app/panel/components/Summary.jsx | 54 ++++++------------- 4 files changed, 25 insertions(+), 92 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 03124f325..65dd927f8 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -458,9 +458,6 @@ "summary_description_not_scanned_2": { "message": "Navigate to another page and I promise I'll deliver the goods." }, - "summary_custom_settings": { - "message": "Custom Settings" - }, "summary_trust_site": { "message": "Trust Site" }, @@ -482,9 +479,6 @@ "summary_pause_ghostery_tooltip": { "message": "Pause Ghostery extension." }, - "summary_pause_ghostery_ab_pause": { - "message": "Pause" - }, "pause_30_min": { "message": "for 30 min" }, @@ -509,9 +503,6 @@ "summary_resume_ghostery_tooltip": { "message": "Ghostery extension paused. Click to resume." }, - "summary_resume_ghostery_ab_pause": { - "message": "Resume" - }, "summary_show_menu": { "message": "show menu" }, @@ -1290,9 +1281,6 @@ "tooltip_restrict_on": { "message": "Trackers blocked and Anti-Tracking enabled on site. Click to Undo." }, - "tooltip_custom_settings": { - "message": "Use my selected tracker settings." - }, "tooltip_pause": { "message": "Pause Ghostery" }, diff --git a/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx b/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx index cb0b9a851..f049e58c8 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx @@ -86,14 +86,12 @@ class GhosteryFeatures extends React.Component { } this.props.clickButton('restrict'); } - /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Ghostery Features portion of the Summary View */ render() { const { - isAbPause, isInactive, isStacked, isCondensed, @@ -105,27 +103,14 @@ class GhosteryFeatures extends React.Component { stacked: isStacked, }); const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', { - 'ab-pause': isAbPause, - 'button-left': isAbPause && !isStacked, - 'button-top': (isAbPause || isCondensed) && isStacked, + 'button-top': isCondensed && isStacked, condensed: isCondensed, active: sitePolicy === 2, clickable: !isInactive, 'not-clickable': isInactive, }); - const customClassNames = ClassNames('button', 'button-custom', 'g-tooltip', { - 'ab-pause': isAbPause, - 'button-center': isAbPause && true, - condensed: isCondensed, - active: !sitePolicy, - clickable: !isInactive, - 'not-clickable': isInactive, - }); const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', { - 'ab-pause': isAbPause, - 'button-right': isAbPause && !isStacked, - 'button-bottom': isAbPause && isStacked, - 'button-center': !isAbPause && isCondensed && isStacked, + 'button-center': isCondensed && isStacked, condensed: isCondensed, active: sitePolicy === 1, clickable: !isInactive, @@ -143,16 +128,6 @@ class GhosteryFeatures extends React.Component {
- {isAbPause && ( -
- - - {t('summary_custom_settings')} - - - -
- )}
diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx index f95c0bc1a..ab7455009 100644 --- a/app/panel/components/BuildingBlocks/PauseButton.jsx +++ b/app/panel/components/BuildingBlocks/PauseButton.jsx @@ -109,17 +109,10 @@ class PauseButton extends React.Component { const { isPaused, isCondensed, - isAbPause, } = this.props; let buttonEl; if (isCondensed) { buttonEl = ; - } else if (isAbPause) { - buttonEl = ( - - {isPaused ? t('summary_resume_ghostery_ab_pause') : t('summary_pause_ghostery_ab_pause')} - - ); } else { buttonEl = ( @@ -139,8 +132,7 @@ class PauseButton extends React.Component { * @return {JSX} JSX for rendering the Pause Button on the Summary View */ render() { - const pauseButtonClassNames = ClassNames('button', 'button-left', 'button-pause', { - 'g-tooltip': !this.props.isAbPause, + const pauseButtonClassNames = ClassNames('button', 'button-left', 'button-pause', 'g-tooltip', { active: this.props.isPaused, smaller: !this.props.isCentered, smallest: this.props.isCentered && this.props.isCondensed, @@ -158,7 +150,7 @@ class PauseButton extends React.Component { centered: this.props.isCentered, }); const dropdownContainerStyles = { - left: `${(this.props.isCentered && this.props.isAbPause) ? this.pauseLeft : 0}px`, + left: '0', }; return ( @@ -173,12 +165,10 @@ class PauseButton extends React.Component { }} > {this.renderPauseButtonText()} - {!this.props.isAbPause && ( - - )} +
diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 679afb3e5..ee49220fc 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -28,7 +28,6 @@ import { } from './BuildingBlocks'; const { IS_CLIQZ } = globals; -const AB_PAUSE_BUTTON = false; /** * @class Implements the Summary View, which is displayed as the entire panel @@ -45,7 +44,6 @@ class Summary extends React.Component { this.state = { trackerLatencyTotal: 0, disableBlocking: false, - abPause: AB_PAUSE_BUTTON, }; // Event Bindings @@ -297,7 +295,6 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the Summary View of the panel */ render() { - const { abPause } = this.state; const { is_expert, is_expanded, @@ -332,7 +329,6 @@ class Summary extends React.Component { const summaryClassNames = ClassNames('', { expert: is_expert, condensed: showCondensed, - 'ab-pause': abPause, }); const blockedTrackersClassNames = ClassNames('blocked-trackers', { @@ -360,23 +356,6 @@ class Summary extends React.Component { invisible: hidePageHost }); - const pauseButtonComponent = ( - ); - - const pauseButton = ( -
- pauseButtonComponent -
- ); - const totalTrackersFound = (
@@ -403,6 +382,12 @@ class Summary extends React.Component {
); + const pageHostReadout = ( +
+ {pageHost} +
+ ); + const totalTrackersBlocked = (
{t('trackers_blocked')} @@ -432,18 +417,24 @@ class Summary extends React.Component { ); // Trust, Restrict, Pause - const ghosteryFeatures = ( + const trustRestrictAndPause = (
- {!abPause && pauseButtonComponent} +
); @@ -489,20 +480,9 @@ class Summary extends React.Component { return (
- {abPause && pauseButton} - {!showCondensed && this.state.disableBlocking && ()} - {!showCondensed && abPause && !this.state.disableBlocking && is_expert && ( -
- {pageHost} -
- )} {!showCondensed && !this.state.disableBlocking && donut} - {!showCondensed && !this.state.disableBlocking && (!abPause || !is_expert) && ( -
- {pageHost} -
- )} + {!showCondensed && !this.state.disableBlocking && !is_expert && pageHostReadout} {showCondensed && !this.state.disableBlocking && totalTrackersFound} @@ -518,7 +498,7 @@ class Summary extends React.Component {
)} - {ghosteryFeatures} + {trustRestrictAndPause} {cliqzFeatures} {statsNavButton} From d36ae0d9e8564df6c22360460b540a98a2f0fe69 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 2 May 2019 15:57:03 -0400 Subject: [PATCH 049/131] Update PauseButton snapshots to reflect removal of abPause code --- app/panel/components/__tests__/PauseButton.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/panel/components/__tests__/PauseButton.jsx b/app/panel/components/__tests__/PauseButton.jsx index 115c1624d..fd22fceec 100644 --- a/app/panel/components/__tests__/PauseButton.jsx +++ b/app/panel/components/__tests__/PauseButton.jsx @@ -28,7 +28,6 @@ describe('app/panel/components/BuildingBlocks/PauseButton.jsx', () => { describe('Snapshot tests with react-test-renderer', () => { test('unpaused state in simple view', () => { const initialState = { - isAbPause: false, isPaused: false, isPausedTimeout: null, clickPause: () => {}, @@ -46,7 +45,6 @@ describe('app/panel/components/BuildingBlocks/PauseButton.jsx', () => { test('paused state in detailed view', () => { const initialState = { - isAbPause: false, isPaused: true, isPausedTimeout: null, clickPause: () => {}, @@ -64,7 +62,6 @@ describe('app/panel/components/BuildingBlocks/PauseButton.jsx', () => { test('paused state in detailed condensed view', () => { const initialState = { - isAbPause: true, isPaused: true, isPausedTimeout: null, clickPause: () => {}, From 7ef5f8210dad613b433ac6bd2067bccfaec97d69 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 2 May 2019 16:35:55 -0400 Subject: [PATCH 050/131] Remove abPause css from _summary.scss --- app/scss/partials/_summary.scss | 88 --------------------------------- 1 file changed, 88 deletions(-) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 0392b05b3..17e2962b6 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -35,27 +35,6 @@ cursor: not-allowed; } - &.ab-pause .pause-button-container { - padding: 10px 0 0 10px; - text-align: left; - } - - &.ab-pause .sub-component.pause-button { - .button-pause { - font-size: 11px; - } - } - - &.expert.ab-pause .pause-button-container { - padding: 10px 0 0 0; - text-align: center; - } - - &.expert.condensed.ab-pause .pause-button-container { - padding: 0; - text-align: left; - } - .page-host { color: #4a4a4a; text-align: center; @@ -68,30 +47,17 @@ } } - &.ab-pause .page-host { - margin-bottom: 30px; - } - &.expert .page-host { margin-top: 20px; margin-bottom: 10px; } - &.expert.ab-pause .page-host { - margin-top: 8px; - margin-bottom: 8px; - } - .donut-graph-container { margin: 26px auto; height: 120px; width: 120px; } - &.ab-pause .donut-graph-container { - margin-top: 0; - margin-bottom: 30px; - } &.expert .donut-graph-container { height: 94px; @@ -101,11 +67,6 @@ padding-top: 5px; } - &.expert.ab-pause .donut-graph-container { - margin-top: 0; - margin-bottom: 16px; - } - &.expert.condensed .total-tracker-count { text-align: center; padding: 0; @@ -115,10 +76,6 @@ margin: 10px 0; } - &.expert.condensed.ab-pause .total-tracker-count { - margin: 13px 0; - } - .page-stats { color: #4a4a4a; text-align: center; @@ -152,10 +109,6 @@ } } - &.expert.ab-pause .page-stats { - margin-bottom: 16px; - } - &.expert.condensed .page-stats { div { text-align: center; @@ -168,22 +121,10 @@ } } - &.expert.condensed.ab-pause .page-stats { - margin-bottom: 0; - - div { - margin: 13px 0; - } - } - .not-scanned-expert-condensed-space-taker { height: 162px; } - &.ab-pause .not-scanned-expert-condensed-space-taker { - height: 130px; - } - .ghostery-features-container { text-align: center; @@ -193,22 +134,6 @@ } } - &.ab-pause .ghostery-features-container { - margin-bottom: 22px; - - .ghostery-features { - display: block; - } - } - - &.expert.ab-pause .ghostery-features-container { - margin-bottom: 16px; - } - - &.expert.condensed.ab-pause .ghostery-features-container { - margin-bottom: -8px; - } - .ghostery-features-container .button-restrict { margin: 12px 28px; } @@ -217,10 +142,6 @@ margin: 0; } - &.ab-pause .ghostery-features-container .button-restrict { - margin: 0; - } - .cliqz-features-container { text-align: center; } @@ -230,15 +151,6 @@ margin-bottom: 6px; } - &.expert.ab-pause .cliqz-features-container { - margin-top: 0; - margin-bottom: 16px; - } - - &.expert.condensed.ab-pause .cliqz-features-container { - margin-top: 14px; - } - &.expert.condensed .cliqz-features-container { margin-bottom: 0; From ea44ceea866ccdd78e6c026450d0564e4b450b1c Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 2 May 2019 16:41:44 -0400 Subject: [PATCH 051/131] Remove this.pauseLeft property from PauseButton --- app/panel/components/BuildingBlocks/PauseButton.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx index ab7455009..2b48e24a2 100644 --- a/app/panel/components/BuildingBlocks/PauseButton.jsx +++ b/app/panel/components/BuildingBlocks/PauseButton.jsx @@ -161,7 +161,6 @@ class PauseButton extends React.Component { onClick={this.props.clickPause} ref={(node) => { this.pauseWidth = node && node.clientWidth; - this.pauseLeft = node && node.offsetLeft; }} > {this.renderPauseButtonText()} From e02077bbfc5970263dd70c23b95d25947f5d85d3 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 2 May 2019 16:45:58 -0400 Subject: [PATCH 052/131] Clean up PauseButton dropdown container JSX and CSS --- app/panel/components/BuildingBlocks/PauseButton.jsx | 5 +---- app/scss/partials/_pause_button.scss | 1 + 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx index 2b48e24a2..8e11a1ce0 100644 --- a/app/panel/components/BuildingBlocks/PauseButton.jsx +++ b/app/panel/components/BuildingBlocks/PauseButton.jsx @@ -149,9 +149,6 @@ class PauseButton extends React.Component { const dropdownContainerClassNames = ClassNames('button-group', 'dropdown-container', { centered: this.props.isCentered, }); - const dropdownContainerStyles = { - left: '0', - }; return (
@@ -175,7 +172,7 @@ class PauseButton extends React.Component {
-
+
{this.state.showDropdown && this.renderDropdown()}
diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss index 96a9c4e02..6b1d0605a 100644 --- a/app/scss/partials/_pause_button.scss +++ b/app/scss/partials/_pause_button.scss @@ -108,6 +108,7 @@ width: 0; height: 0; top: 0; + left: 0; .dropdown { text-align: center; From 7f7941513a61cf022ce6ed3ca4f1e7ef034ff6d9 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 2 May 2019 17:00:23 -0400 Subject: [PATCH 053/131] Update failing PauseButton test snapshot to reflect removal of abPause bits --- .../__snapshots__/PauseButton.jsx.snap | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap b/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap index 70261a31b..c32282d05 100644 --- a/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap +++ b/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap @@ -8,7 +8,7 @@ exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with className="button-group" >
`; @@ -75,11 +70,6 @@ exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with
`; @@ -118,11 +108,6 @@ exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with
`; From 7f3e45a634a92562db7fab0550a2479485b27856 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 2 May 2019 17:08:05 -0400 Subject: [PATCH 054/131] Remove abPause CSS from _ghostery_features partial --- app/scss/partials/_ghostery_features.scss | 30 +---------------------- 1 file changed, 1 insertion(+), 29 deletions(-) diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_features.scss index b2d4393d0..658087a76 100644 --- a/app/scss/partials/_ghostery_features.scss +++ b/app/scss/partials/_ghostery_features.scss @@ -50,15 +50,6 @@ background-color: #ce273c; } } - .button.active.ab-pause { - color: #ffffff; - border-color: #2092bf; - background-color: #1dafed; - box-shadow: inset 0px 1px 7px 2px #2092bf; - &:hover { - background-color: #0093bd; - } - } .full-height { height: 100%; } .button-trust .button-text, @@ -98,11 +89,6 @@ border-color: #ff8da2; background-color: #ff8da2; } - .button.active.ab-pause { - color: #ffffff; - border-color: #a4d4f2; - background-color: #a4d4f2; - } .button-trust .button-text { background-image: buildIconTrust(#a4a4a4); } @@ -136,25 +122,11 @@ border-bottom-right-radius: 0; border-bottom: 0; } - .button-left { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0; - } + .button-center { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .button-bottom { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-top: 0; - } - .button-right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: 0; - } } From 098348581c826c5b693e17e62454e6a5b4bb166e Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 3 May 2019 09:50:28 -0400 Subject: [PATCH 055/131] Refactor PauseButton#render --- .../components/BuildingBlocks/PauseButton.jsx | 85 +++++++++++-------- 1 file changed, 51 insertions(+), 34 deletions(-) diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx index 8e11a1ce0..589d09786 100644 --- a/app/panel/components/BuildingBlocks/PauseButton.jsx +++ b/app/panel/components/BuildingBlocks/PauseButton.jsx @@ -132,49 +132,66 @@ class PauseButton extends React.Component { * @return {JSX} JSX for rendering the Pause Button on the Summary View */ render() { - const pauseButtonClassNames = ClassNames('button', 'button-left', 'button-pause', 'g-tooltip', { - active: this.props.isPaused, - smaller: !this.props.isCentered, - smallest: this.props.isCentered && this.props.isCondensed, - 'no-border-radius': this.props.isCentered && this.props.isCondensed, - 'dropdown-open': this.state.showDropdown, + const { + isPaused, + isCentered, + isCondensed + } = this.props; + const { showDropdown } = this.state; + const centeredAndCondensed = isCentered && isCondensed; + + const sharedClassNames = { + button: true, + smaller: !isCentered, + smallest: centeredAndCondensed, + 'no-border-radius': centeredAndCondensed, + 'dropdown-open': showDropdown, + }; + const pauseButtonClassNames = ClassNames('button-left', 'button-pause', 'g-tooltip', sharedClassNames, { + active: isPaused, }); - const dropdownButtonClassNames = ClassNames('button', 'button-right', 'button-caret', { - active: this.state.showDropdown, - smaller: !this.props.isCentered, - smallest: this.props.isCentered && this.props.isCondensed, - 'no-border-radius': this.props.isCentered && this.props.isCondensed, - 'dropdown-open': this.state.showDropdown, + const dropdownButtonClassNames = ClassNames('button-right', 'button-caret', sharedClassNames, { + active: showDropdown, }); const dropdownContainerClassNames = ClassNames('button-group', 'dropdown-container', { - centered: this.props.isCentered, + centered: isCentered, }); + const togglePauseButton = ( +
{ this.pauseWidth = node && node.clientWidth; }} + > + {this.renderPauseButtonText()} + +
+ ); + + const pauseDurationSelectionDropdownCaret = ( +
+ + {t('summary_show_menu')} + +
+ ); + + const pauseDurationSelectionDropdown = ( +
+ {this.renderDropdown()} +
+ ); + return (
-
{ - this.pauseWidth = node && node.clientWidth; - }} - > - {this.renderPauseButtonText()} - -
-
- - {t('summary_show_menu')} - -
-
-
- {this.state.showDropdown && this.renderDropdown()} + {togglePauseButton} + {pauseDurationSelectionDropdownCaret}
+ {showDropdown && pauseDurationSelectionDropdown}
); } From 87a1cd5980beabf5c5ce7c3ef816a05f6646cff4 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 5 May 2019 17:26:44 -0400 Subject: [PATCH 056/131] Begin removal of abPause CSS --- .../components/BuildingBlocks/PauseButton.jsx | 2 +- app/scss/partials/_pause_button.scss | 37 +++++++++---------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx index 589d09786..69633f586 100644 --- a/app/panel/components/BuildingBlocks/PauseButton.jsx +++ b/app/panel/components/BuildingBlocks/PauseButton.jsx @@ -186,7 +186,7 @@ class PauseButton extends React.Component { ); return ( -
+
{togglePauseButton} {pauseDurationSelectionDropdownCaret} diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss index 6b1d0605a..edf846993 100644 --- a/app/scss/partials/_pause_button.scss +++ b/app/scss/partials/_pause_button.scss @@ -11,7 +11,14 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -.sub-component.pause-button { +/* +.PauseButton + + + + */ + +.sub-a-dub-component.pause-button { .button { color: #4a4a4a; border-color: #cccccc; @@ -39,6 +46,8 @@ } .button-pause { + height: 35px; + min-width: 125px; max-width: 125px; line-height: 16px; @@ -62,8 +71,9 @@ background-image: buildIconPlay(#ffffff); } &.smaller { - min-width: 100px; - max-width: 150px; + height: 45px; + min-width: 125px; + max-width: 125px; } &.smallest { min-width: 41px; @@ -75,6 +85,7 @@ } } .button-caret { + height: 35px; width: 25px; padding-top: 21px; padding-right: 0; @@ -85,6 +96,9 @@ &.active { background-image: buildIconCaretDown(#ffffff); } + &.smaller { + height: 45px; + } } .button-left { @@ -148,24 +162,7 @@ border-top-right-radius: 0; border-top-left-radius: 0; } -} -.ghostery-features-container .sub-component.pause-button { - .button-pause { - height: 35px; - line-height: 16px; - } - .button-caret { - height: 35px; - } - .button-pause.smaller { - height: 45px; - min-width: 125px; - max-width: 125px; - } - .button-caret.smaller { - height: 45px; - } .button.active { border-color: #0093bd; background-color: #1dafed; From 6c83c7e11a46b12720b8486f77e7e04eee2a614f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 5 May 2019 17:35:48 -0400 Subject: [PATCH 057/131] Continue removing abPause CSS --- app/scss/partials/_pause_button.scss | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss index edf846993..cf356a6f1 100644 --- a/app/scss/partials/_pause_button.scss +++ b/app/scss/partials/_pause_button.scss @@ -32,14 +32,14 @@ } .button.active { color: #ffffff; - border-color: #1dafed; + border-color: #0093bd; background-color: #1dafed; - box-shadow: inset 0px 1px 7px 2px rgba(#1dafed, 0); + box-shadow: inset 0px 1px 7px 2px #0093bd; & + .button.active { border-left-color: #efefea; } } - .button:hover { background-color: #efefef; } + .button:hover { background-color: #0093bd; } .button.active:hover { border-color: #0093bd; background-color: #0093bd; @@ -163,14 +163,8 @@ border-top-left-radius: 0; } - .button.active { - border-color: #0093bd; - background-color: #1dafed; - box-shadow: inset 0px 1px 7px 2px #0093bd; - &:hover { - background-color: #0093bd; - } - } + + .button-pause.smallest { padding-left: 15px; height: 41px; From 212434c2a45b5f3e83d6612722128661ffa15cd0 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 5 May 2019 20:34:49 -0400 Subject: [PATCH 058/131] Remove dropdown abPause CSS from pause button css --- app/scss/partials/_pause_button.scss | 44 +++++++++++++--------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss index cf356a6f1..606a810c0 100644 --- a/app/scss/partials/_pause_button.scss +++ b/app/scss/partials/_pause_button.scss @@ -75,15 +75,25 @@ min-width: 125px; max-width: 125px; } - &.smallest { - min-width: 41px; - max-width: 41px; - padding-left: 17px; - .pause-button-icon { - padding: 0 0 0 15px; - } + } + + .button-pause.smallest { + height: 41px; + min-width: 41px; + max-width: 41px; + padding-left: 15px; + border-top: none; + border-bottom-left-radius: 3px; + line-height: 27px; + .pause-button-icon { + padding: 0 0 0 15px; } } + + .button-pause.smallest.dropdown-open { + border-bottom-left-radius: 0; + } + .button-caret { height: 35px; width: 25px; @@ -125,11 +135,10 @@ left: 0; .dropdown { - text-align: center; - background-color: #ffffff; + position: absolute; + z-index: 1; border: 1px solid #cccccc; border-top: 0; - margin: 0 auto; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } @@ -165,16 +174,7 @@ - .button-pause.smallest { - padding-left: 15px; - height: 41px; - line-height: 27px; - border-top: none; - border-bottom-left-radius: 3px; - &.dropdown-open { - border-bottom-left-radius: 0; - } - } + .button-caret.smallest { height: 41px; border-top: none; @@ -183,10 +183,6 @@ border-bottom-right-radius: 0; } } - .dropdown { - position: absolute; - z-index: 1; - } .dropdown-container.centered .dropdown-item { padding: 9px 0; } From f743ef5b70fd53e2666aed8567c81a7405c645a2 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 5 May 2019 21:45:57 -0400 Subject: [PATCH 059/131] Further clean up pause button css --- app/scss/partials/_pause_button.scss | 46 ++++++++++++++-------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss index 606a810c0..b1a816fc6 100644 --- a/app/scss/partials/_pause_button.scss +++ b/app/scss/partials/_pause_button.scss @@ -72,8 +72,6 @@ } &.smaller { height: 45px; - min-width: 125px; - max-width: 125px; } } @@ -103,12 +101,24 @@ background-position: center center; background-size: 9px 5px; background-image: buildIconCaretDown(#4a4a4a); - &.active { - background-image: buildIconCaretDown(#ffffff); - } - &.smaller { - height: 45px; - } + } + + .button-caret.active { + background-image: buildIconCaretDown(#ffffff); + } + + .button-caret.smaller { + height: 45px; + } + + .button-caret.smallest { + height: 41px; + border-top: none; + border-bottom-right-radius: 3px; + } + + .button-caret.smallest.dropdown-open { + border-bottom-right-radius: 0; } .button-left { @@ -119,6 +129,7 @@ border-bottom-left-radius: 0; } } + .button-right { border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -165,25 +176,14 @@ } } + .dropdown-container.centered .dropdown-item { + padding: 9px 0; + } + .no-border-radius { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-top-left-radius: 0; } - - - - - .button-caret.smallest { - height: 41px; - border-top: none; - border-bottom-right-radius: 3px; - &.dropdown-open { - border-bottom-right-radius: 0; - } - } - .dropdown-container.centered .dropdown-item { - padding: 9px 0; - } } From 12e691e0158d9706f0198b0ab696ef74c88bf63d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 6 May 2019 13:55:39 -0400 Subject: [PATCH 060/131] Refactor Summary scss towards modified BEM structure --- app/panel/components/Summary.jsx | 97 ++++++++++--------- app/scss/partials/_summary.scss | 159 +++++++++++++++++-------------- 2 files changed, 140 insertions(+), 116 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index ee49220fc..4e15b4314 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -326,38 +326,23 @@ class Summary extends React.Component { const sbAdjust = enable_smart_block && (sbBlocked - sbAllowed) || 0; const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; - const summaryClassNames = ClassNames('', { - expert: is_expert, - condensed: showCondensed, - }); - const blockedTrackersClassNames = ClassNames('blocked-trackers', { - clickable: is_expert, - }); - const pageLoadClassNames = ClassNames('page-load', { - fast: this.state.trackerLatencyTotal < 5, - slow: this.state.trackerLatencyTotal > 10, - }); - const summaryViewStatsButton = ClassNames('stats-button', 'g-tooltip', { + const summaryViewStatsButton = ClassNames('Summary__statsButton', 'g-tooltip', { hide: is_expert }); - let trackersBlockedCount; + let totalTrackersBlockedCount; if (paused_blocking || sitePolicy === 2) { - trackersBlockedCount = 0; + totalTrackersBlockedCount = 0; } else if (sitePolicy === 1) { - trackersBlockedCount = trackerCounts.blocked + trackerCounts.allowed || 0; + totalTrackersBlockedCount = trackerCounts.blocked + trackerCounts.allowed || 0; } else { - trackersBlockedCount = trackerCounts.blocked + sbAdjust || 0; + totalTrackersBlockedCount = trackerCounts.blocked + sbAdjust || 0; } - const pageHostClassNames = ClassNames('page-host', { - invisible: hidePageHost - }); - const totalTrackersFound = ( -
+
{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} +
); + const pageHostContainerClassNames = ClassNames('Summary__pageHostContainer', { + invisible: hidePageHost, + }); const pageHostReadout = ( -
- {pageHost} +
+ {pageHost}
); + const totalTrackersBlockedClassNames = ClassNames('Summary__pageStatContainer', { + clickable: is_expert, + }); const totalTrackersBlocked = ( -
- {t('trackers_blocked')} - - {trackersBlockedCount} - +
+
+ {t('trackers_blocked')} + + {totalTrackersBlockedCount} + +
); const totalRequestsModified = ( -
- {t('requests_modified')} - - {requestsModifiedCount} - +
+
+ {t('requests_modified')} + + {requestsModifiedCount} + +
); + const pageLoadTimeClassNames = ClassNames('GhosteryKeyValueReadout', 'GhosteryKeyValueReadout--pageLoadTime', { + 'GhosteryKeyValueReadout--pageLoadTime-fast': this.state.trackerLatencyTotal < 5, + 'GhosteryKeyValueReadout--pageLoadTime-slow': this.state.trackerLatencyTotal > 10, + }); const pageLoadTime = ( -
- {t('page_load')} - - {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} - +
+
+ {t('page_load')} + + {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} + +
); @@ -478,21 +479,23 @@ class Summary extends React.Component {
); + const summaryClassNames = ClassNames('Summary', { + 'Summary--simple': !is_expert, + 'Summary--expert': is_expert && !is_expanded, + 'Summary--condensed': showCondensed, + }); + return ( -
+
{!showCondensed && this.state.disableBlocking && ()} {!showCondensed && !this.state.disableBlocking && donut} {!showCondensed && !this.state.disableBlocking && !is_expert && pageHostReadout} {showCondensed && !this.state.disableBlocking && totalTrackersFound} - {!this.state.disableBlocking && -
- {totalTrackersBlocked} - {totalRequestsModified} - {pageLoadTime} -
- } + {!this.state.disableBlocking && totalTrackersBlocked} + {!this.state.disableBlocking && totalRequestsModified} + {!this.state.disableBlocking && pageLoadTime} {showCondensed && this.state.disableBlocking && is_expert && (
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 17e2962b6..ce78314f3 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -11,55 +11,88 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -#content-summary { - position: absolute; - height: 479px; - width: 100%; +// The donut *container* is specific to the Summary component and should live here +// The donut itself is not intrinsically tied to Summary and can live wherever - &.expert { - width: 235px; - padding-top: 10px; - } +.GhosteryTextLabel { + color: #4a4a4a; + text-align: center; + font-weight: 600; +} - &.expert.condensed { - width: 66px; - padding-top: 0; - background-color: #f9f6f6; - } +.GhosteryKeyValueReadout { + text-align: center; + font-weight: 600; +} + +.GhosteryKeyValueReadout__key { + color: #4a4a4a; +} + +.GhosteryKeyValueReadout--totalTrackersBlocked { + .GhosteryKeyValueReadout__value { color: #e74055; } +} + +.GhosteryKeyValueReadout--totalRequestsModified { + .GhosteryKeyValueReadout__value { color: #00aef0; } +} + +.Summary__pageHostContainer { + font-size: 11px; +} + +.Summary__pageStatContainer { + font-size: 14px; + line-height: 21px; +} + +.Summary { + posiiton: absolute; + height: 479px; .clickable { cursor: pointer; } - .not-clickable { + .notClickable { cursor: not-allowed; } - .page-host { - color: #4a4a4a; - text-align: center; - font-size: 11px; - font-weight: 600; - margin-bottom: 36px; - - &.invisible { - visibility: hidden; - } + .invisible { + visibility: hidden; } +} - &.expert .page-host { - margin-top: 20px; - margin-bottom: 10px; +.Summary--simple { + width: 100%; + + .Summary__pageHostContainer { + margin-bottom: 36px; } - .donut-graph-container { + .Summary__donutContainer { margin: 26px auto; height: 120px; width: 120px; } + .Summary__pageStatContainer { + margin-bottom: 40px; + display: inline-block; + padding: 0 20px; + } +} + +.Summary--expert { + width: 235px; + padding-top: 10px; - &.expert .donut-graph-container { + .Summary__pageHostContainer { + margin-top: 20px; + margin-bottom: 10px; + } + + .Summary__donutContainer { height: 94px; width: 94px; margin-top: 21px; @@ -67,46 +100,41 @@ padding-top: 5px; } - &.expert.condensed .total-tracker-count { - text-align: center; - padding: 0; - color: #4a4a4a; + .Summary__pageStatContainer { + margin-bottom: 21px; + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; + } +} + +.Summary--condensed { + width: 66px; + background-color: #f9f6f6; + + .Summary__totalTrackerCountContainer { font-size: 24px; - font-weight: 600; + padding: 0; margin: 10px 0; } +} +.Summary__statsButton { + position: absolute; + right: 0; + top: 40px; + padding: 6px 3px 3px 9px; + border: 1px lightgray solid; + border-radius: 5px 0 0 5px; +} + +#content-summary { .page-stats { - color: #4a4a4a; - text-align: center; - font-size: 14px; - line-height: 21px; - font-weight: 600; - margin-bottom: 40px; - .blocked-trackers .value { color: #e74055; } - .modified-requests .value { color: #00aef0; } + .page-load .value { color: #ffc063; } .page-load.fast .value { color: #9ecc42; } .page-load.slow .value { color: #e74055; } - - .blocked-trackers, - .modified-requests, - .page-load { - display: inline-block; - padding: 0 20px; - } - } - - &.expert .page-stats { - margin-bottom: 21px; - - .blocked-trackers, - .page-load { - display: block; - text-overflow: ellipsis; - white-space: nowrap; - overflow-x: hidden; - } } &.expert.condensed .page-stats { @@ -159,14 +187,7 @@ } } - .stats-button { - position: absolute; - right: 0; - top: 40px; - padding: 6px 3px 3px 9px; - border: 1px lightgray solid; - border-radius: 5px 0 0 5px; - } + .upgrade-banner-container { @extend %pointer; From 0a232835e9595220f02908703057a51ddab0ba34 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 6 May 2019 16:26:31 -0400 Subject: [PATCH 061/131] Continue CSS refactor for Summary and sub-components --- app/panel/components/Summary.jsx | 110 ++++++++++++----- app/scss/partials/_cliqz_features.scss | 11 -- app/scss/partials/_summary.scss | 163 ++++++++++++++----------- 3 files changed, 168 insertions(+), 116 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 4e15b4314..5cc9b2baf 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -342,7 +342,7 @@ class Summary extends React.Component { } const totalTrackersFound = ( -
+
{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} ); - const totalTrackersBlockedClassNames = ClassNames('Summary__pageStatContainer', { - clickable: is_expert, + const totalTrackersBlockedContainerClassNames = ClassNames('Summary__pageStatContainer', { + 'Ghostery--clickable': is_expert, + }); + const totalTrackersBlockedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalTrackersBlocked', { + 'GhosteryKVReadout--withoutKey': showCondensed, + 'GhosteryKVReadout--summaryCondensed': showCondensed, }); const totalTrackersBlocked = ( -
-
- {t('trackers_blocked')} - +
+
+ {t('trackers_blocked')} + {totalTrackersBlockedCount}
); + const totalRequestsModifiedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalRequestsModified', { + 'GhosteryKVReadout--withoutKey': showCondensed, + 'GhosteryKVReadout--summaryCondensed': showCondensed, + }); const totalRequestsModified = (
-
+
{t('requests_modified')} {requestsModifiedCount} @@ -402,15 +410,18 @@ class Summary extends React.Component {
); - const pageLoadTimeClassNames = ClassNames('GhosteryKeyValueReadout', 'GhosteryKeyValueReadout--pageLoadTime', { - 'GhosteryKeyValueReadout--pageLoadTime-fast': this.state.trackerLatencyTotal < 5, - 'GhosteryKeyValueReadout--pageLoadTime-slow': this.state.trackerLatencyTotal > 10, + const pageLoadTimeClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--pageLoadTime', { + 'GhosteryKVReadout--pageLoadTime-fast': this.state.trackerLatencyTotal < 5, + 'GhosteryKVReadout--pageLoadTime-slow': this.state.trackerLatencyTotal > 10, + 'GhosteryKVReadout--pageLoadTime-medium': this.state.trackerLatencyTotal > 5 && this.state.trackerLatencyTotal < 10, + 'GhosteryKVReadout--withoutKey': showCondensed, + 'GhosteryKVReadout--summaryCondensed': showCondensed, }); const pageLoadTime = (
- {t('page_load')} - + {t('page_load')} + {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'}
@@ -419,28 +430,64 @@ class Summary extends React.Component { // Trust, Restrict, Pause const trustRestrictAndPause = ( -
- - - +
+
+ +
+
+ +
+
+ +
); // Enhanced Anti-Tracking, Enhanced Ad Blocking, Smart Blocking const cliqzFeatures = ( +
+
+ +
+
+ +
+
+ +
+
+ /*
+ */ ); const statsNavButton = ( @@ -498,7 +546,7 @@ class Summary extends React.Component { {!this.state.disableBlocking && pageLoadTime} {showCondensed && this.state.disableBlocking && is_expert && ( -
+
)} {trustRestrictAndPause} diff --git a/app/scss/partials/_cliqz_features.scss b/app/scss/partials/_cliqz_features.scss index 3e0815f28..21b186c96 100644 --- a/app/scss/partials/_cliqz_features.scss +++ b/app/scss/partials/_cliqz_features.scss @@ -12,18 +12,7 @@ */ .sub-component.cliqz-features { - .cliqz-feature { - display: inline-block; - width: 150px; - margin: 0 10px; - } - &.smaller .cliqz-feature { - width: 55px; - margin: 0 10px; - } &.smaller.condensed .cliqz-feature { - width: 40px; - margin: 0 0 5px; .count { line-height: 14px; } diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index ce78314f3..6d6ebe92e 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -14,29 +14,63 @@ // The donut *container* is specific to the Summary component and should live here // The donut itself is not intrinsically tied to Summary and can live wherever +.Ghostery--clickable { + cursor: pointer; +} + +.Ghostery--notClickable { + cursor: not-allowed; +} + +.Ghostery--invisible { + visibility: hidden; +} + .GhosteryTextLabel { color: #4a4a4a; text-align: center; font-weight: 600; } -.GhosteryKeyValueReadout { +.GhosteryKVReadout { text-align: center; font-weight: 600; } -.GhosteryKeyValueReadout__key { +.GhosteryKVReadout--summaryCondensed { + padding: 0; + margin: 5px 0; +} + +.GhosteryKVReadout--withoutKey { + .GhosteryKVReadout__key { display: none; } +} + +.GhosteryKVReadout__key { color: #4a4a4a; } -.GhosteryKeyValueReadout--totalTrackersBlocked { - .GhosteryKeyValueReadout__value { color: #e74055; } +.GhosteryKVReadout--totalTrackersBlocked { + .GhosteryKVReadout__value { color: #e74055; } } -.GhosteryKeyValueReadout--totalRequestsModified { - .GhosteryKeyValueReadout__value { color: #00aef0; } +.GhosteryKVReadout--totalRequestsModified { + .GhosteryKVReadout__value { color: #00aef0; } } +.GhosteryKVReadout--pageLoadTime-slow { + .GhosteryKVReadout__value { color: #e74055; } +} + +.GhosteryKVReadout--pageLoadTime-medium { + .GhosteryKVReadout__value { color: #ffc063; } +} + +.GhosteryKVReadout--pageLoadTime-fast { + .GhosteryKVReadout__value { color: #9ecc42; } +} + + .Summary__pageHostContainer { font-size: 11px; } @@ -49,18 +83,6 @@ .Summary { posiiton: absolute; height: 479px; - - .clickable { - cursor: pointer; - } - - .notClickable { - cursor: not-allowed; - } - - .invisible { - visibility: hidden; - } } .Summary--simple { @@ -81,6 +103,14 @@ display: inline-block; padding: 0 20px; } + + .Summary__buttonContainer--middle { + margin: 12px 28px; + } + + .Summary__cliqzFeatureContainer { + width: 150px; + } } .Summary--expert { @@ -107,6 +137,19 @@ white-space: nowrap; overflow-x: hidden; } + + .Summary__buttonContainer--middle { + margin: 12px 28px; + } + + .Summary__cliqzFeaturesContainer { + margin-top: 10px; + margin-bottom: 6px; + } + + .Summary__cliqzFeatureContainer { + width: 55px; + } } .Summary--condensed { @@ -118,6 +161,19 @@ padding: 0; margin: 10px 0; } + + .Summary__cliqzFeaturesContainer { + margin-bottom: 0; + } + + .Summary__cliqzFeatureContainer:last-of-type { + margin-bottom: 0; + } + + .Summary__cliqzFeatureContainer { + width: 40px; + margin: 0 0 5px; + } } .Summary__statsButton { @@ -129,66 +185,25 @@ border-radius: 5px 0 0 5px; } -#content-summary { - .page-stats { - - .page-load .value { color: #ffc063; } - .page-load.fast .value { color: #9ecc42; } - .page-load.slow .value { color: #e74055; } - } - - &.expert.condensed .page-stats { - div { - text-align: center; - padding: 0; - margin: 5px 0; - } - - .text { - display: none; - } - } - - .not-scanned-expert-condensed-space-taker { - height: 162px; - } - - .ghostery-features-container { - text-align: center; - - .ghostery-features, - .pause-button { - display: inline-block; - } - } - - .ghostery-features-container .button-restrict { - margin: 12px 28px; - } - - &.expert.condensed .ghostery-features-container .button-restrict { - margin: 0; - } - - .cliqz-features-container { - text-align: center; - } - - &.expert .cliqz-features-container { - margin-top: 10px; - margin-bottom: 6px; - } - - &.expert.condensed .cliqz-features-container { - margin-bottom: 0; +.Summary__spaceTaker { + height: 162px; +} - .cliqz-feature:last-of-type { - margin-bottom: 0; - } - } +.Summary__buttonContainer { + text-align: center; + display: inline-block; +} +.Summary__cliqzFeaturesContainer { + text-align: center; +} +.Summary__cliqzFeatureContainer { + display: inline-block; + margin: 0 10px; +} +#content-summary { .upgrade-banner-container { @extend %pointer; position: absolute; From 63c03e092ba27b488c3491c826291357ecda69d0 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 7 May 2019 15:22:45 -0400 Subject: [PATCH 062/131] Refactor CliqzFeatures out to a generic CliqzFeature building block component --- .../BuildingBlocks/CliqzFeature.jsx | 84 +++++++++++++ app/panel/components/Summary.jsx | 26 +++- app/scss/partials/_cliqz_features.scss | 112 ++++++++++-------- 3 files changed, 171 insertions(+), 51 deletions(-) create mode 100644 app/panel/components/BuildingBlocks/CliqzFeature.jsx diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx new file mode 100644 index 000000000..0bd809971 --- /dev/null +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -0,0 +1,84 @@ +/** + * Cliqz Features 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 ClassNames from 'classnames'; + +/** + * @class Implements rendering and interaction for Cliqz feature icon toggles + * @memberof PanelBuildingBlocks + */ + +class CliqzFeature extends React.Component { + constructor(props) { + super(props); + + // Event Bindings + this.getCount = this.getCount.bind(this); + this.clickCliqzFeature = this.clickCliqzFeature.bind(this); + } + + getCount() { + if (!this.props.active) { + return '-'; + } + + let blockedCount; + let unblockedCount; + switch (this.props.feature) { + case 'enable_anti_tracking': + return this.props.data && this.props.data.totalUnsafeCount || 0; + case 'enable_ad_block': + return this.props.data && this.props.data.totalCount || 0; + case 'enable_smart_block': + blockedCount = this.props.data && Object.keys(this.props.data.blocked).length || 0; + unblockedCount = this.props.data && Object.keys(this.props.data.unblocked).length || 0; + return blockedCount + unblockedCount; + default: + return 0; + } + } + + clickCliqzFeature() { + if (this.props.cliqzInactive) { + return; + } + + this.props.clickButton({ + feature: this.props.type, + status: this.props.active, + text: !this.props.active ? t(this.props.onLocaleKey) : t(this.props.offLocaleKey) + }); + } + + render() { + const specificFeatureModifier = `CliqzFeature--${this.props.feature}`; + const cliqzFeatureClassNames = ClassNames('CliqzFeature', specificFeatureModifier, { + active: this.props.active, + clickable: !this.props.cliqzInactive, + notClickable: this.props.cliqzInactive, + }) + const featureName = `drawer_title_${this.props.feature}`; + return ( +
+
{this.getCount()}
+
+
+ { t({ featureName }) } +
+
+ ); + } +} + +export default CliqzFeature; diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 5cc9b2baf..9d766fa86 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -461,29 +461,49 @@ class Summary extends React.Component {
); + // + // + // // Enhanced Anti-Tracking, Enhanced Ad Blocking, Smart Blocking + const isCliqzInactive = this.props.paused_blocking || this.props.sitePolicy || this.state.disableBlocking || IS_CLIQZ; const cliqzFeatures = (
diff --git a/app/scss/partials/_cliqz_features.scss b/app/scss/partials/_cliqz_features.scss index 21b186c96..71ed070ee 100644 --- a/app/scss/partials/_cliqz_features.scss +++ b/app/scss/partials/_cliqz_features.scss @@ -11,68 +11,57 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -.sub-component.cliqz-features { - &.smaller.condensed .cliqz-feature { - .count { - line-height: 14px; - } - .icon { - width: 40px; - height: 40px; - background-size: 30px 30px; - } - } +.CliqzFeature { - .count { - color: rgba(#c8c7c2, 0); - text-align: center; - font-size: 14px; - line-height: 28px; - font-weight: 600; - transition: color 0.25s ease-out; +} - background-repeat: no-repeat; - background-position: center center; - background-size: 10px 10px; - transition: background-image 0.25s ease-out; - background-image: buildIconDash(#c8c7c2); - } - .active .count { +.CliqzFeature--cliqzActive-featureActive { + .CliqzFeature__count { color: #1dafed; background: none; } - &.inactive .count { +} + +.CliqzFeature--cliqzInactive-featureInactive { + .CliqzFeature__count { color: rgba(#dedede, 0); background-image: buildIconDash(#dedede); } - &.inactive .active .count { +} + +.CliqzFeature--cliqzInactive-featureActive { + .CliqzFeature__count { color: #a4d4f2; background: none; } +} - .icon { - margin: 0 auto; - height: 50px; - width: 50px; - background-repeat: no-repeat; - background-position: center center; - background-size: 50px 50px; - transition: background-image 0.25s ease-out; - } - .anti-tracking .icon { background-image: buildIconAntiTracking(#c8c7c2); } - .active.anti-tracking .icon { background-image: buildIconAntiTracking(#1dafed); } - &.inactive .anti-tracking .icon { background-image: buildIconAntiTracking(#dedede); } - &.inactive .active.anti-tracking .icon { background-image: buildIconAntiTracking(#a4d4f2); } +.CliqzFeature__count { + color: rgba(#c8c7c2, 0); + text-align: center; + font-size: 14px; + line-height: 28px; + font-weight: 600; + transition: color 0.25s ease-out; - .ad-blocking .icon { background-image: buildIconAdBlocking(#c8c7c2); } - .active.ad-blocking .icon { background-image: buildIconAdBlocking(#1dafed); } - &.inactive .ad-blocking .icon { background-image: buildIconAdBlocking(#dedede); } - &.inactive .active.ad-blocking .icon { background-image: buildIconAdBlocking(#a4d4f2); } + background-repeat: no-repeat; + background-position: center center; + background-size: 10px 10px; + transition: background-image 0.25s ease-out; + background-image: buildIconDash(#c8c7c2); +} - .smart-blocking .icon { background-image: buildIconSmartBlocking(#c8c7c2); } - .active.smart-blocking .icon { background-image: buildIconSmartBlocking(#1dafed); } - &.inactive .smart-blocking .icon { background-image: buildIconSmartBlocking(#dedede); } - &.inactive .active.smart-blocking .icon { background-image: buildIconSmartBlocking(#a4d4f2); } +.CliqzFeature__icon { + margin: 0 auto; + height: 50px; + width: 50px; + background-repeat: no-repeat; + background-position: center center; + background-size: 50px 50px; + transition: background-image 0.25s ease-out; +} + +.sub-component.cliqz-features { .feature-name { color: #c8c7c2; @@ -91,6 +80,33 @@ &.inactive .active .feature-name { color: #a4d4f2; } &.smaller .feature-name { display: none; } + &.smaller.condensed .cliqz-feature { + .count { + line-height: 14px; + } + .icon { + width: 40px; + height: 40px; + background-size: 30px 30px; + } + } + + .anti-tracking .icon { background-image: buildIconAntiTracking(#c8c7c2); } + .active.anti-tracking .icon { background-image: buildIconAntiTracking(#1dafed); } + &.inactive .anti-tracking .icon { background-image: buildIconAntiTracking(#dedede); } + &.inactive .active.anti-tracking .icon { background-image: buildIconAntiTracking(#a4d4f2); } + + .ad-blocking .icon { background-image: buildIconAdBlocking(#c8c7c2); } + .active.ad-blocking .icon { background-image: buildIconAdBlocking(#1dafed); } + &.inactive .ad-blocking .icon { background-image: buildIconAdBlocking(#dedede); } + &.inactive .active.ad-blocking .icon { background-image: buildIconAdBlocking(#a4d4f2); } + + .smart-blocking .icon { background-image: buildIconSmartBlocking(#c8c7c2); } + .active.smart-blocking .icon { background-image: buildIconSmartBlocking(#1dafed); } + &.inactive .smart-blocking .icon { background-image: buildIconSmartBlocking(#dedede); } + &.inactive .active.smart-blocking .icon { background-image: buildIconSmartBlocking(#a4d4f2); } + + .cliqz-feature.clickable:hover { .count { background-image: buildIconDash(#a4a4a4); } &.anti-tracking .icon { background-image: buildIconAntiTracking(#a4a4a4); } From da976b33f32dd3995220c374178230cf8a6ed9cf Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 7 May 2019 15:45:34 -0400 Subject: [PATCH 063/131] Remove CliqzFeatures --- .../BuildingBlocks/CliqzFeatures.jsx | 194 ------------------ app/panel/components/BuildingBlocks/index.js | 4 +- app/panel/components/Summary.jsx | 112 +++++----- 3 files changed, 60 insertions(+), 250 deletions(-) delete mode 100644 app/panel/components/BuildingBlocks/CliqzFeatures.jsx diff --git a/app/panel/components/BuildingBlocks/CliqzFeatures.jsx b/app/panel/components/BuildingBlocks/CliqzFeatures.jsx deleted file mode 100644 index 393959f0c..000000000 --- a/app/panel/components/BuildingBlocks/CliqzFeatures.jsx +++ /dev/null @@ -1,194 +0,0 @@ -/** - * Cliqz Features 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 ClassNames from 'classnames'; -import Tooltip from '../Tooltip'; - -/** - * @class Implements buttons to render and toggle for Cliqz's features on/off. - * @memberof PanelBuildingBlocks - */ -class CliqzFeatures extends React.Component { - constructor(props) { - super(props); - - // Event Bindings - this.getAntiTrackingTotal = this.getAntiTrackingTotal.bind(this); - this.getAdBlockingTotal = this.getAdBlockingTotal.bind(this); - this.getSmartBlockingTotal = this.getSmartBlockingTotal.bind(this); - this.clickAntiTracking = this.clickAntiTracking.bind(this); - this.clickAdBlocking = this.clickAdBlocking.bind(this); - this.clickSmartBlocking = this.clickSmartBlocking.bind(this); - } - - /** - * Calculates the text for above the Ad Blocking feature icon - * @return {String | Int} The text for above the Ad Blocking icon - */ - getAdBlockingTotal() { - if (!this.props.adBlockingActive) { - return '-'; - } - return this.props.adBlocking && this.props.adBlocking.totalCount || 0; - } - - /** - * Calculates the text for above the Smart Blocking feature icon - * @return {String | Int} The text for above the Smart Blocking icon - */ - getSmartBlockingTotal() { - if (!this.props.smartBlockingActive) { - return '-'; - } - const blockedCount = this.props.smartBlocking && Object.keys(this.props.smartBlocking.blocked).length || 0; - const unblockedCount = this.props.smartBlocking && Object.keys(this.props.smartBlocking.unblocked).length || 0; - - return blockedCount + unblockedCount; - } - - /** - * Calculates the text for above the Anti Tracking feature icon - * @return {String | Int} The text for above the Anit Tracking icon - */ - getAntiTrackingTotal() { - if (!this.props.antiTrackingActive) { - return '-'; - } - return this.props.antiTracking && this.props.antiTracking.totalUnsafeCount || 0; - } - - /** - * Handles the click event for the AdBlocking button - */ - clickAdBlocking() { - if (this.props.isInactive) { - return; - } - this.props.clickButton({ - feature: 'enable_ad_block', - status: this.props.adBlockingActive, - text: !this.props.adBlockingActive ? t('alert_ad_block_on') : t('alert_ad_block_off'), - }); - } - - /** - * Handles the click event for the SmartBlocking button - */ - clickSmartBlocking() { - if (this.props.isInactive) { - return; - } - this.props.clickButton({ - feature: 'enable_smart_block', - status: this.props.smartBlockingActive, - text: !this.props.smartBlockingActive ? t('alert_smart_block_on') : t('alert_smart_block_off'), - }); - } - - /** - * Handles the click event for the AntiTracking button - */ - clickAntiTracking() { - if (this.props.isInactive) { - return; - } - this.props.clickButton({ - feature: 'enable_anti_tracking', - status: this.props.antiTrackingActive, - text: !this.props.antiTrackingActive ? t('alert_anti_track_on') : t('alert_anti_track_off'), - }); - } - - /** - * React's required render function. Returns JSX - * @return {JSX} JSX for rendering the Cliqz Features portion of the Summary View - */ - render() { - const { - isSmaller, - isCondensed, - isInactive, - antiTrackingActive, - adBlockingActive, - smartBlockingActive, - } = this.props; - - const cliqzFeaturesClassNames = ClassNames('sub-component', 'cliqz-features', { - smaller: isSmaller, - condensed: isCondensed, - inactive: isInactive, - }); - const antiTrackingClassNames = ClassNames('anti-tracking', 'cliqz-feature', { - active: antiTrackingActive, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - const adBlockingClassNames = ClassNames('ad-blocking', 'cliqz-feature', { - active: adBlockingActive, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - const smartBlockingClassNames = ClassNames('smart-blocking', 'cliqz-feature', { - active: smartBlockingActive, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - - return ( -
-
-
{this.getAntiTrackingTotal()}
-
- -
-
- { t('drawer_title_enable_anti_tracking') } -
-
-
-
{this.getAdBlockingTotal()}
-
- -
-
- { t('drawer_title_enable_ad_block') } -
-
-
-
{this.getSmartBlockingTotal()}
-
- -
-
- { t('drawer_title_enable_smart_block') } -
-
-
- ); - } -} - -export default CliqzFeatures; diff --git a/app/panel/components/BuildingBlocks/index.js b/app/panel/components/BuildingBlocks/index.js index 76554d518..92bc3d615 100644 --- a/app/panel/components/BuildingBlocks/index.js +++ b/app/panel/components/BuildingBlocks/index.js @@ -15,7 +15,7 @@ * @namespace PanelBuildingBlocks */ import ClickOutside from './ClickOutside'; -import CliqzFeatures from './CliqzFeatures'; +import CliqzFeature from './CliqzFeature'; import DonutGraph from './DonutGraph'; import GhosteryFeatures from './GhosteryFeatures'; import NotScanned from './NotScanned'; @@ -26,7 +26,7 @@ import RewardListItem from './RewardListItem'; export { ClickOutside, - CliqzFeatures, + CliqzFeature, DonutGraph, GhosteryFeatures, NotScanned, diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 9d766fa86..76c04041f 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -20,7 +20,7 @@ import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext'; import { sendMessage } from '../utils/msg'; import globals from '../../../src/classes/Globals'; import { - CliqzFeatures, + CliqzFeature, DonutGraph, GhosteryFeatures, NotScanned, @@ -324,9 +324,8 @@ class Summary extends React.Component { sbAllowed = 0; } const sbAdjust = enable_smart_block && (sbBlocked - sbAllowed) || 0; - const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; - + const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; const summaryViewStatsButton = ClassNames('Summary__statsButton', 'g-tooltip', { hide: is_expert @@ -470,60 +469,61 @@ class Summary extends React.Component { // // Enhanced Anti-Tracking, Enhanced Ad Blocking, Smart Blocking - const isCliqzInactive = this.props.paused_blocking || this.props.sitePolicy || this.state.disableBlocking || IS_CLIQZ; - const cliqzFeatures = ( -
-
- -
-
- -
-
- -
+ const isCliqzInactive = paused_blocking || sitePolicy || this.state.disableBlocking || IS_CLIQZ; + const cliqzAntiTracking = ( +
+ +
- /* -
- + +
- */ - ); + ) + const cliqzSmartBlock = ( +
+ + +
+ ) const statsNavButton = (
@@ -570,7 +570,11 @@ class Summary extends React.Component { )} {trustRestrictAndPause} - {cliqzFeatures} +
+ {cliqzAntiTracking} + {cliqzAdBlock} + {cliqzSmartBlock} +
{statsNavButton} {!showCondensed && plusUpgradeBannerOrSubscriberIcon} From 0204bedadb5a3de62e4c9f9e4e70eef554df6598 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 9 May 2019 10:57:00 -0400 Subject: [PATCH 064/131] Work to generalize GhosteryFeatures out to GhosteryFeature. CSS and JSX cleanup in CliqzFeature and Summary and summary partial --- .../BuildingBlocks/CliqzFeature.jsx | 5 +- .../BuildingBlocks/GhosteryFeature.jsx | 175 ++++++++++++++++++ app/panel/components/BuildingBlocks/index.js | 4 +- app/panel/components/Summary.jsx | 127 +++++++------ app/scss/partials/_summary.scss | 6 +- 5 files changed, 254 insertions(+), 63 deletions(-) create mode 100644 app/panel/components/BuildingBlocks/GhosteryFeature.jsx diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 0bd809971..c5d063d13 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -67,12 +67,13 @@ class CliqzFeature extends React.Component { active: this.props.active, clickable: !this.props.cliqzInactive, notClickable: this.props.cliqzInactive, - }) + }); const featureName = `drawer_title_${this.props.feature}`; + return (
{this.getCount()}
-
+
{ t({ featureName }) }
diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx new file mode 100644 index 000000000..a5011e342 --- /dev/null +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -0,0 +1,175 @@ +/** + * Ghostery Feature 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 ClassNames from 'classnames'; + +/** + * @class Rendering and interaction for Ghostery feature button toggles + * @memberof PanelBuildingBlocks + */ +class GhosteryFeature extends React.Component { + constructor(props) { + super(props); + + this.handleClick = this.handleClick.bind(this); + } + + handleClick() { + if (this.props.blockingPausedOrDisabled) { + return; + } + + this.props.handleClick(this.props.type); + } + + render() { + const { + blockingPausedOrDisabled, + sitePolicy, + type + } = this.props; + + const typeModifier = `GhosteryFeatureButton--${type}`; + const active = (type === 'trust' && sitePolicy === 2) || (type === 'restrict' && sitePolicy === 1); + const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', {typeModifier}, { + 'GhosteryFeatureButton--active': active, + clickable: !blockingPausedOrDisabled, + notClickable: blockingPausedOrDisabled, + }); + + return ( +
+ + {text} + +
+ ) + }) + + return ( +
+ + + {this.getTrustText()} + + + +
+
+ + + {this.getRestrictText()} + + + +
+ ); + } +} + +class GhosteryFeatures extends React.Component { + constructor(props) { + super(props); + + // Event Bindings + this.clickTrustButton = this.clickTrustButton.bind(this); + this.clickCustomButton = this.clickCustomButton.bind(this); + this.clickRestrictButton = this.clickRestrictButton.bind(this); + this.getTrustText = this.getTrustText.bind(this); + this.getRestrictText = this.getRestrictText.bind(this); + } + + /** + * Gets the text for the Trust Button under different conditions + * @return {String} The text for the Trust Button as a string + */ + getTrustText() { + if (this.props.isCondensed) { + return ''; + } else if (this.props.sitePolicy === 2) { + return t('summary_trust_site_active'); + } + return t('summary_trust_site'); + } + + /** + * Gets the text for the Restrict Button under different conditions + * @return {String} The text for the Restrict Button as a string + */ + getRestrictText() { + if (this.props.isCondensed) { + return ''; + } else if (this.props.sitePolicy === 1) { + return t('summary_restrict_site_active'); + } + return t('summary_restrict_site'); + } + + /** + * React's required render function. Returns JSX + * @return {JSX} JSX for rendering the Ghostery Features portion of the Summary View + */ + render() { + const { + isInactive, + isStacked, + isCondensed, + sitePolicy + } = this.props; + + const buttonGroupClassNames = ClassNames('button-group', { + inactive: isInactive, + stacked: isStacked, + }); + const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', { + 'button-top': isCondensed && isStacked, + condensed: isCondensed, + active: sitePolicy === 2, + clickable: !isInactive, + 'not-clickable': isInactive, + }); + const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', { + 'button-center': isCondensed && isStacked, + condensed: isCondensed, + active: sitePolicy === 1, + clickable: !isInactive, + 'not-clickable': isInactive, + }); + + return ( +
+
+
+ + + {this.getTrustText()} + + + +
+
+ + + {this.getRestrictText()} + + + +
+
+
+ ); + } +} + +export default GhosteryFeatures; diff --git a/app/panel/components/BuildingBlocks/index.js b/app/panel/components/BuildingBlocks/index.js index 92bc3d615..e689a77de 100644 --- a/app/panel/components/BuildingBlocks/index.js +++ b/app/panel/components/BuildingBlocks/index.js @@ -17,7 +17,7 @@ import ClickOutside from './ClickOutside'; import CliqzFeature from './CliqzFeature'; import DonutGraph from './DonutGraph'; -import GhosteryFeatures from './GhosteryFeatures'; +import GhosteryFeature from './GhosteryFeature'; import NotScanned from './NotScanned'; import PauseButton from './PauseButton'; import ToggleSlider from './ToggleSlider'; @@ -28,7 +28,7 @@ export { ClickOutside, CliqzFeature, DonutGraph, - GhosteryFeatures, + GhosteryFeature, NotScanned, PauseButton, ToggleSlider, diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 76c04041f..a42b047a4 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -22,7 +22,7 @@ import globals from '../../../src/classes/Globals'; import { CliqzFeature, DonutGraph, - GhosteryFeatures, + GhosteryFeature, NotScanned, PauseButton } from './BuildingBlocks'; @@ -426,47 +426,59 @@ class Summary extends React.Component {
); + // + //
+ // + // + // {!abPause && pauseButtonComponent} + //
// Trust, Restrict, Pause - const trustRestrictAndPause = ( -
-
- -
-
- -
-
- -
+ const trustButtonText = showCondensed ? + '' : + (sitePolicy === 2 ? t('summary_trust_site_active') : t('summary_trust_site'); + const ghosteryTrustButton = ( +
+ +
+ ); + const ghosteryRestrictButton = ( +
+ +
+ ); + const pauseButton = ( +
+
); - // - // - // // Enhanced Anti-Tracking, Enhanced Ad Blocking, Smart Blocking const isCliqzInactive = paused_blocking || sitePolicy || this.state.disableBlocking || IS_CLIQZ; @@ -474,48 +486,48 @@ class Summary extends React.Component {
- ) + ); const cliqzAdBlock = (
- ) + ); const cliqzSmartBlock = (
- ) + ); const statsNavButton = (
@@ -552,7 +564,6 @@ class Summary extends React.Component { 'Summary--expert': is_expert && !is_expanded, 'Summary--condensed': showCondensed, }); - return (
{!showCondensed && this.state.disableBlocking && ()} @@ -569,8 +580,12 @@ class Summary extends React.Component {
)} - {trustRestrictAndPause} -
+
/* inactive, stacked */ + {ghosteryTrustButton} + {ghosteryRestrictButton} + {pauseButton} +
+
/* inactive, stacked */ {cliqzAntiTracking} {cliqzAdBlock} {cliqzSmartBlock} diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 6d6ebe92e..4945ba3c3 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -104,7 +104,7 @@ padding: 0 20px; } - .Summary__buttonContainer--middle { + .Summary__ghosteryFeatureContainer--middle { margin: 12px 28px; } @@ -138,7 +138,7 @@ overflow-x: hidden; } - .Summary__buttonContainer--middle { + .Summary__ghosteryFeatureContainer--middle { margin: 12px 28px; } @@ -189,7 +189,7 @@ height: 162px; } -.Summary__buttonContainer { +.Summary__ghosteryFeatureContainer { text-align: center; display: inline-block; } From d6db970b9bf051aa1c5bde15d0588d8c6a000dce Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 9 May 2019 13:48:50 -0400 Subject: [PATCH 065/131] Finish implementation of GhosteryFeature. Remove GhosteryFeatures. --- .../BuildingBlocks/GhosteryFeature.jsx | 153 +++++------------- .../BuildingBlocks/GhosteryFeatures.jsx | 145 ----------------- app/panel/components/Summary.jsx | 7 +- 3 files changed, 39 insertions(+), 266 deletions(-) delete mode 100644 app/panel/components/BuildingBlocks/GhosteryFeatures.jsx diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index a5011e342..cfaa3a550 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -13,6 +13,7 @@ import React from 'react'; import ClassNames from 'classnames'; +import Tooltip from '../Tooltip'; /** * @class Rendering and interaction for Ghostery feature button toggles @@ -25,6 +26,36 @@ class GhosteryFeature extends React.Component { this.handleClick = this.handleClick.bind(this); } + getButtonText() { + const { sitePolicy, showText, type } = this.props; + + if (!showText) { + return ''; + } + + switch (type) { + case 'trust': + return (sitePolicy === 2 ? t('summary_trust_site_active') : t('summary_trust_site')); + case 'restrict': + return (sitePolicy === 1 ? t('summary_restrict_site_active') : t('summary_restrict_site')); + default: + return 'Check button type you are passing to GhosteryFeature for typos and make sure it is being handled by getButtonText'; + } + } + + getTooltipText() { + const { sitePolicy, type } = this.props; + + switch (type) { + case 'trust': + return (sitePolicy === 2 ? t('tooltip_trust_on') : t('tooltip_trust_off')); + case 'restrict': + return (sitePolicy === 1 ? t('tooltip_restrict_on') : t('tooltip_restrict')); + default: + return 'Check button type you are passing to GhosteryFeature for typos and make sure it is being handled by getTooltipText'; + } + } + handleClick() { if (this.props.blockingPausedOrDisabled) { return; @@ -37,12 +68,13 @@ class GhosteryFeature extends React.Component { const { blockingPausedOrDisabled, sitePolicy, + tooltipPosition, type } = this.props; const typeModifier = `GhosteryFeatureButton--${type}`; const active = (type === 'trust' && sitePolicy === 2) || (type === 'restrict' && sitePolicy === 1); - const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', {typeModifier}, { + const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', { typeModifier }, { 'GhosteryFeatureButton--active': active, clickable: !blockingPausedOrDisabled, notClickable: blockingPausedOrDisabled, @@ -50,126 +82,15 @@ class GhosteryFeature extends React.Component { return (
- - {text} - -
- ) - }) - - return ( -
- - {this.getTrustText()} + + {this.getButtonText()} - -
-
- - - {this.getRestrictText()} - - - -
- ); - } -} - -class GhosteryFeatures extends React.Component { - constructor(props) { - super(props); - - // Event Bindings - this.clickTrustButton = this.clickTrustButton.bind(this); - this.clickCustomButton = this.clickCustomButton.bind(this); - this.clickRestrictButton = this.clickRestrictButton.bind(this); - this.getTrustText = this.getTrustText.bind(this); - this.getRestrictText = this.getRestrictText.bind(this); - } - - /** - * Gets the text for the Trust Button under different conditions - * @return {String} The text for the Trust Button as a string - */ - getTrustText() { - if (this.props.isCondensed) { - return ''; - } else if (this.props.sitePolicy === 2) { - return t('summary_trust_site_active'); - } - return t('summary_trust_site'); - } - - /** - * Gets the text for the Restrict Button under different conditions - * @return {String} The text for the Restrict Button as a string - */ - getRestrictText() { - if (this.props.isCondensed) { - return ''; - } else if (this.props.sitePolicy === 1) { - return t('summary_restrict_site_active'); - } - return t('summary_restrict_site'); - } - - /** - * React's required render function. Returns JSX - * @return {JSX} JSX for rendering the Ghostery Features portion of the Summary View - */ - render() { - const { - isInactive, - isStacked, - isCondensed, - sitePolicy - } = this.props; - - const buttonGroupClassNames = ClassNames('button-group', { - inactive: isInactive, - stacked: isStacked, - }); - const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', { - 'button-top': isCondensed && isStacked, - condensed: isCondensed, - active: sitePolicy === 2, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', { - 'button-center': isCondensed && isStacked, - condensed: isCondensed, - active: sitePolicy === 1, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - - return ( -
-
-
- - - {this.getTrustText()} - - - -
-
- - - {this.getRestrictText()} - - - -
-
+
); } } -export default GhosteryFeatures; +export default GhosteryFeature; diff --git a/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx b/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx deleted file mode 100644 index f049e58c8..000000000 --- a/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx +++ /dev/null @@ -1,145 +0,0 @@ -/** - * Ghostery Features 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 ClassNames from 'classnames'; -import Tooltip from '../Tooltip'; - -/** - * @class Implements buttons to render and toggle for Ghostery's features on/off. - * @memberof PanelBuildingBlocks - */ -class GhosteryFeatures extends React.Component { - constructor(props) { - super(props); - - // Event Bindings - this.clickTrustButton = this.clickTrustButton.bind(this); - this.clickCustomButton = this.clickCustomButton.bind(this); - this.clickRestrictButton = this.clickRestrictButton.bind(this); - this.getTrustText = this.getTrustText.bind(this); - this.getRestrictText = this.getRestrictText.bind(this); - } - - /** - * Gets the text for the Trust Button under different conditions - * @return {String} The text for the Trust Button as a string - */ - getTrustText() { - if (this.props.isCondensed) { - return ''; - } else if (this.props.sitePolicy === 2) { - return t('summary_trust_site_active'); - } - return t('summary_trust_site'); - } - - /** - * Gets the text for the Restrict Button under different conditions - * @return {String} The text for the Restrict Button as a string - */ - getRestrictText() { - if (this.props.isCondensed) { - return ''; - } else if (this.props.sitePolicy === 1) { - return t('summary_restrict_site_active'); - } - return t('summary_restrict_site'); - } - - /** - * Handles the click event for the Trust Site button - */ - clickTrustButton() { - if (this.props.isInactive) { - return; - } - this.props.clickButton('trust'); - } - - /** - * Handles the click event for the Custom Settings button - */ - clickCustomButton() { - if (this.props.isInactive) { - return; - } - this.props.clickButton('custom'); - } - - /** - * Handles the click event for the Restrict Site button - */ - clickRestrictButton() { - if (this.props.isInactive) { - return; - } - this.props.clickButton('restrict'); - } - /** - * React's required render function. Returns JSX - * @return {JSX} JSX for rendering the Ghostery Features portion of the Summary View - */ - render() { - const { - isInactive, - isStacked, - isCondensed, - sitePolicy - } = this.props; - - const buttonGroupClassNames = ClassNames('button-group', { - inactive: isInactive, - stacked: isStacked, - }); - const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', { - 'button-top': isCondensed && isStacked, - condensed: isCondensed, - active: sitePolicy === 2, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', { - 'button-center': isCondensed && isStacked, - condensed: isCondensed, - active: sitePolicy === 1, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - - return ( -
-
-
- - - {this.getTrustText()} - - - -
-
- - - {this.getRestrictText()} - - - -
-
-
- ); - } -} - -export default GhosteryFeatures; diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index a42b047a4..068eb82b8 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -441,9 +441,6 @@ class Summary extends React.Component { //
// Trust, Restrict, Pause - const trustButtonText = showCondensed ? - '' : - (sitePolicy === 2 ? t('summary_trust_site_active') : t('summary_trust_site'); const ghosteryTrustButton = (
); From 5ecba97d1e1f392b051b9b782d411e979a4b3eb3 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 10:45:35 -0400 Subject: [PATCH 066/131] Fix typo & comment placement error --- app/panel/components/BuildingBlocks/GhosteryFeature.jsx | 2 +- app/panel/components/Summary.jsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index cfaa3a550..b35285f25 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -87,7 +87,7 @@ class GhosteryFeature extends React.Component { {this.getButtonText()} - +
); } diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 068eb82b8..81f1e7ea0 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -561,6 +561,7 @@ class Summary extends React.Component { 'Summary--expert': is_expert && !is_expanded, 'Summary--condensed': showCondensed, }); + // inactive, stacked on ghosteryFeaturesContainer and cliqzFeaturesContainer return (
{!showCondensed && this.state.disableBlocking && ()} @@ -577,12 +578,12 @@ class Summary extends React.Component {
)} -
/* inactive, stacked */ +
{ghosteryTrustButton} {ghosteryRestrictButton} {pauseButton}
-
/* inactive, stacked */ +
{cliqzAntiTracking} {cliqzAdBlock} {cliqzSmartBlock} From efd5d67688c633fc1c48a32b1c2d237717816fa7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 10:52:41 -0400 Subject: [PATCH 067/131] Update prop name in CliqzFeature --- app/panel/components/BuildingBlocks/CliqzFeature.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index c5d063d13..d433ab824 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -35,7 +35,7 @@ class CliqzFeature extends React.Component { let blockedCount; let unblockedCount; - switch (this.props.feature) { + switch (this.props.type) { case 'enable_anti_tracking': return this.props.data && this.props.data.totalUnsafeCount || 0; case 'enable_ad_block': @@ -62,13 +62,13 @@ class CliqzFeature extends React.Component { } render() { - const specificFeatureModifier = `CliqzFeature--${this.props.feature}`; + const specificFeatureModifier = `CliqzFeature--${this.props.type}`; const cliqzFeatureClassNames = ClassNames('CliqzFeature', specificFeatureModifier, { active: this.props.active, clickable: !this.props.cliqzInactive, notClickable: this.props.cliqzInactive, }); - const featureName = `drawer_title_${this.props.feature}`; + const featureName = `drawer_title_${this.props.type}`; return (
From a29bbfddaabced21af7c73e30be3e43916534423 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 11:10:22 -0400 Subject: [PATCH 068/131] Rewrite feature-name string interpolation in CliqzFeature --- app/panel/components/BuildingBlocks/CliqzFeature.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index d433ab824..db0c14bc9 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -68,14 +68,17 @@ class CliqzFeature extends React.Component { clickable: !this.props.cliqzInactive, notClickable: this.props.cliqzInactive, }); - const featureName = `drawer_title_${this.props.type}`; + const featureName = t(`drawer_title_${this.props.type}`); + + console.error('IVZ featureName in CliqzFeature#render:'); + console.error(featureName); return (
{this.getCount()}
- { t({ featureName }) } + {featureName}
); From db38c79e53c1d937a530f6875614d9c4130ceab7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 11:14:47 -0400 Subject: [PATCH 069/131] Send the right data to ad block and smart block Cliqz features --- app/panel/components/Summary.jsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 81f1e7ea0..0f3a83d6b 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -426,19 +426,6 @@ class Summary extends React.Component {
); - // - //
- // - // - // {!abPause && pauseButtonComponent} - //
// Trust, Restrict, Pause const ghosteryTrustButton = ( @@ -502,7 +489,7 @@ class Summary extends React.Component { Date: Mon, 13 May 2019 12:38:36 -0400 Subject: [PATCH 070/131] Clean up CliqzFeature --- .../BuildingBlocks/CliqzFeature.jsx | 102 +++++++++++++----- app/panel/components/Summary.jsx | 36 +++---- 2 files changed, 85 insertions(+), 53 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index db0c14bc9..b8e878dcf 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -13,6 +13,7 @@ import React from 'react'; import ClassNames from 'classnames'; +import Tooltip from '../Tooltip'; /** * @class Implements rendering and interaction for Cliqz feature icon toggles @@ -23,55 +24,93 @@ class CliqzFeature extends React.Component { constructor(props) { super(props); - // Event Bindings - this.getCount = this.getCount.bind(this); this.clickCliqzFeature = this.clickCliqzFeature.bind(this); } getCount() { - if (!this.props.active) { + const { active, data, type } = this.props; + + if (!active) { return '-'; } - let blockedCount; - let unblockedCount; - switch (this.props.type) { - case 'enable_anti_tracking': - return this.props.data && this.props.data.totalUnsafeCount || 0; - case 'enable_ad_block': - return this.props.data && this.props.data.totalCount || 0; - case 'enable_smart_block': - blockedCount = this.props.data && Object.keys(this.props.data.blocked).length || 0; - unblockedCount = this.props.data && Object.keys(this.props.data.unblocked).length || 0; - return blockedCount + unblockedCount; - default: - return 0; + if (type === 'anti_tracking') { + return data && data.totalUnsafeCount || 0; + } else if (type === 'ad_block') { + return data && data.totalCount || 0; + } else if (type === 'smart_block') { + const blockedCount = data && Object.keys(data.blocked).length || 0; + const unblockedCount = data && Object.keys(data.unblocked).length || 0; + return blockedCount + unblockedCount; + } + + return 0; + } + + getTooltipBodyText() { + const { active, isTooltipBody, type } = this.props; + + if (!isTooltipBody) { + return false; + } + + return active ? + t(`tooltip_${type}_body_on`) : + t(`tooltip_${type}_body`); + } + + getTooltipHeaderText() { + const { isTooltipHeader, type } = this.props; + + if (isTooltipHeader) { + return false; } + + return t(`tooltip_${type}`); + } + + getAlertText() { + const { active, type } = this.props; + + return active ? + t(`alert_${type}_on`) : + t(`alert_${type}`); } clickCliqzFeature() { - if (this.props.cliqzInactive) { + const { + active, + clickButton, + cliqzInactive, + type + } = this.props; + + if (cliqzInactive) { return; } - this.props.clickButton({ - feature: this.props.type, - status: this.props.active, - text: !this.props.active ? t(this.props.onLocaleKey) : t(this.props.offLocaleKey) + clickButton({ + feature: `enable_${type}`, + status: active, + text: this.getAlertText() }); } render() { - const specificFeatureModifier = `CliqzFeature--${this.props.type}`; + const { + active, + cliqzInactive, + tooltipPosition, + type + } = this.props; + + const specificFeatureModifier = `CliqzFeature--${type}`; const cliqzFeatureClassNames = ClassNames('CliqzFeature', specificFeatureModifier, { - active: this.props.active, - clickable: !this.props.cliqzInactive, - notClickable: this.props.cliqzInactive, + active, + clickable: !cliqzInactive, + notClickable: cliqzInactive, }); - const featureName = t(`drawer_title_${this.props.type}`); - - console.error('IVZ featureName in CliqzFeature#render:'); - console.error(featureName); + const featureName = t(`drawer_title_${type}`); return (
@@ -80,6 +119,11 @@ class CliqzFeature extends React.Component {
{featureName}
+
); } diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 0f3a83d6b..c345fa163 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -470,17 +470,13 @@ class Summary extends React.Component {
-
); @@ -488,17 +484,13 @@ class Summary extends React.Component {
-
); @@ -506,17 +498,13 @@ class Summary extends React.Component {
-
); From 5c55d73d223a2e12780f9a99d4f4f87754b41a88 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 12:53:00 -0400 Subject: [PATCH 071/131] Cleanup Summary#render --- app/panel/components/Summary.jsx | 49 +++++++++++++++++--------------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index c345fa163..cc3d170c6 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -307,8 +307,10 @@ class Summary extends React.Component { paused_blocking, sitePolicy, trackerCounts, - user + user, } = this.props; + const { disableBlocking, trackerLatencyTotal } = this.state; + const plusSubscriber = user && user.subscriptionsPlus; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; @@ -343,7 +345,7 @@ class Summary extends React.Component { const totalTrackersFound = (
- {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + {trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} @@ -410,9 +412,9 @@ class Summary extends React.Component { ); const pageLoadTimeClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--pageLoadTime', { - 'GhosteryKVReadout--pageLoadTime-fast': this.state.trackerLatencyTotal < 5, - 'GhosteryKVReadout--pageLoadTime-slow': this.state.trackerLatencyTotal > 10, - 'GhosteryKVReadout--pageLoadTime-medium': this.state.trackerLatencyTotal > 5 && this.state.trackerLatencyTotal < 10, + 'GhosteryKVReadout--pageLoadTime-fast': trackerLatencyTotal < 5, + 'GhosteryKVReadout--pageLoadTime-slow': trackerLatencyTotal > 10, + 'GhosteryKVReadout--pageLoadTime-medium': trackerLatencyTotal > 5 && trackerLatencyTotal < 10, 'GhosteryKVReadout--withoutKey': showCondensed, 'GhosteryKVReadout--summaryCondensed': showCondensed, }); @@ -421,7 +423,7 @@ class Summary extends React.Component {
{t('page_load')} - {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} + {trackerLatencyTotal ? `${trackerLatencyTotal} ${t('settings_seconds')}` : '-'}
@@ -434,7 +436,7 @@ class Summary extends React.Component { handleClick={this.clickSitePolicy} type="trust" sitePolicy={sitePolicy} - blockingPausedOrDisabled={paused_blocking || this.state.disableBlocking} + blockingPausedOrDisabled={paused_blocking || disableBlocking} showText={showCondensed} tooltipPosition={is_expert ? 'right' : 'top'} /> @@ -444,9 +446,10 @@ class Summary extends React.Component {
@@ -454,7 +457,7 @@ class Summary extends React.Component { const pauseButton = (
- {!showCondensed && this.state.disableBlocking && ()} - {!showCondensed && !this.state.disableBlocking && donut} - {!showCondensed && !this.state.disableBlocking && !is_expert && pageHostReadout} + {!showCondensed && disableBlocking && ()} + {!showCondensed && !disableBlocking && donut} + {!showCondensed && !disableBlocking && !is_expert && pageHostReadout} - {showCondensed && !this.state.disableBlocking && totalTrackersFound} + {showCondensed && !disableBlocking && totalTrackersFound} - {!this.state.disableBlocking && totalTrackersBlocked} - {!this.state.disableBlocking && totalRequestsModified} - {!this.state.disableBlocking && pageLoadTime} + {!disableBlocking && totalTrackersBlocked} + {!disableBlocking && totalRequestsModified} + {!disableBlocking && pageLoadTime} - {showCondensed && this.state.disableBlocking && is_expert && ( + {showCondensed && disableBlocking && is_expert && (
)} From b74837f7d8317a75f281aafe08fcdfc8444684e9 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 14:56:15 -0400 Subject: [PATCH 072/131] Break up Summary#render with render helper functions --- app/panel/components/Summary.jsx | 74 +++++++++++++++++++------------- 1 file changed, 43 insertions(+), 31 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index cc3d170c6..57f697f4e 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -290,6 +290,47 @@ class Summary extends React.Component { this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); } + /** + * Render helper for the stats nav button + * @return {JSX} JSX for rendering the stats nav button + */ + renderStatsNavButton() { + const summaryViewStatsButton = ClassNames('Summary__statsButton', 'g-tooltip', { + hide: this.props.is_expert + }); + + return ( +
+ + +
+ ); + } + + /** + * Render helper for the plus upgrade banner or subscriber icon + * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon + */ + renderPlusUpgradeBannerOrSubscriberIcon() { + const { user } = this.props; + const plusSubscriber = user && user.subscriptionsPlus; + + return ( +
+ {plusSubscriber && + + } + + {!plusSubscriber && +
+ {t('subscription_upgrade_to')} + +
+ } +
+ ); + } + /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Summary View of the panel @@ -307,11 +348,8 @@ class Summary extends React.Component { paused_blocking, sitePolicy, trackerCounts, - user, } = this.props; const { disableBlocking, trackerLatencyTotal } = this.state; - - const plusSubscriber = user && user.subscriptionsPlus; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; @@ -329,10 +367,6 @@ class Summary extends React.Component { const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; - const summaryViewStatsButton = ClassNames('Summary__statsButton', 'g-tooltip', { - hide: is_expert - }); - let totalTrackersBlockedCount; if (paused_blocking || sitePolicy === 2) { totalTrackersBlockedCount = 0; @@ -512,28 +546,6 @@ class Summary extends React.Component {
); - const statsNavButton = ( -
- - -
- ); - - const plusUpgradeBannerOrSubscriberIcon = ( -
- {plusSubscriber && - - } - - {!plusSubscriber && -
- {t('subscription_upgrade_to')} - -
- } -
- ); - const summaryClassNames = ClassNames('Summary', { 'Summary--simple': !is_expert, 'Summary--expert': is_expert && !is_expanded, @@ -566,9 +578,9 @@ class Summary extends React.Component { {cliqzAdBlock} {cliqzSmartBlock}
- {statsNavButton} + {this.renderStatsNavButton()} - {!showCondensed && plusUpgradeBannerOrSubscriberIcon} + {!showCondensed && this.renderPlusUpgradeBannerOrSubscriberIcon()}
); } From a1df93dfb607c73eb903309ec87ba9351d5ba6fc Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 15:08:18 -0400 Subject: [PATCH 073/131] Factor donut and page host readout rendering to render helpers in Summary --- app/panel/components/Summary.jsx | 81 +++++++++++++++++++++----------- 1 file changed, 54 insertions(+), 27 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 57f697f4e..603326371 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -290,6 +290,58 @@ class Summary extends React.Component { this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); } + /** + * Render helper for the donut + * @return {JSX} JSX for rendering the donut + */ + renderDonut() { + const { + adBlock, + antiTracking, + categories, + enable_ad_block, + enable_anti_tracking, + is_expert, + paused_blocking, + sitePolicy, + trackerCounts, + } = this.props; + const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; + const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; + + return ( +
+ +
+ ); + } + + /** + * Render helper for the page host readout + * @return {JSX} JSX for rendering the page host readout + */ + renderPageHostReadout() { + const pageHost = this.props.pageHost || 'page_host'; + const hidePageHost = (pageHost.split('.').length < 2); + const pageHostContainerClassNames = ClassNames('Summary__pageHostContainer', { + invisible: hidePageHost, + }); + + return ( +
+ {pageHost} +
+ ); + } + /** * Render helper for the stats nav button * @return {JSX} JSX for rendering the stats nav button @@ -354,8 +406,6 @@ class Summary extends React.Component { const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; let sbBlocked = smartBlock && smartBlock.blocked && Object.keys(smartBlock.blocked).length || 0; - const pageHost = this.props.pageHost || 'page_host'; - const hidePageHost = (pageHost.split('.').length < 2); if (sbBlocked === trackerCounts.sbBlocked) { sbBlocked = 0; } @@ -388,29 +438,6 @@ class Summary extends React.Component {
); - const donut = ( -
- -
- ); - - const pageHostContainerClassNames = ClassNames('Summary__pageHostContainer', { - invisible: hidePageHost, - }); - const pageHostReadout = ( -
- {pageHost} -
- ); - const totalTrackersBlockedContainerClassNames = ClassNames('Summary__pageStatContainer', { 'Ghostery--clickable': is_expert, }); @@ -555,8 +582,8 @@ class Summary extends React.Component { return (
{!showCondensed && disableBlocking && ()} - {!showCondensed && !disableBlocking && donut} - {!showCondensed && !disableBlocking && !is_expert && pageHostReadout} + {!showCondensed && !disableBlocking && this.renderDonut()} + {!showCondensed && !disableBlocking && !is_expert && this.renderPageHostReadout()} {showCondensed && !disableBlocking && totalTrackersFound} From 1b6c65b1501afeb98980391d8a0ebd1138a1e672 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 15:31:42 -0400 Subject: [PATCH 074/131] Factor sbBlocked, sbAllowed, sbAdjust, and totalTrackersBlockedCount out to helper methods in Summary --- app/panel/components/Summary.jsx | 148 ++++++++++++++++++++++--------- 1 file changed, 108 insertions(+), 40 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 603326371..a4b376cf5 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -342,6 +342,112 @@ class Summary extends React.Component { ); } + /** + * Render helper for the total trackers found readout shown in condensed view + * @return {JSX} JSX for rendering the condensed view total trackers found readout + */ + renderTotalTrackersFound() { + const { + adBlock, + antiTracking, + enable_ad_block, + enable_anti_tracking, + trackerCounts, + } = this.props; + const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; + const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; + + return ( +
+ + {trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + + +
+ ); + } + + sbBlocked() { + const { smartBlock, trackerCounts } = this.props; + + let sbBlocked = smartBlock && smartBlock.blocked && Object.keys(smartBlock.blocked).length || 0; + if (sbBlocked === trackerCounts.sbBlocked) { + sbBlocked = 0; + } + + return sbBlocked; + } + + sbAllowed() { + const { smartBlock, trackerCounts } = this.props; + + let sbAllowed = smartBlock && smartBlock.unblocked && Object.keys(smartBlock.unblocked).length || 0; + if (sbAllowed === trackerCounts.sbAllowed) { + sbAllowed = 0; + } + + return sbAllowed; + } + + sbAdjust() { + const { enable_smart_block } = this.props; + + return enable_smart_block && (this.sbBlocked() - this.sbAllowed()) || 0; + } + + totalTrackersBlockedCount() { + const { + paused_blocking, + sitePolicy, + trackerCounts + } = this.props; + + let totalTrackersBlockedCount; + if (paused_blocking || sitePolicy === 2) { + totalTrackersBlockedCount = 0; + } else if (sitePolicy === 1) { + totalTrackersBlockedCount = trackerCounts.blocked + trackerCounts.allowed || 0; + } else { + totalTrackersBlockedCount = trackerCounts.blocked + this.sbAdjust() || 0; + } + + return totalTrackersBlockedCount; + } + + /** + * Render helper for the total trackers blocked readout + * @return {JSX} JSX for rendering the total trackers blocked readout + */ + renderTotalTrackersBlocked() { + const { + is_expanded, + is_expert, + } = this.props; + const isCondensed = is_expert && is_expanded; + + const totalTrackersBlockedContainerClassNames = ClassNames('Summary__pageStatContainer', { + 'Ghostery--clickable': is_expert, + }); + const totalTrackersBlockedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalTrackersBlocked', { + 'GhosteryKVReadout--withoutKey': isCondensed, + 'GhosteryKVReadout--summaryCondensed': isCondensed, + }); + + return ( +
+
+ {t('trackers_blocked')} + + {this.totalTrackersBlockedCount()} + +
+
+ ); + } + /** * Render helper for the stats nav button * @return {JSX} JSX for rendering the stats nav button @@ -417,44 +523,6 @@ class Summary extends React.Component { const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; - let totalTrackersBlockedCount; - if (paused_blocking || sitePolicy === 2) { - totalTrackersBlockedCount = 0; - } else if (sitePolicy === 1) { - totalTrackersBlockedCount = trackerCounts.blocked + trackerCounts.allowed || 0; - } else { - totalTrackersBlockedCount = trackerCounts.blocked + sbAdjust || 0; - } - - const totalTrackersFound = ( -
- - {trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} - - -
- ); - - const totalTrackersBlockedContainerClassNames = ClassNames('Summary__pageStatContainer', { - 'Ghostery--clickable': is_expert, - }); - const totalTrackersBlockedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalTrackersBlocked', { - 'GhosteryKVReadout--withoutKey': showCondensed, - 'GhosteryKVReadout--summaryCondensed': showCondensed, - }); - const totalTrackersBlocked = ( -
-
- {t('trackers_blocked')} - - {totalTrackersBlockedCount} - -
-
- ); const totalRequestsModifiedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalRequestsModified', { 'GhosteryKVReadout--withoutKey': showCondensed, @@ -585,9 +653,9 @@ class Summary extends React.Component { {!showCondensed && !disableBlocking && this.renderDonut()} {!showCondensed && !disableBlocking && !is_expert && this.renderPageHostReadout()} - {showCondensed && !disableBlocking && totalTrackersFound} + {showCondensed && !disableBlocking && this.renderTotalTrackersFound()} - {!disableBlocking && totalTrackersBlocked} + {!disableBlocking && this.renderTotalTrackersBlocked()} {!disableBlocking && totalRequestsModified} {!disableBlocking && pageLoadTime} From 9487eb25a4f16b4f6abb616f9f30661f7900695e Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 15:35:58 -0400 Subject: [PATCH 075/131] Factor antiTrackUnsafe, adBlockBlocked, and totalTrackersFound out to helper methods in Summary --- app/panel/components/Summary.jsx | 36 ++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index a4b376cf5..15f2070bb 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -347,20 +347,10 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the condensed view total trackers found readout */ renderTotalTrackersFound() { - const { - adBlock, - antiTracking, - enable_ad_block, - enable_anti_tracking, - trackerCounts, - } = this.props; - const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; - const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; - return (
- {trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + {this.totalTrackersFound()} Date: Mon, 13 May 2019 15:50:02 -0400 Subject: [PATCH 076/131] Continue refactor of Summary --- app/panel/components/Summary.jsx | 51 ++++++++++++++------------------ 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 15f2070bb..777d7d712 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -279,15 +279,19 @@ class Summary extends React.Component { this.props.actions.toggleCliqzFeature(feature, status); } + isPlusSubscriber() { + const { user } = this.props; + + return user && user.subscriptionsPlus; + } + /** * Handles clicking on the green upgrade banner or gold subscriber badge */ clickUpgradeBannerOrGoldPlusIcon = () => { // TODO check whether this is the message we want to be sending now sendMessage('ping', 'plus_panel_from_badge'); - const { user } = this.props; - const plusSubscriber = user && user.subscriptionsPlus; - this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); + this.props.history.push(this.isPlusSubscriber() ? '/subscription/info' : `/subscribe/${!!this.props.user}`); } /** @@ -296,18 +300,11 @@ class Summary extends React.Component { */ renderDonut() { const { - adBlock, - antiTracking, categories, - enable_ad_block, - enable_anti_tracking, is_expert, paused_blocking, sitePolicy, - trackerCounts, } = this.props; - const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; - const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; return (
@@ -315,7 +312,7 @@ class Summary extends React.Component { categories={categories} renderRedscale={sitePolicy === 1} renderGreyscale={paused_blocking} - totalCount={trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + totalCount={this.totalTrackersFound()} ghosteryFeatureSelect={sitePolicy} isSmall={is_expert} clickDonut={this.clickDonut} @@ -324,15 +321,24 @@ class Summary extends React.Component { ); } + pageHost() { + return this.props.pageHost || 'page_host'; + } + + hidePageHost(host = null) { + const pageHost = host || this.pageHost(); + + return (pageHost.split('.').length < 2); + } + /** * Render helper for the page host readout * @return {JSX} JSX for rendering the page host readout */ renderPageHostReadout() { - const pageHost = this.props.pageHost || 'page_host'; - const hidePageHost = (pageHost.split('.').length < 2); + const pageHost = this.pageHost(); const pageHostContainerClassNames = ClassNames('Summary__pageHostContainer', { - invisible: hidePageHost, + invisible: this.hidePageHost(pageHost), }); return ( @@ -484,16 +490,15 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon */ renderPlusUpgradeBannerOrSubscriberIcon() { - const { user } = this.props; - const plusSubscriber = user && user.subscriptionsPlus; + const isPlusSubscriber = this.isPlusSubscriber(); return (
- {plusSubscriber && + {isPlusSubscriber && } - {!plusSubscriber && + {!isPlusSubscriber &&
{t('subscription_upgrade_to')} @@ -519,21 +524,11 @@ class Summary extends React.Component { smartBlock, paused_blocking, sitePolicy, - trackerCounts, } = this.props; const { disableBlocking, trackerLatencyTotal } = this.state; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; - let sbBlocked = smartBlock && smartBlock.blocked && Object.keys(smartBlock.blocked).length || 0; - if (sbBlocked === trackerCounts.sbBlocked) { - sbBlocked = 0; - } - let sbAllowed = smartBlock && smartBlock.unblocked && Object.keys(smartBlock.unblocked).length || 0; - if (sbAllowed === trackerCounts.sbAllowed) { - sbAllowed = 0; - } - const sbAdjust = enable_smart_block && (sbBlocked - sbAllowed) || 0; const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; From ecd313948e8dfdb3b64cbc65372ff689651befed Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 13 May 2019 16:38:17 -0400 Subject: [PATCH 077/131] Factor out rendering of GhosteryFeature components to generic render helper function in Summary --- app/panel/components/Summary.jsx | 333 +++++++++++++++++-------------- 1 file changed, 179 insertions(+), 154 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 777d7d712..7d3e189fe 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -279,12 +279,6 @@ class Summary extends React.Component { this.props.actions.toggleCliqzFeature(feature, status); } - isPlusSubscriber() { - const { user } = this.props; - - return user && user.subscriptionsPlus; - } - /** * Handles clicking on the green upgrade banner or gold subscriber badge */ @@ -294,31 +288,10 @@ class Summary extends React.Component { this.props.history.push(this.isPlusSubscriber() ? '/subscription/info' : `/subscribe/${!!this.props.user}`); } - /** - * Render helper for the donut - * @return {JSX} JSX for rendering the donut - */ - renderDonut() { - const { - categories, - is_expert, - paused_blocking, - sitePolicy, - } = this.props; + isPlusSubscriber() { + const { user } = this.props; - return ( -
- -
- ); + return user && user.subscriptionsPlus; } pageHost() { @@ -331,41 +304,6 @@ class Summary extends React.Component { return (pageHost.split('.').length < 2); } - /** - * Render helper for the page host readout - * @return {JSX} JSX for rendering the page host readout - */ - renderPageHostReadout() { - const pageHost = this.pageHost(); - const pageHostContainerClassNames = ClassNames('Summary__pageHostContainer', { - invisible: this.hidePageHost(pageHost), - }); - - return ( -
- {pageHost} -
- ); - } - - /** - * Render helper for the total trackers found readout shown in condensed view - * @return {JSX} JSX for rendering the condensed view total trackers found readout - */ - renderTotalTrackersFound() { - return ( -
- - {this.totalTrackersFound()} - - -
- ); - } - adBlockBlocked() { const { adBlock, @@ -390,6 +328,10 @@ class Summary extends React.Component { return (trackerCounts.allowed + trackerCounts.blocked + this.antiTrackUnsafe() + this.adBlockBlocked()) || 0; } + requestsModifiedCount() { + return this.antiTrackUnsafe() + this.adBlockBlocked(); + } + sbBlocked() { const { smartBlock, trackerCounts } = this.props; @@ -437,16 +379,81 @@ class Summary extends React.Component { return totalTrackersBlockedCount; } + isCondensed() { + const { is_expanded, is_expert } = this.props; + + return (is_expert && is_expanded); + } + /** - * Render helper for the total trackers blocked readout - * @return {JSX} JSX for rendering the total trackers blocked readout + * Render helper for the donut + * @return {JSX} JSX for rendering the donut */ - renderTotalTrackersBlocked() { + renderDonut() { const { - is_expanded, + categories, is_expert, + paused_blocking, + sitePolicy, } = this.props; - const isCondensed = is_expert && is_expanded; + + return ( +
+ +
+ ); + } + + /** + * Render helper for the page host readout + * @return {JSX} JSX for rendering the page host readout + */ + renderPageHostReadout() { + const pageHost = this.pageHost(); + const pageHostContainerClassNames = ClassNames('Summary__pageHostContainer', { + invisible: this.hidePageHost(pageHost), + }); + + return ( +
+ {pageHost} +
+ ); + } + + /** + * Render helper for the total trackers found readout shown in condensed view + * @return {JSX} JSX for rendering the condensed view total trackers found readout + */ + renderTotalTrackersFound() { + return ( +
+ + {this.totalTrackersFound()} + + +
+ ); + } + + /** + * Render helper for the total trackers blocked readout + * @return {JSX} JSX for rendering the total trackers blocked readout + */ + renderTotalTrackersBlocked() { + const { is_expert } = this.props; + const isCondensed = this.isCondensed(); const totalTrackersBlockedContainerClassNames = ClassNames('Summary__pageStatContainer', { 'Ghostery--clickable': is_expert, @@ -468,6 +475,87 @@ class Summary extends React.Component { ); } + renderTotalRequestsModified() { + const { is_expert } = this.props; + const isCondensed = this.isCondensed(); + + const totalRequestsModifiedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalRequestsModified', { + 'GhosteryKVReadout--withoutKey': isCondensed, + 'GhosteryKVReadout--summaryCondensed': isCondensed, + }); + + return ( +
+
+ {t('requests_modified')} + + {this.requestsModifiedCount()} + +
+ +
+ ); + } + + isPageLoadFast() { + return this.state.trackerLatencyTotal < 5; + } + + isPageLoadSlow() { + return this.state.trackerLatencyTotal > 10; + } + + isPageLoadMedium() { + return !this.isPageLoadFast() && !this.isPageLoadSlow(); + } + + renderPageLoadTime() { + const { trackerLatencyTotal } = this.state; + const isCondensed = this.isCondensed(); + + const pageLoadTimeClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--pageLoadTime', { + 'GhosteryKVReadout--pageLoadTime-fast': this.isPageLoadFast(), + 'GhosteryKVReadout--pageLoadTime-slow': this.isPageLoadSlow(), + 'GhosteryKVReadout--pageLoadTime-medium': this.isPageLoadMedium(), + 'GhosteryKVReadout--withoutKey': isCondensed, + 'GhosteryKVReadout--summaryCondensed': isCondensed, + }); + + return ( +
+
+ {t('page_load')} + + {trackerLatencyTotal ? `${trackerLatencyTotal} ${t('settings_seconds')}` : '-'} + +
+
+ ); + } + + renderGhosteryFeature(type, ...modifiers){ + const { + is_expert, + paused_blocking, + sitePolicy, + } = this.props; + const { disableBlocking } = this.state; + const containerClassNames = ClassNames('Summary__ghosteryFeatureContainer', 'g-tooltip', modifiers); + + return ( +
+ +
+ ); + } + /** * Render helper for the stats nav button * @return {JSX} JSX for rendering the stats nav button @@ -525,73 +613,10 @@ class Summary extends React.Component { paused_blocking, sitePolicy, } = this.props; - const { disableBlocking, trackerLatencyTotal } = this.state; - const showCondensed = is_expert && is_expanded; - const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; - const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; - - const requestsModifiedCount = antiTrackUnsafe + adBlockBlocked; - - - const totalRequestsModifiedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalRequestsModified', { - 'GhosteryKVReadout--withoutKey': showCondensed, - 'GhosteryKVReadout--summaryCondensed': showCondensed, - }); - const totalRequestsModified = ( -
-
- {t('requests_modified')} - - {requestsModifiedCount} - -
- -
- ); - - const pageLoadTimeClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--pageLoadTime', { - 'GhosteryKVReadout--pageLoadTime-fast': trackerLatencyTotal < 5, - 'GhosteryKVReadout--pageLoadTime-slow': trackerLatencyTotal > 10, - 'GhosteryKVReadout--pageLoadTime-medium': trackerLatencyTotal > 5 && trackerLatencyTotal < 10, - 'GhosteryKVReadout--withoutKey': showCondensed, - 'GhosteryKVReadout--summaryCondensed': showCondensed, - }); - const pageLoadTime = ( -
-
- {t('page_load')} - - {trackerLatencyTotal ? `${trackerLatencyTotal} ${t('settings_seconds')}` : '-'} - -
-
- ); + const { disableBlocking } = this.state; + const isCondensed = this.isCondensed(); // Trust, Restrict, Pause - const ghosteryTrustButton = ( -
- -
- ); - const ghosteryRestrictButton = ( -
- -
- ); const pauseButton = (
); @@ -616,8 +641,8 @@ class Summary extends React.Component { active={enable_anti_tracking} cliqzInactive={isCliqzInactive} isTooltipHeader={is_expert} - isTooltipBody={!showCondensed} - tooltipPosition={showCondensed ? 'right' : is_expert ? 'top top-right' : 'top'} + isTooltipBody={!isCondensed} + tooltipPosition={isCondensed ? 'right' : is_expert ? 'top top-right' : 'top'} />
); @@ -630,8 +655,8 @@ class Summary extends React.Component { active={enable_ad_block} cliqzInactive={isCliqzInactive} isTooltipHeader={is_expert} - isTooltipBody={!showCondensed} - tooltipPosition={showCondensed ? 'right' : 'top'} + isTooltipBody={!isCondensed} + tooltipPosition={isCondensed ? 'right' : 'top'} />
); @@ -644,8 +669,8 @@ class Summary extends React.Component { active={enable_smart_block} cliqzInactive={isCliqzInactive} isTooltipHeader={is_expert} - isTooltipBody={!showCondensed} - tooltipPosition={showCondensed ? 'right' : is_expert ? 'top top-left' : 'top'} + isTooltipBody={!isCondensed} + tooltipPosition={isCondensed ? 'right' : is_expert ? 'top top-left' : 'top'} />
); @@ -653,29 +678,29 @@ class Summary extends React.Component { const summaryClassNames = ClassNames('Summary', { 'Summary--simple': !is_expert, 'Summary--expert': is_expert && !is_expanded, - 'Summary--condensed': showCondensed, + 'Summary--condensed': isCondensed, }); // inactive, stacked on ghosteryFeaturesContainer and cliqzFeaturesContainer return (
- {!showCondensed && disableBlocking && ()} - {!showCondensed && !disableBlocking && this.renderDonut()} - {!showCondensed && !disableBlocking && !is_expert && this.renderPageHostReadout()} + {!isCondensed && disableBlocking && ()} + {!isCondensed && !disableBlocking && this.renderDonut()} + {!isCondensed && !disableBlocking && !is_expert && this.renderPageHostReadout()} - {showCondensed && !disableBlocking && this.renderTotalTrackersFound()} + {isCondensed && !disableBlocking && this.renderTotalTrackersFound()} {!disableBlocking && this.renderTotalTrackersBlocked()} - {!disableBlocking && totalRequestsModified} - {!disableBlocking && pageLoadTime} + {!disableBlocking && this.renderTotalRequestsModified()} + {!disableBlocking && this.renderPageLoadTime()} - {showCondensed && disableBlocking && is_expert && ( + {isCondensed && disableBlocking && is_expert && (
)}
- {ghosteryTrustButton} - {ghosteryRestrictButton} - {pauseButton} + {this.renderGhosteryFeature('trust')} + {this.renderGhosteryFeature('restrict', 'Summary__ghosteryFeatureContainer--middle')} + {this.renderPauseButton()}
{cliqzAntiTracking} @@ -684,7 +709,7 @@ class Summary extends React.Component {
{this.renderStatsNavButton()} - {!showCondensed && this.renderPlusUpgradeBannerOrSubscriberIcon()} + {!isCondensed && this.renderPlusUpgradeBannerOrSubscriberIcon()}
); } From 6a9fff3cb1289b03f7c84b963b0a24b293c78e94 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 14 May 2019 23:02:57 -0400 Subject: [PATCH 078/131] Clean up Summary.jsx --- app/panel/components/Summary.jsx | 539 ++++++++++++++++--------------- 1 file changed, 287 insertions(+), 252 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 7d3e189fe..d56bce9d6 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -47,14 +47,14 @@ class Summary extends React.Component { }; // Event Bindings - this.toggleExpert = this.toggleExpert.bind(this); - this.clickPauseButton = this.clickPauseButton.bind(this); + this.clickCliqzFeature = this.clickCliqzFeature.bind(this); this.clickDonut = this.clickDonut.bind(this); - this.clickTrackersCount = this.clickTrackersCount.bind(this); - this.clickTrackersBlocked = this.clickTrackersBlocked.bind(this); + this.clickPauseButton = this.clickPauseButton.bind(this); this.clickSitePolicy = this.clickSitePolicy.bind(this); - this.clickCliqzFeature = this.clickCliqzFeature.bind(this); - this.handlePortMessage = this.handlePortMessage.bind(this); + this.clickTrackersBlocked = this.clickTrackersBlocked.bind(this); + this.clickTrackersCount = this.clickTrackersCount.bind(this); + this.clickUpgradeBannerOrGoldPlusIcon = this.clickUpgradeBannerOrGoldPlusIcon.bind(this); + this.toggleExpert = this.toggleExpert.bind(this); this.pauseOptions = [ { name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 }, @@ -67,11 +67,11 @@ class Summary extends React.Component { * Lifecycle event */ componentDidMount() { - this.setTrackerLatency(this.props); - this.updateSiteNotScanned(this.props); + this._setTrackerLatency(this.props); + this._updateSiteNotScanned(this.props); this._dynamicUIPort = this.context; - this._dynamicUIPort.onMessage.addListener(this.handlePortMessage); + this._dynamicUIPort.onMessage.addListener(this._handlePortMessage); this._dynamicUIPort.postMessage({ name: 'SummaryComponentDidMount' }); } @@ -79,8 +79,8 @@ class Summary extends React.Component { * Lifecycle event */ componentWillReceiveProps(nextProps) { - this.setTrackerLatency(nextProps); - this.updateSiteNotScanned(nextProps); + this._setTrackerLatency(nextProps); + this._updateSiteNotScanned(nextProps); // Set page title for Firefox for Android window.document.title = `Ghostery's findings for ${this.props.pageUrl}`; @@ -91,65 +91,35 @@ class Summary extends React.Component { */ componentWillUnmount() { this._dynamicUIPort.postMessage({ name: 'SummaryComponentWillUnmount' }); - this._dynamicUIPort.onMessage.removeListener(this.handlePortMessage); - } - - /** - * Calculates total tracker latency and sets it to state - * @param {Object} props Summary's props, either this.props or nextProps. - */ - setTrackerLatency(props) { - const { performanceData } = props; - let pageLatency = 0; - let unfixedLatency = 0; - - // calculate and display page speed - if (performanceData) { - const { timing } = performanceData; - // format number of decimal places to use - unfixedLatency = Number(timing.loadEventEnd - timing.navigationStart) / 1000; - if (unfixedLatency >= 100) { // > 100 no decimal - pageLatency = (Number(timing.loadEventEnd - timing.navigationStart) / 1000).toFixed(); - } else if (unfixedLatency >= 10 && unfixedLatency < 100) { // 100 > 10 use one decimal - pageLatency = (Number(timing.loadEventEnd - timing.navigationStart) / 1000).toFixed(1); - } else if (unfixedLatency < 10 && unfixedLatency >= 0) { // < 10s use two decimals - pageLatency = (Number(timing.loadEventEnd - timing.navigationStart) / 1000).toFixed(2); - } - this.setState({ trackerLatencyTotal: pageLatency }); - // reset page load value if page is reloaded while panel is open - } else if (this.props.performanceData && !performanceData) { - this.setState({ trackerLatencyTotal: pageLatency }); - } + this._dynamicUIPort.onMessage.removeListener(this._handlePortMessage); } /** - * Handles messages from dynamic UI port to background + * Handles clicking on Cliqz Features: AntiTracking, AdBlocking, SmartBlocking + * @param {Object} options options including: + * feature: enable_anti_tracking, enable_ad_block, enable_smart_block + * status: whether the feature should be turned on or off + * text: the text for the notification. */ - handlePortMessage(msg) { - if (msg.to !== 'summary' || !msg.body) { return; } - - const { body } = msg; - - if (body.adblock || body.antitracking) { - this.props.actions.updateCliqzModuleData(body); - } else { - this.props.actions.updateSummaryData(body); - } + clickCliqzFeature(options) { + const { feature, status, text } = options; + this.props.actions.showNotification({ + updated: feature, + reload: true, + text, + }); + this.props.actions.toggleCliqzFeature(feature, status); } /** - * Disable controls when Ghostery cannot or has not yet scanned a page. - * @param {Object} props Summary's props, either this.props or nextProps. + * Handles clicking on any part of the Donut graph + * @param {Object} data Properties of the click and resulting filter */ - updateSiteNotScanned(props) { - const { siteNotScanned, categories } = props; - const pageUrl = props.pageUrl || ''; - - if (siteNotScanned || !categories || pageUrl.search(/http|chrome-extension|moz-extension|ms-browser-extension|newtab|chrome:\/\/startpage\//) === -1) { - this.setState({ disableBlocking: true }); - } else { - this.setState({ disableBlocking: false }); + clickDonut(data) { + if (!this.props.is_expert) { + this.toggleExpert(); } + this.props.actions.filterTrackers(data); } /** @@ -176,54 +146,11 @@ class Summary extends React.Component { }); } - /** - * Handles clicking on any part of the Donut graph - * @param {Object} data Properties of the click and resulting filter - */ - clickDonut(data) { - if (!this.props.is_expert) { - this.toggleExpert(); - } - this.props.actions.filterTrackers(data); - } - - /** - * Handles clicking on the total trackers count on the condensed view - */ - clickTrackersCount() { - this.props.actions.filterTrackers({ type: 'trackers', name: 'all' }); - } - - /** - * Toggle between Simple and Detailed Views. - */ - toggleExpert() { - this.props.actions.toggleExpert(); - if (this.props.is_expert) { - this.props.history.push('/'); - } else { - this.props.history.push('/detail'); - } - } - - /** - * Handles clicking on Trackers Blocked. Triggers a filter action - */ - clickTrackersBlocked() { - const { sitePolicy, is_expert } = this.props; - if (is_expert) { - if (sitePolicy === 1) { - this.props.actions.filterTrackers({ type: 'trackers', name: 'all' }); - } else { - this.props.actions.filterTrackers({ type: 'trackers', name: 'blocked' }); - } - } - } - /** * Handles clicking on Ghostery Features: Trust Site, Restrict Site, Custom Settings * @param {String} button The button that was clicked: trust, restrict, custom */ + // TODO remove Custom button code clickSitePolicy(button) { const { paused_blocking, sitePolicy } = this.props; let type; @@ -263,48 +190,124 @@ class Summary extends React.Component { } /** - * Handles clicking on Cliqz Features: AntiTracking, AdBlocking, SmartBlocking - * @param {Object} options options including: - * feature: enable_anti_tracking, enable_ad_block, enable_smart_block - * status: whether the feature should be turned on or off - * text: the text for the notification. + * Handles clicking on Trackers Blocked. Triggers a filter action */ - clickCliqzFeature(options) { - const { feature, status, text } = options; - this.props.actions.showNotification({ - updated: feature, - reload: true, - text, - }); - this.props.actions.toggleCliqzFeature(feature, status); + clickTrackersBlocked() { + const { sitePolicy, is_expert } = this.props; + + if (!is_expert) { return; } + + if (sitePolicy === 1) { + this.props.actions.filterTrackers({ type: 'trackers', name: 'all' }); + } else { + this.props.actions.filterTrackers({ type: 'trackers', name: 'blocked' }); + } + } + + /** + * Handles clicking on the total trackers count on the condensed view + */ + clickTrackersCount() { + this.props.actions.filterTrackers({ type: 'trackers', name: 'all' }); } /** * Handles clicking on the green upgrade banner or gold subscriber badge */ - clickUpgradeBannerOrGoldPlusIcon = () => { - // TODO check whether this is the message we want to be sending now + clickUpgradeBannerOrGoldPlusIcon() { sendMessage('ping', 'plus_panel_from_badge'); - this.props.history.push(this.isPlusSubscriber() ? '/subscription/info' : `/subscribe/${!!this.props.user}`); + + this.props.history.push(this._isPlusSubscriber() ? '/subscription/info' : `/subscribe/${!!this.props.user}`); + } + + /** + * Toggle between Simple and Detailed Views. + */ + toggleExpert() { + this.props.actions.toggleExpert(); + if (this.props.is_expert) { + this.props.history.push('/'); + } else { + this.props.history.push('/detail'); + } } - isPlusSubscriber() { + /** + * Calculates total tracker latency and sets it to state + * @param {Object} props Summary's props, either this.props or nextProps. + */ + _setTrackerLatency(props) { + const { performanceData } = props; + let pageLatency = 0; + + // calculate and display page speed + if (performanceData) { + const { timing } = performanceData; + const { loadEventEnd, navigationStart } = timing; + // format number of decimal places to use + const unfixedLatency = Number(loadEventEnd - navigationStart) / 1000; + if (unfixedLatency >= 100) { // > 100 no decimal + pageLatency = unfixedLatency.toFixed(); + } else if (unfixedLatency >= 10 && unfixedLatency < 100) { // 100 > 10 use one decimal + pageLatency = unfixedLatency.toFixed(1); + } else if (unfixedLatency < 10 && unfixedLatency >= 0) { // < 10s use two decimals + pageLatency = unfixedLatency.toFixed(2); + } + this.setState({ trackerLatencyTotal: pageLatency }); + // reset page load value if page is reloaded while panel is open + } else if (this.props.performanceData && !performanceData) { + this.setState({ trackerLatencyTotal: pageLatency }); + } + } + + /** + * Disable controls when Ghostery cannot or has not yet scanned a page. + * @param {Object} props Summary's props, either this.props or nextProps. + */ + _updateSiteNotScanned(props) { + const { siteNotScanned, categories } = props; + const pageUrl = props.pageUrl || ''; + + if (siteNotScanned || !categories || pageUrl.search(/http|chrome-extension|moz-extension|ms-browser-extension|newtab|chrome:\/\/startpage\//) === -1) { + this.setState({ disableBlocking: true }); + } else { + this.setState({ disableBlocking: false }); + } + } + + /** + * Handles messages from dynamic UI port to background + * @param {Object} msg updated findings sent from the background by PanelData + */ + _handlePortMessage(msg) { + if (msg.to !== 'summary' || !msg.body) { return; } + + const { body } = msg; + + if (body.adblock || body.antitracking) { + this.props.actions.updateCliqzModuleData(body); + } else { + this.props.actions.updateSummaryData(body); + } + } + + _isPlusSubscriber() { const { user } = this.props; return user && user.subscriptionsPlus; } - pageHost() { + _pageHost() { return this.props.pageHost || 'page_host'; } - hidePageHost(host = null) { - const pageHost = host || this.pageHost(); + _hidePageHost(host = null) { + const pageHost = host || this._pageHost(); return (pageHost.split('.').length < 2); } - adBlockBlocked() { + _adBlockBlocked() { const { adBlock, enable_ad_block, @@ -313,7 +316,7 @@ class Summary extends React.Component { return enable_ad_block && adBlock && adBlock.totalCount || 0; } - antiTrackUnsafe() { + _antiTrackUnsafe() { const { antiTracking, enable_anti_tracking, @@ -322,17 +325,17 @@ class Summary extends React.Component { return enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; } - totalTrackersFound() { + _totalTrackersFound() { const { trackerCounts } = this.props; - return (trackerCounts.allowed + trackerCounts.blocked + this.antiTrackUnsafe() + this.adBlockBlocked()) || 0; + return (trackerCounts.allowed + trackerCounts.blocked + this._requestsModifiedCount()) || 0; } - requestsModifiedCount() { - return this.antiTrackUnsafe() + this.adBlockBlocked(); + _requestsModifiedCount() { + return this._antiTrackUnsafe() + this._adBlockBlocked(); } - sbBlocked() { + _sbBlocked() { const { smartBlock, trackerCounts } = this.props; let sbBlocked = smartBlock && smartBlock.blocked && Object.keys(smartBlock.blocked).length || 0; @@ -343,7 +346,7 @@ class Summary extends React.Component { return sbBlocked; } - sbAllowed() { + _sbAllowed() { const { smartBlock, trackerCounts } = this.props; let sbAllowed = smartBlock && smartBlock.unblocked && Object.keys(smartBlock.unblocked).length || 0; @@ -354,13 +357,13 @@ class Summary extends React.Component { return sbAllowed; } - sbAdjust() { + _sbAdjust() { const { enable_smart_block } = this.props; - return enable_smart_block && (this.sbBlocked() - this.sbAllowed()) || 0; + return enable_smart_block && (this._sbBlocked() - this._sbAllowed()) || 0; } - totalTrackersBlockedCount() { + _totalTrackersBlockedCount() { const { paused_blocking, sitePolicy, @@ -373,23 +376,42 @@ class Summary extends React.Component { } else if (sitePolicy === 1) { totalTrackersBlockedCount = trackerCounts.blocked + trackerCounts.allowed || 0; } else { - totalTrackersBlockedCount = trackerCounts.blocked + this.sbAdjust() || 0; + totalTrackersBlockedCount = trackerCounts.blocked + this._sbAdjust() || 0; } return totalTrackersBlockedCount; } - isCondensed() { + _isCondensed() { const { is_expanded, is_expert } = this.props; return (is_expert && is_expanded); } + _isPageLoadFast() { + return this.state.trackerLatencyTotal < 5; + } + + _isPageLoadSlow() { + return this.state.trackerLatencyTotal > 10; + } + + _isPageLoadMedium() { + return !this._isPageLoadFast() && !this._isPageLoadSlow(); + } + + _isCliqzInactive() { + const { paused_blocking, sitePolicy } = this.props; + const { disableBlocking } = this.state; + + return paused_blocking || sitePolicy || disableBlocking || IS_CLIQZ; + } + /** * Render helper for the donut * @return {JSX} JSX for rendering the donut */ - renderDonut() { + _renderDonut() { const { categories, is_expert, @@ -403,7 +425,7 @@ class Summary extends React.Component { categories={categories} renderRedscale={sitePolicy === 1} renderGreyscale={paused_blocking} - totalCount={this.totalTrackersFound()} + totalCount={this._totalTrackersFound()} ghosteryFeatureSelect={sitePolicy} isSmall={is_expert} clickDonut={this.clickDonut} @@ -416,10 +438,10 @@ class Summary extends React.Component { * Render helper for the page host readout * @return {JSX} JSX for rendering the page host readout */ - renderPageHostReadout() { - const pageHost = this.pageHost(); + _renderPageHostReadout() { + const pageHost = this._pageHost(); const pageHostContainerClassNames = ClassNames('Summary__pageHostContainer', { - invisible: this.hidePageHost(pageHost), + invisible: this._hidePageHost(pageHost), }); return ( @@ -433,11 +455,11 @@ class Summary extends React.Component { * Render helper for the total trackers found readout shown in condensed view * @return {JSX} JSX for rendering the condensed view total trackers found readout */ - renderTotalTrackersFound() { + _renderTotalTrackersFound() { return (
- {this.totalTrackersFound()} + {this._totalTrackersFound()} {t('trackers_blocked')} - {this.totalTrackersBlockedCount()} + {this._totalTrackersBlockedCount()}
); } - renderTotalRequestsModified() { + _renderTotalRequestsModified() { const { is_expert } = this.props; - const isCondensed = this.isCondensed(); + const isCondensed = this._isCondensed(); const totalRequestsModifiedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalRequestsModified', { 'GhosteryKVReadout--withoutKey': isCondensed, @@ -489,7 +511,7 @@ class Summary extends React.Component {
{t('requests_modified')} - {this.requestsModifiedCount()} + {this._requestsModifiedCount()}
@@ -497,26 +519,14 @@ class Summary extends React.Component { ); } - isPageLoadFast() { - return this.state.trackerLatencyTotal < 5; - } - - isPageLoadSlow() { - return this.state.trackerLatencyTotal > 10; - } - - isPageLoadMedium() { - return !this.isPageLoadFast() && !this.isPageLoadSlow(); - } - - renderPageLoadTime() { + _renderPageLoadTime() { const { trackerLatencyTotal } = this.state; - const isCondensed = this.isCondensed(); + const isCondensed = this._isCondensed(); const pageLoadTimeClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--pageLoadTime', { - 'GhosteryKVReadout--pageLoadTime-fast': this.isPageLoadFast(), - 'GhosteryKVReadout--pageLoadTime-slow': this.isPageLoadSlow(), - 'GhosteryKVReadout--pageLoadTime-medium': this.isPageLoadMedium(), + 'GhosteryKVReadout--pageLoadTime-fast': this._isPageLoadFast(), + 'GhosteryKVReadout--pageLoadTime-slow': this._isPageLoadSlow(), + 'GhosteryKVReadout--pageLoadTime-medium': this._isPageLoadMedium(), 'GhosteryKVReadout--withoutKey': isCondensed, 'GhosteryKVReadout--summaryCondensed': isCondensed, }); @@ -533,7 +543,7 @@ class Summary extends React.Component { ); } - renderGhosteryFeature(type, ...modifiers){ + _renderGhosteryFeature(type, ...modifiers) { const { is_expert, paused_blocking, @@ -549,167 +559,192 @@ class Summary extends React.Component { type={type} sitePolicy={sitePolicy} blockingPausedOrDisabled={paused_blocking || disableBlocking} - showText={this.isCondensed()} + showText={this._isCondensed()} tooltipPosition={is_expert ? 'right' : 'top'} />
); } - /** - * Render helper for the stats nav button - * @return {JSX} JSX for rendering the stats nav button - */ - renderStatsNavButton() { - const summaryViewStatsButton = ClassNames('Summary__statsButton', 'g-tooltip', { - hide: this.props.is_expert - }); - - return ( -
- - -
- ); - } - - /** - * Render helper for the plus upgrade banner or subscriber icon - * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon - */ - renderPlusUpgradeBannerOrSubscriberIcon() { - const isPlusSubscriber = this.isPlusSubscriber(); - - return ( -
- {isPlusSubscriber && - - } - - {!isPlusSubscriber && -
- {t('subscription_upgrade_to')} - -
- } -
- ); - } - - /** - * React's required render function. Returns JSX - * @return {JSX} JSX for rendering the Summary View of the panel - */ - render() { + _renderPauseButton() { const { is_expert, - is_expanded, - enable_anti_tracking, - enable_ad_block, - enable_smart_block, - antiTracking, - adBlock, - smartBlock, paused_blocking, - sitePolicy, + paused_blocking_timeout, } = this.props; - const { disableBlocking } = this.state; - const isCondensed = this.isCondensed(); - // Trust, Restrict, Pause - const pauseButton = ( + return (
); + } - // Enhanced Anti-Tracking, Enhanced Ad Blocking, Smart Blocking - const isCliqzInactive = paused_blocking || sitePolicy || disableBlocking || IS_CLIQZ; - const cliqzAntiTracking = ( + _renderCliqzAntiTracking() { + const { + antiTracking, + enable_anti_tracking, + is_expert, + } = this.props; + const isCondensed = this._isCondensed(); + + return (
); - const cliqzAdBlock = ( + } + + _renderCliqzAdBlock() { + const { + adBlock, + enable_ad_block, + is_expert, + } = this.props; + const isCondensed = this._isCondensed(); + + return (
); - const cliqzSmartBlock = ( + } + + _renderCliqzSmartBlock() { + const { + enable_smart_block, + is_expert, + smartBlock, + } = this.props; + const isCondensed = this._isCondensed(); + + return (
); + } + + /** + * Render helper for the stats nav button + * @return {JSX} JSX for rendering the stats nav button + */ + _renderStatsNavButton() { + const summaryViewStatsButton = ClassNames('Summary__statsButton', 'g-tooltip', { + hide: this.props.is_expert + }); + + return ( +
+ + +
+ ); + } + + /** + * Render helper for the plus upgrade banner or subscriber icon + * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon + */ + _renderPlusUpgradeBannerOrSubscriberIcon() { + const isPlusSubscriber = this._isPlusSubscriber(); + + return ( +
+ {isPlusSubscriber && + + } + {!isPlusSubscriber && +
+ {t('subscription_upgrade_to')} + +
+ } +
+ ); + } + + /** + * React's required render function. Returns JSX + * @return {JSX} JSX for rendering the Summary View of the panel + */ + render() { + const { + is_expert, + is_expanded, + } = this.props; + const { disableBlocking } = this.state; + const isCondensed = this._isCondensed(); const summaryClassNames = ClassNames('Summary', { 'Summary--simple': !is_expert, 'Summary--expert': is_expert && !is_expanded, 'Summary--condensed': isCondensed, }); - // inactive, stacked on ghosteryFeaturesContainer and cliqzFeaturesContainer + return (
{!isCondensed && disableBlocking && ()} - {!isCondensed && !disableBlocking && this.renderDonut()} - {!isCondensed && !disableBlocking && !is_expert && this.renderPageHostReadout()} + {!isCondensed && !disableBlocking && this._renderDonut()} + {!isCondensed && !disableBlocking && !is_expert && this._renderPageHostReadout()} - {isCondensed && !disableBlocking && this.renderTotalTrackersFound()} + {isCondensed && !disableBlocking && this._renderTotalTrackersFound()} - {!disableBlocking && this.renderTotalTrackersBlocked()} - {!disableBlocking && this.renderTotalRequestsModified()} - {!disableBlocking && this.renderPageLoadTime()} + {!disableBlocking && this._renderTotalTrackersBlocked()} + {!disableBlocking && this._renderTotalRequestsModified()} + {!disableBlocking && this._renderPageLoadTime()} {isCondensed && disableBlocking && is_expert && (
)}
- {this.renderGhosteryFeature('trust')} - {this.renderGhosteryFeature('restrict', 'Summary__ghosteryFeatureContainer--middle')} - {this.renderPauseButton()} + {this._renderGhosteryFeature('trust')} + {this._renderGhosteryFeature('restrict', 'Summary__ghosteryFeatureContainer--middle')} + {this._renderPauseButton()}
- {cliqzAntiTracking} - {cliqzAdBlock} - {cliqzSmartBlock} + {this._renderCliqzAntiTracking()} + {this._renderCliqzAdBlock()} + {this._renderCliqzSmartBlock()}
- {this.renderStatsNavButton()} + {this._renderStatsNavButton()} - {!isCondensed && this.renderPlusUpgradeBannerOrSubscriberIcon()} + {!isCondensed && this._renderPlusUpgradeBannerOrSubscriberIcon()}
); } From 7ec35c1380b745e4f0bff93e9f670c5b272743ea Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 14 May 2019 23:11:02 -0400 Subject: [PATCH 079/131] Remove unused Custom button handling code from Summary#clickSitePolicy --- app/panel/components/Summary.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index d56bce9d6..031bdd786 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -147,8 +147,8 @@ class Summary extends React.Component { } /** - * Handles clicking on Ghostery Features: Trust Site, Restrict Site, Custom Settings - * @param {String} button The button that was clicked: trust, restrict, custom + * Handles clicking on Ghostery Features: Trust Site, Restrict Site + * @param {String} button The button that was clicked: trust, restrict */ // TODO remove Custom button code clickSitePolicy(button) { @@ -161,12 +161,12 @@ class Summary extends React.Component { return; } - if (button === 'trust' || (button === 'custom' && sitePolicy === 2)) { + if (button === 'trust') { sendMessage('ping', 'trust_site'); type = 'whitelist'; text = (sitePolicy === 2) ? t('alert_site_trusted_off') : t('alert_site_trusted'); classes = (sitePolicy === 2) ? 'warning' : 'success'; - } else if (button === 'restrict' || (button === 'custom' && sitePolicy === 1)) { + } else if (button === 'restrict') { sendMessage('ping', 'restrict_site'); type = 'blacklist'; text = (sitePolicy === 1) ? t('alert_site_restricted_off') : t('alert_site_restricted'); From 5634995dd1393b7ebb2a7c04e113b359fd71ed27 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 15 May 2019 01:03:15 -0400 Subject: [PATCH 080/131] Clean up CliqzFeature --- .../BuildingBlocks/CliqzFeature.jsx | 69 +++++++++++-------- .../BuildingBlocks/GhosteryFeature.jsx | 24 +++---- 2 files changed, 51 insertions(+), 42 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index b8e878dcf..bf2532af8 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -19,7 +19,6 @@ import Tooltip from '../Tooltip'; * @class Implements rendering and interaction for Cliqz feature icon toggles * @memberof PanelBuildingBlocks */ - class CliqzFeature extends React.Component { constructor(props) { super(props); @@ -27,7 +26,38 @@ class CliqzFeature extends React.Component { this.clickCliqzFeature = this.clickCliqzFeature.bind(this); } - getCount() { + clickCliqzFeature() { + const { + active, + clickButton, + cliqzInactive, + type + } = this.props; + + if (cliqzInactive) { + return; + } + + clickButton({ + feature: `enable_${type}`, + status: active, + text: this._getAlertText() + }); + } + + _length(object) { + return Object.keys(object).length; + } + + _blockedCount(data) { + return data && this._length(data.blocked) || 0; + } + + _unblockedCount(data) { + return data && this._length(data.unblocked) || 0; + } + + _getCount() { const { active, data, type } = this.props; if (!active) { @@ -39,15 +69,13 @@ class CliqzFeature extends React.Component { } else if (type === 'ad_block') { return data && data.totalCount || 0; } else if (type === 'smart_block') { - const blockedCount = data && Object.keys(data.blocked).length || 0; - const unblockedCount = data && Object.keys(data.unblocked).length || 0; - return blockedCount + unblockedCount; + return this._blockedCount(data) + this._unblockedCount(data); } return 0; } - getTooltipBodyText() { + _getTooltipBodyText() { const { active, isTooltipBody, type } = this.props; if (!isTooltipBody) { @@ -59,7 +87,7 @@ class CliqzFeature extends React.Component { t(`tooltip_${type}_body`); } - getTooltipHeaderText() { + _getTooltipHeaderText() { const { isTooltipHeader, type } = this.props; if (isTooltipHeader) { @@ -69,7 +97,7 @@ class CliqzFeature extends React.Component { return t(`tooltip_${type}`); } - getAlertText() { + _getAlertText() { const { active, type } = this.props; return active ? @@ -77,25 +105,6 @@ class CliqzFeature extends React.Component { t(`alert_${type}`); } - clickCliqzFeature() { - const { - active, - clickButton, - cliqzInactive, - type - } = this.props; - - if (cliqzInactive) { - return; - } - - clickButton({ - feature: `enable_${type}`, - status: active, - text: this.getAlertText() - }); - } - render() { const { active, @@ -114,14 +123,14 @@ class CliqzFeature extends React.Component { return (
-
{this.getCount()}
+
{this._getCount()}
{featureName}
diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index b35285f25..0c5ffb3fd 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -26,7 +26,15 @@ class GhosteryFeature extends React.Component { this.handleClick = this.handleClick.bind(this); } - getButtonText() { + handleClick() { + if (this.props.blockingPausedOrDisabled) { + return; + } + + this.props.handleClick(this.props.type); + } + + _getButtonText() { const { sitePolicy, showText, type } = this.props; if (!showText) { @@ -43,7 +51,7 @@ class GhosteryFeature extends React.Component { } } - getTooltipText() { + _getTooltipText() { const { sitePolicy, type } = this.props; switch (type) { @@ -56,14 +64,6 @@ class GhosteryFeature extends React.Component { } } - handleClick() { - if (this.props.blockingPausedOrDisabled) { - return; - } - - this.props.handleClick(this.props.type); - } - render() { const { blockingPausedOrDisabled, @@ -84,10 +84,10 @@ class GhosteryFeature extends React.Component {
- {this.getButtonText()} + {this._getButtonText()} - +
); } From fa1d0df95f20694647e5a91309adbcdb4f22023a Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 15 May 2019 13:46:02 -0400 Subject: [PATCH 081/131] Comment public CliqzFeature methods. Refactor _getCount helpers. --- .../BuildingBlocks/CliqzFeature.jsx | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index bf2532af8..1163a5096 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -26,6 +26,9 @@ class CliqzFeature extends React.Component { this.clickCliqzFeature = this.clickCliqzFeature.bind(this); } + /** + * Handles clicks on the Cliqz feature icon, toggling it on/off + */ clickCliqzFeature() { const { active, @@ -41,22 +44,10 @@ class CliqzFeature extends React.Component { clickButton({ feature: `enable_${type}`, status: active, - text: this._getAlertText() + text: this._getAlertText(), }); } - _length(object) { - return Object.keys(object).length; - } - - _blockedCount(data) { - return data && this._length(data.blocked) || 0; - } - - _unblockedCount(data) { - return data && this._length(data.unblocked) || 0; - } - _getCount() { const { active, data, type } = this.props; @@ -69,11 +60,18 @@ class CliqzFeature extends React.Component { } else if (type === 'ad_block') { return data && data.totalCount || 0; } else if (type === 'smart_block') { - return this._blockedCount(data) + this._unblockedCount(data); + return this._count(data, data.blocked) + this._count(data, data.unblocked); } return 0; } + _count(object, property) { + return object && this._length(property) || 0; + } + _length(object) { + return Object.keys(object).length; + } + _getTooltipBodyText() { const { active, isTooltipBody, type } = this.props; @@ -105,6 +103,10 @@ class CliqzFeature extends React.Component { t(`alert_${type}`); } + /** + * React's required render function. Returns JSX + * @return {JSX} JSX for rendering a Cliqz Feature icon toggle + */ render() { const { active, From 64a3a2bfbbaedb0e15ac7cf5d9a912d1e002d590 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 15 May 2019 13:53:47 -0400 Subject: [PATCH 082/131] Doc GhosteryFeature#handleClick. Remove redundant check for paused or disabled blocking in the delegate handler in Summary --- app/panel/components/BuildingBlocks/GhosteryFeature.jsx | 3 +++ app/panel/components/Summary.jsx | 6 +----- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 0c5ffb3fd..4488a9006 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -26,6 +26,9 @@ class GhosteryFeature extends React.Component { this.handleClick = this.handleClick.bind(this); } + /** + * Handles user click on the Ghostery Feature button + */ handleClick() { if (this.props.blockingPausedOrDisabled) { return; diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 031bdd786..b1f789d74 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -152,15 +152,11 @@ class Summary extends React.Component { */ // TODO remove Custom button code clickSitePolicy(button) { - const { paused_blocking, sitePolicy } = this.props; + const { sitePolicy } = this.props; let type; let text; let classes; - if (this.state.disableBlocking || paused_blocking) { - return; - } - if (button === 'trust') { sendMessage('ping', 'trust_site'); type = 'whitelist'; From f6250e96b23d23e07ab5c6b36cf6feb80d831120 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 15 May 2019 16:14:13 -0400 Subject: [PATCH 083/131] Make semantic constants for whitelist and blacklist site policy states --- .../BuildingBlocks/GhosteryFeature.jsx | 17 +++++++++++++---- src/classes/Globals.js | 4 ++++ src/classes/Policy.js | 4 ++-- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 4488a9006..618e5aa59 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -14,6 +14,7 @@ import React from 'react'; import ClassNames from 'classnames'; import Tooltip from '../Tooltip'; +import globals from '../../../../src/classes/Globals'; /** * @class Rendering and interaction for Ghostery feature button toggles @@ -46,9 +47,13 @@ class GhosteryFeature extends React.Component { switch (type) { case 'trust': - return (sitePolicy === 2 ? t('summary_trust_site_active') : t('summary_trust_site')); + return (sitePolicy === globals.SITE_POLICY__WHITELISTED ? + t('summary_trust_site_active') : + t('summary_trust_site')); case 'restrict': - return (sitePolicy === 1 ? t('summary_restrict_site_active') : t('summary_restrict_site')); + return (sitePolicy === globals.SITE_POLICY__BLACKLISTED ? + t('summary_restrict_site_active') : + t('summary_restrict_site')); default: return 'Check button type you are passing to GhosteryFeature for typos and make sure it is being handled by getButtonText'; } @@ -59,9 +64,13 @@ class GhosteryFeature extends React.Component { switch (type) { case 'trust': - return (sitePolicy === 2 ? t('tooltip_trust_on') : t('tooltip_trust_off')); + return (sitePolicy === globals.SITE_POLICY__WHITELISTED ? + t('tooltip_trust_on') : + t('tooltip_trust_off')); case 'restrict': - return (sitePolicy === 1 ? t('tooltip_restrict_on') : t('tooltip_restrict')); + return (sitePolicy === globals.SITE_POLICY__BLACKLISTED ? + t('tooltip_restrict_on') : + t('tooltip_restrict')); default: return 'Check button type you are passing to GhosteryFeature for typos and make sure it is being handled by getTooltipText'; } diff --git a/src/classes/Globals.js b/src/classes/Globals.js index a59967ea2..ca58c317f 100644 --- a/src/classes/Globals.js +++ b/src/classes/Globals.js @@ -66,6 +66,10 @@ class Globals { this.GHOSTERY_TAB_FIREFOX_PRODUCTION_ID = 'firefoxtab@ghostery.com'; this.GHOSTERY_TAB_FIREFOX_TEST_ID = '{0ea88bc4-03bd-4baa-8153-acc861589c1c}'; + // Site Policy named constants + this.SITE_POLICY__BLACKLISTED = 1; + this.SITE_POLICY__WHITELISTED = 2; + // data stores this.REDIRECT_MAP = new Map(); this.BLOCKED_REDIRECT_DATA = {}; diff --git a/src/classes/Policy.js b/src/classes/Policy.js index 0989243bc..49fa78da9 100644 --- a/src/classes/Policy.js +++ b/src/classes/Policy.js @@ -47,10 +47,10 @@ class Policy { */ getSitePolicy(url) { if (this.blacklisted(url)) { - return 1; + return globals.SITE_POLICY__BLACKLISTED; } if (this.whitelisted(url)) { - return 2; + return globals.SITE_POLICY__WHITELISTED; } return false; } From 606fc0f87fbb3269265ae8992cb016cc74858255 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 15 May 2019 16:44:08 -0400 Subject: [PATCH 084/131] Etend the user of BLACKLIST and WHITELIST globals to Summary. Update syntax for using it. --- .../BuildingBlocks/GhosteryFeature.jsx | 12 +++++++----- app/panel/components/Summary.jsx | 19 +++++++++---------- src/classes/Globals.js | 4 ++-- src/classes/Policy.js | 4 ++-- 4 files changed, 20 insertions(+), 19 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 618e5aa59..b7a7ad8d3 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -16,6 +16,8 @@ import ClassNames from 'classnames'; import Tooltip from '../Tooltip'; import globals from '../../../../src/classes/Globals'; +const { BLACKLISTED, WHITELISTED } = globals; + /** * @class Rendering and interaction for Ghostery feature button toggles * @memberof PanelBuildingBlocks @@ -47,11 +49,11 @@ class GhosteryFeature extends React.Component { switch (type) { case 'trust': - return (sitePolicy === globals.SITE_POLICY__WHITELISTED ? + return (sitePolicy === WHITELISTED ? t('summary_trust_site_active') : t('summary_trust_site')); case 'restrict': - return (sitePolicy === globals.SITE_POLICY__BLACKLISTED ? + return (sitePolicy === BLACKLISTED ? t('summary_restrict_site_active') : t('summary_restrict_site')); default: @@ -64,11 +66,11 @@ class GhosteryFeature extends React.Component { switch (type) { case 'trust': - return (sitePolicy === globals.SITE_POLICY__WHITELISTED ? + return (sitePolicy === WHITELISTED ? t('tooltip_trust_on') : t('tooltip_trust_off')); case 'restrict': - return (sitePolicy === globals.SITE_POLICY__BLACKLISTED ? + return (sitePolicy === BLACKLISTED ? t('tooltip_restrict_on') : t('tooltip_restrict')); default: @@ -85,7 +87,7 @@ class GhosteryFeature extends React.Component { } = this.props; const typeModifier = `GhosteryFeatureButton--${type}`; - const active = (type === 'trust' && sitePolicy === 2) || (type === 'restrict' && sitePolicy === 1); + const active = (type === 'trust' && sitePolicy === WHITELISTED) || (type === 'restrict' && sitePolicy === BLACKLISTED); const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', { typeModifier }, { 'GhosteryFeatureButton--active': active, clickable: !blockingPausedOrDisabled, diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b1f789d74..a0d6372c8 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -27,7 +27,7 @@ import { PauseButton } from './BuildingBlocks'; -const { IS_CLIQZ } = globals; +const { BLACKLISTED, IS_CLIQZ, WHITELISTED } = globals; /** * @class Implements the Summary View, which is displayed as the entire panel @@ -150,7 +150,6 @@ class Summary extends React.Component { * Handles clicking on Ghostery Features: Trust Site, Restrict Site * @param {String} button The button that was clicked: trust, restrict */ - // TODO remove Custom button code clickSitePolicy(button) { const { sitePolicy } = this.props; let type; @@ -160,13 +159,13 @@ class Summary extends React.Component { if (button === 'trust') { sendMessage('ping', 'trust_site'); type = 'whitelist'; - text = (sitePolicy === 2) ? t('alert_site_trusted_off') : t('alert_site_trusted'); - classes = (sitePolicy === 2) ? 'warning' : 'success'; + text = (sitePolicy === WHITELISTED) ? t('alert_site_trusted_off') : t('alert_site_trusted'); + classes = (sitePolicy === WHITELISTED) ? 'warning' : 'success'; } else if (button === 'restrict') { sendMessage('ping', 'restrict_site'); type = 'blacklist'; - text = (sitePolicy === 1) ? t('alert_site_restricted_off') : t('alert_site_restricted'); - classes = (sitePolicy === 1) ? 'warning' : 'alert'; + text = (sitePolicy === BLACKLISTED) ? t('alert_site_restricted_off') : t('alert_site_restricted'); + classes = (sitePolicy === BLACKLISTED) ? 'warning' : 'alert'; } else { return; } @@ -193,7 +192,7 @@ class Summary extends React.Component { if (!is_expert) { return; } - if (sitePolicy === 1) { + if (sitePolicy === BLACKLISTED) { this.props.actions.filterTrackers({ type: 'trackers', name: 'all' }); } else { this.props.actions.filterTrackers({ type: 'trackers', name: 'blocked' }); @@ -367,9 +366,9 @@ class Summary extends React.Component { } = this.props; let totalTrackersBlockedCount; - if (paused_blocking || sitePolicy === 2) { + if (paused_blocking || sitePolicy === WHITELISTED) { totalTrackersBlockedCount = 0; - } else if (sitePolicy === 1) { + } else if (sitePolicy === BLACKLISTED) { totalTrackersBlockedCount = trackerCounts.blocked + trackerCounts.allowed || 0; } else { totalTrackersBlockedCount = trackerCounts.blocked + this._sbAdjust() || 0; @@ -419,7 +418,7 @@ class Summary extends React.Component {
Date: Wed, 15 May 2019 17:04:30 -0400 Subject: [PATCH 085/131] Fix page host text alignment --- app/panel/components/Summary.jsx | 1 + app/scss/partials/_summary.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index a0d6372c8..1f634e42e 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -55,6 +55,7 @@ class Summary extends React.Component { this.clickTrackersCount = this.clickTrackersCount.bind(this); this.clickUpgradeBannerOrGoldPlusIcon = this.clickUpgradeBannerOrGoldPlusIcon.bind(this); this.toggleExpert = this.toggleExpert.bind(this); + this._handlePortMessage = this._handlePortMessage.bind(this); this.pauseOptions = [ { name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 }, diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 4945ba3c3..49c594991 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -28,7 +28,6 @@ .GhosteryTextLabel { color: #4a4a4a; - text-align: center; font-weight: 600; } @@ -72,6 +71,7 @@ .Summary__pageHostContainer { + text-align: center; font-size: 11px; } From 65e48a7827cb1c857169166d20ee6abc03c81910 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 15 May 2019 17:10:05 -0400 Subject: [PATCH 086/131] Fix page host readout display logic bug --- app/panel/components/Summary.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 1f634e42e..94caa444b 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -716,7 +716,8 @@ class Summary extends React.Component {
{!isCondensed && disableBlocking && ()} {!isCondensed && !disableBlocking && this._renderDonut()} - {!isCondensed && !disableBlocking && !is_expert && this._renderPageHostReadout()} + {!isCondensed && !disableBlocking && this._renderPageHostReadout()} + {isCondensed && !disableBlocking && this._renderTotalTrackersFound()} From e5b6df2e6163980648fffe248988994b13667c6c Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 16 May 2019 15:59:28 -0400 Subject: [PATCH 087/131] Fix bug that kept GhosteryFeature button text from rendering --- app/panel/components/BuildingBlocks/GhosteryFeature.jsx | 2 ++ app/panel/components/Summary.jsx | 2 +- app/scss/partials/_summary.scss | 5 ++++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index b7a7ad8d3..6e0489a67 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -86,6 +86,8 @@ class GhosteryFeature extends React.Component { type } = this.props; + console.error(`IVZ ${type} text: ${this._getButtonText()}`); + const typeModifier = `GhosteryFeatureButton--${type}`; const active = (type === 'trust' && sitePolicy === WHITELISTED) || (type === 'restrict' && sitePolicy === BLACKLISTED); const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', { typeModifier }, { diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 94caa444b..22d34c203 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -555,7 +555,7 @@ class Summary extends React.Component { type={type} sitePolicy={sitePolicy} blockingPausedOrDisabled={paused_blocking || disableBlocking} - showText={this._isCondensed()} + showText={!this._isCondensed()} tooltipPosition={is_expert ? 'right' : 'top'} />
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 49c594991..dfbc760ee 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -69,7 +69,6 @@ .GhosteryKVReadout__value { color: #9ecc42; } } - .Summary__pageHostContainer { text-align: center; font-size: 11px; @@ -189,6 +188,10 @@ height: 162px; } +.Summary__ghosteryFeaturesContainer { + +} + .Summary__ghosteryFeatureContainer { text-align: center; display: inline-block; From c5f368c4038ef1d3caa49613407199b7859a7660 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 16 May 2019 16:31:31 -0400 Subject: [PATCH 088/131] Make progress towards fixing Trust button CSS --- .../BuildingBlocks/GhosteryFeature.jsx | 2 +- app/scss/partials/_ghostery_features.scss | 50 +++++++++++-------- 2 files changed, 31 insertions(+), 21 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 6e0489a67..67e560fbb 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -90,7 +90,7 @@ class GhosteryFeature extends React.Component { const typeModifier = `GhosteryFeatureButton--${type}`; const active = (type === 'trust' && sitePolicy === WHITELISTED) || (type === 'restrict' && sitePolicy === BLACKLISTED); - const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', { typeModifier }, { + const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', typeModifier, { 'GhosteryFeatureButton--active': active, clickable: !blockingPausedOrDisabled, notClickable: blockingPausedOrDisabled, diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_features.scss index 658087a76..a3fad0d8b 100644 --- a/app/scss/partials/_ghostery_features.scss +++ b/app/scss/partials/_ghostery_features.scss @@ -11,36 +11,46 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -.sub-component.ghostery-features { - .button { - width: 150px; - height: 45px; - font-size: 11px; - line-height: 1.5; - color: #4a4a4a; - border-color: #cccccc; - background-color: #ffffff; - margin-bottom: 0; - box-shadow: inset 0 0 0 0 rgba($white, 0); +.GhosteryFeatureButton { + width: 150px; + height: 45px; + line-height: 1.5; + font-size: 11px; + color: #4a4a4a; + border-color: #cccccc; + background-color: #ffffff; + margin-bottom: 0; + box-shadow: inset 0 0 0 0 rgba($white, 0); - transition: background-image 0.25s ease-out, - background-color 0.25s ease-out, - border-color 0.25s ease-out, - box-shadow 0.25 ease-out, - color 0.25s ease-out; - &:hover { - background-color: #efefef; - } + transition: background-image 0.25s ease-out, + background-color 0.25s ease-out, + border-color 0.25s ease-out, + box-shadow 0.25s ease-out, + color 0.25s ease-out; + + &:hover { + background-color: #efefef; } - .button.active.button-trust { +} + +.GhosteryFeatureButton--active { + &.GhosteryFeatureButton--trust { color: #ffffff; border-color: #85b329; background-color: #9ecc42; box-shadow: inset 0px 1px 7px 2px #85b329; + &:hover { background-color: #85b329; } } +} + +.GhosteryFeatureButton--trust { + +} + +.sub-component.ghostery-features { .button.active.button-restrict { color: #ffffff; border-color: #ce273c; From 3b9a24c5876f876768494dd083436e290ffea66f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 16 May 2019 16:39:36 -0400 Subject: [PATCH 089/131] Refactor CSS for GhosteryFeatureButtons --- app/scss/partials/_ghostery_features.scss | 54 ++++++++++++----------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_features.scss index a3fad0d8b..eabc84e4b 100644 --- a/app/scss/partials/_ghostery_features.scss +++ b/app/scss/partials/_ghostery_features.scss @@ -11,56 +11,60 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ +/* +.GhosteryFeatureButton +.GhosteryFeatureButton--inactive +.GhosteryFeatureButton--active-trust +.GhosteryFeatureButton--active-restrict + */ + .GhosteryFeatureButton { width: 150px; height: 45px; line-height: 1.5; font-size: 11px; - color: #4a4a4a; - border-color: #cccccc; - background-color: #ffffff; margin-bottom: 0; - box-shadow: inset 0 0 0 0 rgba($white, 0); transition: background-image 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out, color 0.25s ease-out; +} + +.GhosteryFeatureButton--inactive { + color: #4a4a4a; + border-color: #cccccc; + background-color: #ffffff; + box-shadow: inset 0 0 0 0 rgba($white, 0); &:hover { background-color: #efefef; } } -.GhosteryFeatureButton--active { - &.GhosteryFeatureButton--trust { - color: #ffffff; - border-color: #85b329; - background-color: #9ecc42; - box-shadow: inset 0px 1px 7px 2px #85b329; +.GhosteryFeatureButton--active-trust { + color: #ffffff; + border-color: #85b329; + background-color: #9ecc42; + box-shadow: inset 0px 1px 7px 2px #85b329; - &:hover { - background-color: #85b329; - } + &:hover { + background-color: #85b329; } -} -.GhosteryFeatureButton--trust { +.GhosteryFeatureButton--active-restrict { + color: #ffffff; + border-color: #ce273c; + background-color: #e74055; + box-shadow: inset 0px 1px 7px 2px #ce273c; + &:hover { + background-color: #ce273c; + } } .sub-component.ghostery-features { - .button.active.button-restrict { - color: #ffffff; - border-color: #ce273c; - background-color: #e74055; - box-shadow: inset 0px 1px 7px 2px #ce273c; - &:hover { - background-color: #ce273c; - } - } - .full-height { height: 100%; } .button-trust .button-text, .button-restrict .button-text { From 04d1242d59fd02c2d277ce5a4a3aac0832c0352c Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 16 May 2019 17:21:10 -0400 Subject: [PATCH 090/131] Modify GhosteryFeature#render to account for CSS updates to GhosteryFeatureButton. Fix CSS typo. --- app/panel/components/BuildingBlocks/GhosteryFeature.jsx | 9 ++++----- app/scss/partials/_ghostery_features.scss | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 67e560fbb..c69ea43b4 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -86,12 +86,11 @@ class GhosteryFeature extends React.Component { type } = this.props; - console.error(`IVZ ${type} text: ${this._getButtonText()}`); - - const typeModifier = `GhosteryFeatureButton--${type}`; const active = (type === 'trust' && sitePolicy === WHITELISTED) || (type === 'restrict' && sitePolicy === BLACKLISTED); - const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', typeModifier, { - 'GhosteryFeatureButton--active': active, + const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', { + 'GhosteryFeatureButton--inactive': !active, + 'GhosteryFeatureButton--active-trust': active && type === 'trust', + 'GhosteryFeatureButton--active-restrict': active && type === 'restrict', clickable: !blockingPausedOrDisabled, notClickable: blockingPausedOrDisabled, }); diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_features.scss index eabc84e4b..c602d767b 100644 --- a/app/scss/partials/_ghostery_features.scss +++ b/app/scss/partials/_ghostery_features.scss @@ -52,6 +52,7 @@ &:hover { background-color: #85b329; } +} .GhosteryFeatureButton--active-restrict { color: #ffffff; From ed4dd1b7f89dfc33d6409de07716373c26553b97 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 19 May 2019 11:13:03 -0400 Subject: [PATCH 091/131] Create shared helper classes SASS file. Use these glasses in GhosteryFeature and Summary --- .../BuildingBlocks/GhosteryFeature.jsx | 2 +- app/panel/components/Summary.jsx | 12 +++++------ app/scss/panel.scss | 5 ++++- app/scss/partials/_ghostery_features.scss | 8 -------- app/scss/partials/_rewards.scss | 17 ---------------- app/scss/partials/_summary.scss | 13 ------------ app/scss/shared_helper_classes.scss | 20 +++++++++++++++++++ 7 files changed, 31 insertions(+), 46 deletions(-) create mode 100644 app/scss/shared_helper_classes.scss diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index c69ea43b4..db342d55f 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -92,7 +92,7 @@ class GhosteryFeature extends React.Component { 'GhosteryFeatureButton--active-trust': active && type === 'trust', 'GhosteryFeatureButton--active-restrict': active && type === 'restrict', clickable: !blockingPausedOrDisabled, - notClickable: blockingPausedOrDisabled, + 'not-clickable': blockingPausedOrDisabled, }); return ( diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 22d34c203..c1ed71fbf 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -55,7 +55,7 @@ class Summary extends React.Component { this.clickTrackersCount = this.clickTrackersCount.bind(this); this.clickUpgradeBannerOrGoldPlusIcon = this.clickUpgradeBannerOrGoldPlusIcon.bind(this); this.toggleExpert = this.toggleExpert.bind(this); - this._handlePortMessage = this._handlePortMessage.bind(this); + this.handlePortMessage = this.handlePortMessage.bind(this); this.pauseOptions = [ { name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 }, @@ -72,7 +72,7 @@ class Summary extends React.Component { this._updateSiteNotScanned(this.props); this._dynamicUIPort = this.context; - this._dynamicUIPort.onMessage.addListener(this._handlePortMessage); + this._dynamicUIPort.onMessage.addListener(this.handlePortMessage); this._dynamicUIPort.postMessage({ name: 'SummaryComponentDidMount' }); } @@ -92,7 +92,7 @@ class Summary extends React.Component { */ componentWillUnmount() { this._dynamicUIPort.postMessage({ name: 'SummaryComponentWillUnmount' }); - this._dynamicUIPort.onMessage.removeListener(this._handlePortMessage); + this._dynamicUIPort.onMessage.removeListener(this.handlePortMessage); } /** @@ -275,7 +275,7 @@ class Summary extends React.Component { * Handles messages from dynamic UI port to background * @param {Object} msg updated findings sent from the background by PanelData */ - _handlePortMessage(msg) { + handlePortMessage(msg) { if (msg.to !== 'summary' || !msg.body) { return; } const { body } = msg; @@ -453,7 +453,7 @@ class Summary extends React.Component { */ _renderTotalTrackersFound() { return ( -
+
{this._totalTrackersFound()} Date: Wed, 22 May 2019 11:42:03 -0400 Subject: [PATCH 092/131] Add Foundation button class back to Ghostery Feature button element. Add Foundation dependency notes to GhosteryFeature --- .../BuildingBlocks/GhosteryFeature.jsx | 25 ++++-- app/scss/partials/_ghostery_features.scss | 81 +++++++++---------- 2 files changed, 59 insertions(+), 47 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index db342d55f..28b2e3e32 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -78,23 +78,38 @@ class GhosteryFeature extends React.Component { } } + _trustActive() { + const { type, sitePolicy } = this.props; + + return (type === 'trust' && sitePolicy === WHITELISTED); + } + + _restrictActive() { + const { type, sitePolicy } = this.props; + + return (type === 'restrict' && sitePolicy === BLACKLISTED); + } + render() { const { blockingPausedOrDisabled, - sitePolicy, tooltipPosition, type } = this.props; - const active = (type === 'trust' && sitePolicy === WHITELISTED) || (type === 'restrict' && sitePolicy === BLACKLISTED); - const ghosteryFeatureClassNames = ClassNames('GhosteryFeatureButton', { + const active = this._trustActive() || this._restrictActive(); + // TODO Foundation dependency: button + const ghosteryFeatureClassNames = ClassNames('button', 'GhosteryFeatureButton', { 'GhosteryFeatureButton--inactive': !active, - 'GhosteryFeatureButton--active-trust': active && type === 'trust', - 'GhosteryFeatureButton--active-restrict': active && type === 'restrict', + 'GhosteryFeatureButton--active': active, + 'GhosteryFeatureButton--trust': type === 'trust', + 'GhosteryFeatureButton--restrict': type === 'restrict', + 'GhosteryFeatureButton--blockingPausedOrDisabled': blockingPausedOrDisabled, clickable: !blockingPausedOrDisabled, 'not-clickable': blockingPausedOrDisabled, }); + // TODO Foundation dependency: flex-container, align-center-middle return (
diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_features.scss index 944556790..d72264b5f 100644 --- a/app/scss/partials/_ghostery_features.scss +++ b/app/scss/partials/_ghostery_features.scss @@ -23,62 +23,71 @@ border-color 0.25s ease-out, box-shadow 0.25s ease-out, color 0.25s ease-out; + + &:hover { + background-color: $ghosty-blue; + } } .GhosteryFeatureButton--inactive { - color: #4a4a4a; + color: $tundora; border-color: #cccccc; - background-color: #ffffff; + background-color: $white; box-shadow: inset 0 0 0 0 rgba($white, 0); +} - &:hover { - background-color: #efefef; +.GhosteryFeatureButton--active { + color: $white; +} + +.GhosteryFeatureButton--trust.GhosteryFeatureButton--inactive { + .GhosteryFeatureButton__text { + background-image: buildIconTrust($tundora); } } -.GhosteryFeatureButton--active-trust { - color: #ffffff; +.GhosteryFeatureButton--trust.GhosteryFeatureButton--active { border-color: #85b329; - background-color: #9ecc42; + background-color: $atlantis; box-shadow: inset 0px 1px 7px 2px #85b329; &:hover { background-color: #85b329; } + + .GhosteryFeatureButton__text { + background-image: buildIconTrust($white); + } +} + +.GhosteryFeatureButton--restrict.GhosteryFeatureButton--inactive { + .GhosteryFeatureButton__text { + background-image: buildIconRestrict($tundora); + } } -.GhosteryFeatureButton--active-restrict { - color: #ffffff; +.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active { border-color: #ce273c; - background-color: #e74055; + background-color: $red; box-shadow: inset 0px 1px 7px 2px #ce273c; &:hover { background-color: #ce273c; } -} -.sub-component.ghostery-features { - .button-trust .button-text, - .button-restrict .button-text { - padding: 0 10px 0 30px; - background-repeat: no-repeat; - background-position: 0 center; - background-size: 14px 14px; - } - .button-trust .button-text { - background-image: buildIconTrust(#4a4a4a); - } - .button-trust.active .button-text { - background-image: buildIconTrust(#ffffff); - } - .button-restrict .button-text { - background-image: buildIconRestrict(#4a4a4a); - } - .button-restrict.active .button-text { - background-image: buildIconRestrict(#ffffff); + .GhosteryFeatureButton__text { + background-image: buildIconRestrict($white); } +} +.GhosteryFeatureButton__text { + padding: 0 10px 0 30px; + background-repeat: no-repeat; + background-position: 0 center; + background-size: 14px 14px; +} + +.sub-component.ghostery-features { .button-group.inactive { .button { color: #a4a4a4; @@ -96,18 +105,6 @@ border-color: #ff8da2; background-color: #ff8da2; } - .button-trust .button-text { - background-image: buildIconTrust(#a4a4a4); - } - .button-trust.active .button-text { - background-image: buildIconTrust(#ffffff); - } - .button-restrict .button-text { - background-image: buildIconRestrict(#a4a4a4); - } - .button-restrict.active .button-text { - background-image: buildIconRestrict(#ffffff); - } } .button-group.stacked .button { From e6f11594b91eba354536a35f47eaafc7e224f2f1 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 29 May 2019 10:57:03 -0400 Subject: [PATCH 093/131] Fix text color in Ghostery Feature Buttons. Make sure ghostery feature buttons and pause button display in a line --- .../BuildingBlocks/GhosteryFeature.jsx | 119 +++++++-- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_ghostery_features.scss | 252 +++++++++++++----- app/scss/partials/_summary.scss | 5 +- 4 files changed, 294 insertions(+), 84 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 28b2e3e32..3972e089f 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -40,9 +40,7 @@ class GhosteryFeature extends React.Component { this.props.handleClick(this.props.type); } - _getButtonText() { - const { sitePolicy, showText, type } = this.props; - + _getButtonText(sitePolicy, showText, type) { if (!showText) { return ''; } @@ -61,9 +59,7 @@ class GhosteryFeature extends React.Component { } } - _getTooltipText() { - const { sitePolicy, type } = this.props; - + _getTooltipText(sitePolicy, type) { switch (type) { case 'trust': return (sitePolicy === WHITELISTED ? @@ -93,34 +89,123 @@ class GhosteryFeature extends React.Component { render() { const { blockingPausedOrDisabled, + sitePolicy, + showText, tooltipPosition, type } = this.props; const active = this._trustActive() || this._restrictActive(); // TODO Foundation dependency: button - const ghosteryFeatureClassNames = ClassNames('button', 'GhosteryFeatureButton', { - 'GhosteryFeatureButton--inactive': !active, - 'GhosteryFeatureButton--active': active, - 'GhosteryFeatureButton--trust': type === 'trust', - 'GhosteryFeatureButton--restrict': type === 'restrict', - 'GhosteryFeatureButton--blockingPausedOrDisabled': blockingPausedOrDisabled, - clickable: !blockingPausedOrDisabled, - 'not-clickable': blockingPausedOrDisabled, - }); + const ghosteryFeatureClassNames = ClassNames( + 'button', + 'g-tooltip', + 'GhosteryFeatureButton', + 'GhosteryFeatureButton--FoundationButtonOverrides', + { + 'GhosteryFeatureButton--inactive': !active, + 'GhosteryFeatureButton--active': active, + 'GhosteryFeatureButton--trust': type === 'trust', + 'GhosteryFeatureButton--restrict': type === 'restrict', + 'GhosteryFeatureButton--blockingPausedOrDisabled': blockingPausedOrDisabled, + clickable: !blockingPausedOrDisabled, + 'not-clickable': blockingPausedOrDisabled, + } + ); // TODO Foundation dependency: flex-container, align-center-middle return (
- {this._getButtonText()} + {this._getButtonText(sitePolicy, showText, type)} - +
); } + + /** + * React's required render function. Returns JSX + * @return {JSX} JSX for rendering the Ghostery Features portion of the Summary View + */ + /* + render() { + const { + isAbPause, + isInactive, + isStacked, + isCondensed, + sitePolicy + } = this.props; + + const buttonGroupClassNames = ClassNames('button-group', { + inactive: isInactive, + stacked: isStacked, + }); + const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', { + 'ab-pause': isAbPause, + 'button-left': isAbPause && !isStacked, + 'button-top': (isAbPause || isCondensed) && isStacked, + condensed: isCondensed, + active: sitePolicy === 2, + clickable: !isInactive, + 'not-clickable': isInactive, + }); + const customClassNames = ClassNames('button', 'button-custom', 'g-tooltip', { + 'ab-pause': isAbPause, + 'button-center': isAbPause && true, + condensed: isCondensed, + active: !sitePolicy, + clickable: !isInactive, + 'not-clickable': isInactive, + }); + const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', { + 'ab-pause': isAbPause, + 'button-right': isAbPause && !isStacked, + 'button-bottom': isAbPause && isStacked, + 'button-center': !isAbPause && isCondensed && isStacked, + condensed: isCondensed, + active: sitePolicy === 1, + clickable: !isInactive, + 'not-clickable': isInactive, + }); + + return ( +
+
+
+ + + {this.getTrustText()} + + + +
+ {isAbPause && ( +
+ + + {t('summary_custom_settings')} + + + +
+ )} +
+ + + {this.getRestrictText()} + + + +
+
+
+ ); + } + */ } export default GhosteryFeature; diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index c1ed71fbf..d976c3c0d 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -546,7 +546,7 @@ class Summary extends React.Component { sitePolicy, } = this.props; const { disableBlocking } = this.state; - const containerClassNames = ClassNames('Summary__ghosteryFeatureContainer', 'g-tooltip', modifiers); + const containerClassNames = ClassNames('Summary__ghosteryFeatureContainer', modifiers); return (
diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_features.scss index d72264b5f..7a83eec99 100644 --- a/app/scss/partials/_ghostery_features.scss +++ b/app/scss/partials/_ghostery_features.scss @@ -11,83 +11,90 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -.GhosteryFeatureButton { - width: 150px; - height: 45px; - line-height: 1.5; - font-size: 11px; - margin-bottom: 0; +/** + * Ghostery Features Sass + * + * 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 + */ - transition: background-image 0.25s ease-out, +/* +.sub-component.ghostery-features { + .button { + width: 150px; + height: 45px; + font-size: 11px; + line-height: 1.5; + color: #4a4a4a; + border-color: #cccccc; + background-color: #ffffff; + margin-bottom: 0; + box-shadow: inset 0 0 0 0 rgba($white, 0); + + transition: background-image 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, - box-shadow 0.25s ease-out, + box-shadow 0.25 ease-out, color 0.25s ease-out; - - &:hover { - background-color: $ghosty-blue; + &:hover { + background-color: #efefef; + } } -} - -.GhosteryFeatureButton--inactive { - color: $tundora; - border-color: #cccccc; - background-color: $white; - box-shadow: inset 0 0 0 0 rgba($white, 0); -} - -.GhosteryFeatureButton--active { - color: $white; -} - -.GhosteryFeatureButton--trust.GhosteryFeatureButton--inactive { - .GhosteryFeatureButton__text { - background-image: buildIconTrust($tundora); + .button.active.button-trust { + color: #ffffff; + border-color: #85b329; + background-color: #9ecc42; + box-shadow: inset 0px 1px 7px 2px #85b329; + &:hover { + background-color: #85b329; + } } -} - -.GhosteryFeatureButton--trust.GhosteryFeatureButton--active { - border-color: #85b329; - background-color: $atlantis; - box-shadow: inset 0px 1px 7px 2px #85b329; - - &:hover { - background-color: #85b329; + .button.active.button-restrict { + color: #ffffff; + border-color: #ce273c; + background-color: #e74055; + box-shadow: inset 0px 1px 7px 2px #ce273c; + &:hover { + background-color: #ce273c; + } } - - .GhosteryFeatureButton__text { - background-image: buildIconTrust($white); + .button.active.ab-pause { + color: #ffffff; + border-color: #2092bf; + background-color: #1dafed; + box-shadow: inset 0px 1px 7px 2px #2092bf; + &:hover { + background-color: #0093bd; + } } -} -.GhosteryFeatureButton--restrict.GhosteryFeatureButton--inactive { - .GhosteryFeatureButton__text { - background-image: buildIconRestrict($tundora); + .full-height { height: 100%; } + .button-trust .button-text, + .button-restrict .button-text { + padding: 0 10px 0 30px; + background-repeat: no-repeat; + background-position: 0 center; + background-size: 14px 14px; } -} - -.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active { - border-color: #ce273c; - background-color: $red; - box-shadow: inset 0px 1px 7px 2px #ce273c; - - &:hover { - background-color: #ce273c; + .button-trust .button-text { + background-image: buildIconTrust(#4a4a4a); } - - .GhosteryFeatureButton__text { - background-image: buildIconRestrict($white); + .button-trust.active .button-text { + background-image: buildIconTrust(#ffffff); + } + .button-restrict .button-text { + background-image: buildIconRestrict(#4a4a4a); + } + .button-restrict.active .button-text { + background-image: buildIconRestrict(#ffffff); } -} - -.GhosteryFeatureButton__text { - padding: 0 10px 0 30px; - background-repeat: no-repeat; - background-position: 0 center; - background-size: 14px 14px; -} -.sub-component.ghostery-features { .button-group.inactive { .button { color: #a4a4a4; @@ -105,6 +112,23 @@ border-color: #ff8da2; background-color: #ff8da2; } + .button.active.ab-pause { + color: #ffffff; + border-color: #a4d4f2; + background-color: #a4d4f2; + } + .button-trust .button-text { + background-image: buildIconTrust(#a4a4a4); + } + .button-trust.active .button-text { + background-image: buildIconTrust(#ffffff); + } + .button-restrict .button-text { + background-image: buildIconRestrict(#a4a4a4); + } + .button-restrict.active .button-text { + background-image: buildIconRestrict(#ffffff); + } } .button-group.stacked .button { @@ -126,11 +150,109 @@ border-bottom-right-radius: 0; border-bottom: 0; } - + .button-left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; + } .button-center { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + .button-bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: 0; + } + .button-right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; + } +} +*/ + +/* +.button { + color: #4a4a4a; + border-color: #cccccc; + background-color: #ffffff; + box-shadow: inset 0 0 0 0 rgba($white, 0); +*/ + +.GhosteryFeatureButton { + width: 150px; + height: 45px; + + transition: background-image 0.25s ease-out, + background-color 0.25s ease-out, + border-color 0.25s ease-out, + box-shadow 0.25s ease-out, + color 0.25s ease-out; +} + +.GhosteryFeatureButton--FoundationButtonOverrides { + line-height: 1.5; + font-size: 11px; + margin-bottom: 0; +} + +.GhosteryFeatureButton--inactive { + color: $tundora; + border-color: #cccccc; + background-color: $white; + box-shadow: inset 0 0 0 0 rgba($white, 0); + + &:hover { + color: $tundora; + } +} + +.GhosteryFeatureButton--active { + color: $white; +} + +.GhosteryFeatureButton--trust.GhosteryFeatureButton--active { + border-color: #85b329; + background-color: $atlantis; + box-shadow: inset 0px 1px 7px 2px #85b329; + + &:hover { + background-color: #85b329; + } +} + +.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active { + border-color: #ce273c; + background-color: $red; + box-shadow: inset 0px 1px 7px 2px #ce273c; + + &:hover { + background-color: #ce273c; + } +} + +.GhosteryFeatureButton__text { + padding: 0 10px 0 30px; + background-repeat: no-repeat; + background-position: 0 center; + background-size: 14px 14px; +} + +.GhosteryFeatureButton--trust.GhosteryFeatureButton--inactive .GhosteryFeatureButton__text { + background-image: buildIconTrust($tundora); + +} +.GhosteryFeatureButton--trust.GhosteryFeatureButton--active .GhosteryFeatureButton__text { + background-image: buildIconTrust($white); + +} +.GhosteryFeatureButton--restrict.GhosteryFeatureButton--inactive .GhosteryFeatureButton__text { + background-image: buildIconRestrict($tundora); + +} +.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active .GhosteryFeatureButton__text { + background-image: buildIconRestrict($white); } diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 680417eaf..bfe0449f8 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -180,7 +180,10 @@ } .Summary__ghosteryFeatureContainer { - text-align: center; + display: inline-block; +} + +.Summary__pauseButtonContainer { display: inline-block; } From 069ae5deb1af64cf31e5bc9613f091db175e3809 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 29 May 2019 13:45:52 -0400 Subject: [PATCH 094/131] Implement BEM CSS for Cliqz Feature icon and count elements --- .../BuildingBlocks/CliqzFeature.jsx | 25 +++- app/scss/partials/_cliqz_features.scss | 115 +++++++++++------- 2 files changed, 93 insertions(+), 47 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 1163a5096..ea27df38f 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -115,11 +115,30 @@ class CliqzFeature extends React.Component { type } = this.props; - const specificFeatureModifier = `CliqzFeature--${type}`; + let cssType; + switch (type) { + case 'anti_tracking': + cssType = 'antitrack'; + break; + case 'ad_block': + cssType = 'adblock'; + break; + case 'smart_block': + cssType = 'smartblock'; + break; + default: + cssType = 'check-the-type-props-you-are-passing-to-CliqzFeature'; + break; + } + + const specificFeatureModifier = `CliqzFeature--${cssType}`; const cliqzFeatureClassNames = ClassNames('CliqzFeature', specificFeatureModifier, { - active, + 'CliqzFeature--active': active, + 'CliqzFeature--inactive': !active, + 'CliqzFeature--cliqzInactive': cliqzInactive, + 'CliqzFeature--cliqzActive': !cliqzInactive, clickable: !cliqzInactive, - notClickable: cliqzInactive, + 'not-clickable': cliqzInactive, }); const featureName = t(`drawer_title_${type}`); diff --git a/app/scss/partials/_cliqz_features.scss b/app/scss/partials/_cliqz_features.scss index 71ed070ee..a228b08b2 100644 --- a/app/scss/partials/_cliqz_features.scss +++ b/app/scss/partials/_cliqz_features.scss @@ -11,44 +11,48 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -.CliqzFeature { - -} - -.CliqzFeature--cliqzActive-featureActive { - .CliqzFeature__count { - color: #1dafed; - background: none; - } -} +$cliqz-feature--blue: #1dafed; +$cliqz-feature--pale-blue: #a4d4f2; +$cliqz-feature--gray: #c8c7c2; +$cliqz-feature--light-gray: #dedede; -.CliqzFeature--cliqzInactive-featureInactive { - .CliqzFeature__count { - color: rgba(#dedede, 0); - background-image: buildIconDash(#dedede); - } -} +.CliqzFeature { -.CliqzFeature--cliqzInactive-featureActive { - .CliqzFeature__count { - color: #a4d4f2; - background: none; - } } .CliqzFeature__count { - color: rgba(#c8c7c2, 0); text-align: center; font-size: 14px; line-height: 28px; font-weight: 600; transition: color 0.25s ease-out; + transition: background-image 0.25s ease-out; +} +.CliqzFeature--inactive .CliqzFeature__count { background-repeat: no-repeat; background-position: center center; background-size: 10px 10px; - transition: background-image 0.25s ease-out; - background-image: buildIconDash(#c8c7c2); +} + +.CliqzFeature--cliqzActive.CliqzFeature--active .CliqzFeature__count { + color: $cliqz-feature--blue; + background: none; +} + +.CliqzFeature--cliqzActive.CliqzFeature--inactive .CliqzFeature__count { + color: rgba($cliqz-feature--gray, 0); + background-image: buildIconDash($cliqz-feature--gray); +} + +.CliqzFeature--cliqzInactive.CliqzFeature--active .CliqzFeature__count { + color: $cliqz-feature--pale-blue; + background: none; +} + +.CliqzFeature--cliqzInactive.CliqzFeature--inactive .CliqzFeature__count { + color: rgba($cliqz-feature--light-gray, 0); + background-image: buildIconDash($cliqz-feature--light-gray); } .CliqzFeature__icon { @@ -61,10 +65,49 @@ transition: background-image 0.25s ease-out; } +.CliqzFeature--antitrack.CliqzFeature--cliqzActive.CliqzFeature--inactive .CliqzFeature__icon { + background-image: buildIconAntiTracking($cliqz-feature--gray); +} +.CliqzFeature--antitrack.CliqzFeature--cliqzActive.CliqzFeature--active .CliqzFeature__icon { + background-image: buildIconAntiTracking($cliqz-feature--blue); +} +.CliqzFeature--antitrack.CliqzFeature--cliqzInactive.CliqzFeature--inactive .CliqzFeature__icon { + background-image: buildIconAntiTracking($cliqz-feature--light-gray); +} +.CliqzFeature--antitrack.CliqzFeature--cliqzInactive.CliqzFeature--active .CliqzFeature__icon { + background-image: buildIconAntiTracking($cliqz-feature--pale-blue); +} + +.CliqzFeature--adblock.CliqzFeature--cliqzActive.CliqzFeature--inactive .CliqzFeature__icon { + background-image: buildIconAdBlocking($cliqz-feature--gray); +} +.CliqzFeature--adblock.CliqzFeature--cliqzActive.CliqzFeature--active .CliqzFeature__icon { + background-image: buildIconAdBlocking($cliqz-feature--blue); +} +.CliqzFeature--adblock.CliqzFeature--cliqzInactive.CliqzFeature--inactive .CliqzFeature__icon { + background-image: buildIconAdBlocking($cliqz-feature--light-gray); +} +.CliqzFeature--adblock.CliqzFeature--cliqzInactive.CliqzFeature--active .CliqzFeature__icon { + background-image: buildIconAdBlocking($cliqz-feature--pale-blue); +} + +.CliqzFeature--smartblock.CliqzFeature--cliqzActive.CliqzFeature--inactive .CliqzFeature__icon { + background-image: buildIconSmartBlocking($cliqz-feature--gray); +} +.CliqzFeature--smartblock.CliqzFeature--cliqzActive.CliqzFeature--active .CliqzFeature__icon { + background-image: buildIconSmartBlocking($cliqz-feature--blue); +} +.CliqzFeature--smartblock.CliqzFeature--cliqzInactive.CliqzFeature--inactive .CliqzFeature__icon { + background-image: buildIconSmartBlocking($cliqz-feature--light-gray); +} +.CliqzFeature--smartblock.CliqzFeature--cliqzInactive.CliqzFeature--active .CliqzFeature__icon { + background-image: buildIconSmartBlocking($cliqz-feature--pale-blue); +} + .sub-component.cliqz-features { .feature-name { - color: #c8c7c2; + color: $cliqz-feature--gray; text-align: center; font-size: 11px; line-height: 26px; @@ -75,9 +118,9 @@ overflow-x: hidden; text-overflow: ellipsis; } - .active .feature-name { color: #1dafed; } - &.inactive .feature-name { color: #dedede; } - &.inactive .active .feature-name { color: #a4d4f2; } + .active .feature-name { color: $cliqz-feature--blue; } + &.inactive .feature-name { color: $cliqz-feature--light-gray; } + &.inactive .active .feature-name { color: $cliqz-feature--pale-blue; } &.smaller .feature-name { display: none; } &.smaller.condensed .cliqz-feature { @@ -91,22 +134,6 @@ } } - .anti-tracking .icon { background-image: buildIconAntiTracking(#c8c7c2); } - .active.anti-tracking .icon { background-image: buildIconAntiTracking(#1dafed); } - &.inactive .anti-tracking .icon { background-image: buildIconAntiTracking(#dedede); } - &.inactive .active.anti-tracking .icon { background-image: buildIconAntiTracking(#a4d4f2); } - - .ad-blocking .icon { background-image: buildIconAdBlocking(#c8c7c2); } - .active.ad-blocking .icon { background-image: buildIconAdBlocking(#1dafed); } - &.inactive .ad-blocking .icon { background-image: buildIconAdBlocking(#dedede); } - &.inactive .active.ad-blocking .icon { background-image: buildIconAdBlocking(#a4d4f2); } - - .smart-blocking .icon { background-image: buildIconSmartBlocking(#c8c7c2); } - .active.smart-blocking .icon { background-image: buildIconSmartBlocking(#1dafed); } - &.inactive .smart-blocking .icon { background-image: buildIconSmartBlocking(#dedede); } - &.inactive .active.smart-blocking .icon { background-image: buildIconSmartBlocking(#a4d4f2); } - - .cliqz-feature.clickable:hover { .count { background-image: buildIconDash(#a4a4a4); } &.anti-tracking .icon { background-image: buildIconAntiTracking(#a4a4a4); } From a465084935e75630f540b76586948bbfa56117d2 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 29 May 2019 16:44:04 -0400 Subject: [PATCH 095/131] Implement BEM CSS for CliqzFeature feature-name element --- .../BuildingBlocks/CliqzFeature.jsx | 2 +- app/scss/partials/_cliqz_features.scss | 30 +++++++++++-------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index ea27df38f..ce1c8599e 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -140,7 +140,7 @@ class CliqzFeature extends React.Component { clickable: !cliqzInactive, 'not-clickable': cliqzInactive, }); - const featureName = t(`drawer_title_${type}`); + const featureName = t(`drawer_title_enable_${type}`); return (
diff --git a/app/scss/partials/_cliqz_features.scss b/app/scss/partials/_cliqz_features.scss index a228b08b2..f4be5fd5d 100644 --- a/app/scss/partials/_cliqz_features.scss +++ b/app/scss/partials/_cliqz_features.scss @@ -104,20 +104,24 @@ $cliqz-feature--light-gray: #dedede; background-image: buildIconSmartBlocking($cliqz-feature--pale-blue); } -.sub-component.cliqz-features { +.CliqzFeature__feature-name { + color: $cliqz-feature--gray; + text-align: center; + font-size: 11px; + line-height: 26px; + font-weight: 600; + transition: color 0.25s ease-out; - .feature-name { - color: $cliqz-feature--gray; - text-align: center; - font-size: 11px; - line-height: 26px; - font-weight: 600; - transition: color 0.25s ease-out; - - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - } + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; +} + +.CliqzFeature--active .CliqzFeature__feature-name { + color: $cliqz-feature--blue; +} + +.sub-component.cliqz-features { .active .feature-name { color: $cliqz-feature--blue; } &.inactive .feature-name { color: $cliqz-feature--light-gray; } &.inactive .active .feature-name { color: $cliqz-feature--pale-blue; } From 68f4b543337bad7a170ccd86c42536b93ae5547e Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sat, 1 Jun 2019 19:45:13 -0400 Subject: [PATCH 096/131] Implement BEM CSS for stats nav button --- app/panel/components/Summary.jsx | 11 ++++++++--- app/scss/partials/_summary.scss | 12 ++++++------ 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index d976c3c0d..2b2b977ff 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -660,9 +660,14 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the stats nav button */ _renderStatsNavButton() { - const summaryViewStatsButton = ClassNames('Summary__statsButton', 'g-tooltip', { - hide: this.props.is_expert - }); + const summaryViewStatsButton = ClassNames( + 'Summary__statsButton', + 'Summary__statsButton--absolutely-positioned', + 'g-tooltip', + { + hide: this.props.is_expert, + } + ); return (
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index bfe0449f8..5c1c3ea41 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -56,6 +56,11 @@ .GhosteryKVReadout__value { color: #9ecc42; } } +.Summary { + position: absolute; + height: 479px; +} + .Summary__pageHostContainer { text-align: center; font-size: 11px; @@ -66,11 +71,6 @@ line-height: 21px; } -.Summary { - posiiton: absolute; - height: 479px; -} - .Summary--simple { width: 100%; @@ -162,7 +162,7 @@ } } -.Summary__statsButton { +.Summary__statsButton.Summary__statsButton--absolutely-positioned { position: absolute; right: 0; top: 40px; From da4ea2e23ab76b743fa384c8592fdd4c29a6d0a9 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sat, 1 Jun 2019 20:27:53 -0400 Subject: [PATCH 097/131] Implement BEM CSS for green upgrade banner --- app/panel/components/Summary.jsx | 8 +++-- app/scss/partials/_summary.scss | 55 ++++++++++++++++---------------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 2b2b977ff..8dd93fe83 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -691,9 +691,11 @@ class Summary extends React.Component { } {!isPlusSubscriber && -
- {t('subscription_upgrade_to')} - +
+
+ {t('subscription_upgrade_to')} + +
}
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 5c1c3ea41..a5960c98f 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -196,45 +196,46 @@ margin: 0 10px; } -#content-summary { - .upgrade-banner-container { - @extend %pointer; - position: absolute; - top: 10px; - background: url("../../app/images/panel/green-upgrade-banner.svg"); - background-size: 100% 23px; - height: 23px; - } +.Summary__upgradeBannerContainer { + position: absolute; + top: 10px; +} +.UpgradeBanner { + @extend %pointer; + height: 23px; + background: url("../../app/images/panel/green-upgrade-banner.svg"); + background-size: contain; +} + +.UpgradeBanner__text { + display: inline-block; + padding: 0 4px 0 10px; + vertical-align: sub; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: bold; + font-size: 12px; + color: white; +} + +.UpgradeBanner__plus { + display: inline-block; + padding-right: 18px; + vertical-align: sub; +} + +#content-summary { &.expert .upgrade-banner-container { background-size: 100% 20px; height: 20px; } - .upgrade-banner-text { - display: inline-block; - font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-weight: bold; - color: white; - - font-size: 12px; - vertical-align: sub; - padding: 0 4px 0 10px; - } - &.expert .upgrade-banner-text { font-size: 10px; vertical-align: baseline; padding-left: 8px; } - .upgrade-banner-plus { - display: inline-block; - padding-right: 18px; - - vertical-align: sub; - } - &.expert .upgrade-banner-plus { vertical-align: middle; } From 0f569c345a004ee9740ac93917725b7f158da112 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 3 Jun 2019 12:58:20 -0400 Subject: [PATCH 098/131] Finish and debug BEM CSS for green upgrade banner --- app/panel/components/Summary.jsx | 8 +++++- app/scss/partials/_summary.scss | 48 +++++++++++++++++++------------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 8dd93fe83..894b2cb8a 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -682,7 +682,13 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon */ _renderPlusUpgradeBannerOrSubscriberIcon() { + const { is_expert } = this.props; + const isPlusSubscriber = this._isPlusSubscriber(); + const upgradeBannerClassNames = ClassNames('UpgradeBanner', { + 'UpgradeBanner--normal': !is_expert, + 'UpgradeBanner--small': is_expert, + }); return (
@@ -692,7 +698,7 @@ class Summary extends React.Component { {!isPlusSubscriber &&
-
+
{t('subscription_upgrade_to')}
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index a5960c98f..5add908f7 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -203,43 +203,51 @@ .UpgradeBanner { @extend %pointer; - height: 23px; background: url("../../app/images/panel/green-upgrade-banner.svg"); background-size: contain; } +.UpgradeBanner--normal { + height: 23px; + + .UpgradeBanner__text { + font-size: 12px; + vertical-align: sub; + padding: 0 4px 0 10px; + } + + .UpgradeBanner__plus { + vertical-align: sub; + } +} + +.UpgradeBanner--small { + height: 20px; + + .UpgradeBanner__text { + font-size: 10px; + vertical-align: baseline; + padding: 0 4px 0 8px; + } + + .UpgradeBanner__plus { + vertical-align: middle; + } +} + .UpgradeBanner__text { display: inline-block; - padding: 0 4px 0 10px; - vertical-align: sub; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: bold; - font-size: 12px; color: white; } .UpgradeBanner__plus { display: inline-block; padding-right: 18px; - vertical-align: sub; } #content-summary { - &.expert .upgrade-banner-container { - background-size: 100% 20px; - height: 20px; - } - - &.expert .upgrade-banner-text { - font-size: 10px; - vertical-align: baseline; - padding-left: 8px; - } - - &.expert .upgrade-banner-plus { - vertical-align: middle; - } - .gold-plus-icon { @extend %pointer; position: absolute; From 44110b01a1e7e79e35cd3c7826f4fe96ec22ef5b Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 3 Jun 2019 15:41:30 -0400 Subject: [PATCH 099/131] Move upgrade banner css to its own partial --- app/scss/panel.scss | 1 + app/scss/partials/_summary.scss | 52 ----------------------- app/scss/partials/_upgrade_banner.scss | 58 ++++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 52 deletions(-) create mode 100644 app/scss/partials/_upgrade_banner.scss diff --git a/app/scss/panel.scss b/app/scss/panel.scss index 289d7193c..2213bcd03 100644 --- a/app/scss/panel.scss +++ b/app/scss/panel.scss @@ -54,6 +54,7 @@ html body { @import './partials/_header'; @import './partials/_callout'; @import './partials/_summary'; +@import './partials/_upgrade_banner'; @import './partials/_detail'; @import './partials/_blocking'; @import './partials/_rewards'; diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 5add908f7..ac8bf63d2 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -11,8 +11,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -// The donut *container* is specific to the Summary component and should live here -// The donut itself is not intrinsically tied to Summary and can live wherever .GhosteryTextLabel { color: #4a4a4a; font-weight: 600; @@ -175,10 +173,6 @@ height: 162px; } -.Summary__ghosteryFeaturesContainer { - -} - .Summary__ghosteryFeatureContainer { display: inline-block; } @@ -201,52 +195,6 @@ top: 10px; } -.UpgradeBanner { - @extend %pointer; - background: url("../../app/images/panel/green-upgrade-banner.svg"); - background-size: contain; -} - -.UpgradeBanner--normal { - height: 23px; - - .UpgradeBanner__text { - font-size: 12px; - vertical-align: sub; - padding: 0 4px 0 10px; - } - - .UpgradeBanner__plus { - vertical-align: sub; - } -} - -.UpgradeBanner--small { - height: 20px; - - .UpgradeBanner__text { - font-size: 10px; - vertical-align: baseline; - padding: 0 4px 0 8px; - } - - .UpgradeBanner__plus { - vertical-align: middle; - } -} - -.UpgradeBanner__text { - display: inline-block; - font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-weight: bold; - color: white; -} - -.UpgradeBanner__plus { - display: inline-block; - padding-right: 18px; -} - #content-summary { .gold-plus-icon { @extend %pointer; diff --git a/app/scss/partials/_upgrade_banner.scss b/app/scss/partials/_upgrade_banner.scss new file mode 100644 index 000000000..4fe139ad9 --- /dev/null +++ b/app/scss/partials/_upgrade_banner.scss @@ -0,0 +1,58 @@ +/** + * Upgrade Banner Sass + * + * 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 + */ + +.UpgradeBanner { + @extend %pointer; + background: url("../../app/images/panel/green-upgrade-banner.svg"); + background-size: contain; +} + +.UpgradeBanner--normal { + height: 23px; + + .UpgradeBanner__text { + font-size: 12px; + vertical-align: sub; + padding: 0 4px 0 10px; + } + + .UpgradeBanner__plus { + vertical-align: sub; + } +} + +.UpgradeBanner--small { + height: 20px; + + .UpgradeBanner__text { + font-size: 10px; + vertical-align: baseline; + padding: 0 4px 0 8px; + } + + .UpgradeBanner__plus { + vertical-align: middle; + } +} + +.UpgradeBanner__text { + display: inline-block; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: bold; + color: white; +} + +.UpgradeBanner__plus { + display: inline-block; + padding-right: 18px; +} From 6516f1ca333d1a5e57534045a1365df0ab35964d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 3 Jun 2019 16:15:58 -0400 Subject: [PATCH 100/131] Implement BEM CSS for subscriber badge --- app/panel/components/Summary.jsx | 6 +++++- app/scss/panel.scss | 1 + app/scss/partials/_subscriber_badge.scss | 16 ++++++++++++++++ app/scss/partials/_summary.scss | 11 ++++------- 4 files changed, 26 insertions(+), 8 deletions(-) create mode 100644 app/scss/partials/_subscriber_badge.scss diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 894b2cb8a..93568ead1 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -693,7 +693,11 @@ class Summary extends React.Component { return (
{isPlusSubscriber && - +
+
+ +
+
} {!isPlusSubscriber && diff --git a/app/scss/panel.scss b/app/scss/panel.scss index 2213bcd03..63e5bb929 100644 --- a/app/scss/panel.scss +++ b/app/scss/panel.scss @@ -55,6 +55,7 @@ html body { @import './partials/_callout'; @import './partials/_summary'; @import './partials/_upgrade_banner'; +@import './partials/_subscriber_badge'; @import './partials/_detail'; @import './partials/_blocking'; @import './partials/_rewards'; diff --git a/app/scss/partials/_subscriber_badge.scss b/app/scss/partials/_subscriber_badge.scss new file mode 100644 index 000000000..9c486b0ff --- /dev/null +++ b/app/scss/partials/_subscriber_badge.scss @@ -0,0 +1,16 @@ +/** + * Subscriber Badge Sass + * + * 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 + */ + +.SubscriberBadge { + @extend %pointer; +} diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index ac8bf63d2..72b0cfb6d 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -195,11 +195,8 @@ top: 10px; } -#content-summary { - .gold-plus-icon { - @extend %pointer; - position: absolute; - left: 10px; - top: 11px; - } +.Summary__subscriberBadgeContainer { + position: absolute; + left: 10px; + top: 11px; } From 40001d3ff82007881d8a90c21d6c2a928146737a Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 3 Jun 2019 16:28:54 -0400 Subject: [PATCH 101/131] Update classes in the JSX for the trackers blocked and requests modified readouts --- app/panel/components/Summary.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 93568ead1..50049454d 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -484,7 +484,7 @@ class Summary extends React.Component { return (
- {t('trackers_blocked')} + {t('trackers_blocked')} {this._totalTrackersBlockedCount()} @@ -505,8 +505,8 @@ class Summary extends React.Component { return (
- {t('requests_modified')} - + {t('requests_modified')} + {this._requestsModifiedCount()}
@@ -530,7 +530,7 @@ class Summary extends React.Component { return (
- {t('page_load')} + {t('page_load')} {trackerLatencyTotal ? `${trackerLatencyTotal} ${t('settings_seconds')}` : '-'} From 46d7a94cfa6cc2702174483b29e2f4db00051512 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 4 Jun 2019 00:32:24 -0400 Subject: [PATCH 102/131] Implement BEM CSS for Donut Graph component --- .../components/BuildingBlocks/DonutGraph.jsx | 16 ++-- app/panel/components/Summary.jsx | 1 - app/scss/partials/_donut_graph.scss | 91 +++++++++++-------- app/scss/partials/_summary.scss | 5 +- 4 files changed, 65 insertions(+), 48 deletions(-) diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index a4af6d4e0..8a676dc88 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -314,23 +314,23 @@ class DonutGraph extends React.Component { */ render() { const { isSmall, totalCount } = this.props; - const componentClasses = ClassNames('sub-component', 'donut-graph', { - small: isSmall, - big: !isSmall, + const componentClasses = ClassNames('DonutGraph', { + 'DonutGraph--big': !isSmall, + 'DonutGraph--small': isSmall, }); return (
-
+
{this.props.categories.map(cat => ( - + {cat.name} ))}
-
{ this.node = node; }} /> -
-
+
{ this.node = node; }} /> +
+
{totalCount} Date: Tue, 4 Jun 2019 01:04:52 -0400 Subject: [PATCH 103/131] Convert total tracker count display in Condensed view to BEM --- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_summary.scss | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 0b7f722f3..96e144b14 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -453,7 +453,7 @@ class Summary extends React.Component { */ _renderTotalTrackersFound() { return ( -
+
{this._totalTrackersFound()} Date: Tue, 4 Jun 2019 16:08:57 -0400 Subject: [PATCH 104/131] Fix hover state and feature_name element CSS for CliqzFeature. Clean up and organize its partial. --- .../BuildingBlocks/CliqzFeature.jsx | 77 +++++---- app/panel/components/Summary.jsx | 12 +- app/scss/panel.scss | 2 +- app/scss/partials/_cliqz_feature.scss | 137 +++++++++++++++ app/scss/partials/_cliqz_features.scss | 158 ------------------ 5 files changed, 196 insertions(+), 190 deletions(-) create mode 100644 app/scss/partials/_cliqz_feature.scss delete mode 100644 app/scss/partials/_cliqz_features.scss diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index ce1c8599e..48d2c41bb 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -41,8 +41,23 @@ class CliqzFeature extends React.Component { return; } + let featureType; + switch (type) { + case 'anti-tracking': + featureType = 'anti_tracking'; + break; + case 'ad-blocking': + featureType = 'ad_block'; + break; + case 'smart-blocking': + featureType = 'smart_block'; + break; + default: + featureType = ''; + } + clickButton({ - feature: `enable_${type}`, + feature: `enable_${featureType}`, status: active, text: this._getAlertText(), }); @@ -55,11 +70,11 @@ class CliqzFeature extends React.Component { return '-'; } - if (type === 'anti_tracking') { + if (type === 'anti-tracking') { return data && data.totalUnsafeCount || 0; - } else if (type === 'ad_block') { + } else if (type === 'ad-blocking') { return data && data.totalCount || 0; - } else if (type === 'smart_block') { + } else if (type === 'smart-blocking') { return this._count(data, data.blocked) + this._count(data, data.unblocked); } @@ -111,42 +126,48 @@ class CliqzFeature extends React.Component { const { active, cliqzInactive, + isSmaller, + isCondensed, tooltipPosition, - type + type, } = this.props; - let cssType; + const sharedClassNames = ClassNames({ + active, + inactive: !active, + clickable: !cliqzInactive, + 'not-clickable': cliqzInactive, + }); + const cliqzFeatureClassNames = ClassNames('CliqzFeature', sharedClassNames, { + normal: !isSmaller && !isCondensed, + smaller: isSmaller, + condensed: isCondensed, + }); + const cliqzFeatureCountClassNames = ClassNames('CliqzFeature__count', sharedClassNames); + const cliqzFeatureNameClassNames = ClassNames('CliqzFeature__feature-name', sharedClassNames); + const iconClassNames = ClassNames('CliqzFeature__icon', sharedClassNames, type, 'g-tooltip'); + + let localeType = ''; switch (type) { - case 'anti_tracking': - cssType = 'antitrack'; + case 'anti-tracking': + localeType = 'anti_tracking'; break; - case 'ad_block': - cssType = 'adblock'; + case 'ad-blocking': + localeType = 'ad_block'; break; - case 'smart_block': - cssType = 'smartblock'; + case 'smart-blocking': + localeType = 'smart_block'; break; default: - cssType = 'check-the-type-props-you-are-passing-to-CliqzFeature'; - break; + localeType = ''; } - - const specificFeatureModifier = `CliqzFeature--${cssType}`; - const cliqzFeatureClassNames = ClassNames('CliqzFeature', specificFeatureModifier, { - 'CliqzFeature--active': active, - 'CliqzFeature--inactive': !active, - 'CliqzFeature--cliqzInactive': cliqzInactive, - 'CliqzFeature--cliqzActive': !cliqzInactive, - clickable: !cliqzInactive, - 'not-clickable': cliqzInactive, - }); - const featureName = t(`drawer_title_enable_${type}`); + const featureName = t(`drawer_title_enable_${localeType}`); return (
-
{this._getCount()}
-
-
+
{this._getCount()}
+
+
{featureName}
Date: Wed, 5 Jun 2019 13:47:28 -0400 Subject: [PATCH 105/131] Debug and cleanup CliqzFeature component and its SCSS partial --- .../BuildingBlocks/CliqzFeature.jsx | 58 ++++++------------- app/panel/components/Summary.jsx | 11 ++-- app/panel/components/Tooltip.jsx | 4 +- app/scss/panel.scss | 2 +- app/scss/partials/_cliqz_feature.scss | 36 ++++++------ app/scss/partials/_tooltip.scss | 2 +- 6 files changed, 46 insertions(+), 67 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 48d2c41bb..7d539b22f 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -41,20 +41,7 @@ class CliqzFeature extends React.Component { return; } - let featureType; - switch (type) { - case 'anti-tracking': - featureType = 'anti_tracking'; - break; - case 'ad-blocking': - featureType = 'ad_block'; - break; - case 'smart-blocking': - featureType = 'smart_block'; - break; - default: - featureType = ''; - } + const featureType = type === 'anti_track' ? 'anti_tracking' : type; clickButton({ feature: `enable_${featureType}`, @@ -70,11 +57,11 @@ class CliqzFeature extends React.Component { return '-'; } - if (type === 'anti-tracking') { + if (type === 'anti_track') { return data && data.totalUnsafeCount || 0; - } else if (type === 'ad-blocking') { + } else if (type === 'ad_block') { return data && data.totalCount || 0; - } else if (type === 'smart-blocking') { + } else if (type === 'smart_block') { return this._count(data, data.blocked) + this._count(data, data.unblocked); } @@ -103,7 +90,7 @@ class CliqzFeature extends React.Component { _getTooltipHeaderText() { const { isTooltipHeader, type } = this.props; - if (isTooltipHeader) { + if (!isTooltipHeader) { return false; } @@ -145,36 +132,25 @@ class CliqzFeature extends React.Component { }); const cliqzFeatureCountClassNames = ClassNames('CliqzFeature__count', sharedClassNames); const cliqzFeatureNameClassNames = ClassNames('CliqzFeature__feature-name', sharedClassNames); - const iconClassNames = ClassNames('CliqzFeature__icon', sharedClassNames, type, 'g-tooltip'); - - let localeType = ''; - switch (type) { - case 'anti-tracking': - localeType = 'anti_tracking'; - break; - case 'ad-blocking': - localeType = 'ad_block'; - break; - case 'smart-blocking': - localeType = 'smart_block'; - break; - default: - localeType = ''; - } - const featureName = t(`drawer_title_enable_${localeType}`); + const cssTypeName = type.replace('_', '-'); + const iconClassNames = ClassNames('CliqzFeature__icon', sharedClassNames, cssTypeName, 'g-tooltip'); + + const featureType = type === 'anti_track' ? 'anti_tracking' : type; + const featureName = t(`drawer_title_enable_${featureType}`); return (
{this._getCount()}
-
+
+ +
{featureName}
-
); } diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index bf05f1036..8dd49d19e 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -27,7 +27,10 @@ import { PauseButton } from './BuildingBlocks'; -const { BLACKLISTED, IS_CLIQZ, WHITELISTED } = globals; +const { + IS_CLIQZ, + BLACKLISTED, WHITELISTED, +} = globals; /** * @class Implements the Summary View, which is displayed as the entire panel @@ -595,7 +598,7 @@ class Summary extends React.Component {
Date: Wed, 5 Jun 2019 16:40:50 -0400 Subject: [PATCH 106/131] Uncomment mouseleave handler in Tooltip --- app/panel/components/Tooltip.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Tooltip.jsx b/app/panel/components/Tooltip.jsx index a1cb757cc..fbe1aac8d 100644 --- a/app/panel/components/Tooltip.jsx +++ b/app/panel/components/Tooltip.jsx @@ -77,8 +77,8 @@ class Tooltip extends React.Component { * Implements mouseleave. */ leave() { - // clearTimeout(this.delay); - // this.setState({ show: false }); + clearTimeout(this.delay); + this.setState({ show: false }); } /** From a6f8079c10a00d0b36772028e23d9a89b1b9b851 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 6 Jun 2019 16:38:58 -0400 Subject: [PATCH 107/131] Move GhosteryKVReadout CSS to SummaryPageStat --- app/panel/components/Summary.jsx | 33 +++++++++++++++----------------- app/scss/partials/_summary.scss | 20 +++++++++++++++++++ 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 8dd49d19e..fa2350818 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -479,16 +479,15 @@ class Summary extends React.Component { const totalTrackersBlockedContainerClassNames = ClassNames('Summary__pageStatContainer', { clickable: is_expert, }); - const totalTrackersBlockedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalTrackersBlocked', { - 'GhosteryKVReadout--withoutKey': isCondensed, - 'GhosteryKVReadout--summaryCondensed': isCondensed, + const totalTrackersBlockedClassNames = ClassNames('SummaryPageStat', 'total-trackers-blocked', { + 'SummaryPageStat--condensed-view': isCondensed, }); return (
- {t('trackers_blocked')} - + {t('trackers_blocked')} + {this._totalTrackersBlockedCount()}
@@ -500,16 +499,15 @@ class Summary extends React.Component { const { is_expert } = this.props; const isCondensed = this._isCondensed(); - const totalRequestsModifiedClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--totalRequestsModified', { - 'GhosteryKVReadout--withoutKey': isCondensed, - 'GhosteryKVReadout--summaryCondensed': isCondensed, + const totalRequestsModifiedClassNames = ClassNames('SummaryPageStat', 'total-requests-modified', { + 'SummaryPageStat--condensed-view': isCondensed, }); return (
- {t('requests_modified')} - + {t('requests_modified')} + {this._requestsModifiedCount()}
@@ -522,19 +520,18 @@ class Summary extends React.Component { const { trackerLatencyTotal } = this.state; const isCondensed = this._isCondensed(); - const pageLoadTimeClassNames = ClassNames('GhosteryKVReadout', 'GhosteryKVReadout--pageLoadTime', { - 'GhosteryKVReadout--pageLoadTime-fast': this._isPageLoadFast(), - 'GhosteryKVReadout--pageLoadTime-slow': this._isPageLoadSlow(), - 'GhosteryKVReadout--pageLoadTime-medium': this._isPageLoadMedium(), - 'GhosteryKVReadout--withoutKey': isCondensed, - 'GhosteryKVReadout--summaryCondensed': isCondensed, + const pageLoadTimeClassNames = ClassNames('SummaryPageStat', { + 'page-load-time-slow': this._isPageLoadSlow(), + 'page-load-time-medium': this._isPageLoadMedium(), + 'page-load-time-fast': this._isPageLoadFast(), + 'SummaryPageStat--condensed-view': isCondensed, }); return (
- {t('page_load')} - + {t('page_load')} + {trackerLatencyTotal ? `${trackerLatencyTotal} ${t('settings_seconds')}` : '-'}
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 9c3dd3242..68ccaa063 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -16,6 +16,26 @@ font-weight: 600; } +.SummaryPageStat { + text-align: center; + font-weight: 600; +} + +.SummaryPageStat--condensed-view { + padding: 0; + margin: 5px 0; + + .SummaryPageStat__label { + color: #4a4a4a; + } +} + +.SummaryPageStat.total-trackers-blocked .SummaryPageStat__value { color: #e74055; } +.SummaryPageStat.total-requests-modified .SummaryPageStat__value { color: #00aef0; } +.SummaryPageStat.page-load-time-slow .SummaryPageStat__value { color: #e74055; } +.SummaryPageStat.page-load-time-medium .SummaryPageStat__value { color: #ffc063; } +.SummaryPageStat.page-load-time-fast .SummaryPageStat__value { color: #9ecc42; } + .GhosteryKVReadout { text-align: center; font-weight: 600; From c561a55d58a094d8ba4a47f24c173aad3cb453f3 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 6 Jun 2019 16:46:59 -0400 Subject: [PATCH 108/131] Clean up page stat render helpers in Summary. Remove GhosteryKVReadout CSS from summary partial. --- app/panel/components/Summary.jsx | 9 +++----- app/scss/partials/_summary.scss | 38 -------------------------------- 2 files changed, 3 insertions(+), 44 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index fa2350818..0afab3aed 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -474,13 +474,12 @@ class Summary extends React.Component { */ _renderTotalTrackersBlocked() { const { is_expert } = this.props; - const isCondensed = this._isCondensed(); const totalTrackersBlockedContainerClassNames = ClassNames('Summary__pageStatContainer', { clickable: is_expert, }); const totalTrackersBlockedClassNames = ClassNames('SummaryPageStat', 'total-trackers-blocked', { - 'SummaryPageStat--condensed-view': isCondensed, + 'SummaryPageStat--condensed-view': this._isCondensed(), }); return ( @@ -497,10 +496,9 @@ class Summary extends React.Component { _renderTotalRequestsModified() { const { is_expert } = this.props; - const isCondensed = this._isCondensed(); const totalRequestsModifiedClassNames = ClassNames('SummaryPageStat', 'total-requests-modified', { - 'SummaryPageStat--condensed-view': isCondensed, + 'SummaryPageStat--condensed-view': this._isCondensed(), }); return ( @@ -518,13 +516,12 @@ class Summary extends React.Component { _renderPageLoadTime() { const { trackerLatencyTotal } = this.state; - const isCondensed = this._isCondensed(); const pageLoadTimeClassNames = ClassNames('SummaryPageStat', { 'page-load-time-slow': this._isPageLoadSlow(), 'page-load-time-medium': this._isPageLoadMedium(), 'page-load-time-fast': this._isPageLoadFast(), - 'SummaryPageStat--condensed-view': isCondensed, + 'SummaryPageStat--condensed-view': this._isCondensed(), }); return ( diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 68ccaa063..1e18c9cba 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -36,44 +36,6 @@ .SummaryPageStat.page-load-time-medium .SummaryPageStat__value { color: #ffc063; } .SummaryPageStat.page-load-time-fast .SummaryPageStat__value { color: #9ecc42; } -.GhosteryKVReadout { - text-align: center; - font-weight: 600; -} - -.GhosteryKVReadout--summaryCondensed { - padding: 0; - margin: 5px 0; -} - -.GhosteryKVReadout--withoutKey { - .GhosteryKVReadout__key { display: none; } -} - -.GhosteryKVReadout__key { - color: #4a4a4a; -} - -.GhosteryKVReadout--totalTrackersBlocked { - .GhosteryKVReadout__value { color: #e74055; } -} - -.GhosteryKVReadout--totalRequestsModified { - .GhosteryKVReadout__value { color: #00aef0; } -} - -.GhosteryKVReadout--pageLoadTime-slow { - .GhosteryKVReadout__value { color: #e74055; } -} - -.GhosteryKVReadout--pageLoadTime-medium { - .GhosteryKVReadout__value { color: #ffc063; } -} - -.GhosteryKVReadout--pageLoadTime-fast { - .GhosteryKVReadout__value { color: #9ecc42; } -} - .Summary { position: absolute; height: 479px; From a1aff4d2c7e2512c7a421baf99b656fe77c29c5b Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 6 Jun 2019 17:00:41 -0400 Subject: [PATCH 109/131] Finalize summary page host container element and summary page host block CSS --- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_summary.scss | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 0afab3aed..b7ac36128 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -445,7 +445,7 @@ class Summary extends React.Component { return (
- {pageHost} + {pageHost}
); } diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 1e18c9cba..5484ac18c 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -11,10 +11,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -.GhosteryTextLabel { - color: #4a4a4a; - font-weight: 600; -} .SummaryPageStat { text-align: center; @@ -47,7 +43,12 @@ .Summary__pageHostContainer { text-align: center; +} + +.SummaryPageHost { font-size: 11px; + color: #4a4a4a; + font-weight: 600; } .Summary__pageStatContainer { From d0cb6fb31d8b7510f289cc27060a9d42ac569917 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 6 Jun 2019 17:27:37 -0400 Subject: [PATCH 110/131] Finalize summary page stats container, page stat container, and page stat CSS --- app/panel/components/Summary.jsx | 8 +++-- app/scss/partials/_summary.scss | 55 +++++++++++++++++--------------- 2 files changed, 35 insertions(+), 28 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b7ac36128..3cd25ccb5 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -740,9 +740,11 @@ class Summary extends React.Component { {isCondensed && !disableBlocking && this._renderTotalTrackersFound()} - {!disableBlocking && this._renderTotalTrackersBlocked()} - {!disableBlocking && this._renderTotalRequestsModified()} - {!disableBlocking && this._renderPageLoadTime()} +
+ {!disableBlocking && this._renderTotalTrackersBlocked()} + {!disableBlocking && this._renderTotalRequestsModified()} + {!disableBlocking && this._renderPageLoadTime()} +
{isCondensed && disableBlocking && is_expert && (
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 5484ac18c..cb6a2b557 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -11,27 +11,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ - -.SummaryPageStat { - text-align: center; - font-weight: 600; -} - -.SummaryPageStat--condensed-view { - padding: 0; - margin: 5px 0; - - .SummaryPageStat__label { - color: #4a4a4a; - } -} - -.SummaryPageStat.total-trackers-blocked .SummaryPageStat__value { color: #e74055; } -.SummaryPageStat.total-requests-modified .SummaryPageStat__value { color: #00aef0; } -.SummaryPageStat.page-load-time-slow .SummaryPageStat__value { color: #e74055; } -.SummaryPageStat.page-load-time-medium .SummaryPageStat__value { color: #ffc063; } -.SummaryPageStat.page-load-time-fast .SummaryPageStat__value { color: #9ecc42; } - .Summary { position: absolute; height: 479px; @@ -47,15 +26,35 @@ .SummaryPageHost { font-size: 11px; - color: #4a4a4a; font-weight: 600; + color: #4a4a4a; } .Summary__pageStatContainer { - font-size: 14px; + text-align: center; +} + +.SummaryPageStat { line-height: 21px; + font-size: 14px; + font-weight: 600; } +.SummaryPageStat--condensed-view { + padding: 0; + margin: 5px 0; + + .SummaryPageStat__label { + display: none; + } +} + +.SummaryPageStat.total-trackers-blocked .SummaryPageStat__value { color: #e74055; } +.SummaryPageStat.total-requests-modified .SummaryPageStat__value { color: #00aef0; } +.SummaryPageStat.page-load-time-slow .SummaryPageStat__value { color: #e74055; } +.SummaryPageStat.page-load-time-medium .SummaryPageStat__value { color: #ffc063; } +.SummaryPageStat.page-load-time-fast .SummaryPageStat__value { color: #9ecc42; } + .Summary--simple { width: 100%; @@ -68,8 +67,11 @@ width: 120px; } - .Summary__pageStatContainer { + .Summary__pageStatsContainer { margin-bottom: 40px; + } + + .Summary__pageStatContainer { display: inline-block; padding: 0 20px; } @@ -100,8 +102,11 @@ padding-top: 5px; } - .Summary__pageStatContainer { + .Summary__pageStatsContainer { margin-bottom: 21px; + } + + .Summary__pageStatContainer { display: block; text-overflow: ellipsis; white-space: nowrap; From ddc3cbd0a928659892017b89eaff474328ef6320 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 9 Jun 2019 13:42:58 -0400 Subject: [PATCH 111/131] Simplify CliqzFeature CSS. Reorganize partial based on block-level modifiers for clarity. Purify CliqzFeature helper functions. --- .../BuildingBlocks/CliqzFeature.jsx | 60 +++--- app/scss/partials/_cliqz_feature.scss | 184 +++++++++--------- app/scss/partials/_summary.scss | 1 + app/scss/partials/_tooltip.scss | 2 +- 4 files changed, 122 insertions(+), 125 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 7d539b22f..baadc3107 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -46,13 +46,12 @@ class CliqzFeature extends React.Component { clickButton({ feature: `enable_${featureType}`, status: active, - text: this._getAlertText(), + text: this._getAlertText(active, type), }); } - _getCount() { - const { active, data, type } = this.props; - + _getCount(active, data, type) { + _getCount(active, data, type) { if (!active) { return '-'; } @@ -75,31 +74,19 @@ class CliqzFeature extends React.Component { } - _getTooltipBodyText() { - const { active, isTooltipBody, type } = this.props; - - if (!isTooltipBody) { - return false; - } + _getTooltipBodyText(active, isTooltipBody, type) { + if (!isTooltipBody) return false; return active ? t(`tooltip_${type}_body_on`) : t(`tooltip_${type}_body`); } - _getTooltipHeaderText() { - const { isTooltipHeader, type } = this.props; - - if (!isTooltipHeader) { - return false; - } - - return t(`tooltip_${type}`); + _getTooltipHeaderText(isTooltipHeader, type) { + return isTooltipHeader ? t(`tooltip_${type}`) : false; } - _getAlertText() { - const { active, type } = this.props; - + _getAlertText(active, type) { return active ? t(`alert_${type}_on`) : t(`alert_${type}`); @@ -113,42 +100,41 @@ class CliqzFeature extends React.Component { const { active, cliqzInactive, + data, isSmaller, isCondensed, + isTooltipBody, + isTooltipHeader, tooltipPosition, type, } = this.props; - const sharedClassNames = ClassNames({ - active, - inactive: !active, + const cliqzFeatureClassNames = ClassNames('CliqzFeature', { + 'CliqzFeature--normal': !isSmaller && !isCondensed, + 'CliqzFeature--smaller': isSmaller, + 'CliqzFeature--condensed': isCondensed, + 'CliqzFeature--active': active, + 'CliqzFeature--inactive': !active, clickable: !cliqzInactive, 'not-clickable': cliqzInactive, }); - const cliqzFeatureClassNames = ClassNames('CliqzFeature', sharedClassNames, { - normal: !isSmaller && !isCondensed, - smaller: isSmaller, - condensed: isCondensed, - }); - const cliqzFeatureCountClassNames = ClassNames('CliqzFeature__count', sharedClassNames); - const cliqzFeatureNameClassNames = ClassNames('CliqzFeature__feature-name', sharedClassNames); - const cssTypeName = type.replace('_', '-'); - const iconClassNames = ClassNames('CliqzFeature__icon', sharedClassNames, cssTypeName, 'g-tooltip'); + const cssTypeName = `CliqzFeature__icon--${type.replace('_', '-')}`; + const iconClassNames = ClassNames('CliqzFeature__icon', cssTypeName, 'g-tooltip'); const featureType = type === 'anti_track' ? 'anti_tracking' : type; const featureName = t(`drawer_title_enable_${featureType}`); return (
-
{this._getCount()}
+
{this._getCount(active, data, type)}
-
+
{featureName}
diff --git a/app/scss/partials/_cliqz_feature.scss b/app/scss/partials/_cliqz_feature.scss index 343846a86..7779de570 100644 --- a/app/scss/partials/_cliqz_feature.scss +++ b/app/scss/partials/_cliqz_feature.scss @@ -18,24 +18,7 @@ $cliqz-feature--gray: #c8c7c2; $cliqz-feature--light-gray: #dedede; $cliqz-feature--darker-gray: #a4a4a4; -// *** CliqzFeature hover states *** -.CliqzFeature.active.clickable:hover { - .CliqzFeature__count { color: $cliqz-feature--darker-blue; } - .CliqzFeature__icon.anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-blue); } - .CliqzFeature__icon.ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-blue); } - .CliqzFeature__icon.smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-blue); } - .CliqzFeature__feature-name { color: $cliqz-feature--darker-blue; } -} - -.CliqzFeature.inactive.clickable:hover { - .CliqzFeature__count { background-image: buildIconDash($cliqz-feature--darker-gray); } - .CliqzFeature__icon.anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-gray); } - .CliqzFeature__icon.ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-gray); } - .CliqzFeature__icon.smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-gray); } - .CliqzFeature__feature-name { color: $cliqz-feature--darker-gray; } -} - -// *** count *** +// Default styling for the elements of the CliqzFeature BEM block .CliqzFeature__count { text-align: center; font-size: 14px; @@ -44,94 +27,121 @@ $cliqz-feature--darker-gray: #a4a4a4; transition: background-image 0.25s ease-out; } -.CliqzFeature.normal .CliqzFeature__count, -.CliqzFeature.smaller .CliqzFeature__count { - line-height: 28px; +.CliqzFeature__icon { + margin: 0 auto; + background-repeat: no-repeat; + background-position: center center; + transition: background-image 0.25s ease-out; } -.CliqzFeature.condensed .CliqzFeature__count { - line-height: 14px; -} +.CliqzFeature__feature-name { + text-align: center; + font-size: 11px; + line-height: 26px; + font-weight: 600; + transition: color 0.25s ease-out; -.CliqzFeature__count.active.clickable { - color: $cliqz-feature--blue; - background: none; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; } -.CliqzFeature__count.active.not-clickable { - color: $cliqz-feature--pale-blue; - background: none; +// Modifications to element styling based on size-related block-level modifiers +// The CliqzFeature block is always one of normal, smaller, or condensed +.CliqzFeature--normal, +.CliqzFeature--smaller { + .CliqzFeature__count { line-height: 28px; } + .CliqzFeature__icon { + height: 50px; + width: 50px; + background-size: 50px 50px; + } } -.CliqzFeature__count.inactive.clickable { - color: rgba($cliqz-feature--gray, 0); - background-image: buildIconDash($cliqz-feature--gray); +.CliqzFeature--smaller { + .CliqzFeature__feature-name { display: none; } } -.CliqzFeature__count.inactive.not-clickable { - color: rgba($cliqz-feature--light-gray, 0); - background-image: buildIconDash($cliqz-feature--light-gray); +.CliqzFeature--condensed { + .CliqzFeature__count { line-height: 14px; } + .CliqzFeature__icon { + height: 40px; + width: 40px; + background-size: 30px 30px; + } + .CliqzFeature__feature-name { display: none; } } -.CliqzFeature__count.inactive { - background-repeat: no-repeat; - background-position: center center; - background-size: 10px 10px; +// Modifications to element styling based on state-related block-level modifiers +// The CliqzFeature block is always either active or inactive +// and always either clickable or not-clickable +.CliqzFeature--active.clickable { + .CliqzFeature__count { + color: $cliqz-feature--blue; + background: none; + } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--blue); } + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--blue); } + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--blue); } + .CliqzFeature__feature-name { color: $cliqz-feature--blue; } + + &:hover { + .CliqzFeature__count { color: $cliqz-feature--darker-blue; } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-blue); } + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-blue); } + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-blue); } + .CliqzFeature__feature-name { color: $cliqz-feature--darker-blue; } + } } -// *** icon *** -.CliqzFeature__icon { - margin: 0 auto; - background-repeat: no-repeat; - background-position: center center; - transition: background-image 0.25s ease-out; -} +.CliqzFeature--active.not-clickable { + .CliqzFeature__count { + color: $cliqz-feature--pale-blue; + background: none; + } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--pale-blue); } + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--pale-blue); } + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--pale-blue); } + .CliqzFeature__feature-name { color: $cliqz-feature--pale-blue; } -.CliqzFeature.normal .CliqzFeature__icon, -.CliqzFeature.smaller .CliqzFeature__icon { - height: 50px; - width: 50px; - background-size: 50px 50px; } -.CliqzFeature.condensed .CliqzFeature__icon { - height: 40px; - width: 40px; - background-size: 30px 30px; +.CliqzFeature--inactive { + .CliqzFeature__count { + background-repeat: no-repeat; + background-position: center center; + background-size: 10px 10px; + } } -.CliqzFeature__icon.anti-track.active.clickable { background-image: buildIconAntiTracking($cliqz-feature--blue); } -.CliqzFeature__icon.anti-track.inactive.clickable { background-image: buildIconAntiTracking($cliqz-feature--gray); } -.CliqzFeature__icon.anti-track.active.not-clickable { background-image: buildIconAntiTracking($cliqz-feature--pale-blue); } -.CliqzFeature__icon.anti-track.inactive.not-clickable { background-image: buildIconAntiTracking($cliqz-feature--light-gray); } - -.CliqzFeature__icon.ad-block.active.clickable { background-image: buildIconAdBlocking($cliqz-feature--blue); } -.CliqzFeature__icon.ad-block.inactive.clickable { background-image: buildIconAdBlocking($cliqz-feature--gray); } -.CliqzFeature__icon.ad-block.active.not-clickable { background-image: buildIconAdBlocking($cliqz-feature--pale-blue); } -.CliqzFeature__icon.ad-block.inactive.not-clickable { background-image: buildIconAdBlocking($cliqz-feature--light-gray); } - -.CliqzFeature__icon.smart-block.active.clickable { background-image: buildIconSmartBlocking($cliqz-feature--blue); } -.CliqzFeature__icon.smart-block.inactive.clickable { background-image: buildIconSmartBlocking($cliqz-feature--gray); } -.CliqzFeature__icon.smart-block.active.not-clickable { background-image: buildIconSmartBlocking($cliqz-feature--pale-blue); } -.CliqzFeature__icon.smart-block.inactive.not-clickable { background-image: buildIconSmartBlocking($cliqz-feature--light-gray); } +.CliqzFeature--inactive.clickable { + .CliqzFeature__count { + color: rgba($cliqz-feature--gray, 0); + background-image: buildIconDash($cliqz-feature--gray); + } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--gray); } + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--gray); } + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--gray); } + .CliqzFeature__feature-name { color: $cliqz-feature--gray; } + + &:hover { + .CliqzFeature__count { background-image: buildIconDash($cliqz-feature--darker-gray); } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-gray); } + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-gray); } + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-gray); } + .CliqzFeature__feature-name { color: $cliqz-feature--darker-gray; } + } +} -// *** feature-name *** -.CliqzFeature__feature-name { - text-align: center; - font-size: 11px; - line-height: 26px; - font-weight: 600; - transition: color 0.25s ease-out; +.CliqzFeature--inactive.not-clickable { + .CliqzFeature__count { + color: rgba($cliqz-feature--light-gray, 0); + background-image: buildIconDash($cliqz-feature--light-gray); + } - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--light-gray); } + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--light-gray); } + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--light-gray); } + .CliqzFeature__feature-name { color: $cliqz-feature--light-gray; } } -.CliqzFeature.smaller .CliqzFeature__feature-name { display: none; } -.CliqzFeature.condensed .CliqzFeature__feature-name { display: none; } - -.CliqzFeature__feature-name.active.clickable { color: $cliqz-feature--blue; } -.CliqzFeature__feature-name.inactive.clickable { color: $cliqz-feature--gray; } -.CliqzFeature__feature-name.active.not-clickable { color: $cliqz-feature--pale-blue; } -.CliqzFeature__feature-name.inactive.not-clickable { color: $cliqz-feature--light-gray; } diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index cb6a2b557..4c0356001 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -154,6 +154,7 @@ } } +// Additional specificity needed to overwrite the position value of g-tooltip .Summary__statsButton.Summary__statsButton--absolutely-positioned { position: absolute; right: 0; diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index 0f8a8a90c..6f92af3ed 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -151,7 +151,7 @@ left: 75px; } -.CliqzFeature.smaller .g-tooltip .tooltip-content.top { +.CliqzFeature--smaller .g-tooltip .tooltip-content.top { &.top-right { margin-left: -40px; &:after { From 346102dfc9d67e76bc9bf1da6d62c6f9e25474d7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 9 Jun 2019 14:35:01 -0400 Subject: [PATCH 112/131] Fix typo --- app/panel/components/BuildingBlocks/CliqzFeature.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index baadc3107..c7ce94840 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -50,7 +50,6 @@ class CliqzFeature extends React.Component { }); } - _getCount(active, data, type) { _getCount(active, data, type) { if (!active) { return '-'; From 09100a078f3368d8d1dcb8e7d9d30740e5d816c6 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 9 Jun 2019 14:40:49 -0400 Subject: [PATCH 113/131] Rename _ghostery_features partial to _ghostery_feature --- app/scss/panel.scss | 2 +- .../{_ghostery_features.scss => _ghostery_feature.scss} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename app/scss/partials/{_ghostery_features.scss => _ghostery_feature.scss} (100%) diff --git a/app/scss/panel.scss b/app/scss/panel.scss index 5252b661f..8954c3a1a 100644 --- a/app/scss/panel.scss +++ b/app/scss/panel.scss @@ -66,7 +66,7 @@ html body { @import './partials/_toggle_slider'; @import './partials/_pause_button'; @import './partials/_donut_graph'; -@import './partials/_ghostery_features'; +@import './partials/_ghostery_feature'; @import './partials/_cliqz_feature'; @import './partials/_tooltip'; @import './partials/_not_scanned'; diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_feature.scss similarity index 100% rename from app/scss/partials/_ghostery_features.scss rename to app/scss/partials/_ghostery_feature.scss From f87c27384c8e01911df8b9679064da54b2d24643 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 9 Jun 2019 17:32:47 -0400 Subject: [PATCH 114/131] Ghostery Feature button alignment and styling fixes. Centered page stats. --- .../BuildingBlocks/GhosteryFeature.jsx | 34 +-- app/panel/components/Summary.jsx | 3 + app/scss/partials/_ghostery_feature.scss | 248 +++++++----------- app/scss/partials/_summary.scss | 8 + 4 files changed, 117 insertions(+), 176 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 3972e089f..29b399971 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -74,40 +74,42 @@ class GhosteryFeature extends React.Component { } } - _trustActive() { - const { type, sitePolicy } = this.props; - - return (type === 'trust' && sitePolicy === WHITELISTED); - } - - _restrictActive() { - const { type, sitePolicy } = this.props; - - return (type === 'restrict' && sitePolicy === BLACKLISTED); + _isFeatureActive(type, sitePolicy) { + switch (type) { + case 'trust': + return sitePolicy === WHITELISTED; + case 'restrict': + return sitePolicy === BLACKLISTED; + default: + return false; + } } render() { const { blockingPausedOrDisabled, - sitePolicy, + narrow, + short, showText, + sitePolicy, tooltipPosition, type } = this.props; - const active = this._trustActive() || this._restrictActive(); + const active = this._isFeatureActive(type, sitePolicy); // TODO Foundation dependency: button const ghosteryFeatureClassNames = ClassNames( 'button', 'g-tooltip', 'GhosteryFeatureButton', - 'GhosteryFeatureButton--FoundationButtonOverrides', { + 'GhosteryFeatureButton--normal': !narrow && !short, + 'GhosteryFeatureButton--short': short, + 'GhosteryFeatureButton--narrow': narrow, 'GhosteryFeatureButton--inactive': !active, 'GhosteryFeatureButton--active': active, - 'GhosteryFeatureButton--trust': type === 'trust', - 'GhosteryFeatureButton--restrict': type === 'restrict', - 'GhosteryFeatureButton--blockingPausedOrDisabled': blockingPausedOrDisabled, + trust: type === 'trust', + restrict: type === 'restrict', clickable: !blockingPausedOrDisabled, 'not-clickable': blockingPausedOrDisabled, } diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 3cd25ccb5..0503032dc 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -543,6 +543,7 @@ class Summary extends React.Component { sitePolicy, } = this.props; const { disableBlocking } = this.state; + const isCondensed = this._isCondensed(); const containerClassNames = ClassNames('Summary__ghosteryFeatureContainer', modifiers); return ( @@ -554,6 +555,8 @@ class Summary extends React.Component { blockingPausedOrDisabled={paused_blocking || disableBlocking} showText={!this._isCondensed()} tooltipPosition={is_expert ? 'right' : 'top'} + short={is_expert && !isCondensed} + narrow={isCondensed} />
); diff --git a/app/scss/partials/_ghostery_feature.scss b/app/scss/partials/_ghostery_feature.scss index 7a83eec99..0d18dc1f4 100644 --- a/app/scss/partials/_ghostery_feature.scss +++ b/app/scss/partials/_ghostery_feature.scss @@ -27,123 +27,12 @@ /* .sub-component.ghostery-features { .button { - width: 150px; - height: 45px; - font-size: 11px; - line-height: 1.5; - color: #4a4a4a; - border-color: #cccccc; - background-color: #ffffff; - margin-bottom: 0; - box-shadow: inset 0 0 0 0 rgba($white, 0); - - transition: background-image 0.25s ease-out, - background-color 0.25s ease-out, - border-color 0.25s ease-out, - box-shadow 0.25 ease-out, - color 0.25s ease-out; &:hover { background-color: #efefef; } } - .button.active.button-trust { - color: #ffffff; - border-color: #85b329; - background-color: #9ecc42; - box-shadow: inset 0px 1px 7px 2px #85b329; - &:hover { - background-color: #85b329; - } - } - .button.active.button-restrict { - color: #ffffff; - border-color: #ce273c; - background-color: #e74055; - box-shadow: inset 0px 1px 7px 2px #ce273c; - &:hover { - background-color: #ce273c; - } - } - .button.active.ab-pause { - color: #ffffff; - border-color: #2092bf; - background-color: #1dafed; - box-shadow: inset 0px 1px 7px 2px #2092bf; - &:hover { - background-color: #0093bd; - } - } .full-height { height: 100%; } - .button-trust .button-text, - .button-restrict .button-text { - padding: 0 10px 0 30px; - background-repeat: no-repeat; - background-position: 0 center; - background-size: 14px 14px; - } - .button-trust .button-text { - background-image: buildIconTrust(#4a4a4a); - } - .button-trust.active .button-text { - background-image: buildIconTrust(#ffffff); - } - .button-restrict .button-text { - background-image: buildIconRestrict(#4a4a4a); - } - .button-restrict.active .button-text { - background-image: buildIconRestrict(#ffffff); - } - - .button-group.inactive { - .button { - color: #a4a4a4; - border-color: #e5e5e5; - background-color: #ffffff; - box-shadow: inset 0 0 0 0 rgba($white, 0); - } - .button.active.button-trust { - color: #ffffff; - border-color: #b8e65c; - background-color: #b8e65c; - } - .button.active.button-restrict { - color: #ffffff; - border-color: #ff8da2; - background-color: #ff8da2; - } - .button.active.ab-pause { - color: #ffffff; - border-color: #a4d4f2; - background-color: #a4d4f2; - } - .button-trust .button-text { - background-image: buildIconTrust(#a4a4a4); - } - .button-trust.active .button-text { - background-image: buildIconTrust(#ffffff); - } - .button-restrict .button-text { - background-image: buildIconRestrict(#a4a4a4); - } - .button-restrict.active .button-text { - background-image: buildIconRestrict(#ffffff); - } - } - - .button-group.stacked .button { - height: 35px; - margin-bottom: 0; - } - .button-group.stacked .button.condensed { - width: 66px; - height: 41px; - .button-text { - padding: 10px; - font-size: 9px; - background-position: center center; - } - } .button-top { border-bottom-left-radius: 0; @@ -174,85 +63,124 @@ } */ -/* -.button { - color: #4a4a4a; - border-color: #cccccc; - background-color: #ffffff; - box-shadow: inset 0 0 0 0 rgba($white, 0); -*/ +.GhosteryFeatureButton__text { + background-repeat: no-repeat; + background-size: 14px 14px; +} .GhosteryFeatureButton { - width: 150px; - height: 45px; - transition: background-image 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out, color 0.25s ease-out; -} -.GhosteryFeatureButton--FoundationButtonOverrides { + // Foundation .button overrides + margin-bottom: 0; line-height: 1.5; font-size: 11px; - margin-bottom: 0; } -.GhosteryFeatureButton--inactive { - color: $tundora; - border-color: #cccccc; - background-color: $white; - box-shadow: inset 0 0 0 0 rgba($white, 0); +.GhosteryFeatureButton--normal, +.GhosteryFeatureButton--short { + width: 150px; - &:hover { - color: $tundora; + .GhosteryFeatureButton__text { + padding: 0 10px 0 30px; + background-position: 0 center; } } -.GhosteryFeatureButton--active { - color: $white; +.GhosteryFeatureButton--normal { + height: 45px; +} + +.GhosteryFeatureButton--short { + height: 35px; } -.GhosteryFeatureButton--trust.GhosteryFeatureButton--active { - border-color: #85b329; - background-color: $atlantis; - box-shadow: inset 0px 1px 7px 2px #85b329; +.GhosteryFeatureButton--narrow { + width: 66px; + height: 41px; - &:hover { - background-color: #85b329; + .GhosteryFeatureButton__text { + padding: 10px; + font-size: 9px; + background-position: center center; } } -.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active { - border-color: #ce273c; - background-color: $red; - box-shadow: inset 0px 1px 7px 2px #ce273c; +.GhosteryFeatureButton--inactive.clickable { + color: $tundora; + border-color: #cccccc; + background-color: $white; + box-shadow: inset 0 0 0 0 rgba($white, 0); + &:hover { color: $tundora; } - &:hover { - background-color: #ce273c; + &.trust .GhosteryFeatureButton__text { + background-image: buildIconTrust($tundora); } -} -.GhosteryFeatureButton__text { - padding: 0 10px 0 30px; - background-repeat: no-repeat; - background-position: 0 center; - background-size: 14px 14px; + &.restrict .GhosteryFeatureButton__text { + background-image: buildIconRestrict($tundora); + } } -.GhosteryFeatureButton--trust.GhosteryFeatureButton--inactive .GhosteryFeatureButton__text { - background-image: buildIconTrust($tundora); +.GhosteryFeatureButton--inactive.not-clickable { + color: #a4a4a4; + border-color: #e5e5e5; + background-color: #ffffff; + box-shadow: inset 0 0 0 0 rgba($white, 0); -} -.GhosteryFeatureButton--trust.GhosteryFeatureButton--active .GhosteryFeatureButton__text { - background-image: buildIconTrust($white); + &.trust .GhosteryFeatureButton__text { + background-image: buildIconTrust(#a4a4a4); + } + &.restrict .GhosteryFeatureButton__text { + background-image: buildIconRestrict(#a4a4a4); + } } -.GhosteryFeatureButton--restrict.GhosteryFeatureButton--inactive .GhosteryFeatureButton__text { - background-image: buildIconRestrict($tundora); +.GhosteryFeatureButton--active.clickable { + color: $white; + + &.trust { + border-color: #85b329; + background-color: $atlantis; + box-shadow: inset 0px 1px 7px 2px #85b329; + } + &.trust:hover { background-color: #85b329; } + &.trust .GhosteryFeatureButton__text { + background-image: buildIconTrust($white); + } + + &.restrict { + border-color: #ce273c; + background-color: $red; + box-shadow: inset 0px 1px 7px 2px #ce273c; + } + &.restrict:hover { background-color: #ce273c; } + &.restrict .GhosteryFeatureButton__text { + background-image: buildIconRestrict($white); + } } -.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active .GhosteryFeatureButton__text { - background-image: buildIconRestrict($white); + +.GhosteryFeatureButton--active.not-clickable { + &.trust { + color: $white; + border-color: #b8e65c; + background-color: #b8e65c; + } + &.trust .GhosteryFeatureButton__text { + background-image: buildIconTrust($white); + } + + &.restrict { + color: $white; + border-color: #ff8da2; + background-color: #ff8da2; + } + &.restrict .GhosteryFeatureButton__text { + background-image: buildIconRestrict($white); + } } diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 4c0356001..9170dbeb7 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -30,6 +30,10 @@ color: #4a4a4a; } +.Summary__pageStatsContainer { + text-align: center; +} + .Summary__pageStatContainer { text-align: center; } @@ -168,6 +172,10 @@ height: 162px; } +.Summary__ghosteryFeaturesContainer { + text-align: center; +} + .Summary__ghosteryFeatureContainer { display: inline-block; } From 3ac35338df3bd92c69effa4f96992762964f0f3b Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 9 Jun 2019 17:40:16 -0400 Subject: [PATCH 115/131] Fix Trust button tooltip --- app/panel/components/BuildingBlocks/GhosteryFeature.jsx | 2 +- app/scss/partials/_ghostery_feature.scss | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 29b399971..6db9f49f2 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -64,7 +64,7 @@ class GhosteryFeature extends React.Component { case 'trust': return (sitePolicy === WHITELISTED ? t('tooltip_trust_on') : - t('tooltip_trust_off')); + t('tooltip_trust')); case 'restrict': return (sitePolicy === BLACKLISTED ? t('tooltip_restrict_on') : diff --git a/app/scss/partials/_ghostery_feature.scss b/app/scss/partials/_ghostery_feature.scss index 0d18dc1f4..56f245491 100644 --- a/app/scss/partials/_ghostery_feature.scss +++ b/app/scss/partials/_ghostery_feature.scss @@ -32,8 +32,6 @@ } } - .full-height { height: 100%; } - .button-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; From 94280346c07c14b28115be01cf7ec4a0a0c8d702 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 04:14:46 -0400 Subject: [PATCH 116/131] Fix alignment for ghostery features tooltips in expert mode --- app/scss/partials/_tooltip.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index 6f92af3ed..464a5aa30 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -132,9 +132,6 @@ .expert .sub-component.cliqz-features .g-tooltip .tooltip-content.right { margin-left: 16px; } -.expert .sub-component.ghostery-features .g-tooltip .tooltip-content.right { - margin-top: -18px; -} .expert .sub-component.pause-button .g-tooltip .tooltip-content.right { margin-top: -12px; margin-left: 28px; @@ -151,6 +148,10 @@ left: 75px; } +.GhosteryFeatureButton--short.g-tooltip .tooltip-content.right { + margin-top: -18px; +} + .CliqzFeature--smaller .g-tooltip .tooltip-content.top { &.top-right { margin-left: -40px; From 4f4359ec5e7030da4519d0bf75dbb88799afc3f0 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 12:03:19 -0400 Subject: [PATCH 117/131] Remove silly placeholder name in pause button CSS. Fix summary vertical layout in condensed view. --- app/panel/components/BuildingBlocks/PauseButton.jsx | 2 +- app/scss/partials/_pause_button.scss | 9 +-------- app/scss/partials/_summary.scss | 5 +++++ 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx index 69633f586..589d09786 100644 --- a/app/panel/components/BuildingBlocks/PauseButton.jsx +++ b/app/panel/components/BuildingBlocks/PauseButton.jsx @@ -186,7 +186,7 @@ class PauseButton extends React.Component { ); return ( -
+
{togglePauseButton} {pauseDurationSelectionDropdownCaret} diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss index b1a816fc6..8941929d4 100644 --- a/app/scss/partials/_pause_button.scss +++ b/app/scss/partials/_pause_button.scss @@ -11,14 +11,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -/* -.PauseButton - - - - */ - -.sub-a-dub-component.pause-button { +.sub-component.pause-button { .button { color: #4a4a4a; border-color: #cccccc; diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 9170dbeb7..a160cdd17 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -144,7 +144,12 @@ color: $tundora; } + .Summary__pageStatsContainer { + margin-bottom: 12px; + } + .Summary__cliqzFeaturesContainer { + margin-top: 15px; margin-bottom: 0; } From 0564e52fc40ff626f2ba3545e3d72cd0698509b8 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 12:13:55 -0400 Subject: [PATCH 118/131] Fix ghostery feature tooltip alignment in condensed view --- app/scss/partials/_tooltip.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index 464a5aa30..2130c1e79 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -129,9 +129,6 @@ margin-top: 5px; margin-left: 10px; } -.expert .sub-component.cliqz-features .g-tooltip .tooltip-content.right { - margin-left: 16px; -} .expert .sub-component.pause-button .g-tooltip .tooltip-content.right { margin-top: -12px; margin-left: 28px; @@ -148,9 +145,17 @@ left: 75px; } + .GhosteryFeatureButton--short.g-tooltip .tooltip-content.right { margin-top: -18px; } +.GhosteryFeatureButton--narrow.g-tooltip .tooltip-content.right { + margin-top: -18px; +} + +.CliqzFeature--condensed .g-tooltip .tooltip-content.right { + margin-left: 16px; +} .CliqzFeature--smaller .g-tooltip .tooltip-content.top { &.top-right { From 8e2a1174521b8126462e9abdfef91fd659ca543a Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 12:18:36 -0400 Subject: [PATCH 119/131] Fix cliqz feature state change notifications bug --- app/panel/components/BuildingBlocks/CliqzFeature.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index c7ce94840..9c97b1aa3 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -87,8 +87,8 @@ class CliqzFeature extends React.Component { _getAlertText(active, type) { return active ? - t(`alert_${type}_on`) : - t(`alert_${type}`); + t(`alert_${type}_off`) : + t(`alert_${type}_on`); } /** From 5fe0d0f91db8bb499b11c77e8c83e305617afcd2 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 13:04:18 -0400 Subject: [PATCH 120/131] Finish fixing and organizing tooltip CSS for trust, restrict, pause, and Cliqz features --- app/scss/partials/_tooltip.scss | 63 ++++++++++++++++++++------------- 1 file changed, 38 insertions(+), 25 deletions(-) diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index 2130c1e79..bbed53df0 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -129,10 +129,6 @@ margin-top: 5px; margin-left: 10px; } -.expert .sub-component.pause-button .g-tooltip .tooltip-content.right { - margin-top: -12px; - margin-left: 28px; -} .expert .modified-requests.g-tooltip .tooltip-content.right { margin-top: -51px; margin-left: -26px; @@ -141,34 +137,51 @@ margin-top: -44px; margin-left: 33px; } -.sub-component.pause-button .g-tooltip .tooltip-content.top { - left: 75px; + +.Summary { + .sub-component.pause-button .g-tooltip .tooltip-content.top { + left: 75px; + } } +.Summary--expert { + .sub-component.pause-button .g-tooltip .tooltip-content.right { + margin-top: -12px; + margin-left: 28px; + } -.GhosteryFeatureButton--short.g-tooltip .tooltip-content.right { - margin-top: -18px; -} -.GhosteryFeatureButton--narrow.g-tooltip .tooltip-content.right { - margin-top: -18px; -} + .GhosteryFeatureButton.g-tooltip .tooltip-content.right { + margin-top: -18px; + } -.CliqzFeature--condensed .g-tooltip .tooltip-content.right { - margin-left: 16px; + .CliqzFeature .g-tooltip .tooltip-content.top { + &.top-right { + margin-left: -40px; + &:after { + left: 40px; + } + } + &.top-left { + margin-left: -110px; + &:after { + left: 110px; + } + } + } } -.CliqzFeature--smaller .g-tooltip .tooltip-content.top { - &.top-right { - margin-left: -40px; - &:after { - left: 40px; - } +.Summary--condensed { + .sub-component.pause-button .g-tooltip .tooltip-content.right { + margin-top: -12px; + margin-left: 28px; } - &.top-left { - margin-left: -110px; - &:after { - left: 110px; - } + + .GhosteryFeatureButton.g-tooltip .tooltip-content.right { + margin-top: -18px; + } + + .CliqzFeature .g-tooltip .tooltip-content.right { + margin-left: 16px; } } From caace4a0cd991b4d763f850f939726d45aa29ecb Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 13:28:56 -0400 Subject: [PATCH 121/131] Nudge cliqz icons up in expert view --- app/scss/partials/_summary.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index a160cdd17..741676f95 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -122,7 +122,7 @@ } .Summary__cliqzFeaturesContainer { - margin-top: 10px; + margin-top: 6px; margin-bottom: 6px; } From fe16a441d4748c18e2b624e10607e32025a669f6 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 14:16:50 -0400 Subject: [PATCH 122/131] Finalize requests modified page stat tooltip CSS --- app/panel/components/Summary.jsx | 6 +++--- app/scss/partials/_summary.scss | 5 +++++ app/scss/partials/_tooltip.scss | 22 +++++++++++++--------- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 0503032dc..b0ca8c48d 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -497,19 +497,19 @@ class Summary extends React.Component { _renderTotalRequestsModified() { const { is_expert } = this.props; - const totalRequestsModifiedClassNames = ClassNames('SummaryPageStat', 'total-requests-modified', { + const totalRequestsModifiedClassNames = ClassNames('SummaryPageStat', 'g-tooltip', 'total-requests-modified', { 'SummaryPageStat--condensed-view': this._isCondensed(), }); return ( -
+
{t('requests_modified')} {this._requestsModifiedCount()} +
-
); } diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 741676f95..1fd7459f5 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -114,6 +114,11 @@ display: block; text-overflow: ellipsis; white-space: nowrap; + } + + // .total-requests-modified needs to show overflow for tooltip + .Summary__pageStatContainer .total-trackers-blocked, + .Summary__pageStatContainer .page_load_time { overflow-x: hidden; } diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index bbed53df0..f083ec2ff 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -129,15 +129,6 @@ margin-top: 5px; margin-left: 10px; } -.expert .modified-requests.g-tooltip .tooltip-content.right { - margin-top: -51px; - margin-left: -26px; -} -.expert.condensed .modified-requests.g-tooltip .tooltip-content.right { - margin-top: -44px; - margin-left: 33px; -} - .Summary { .sub-component.pause-button .g-tooltip .tooltip-content.top { left: 75px; @@ -168,6 +159,14 @@ } } } + + .SummaryPageStat.total-requests-modified.g-tooltip .tooltip-content.right { + margin-top: -43px; + + // Overwrite the expert view Summary__pageStatContainer + // white-space: nowrap value + white-space: normal; + } } .Summary--condensed { @@ -183,6 +182,11 @@ .CliqzFeature .g-tooltip .tooltip-content.right { margin-left: 16px; } + + .SummaryPageStat.total-requests-modified.g-tooltip .tooltip-content.right { + margin-top: -42px; + margin-left: 31px; + } } .gx-tooltip { From 7aad2c38f1502053e973c5a2ebfbd8336bf9b303 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 14:24:12 -0400 Subject: [PATCH 123/131] Finalize total tracker count tooltip CSS --- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_tooltip.scss | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b0ca8c48d..dc641a43e 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -457,7 +457,7 @@ class Summary extends React.Component { _renderTotalTrackersFound() { return (
- + {this._totalTrackersFound()} Date: Mon, 10 Jun 2019 14:41:15 -0400 Subject: [PATCH 124/131] Finalize css for donut number tooltip --- app/scss/partials/_tooltip.scss | 59 +++++++++++++++++---------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index 14201c6a3..ef37da0b4 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -117,36 +117,40 @@ } } -.sub-component.donut-graph.small .g-tooltip .tooltip-content.right { - margin-top: -8px; - margin-left: 15px; -} -.sub-component.donut-graph.big .g-tooltip .tooltip-content.right { - margin-top: 5px; - margin-left: 10px; -} - .Summary { - .sub-component.pause-button .g-tooltip .tooltip-content.top { - left: 75px; + .DonutGraph .g-tooltip .tooltip-content.right { + margin-top: 5px; + margin-left: 10px; } - .Summary__totalTrackerCount.g-tooltip .tooltip-content.right { - margin-top: -20px; - margin-left: 24px; + .sub-component.pause-button .g-tooltip .tooltip-content.top { + left: 75px; } } .Summary--expert { - .sub-component.pause-button .g-tooltip .tooltip-content.right { - margin-top: -12px; - margin-left: 28px; + .DonutGraph .g-tooltip .tooltip-content.right { + margin-top: -8px; + margin-left: 15px; + } + + .SummaryPageStat.total-requests-modified.g-tooltip .tooltip-content.right { + margin-top: -43px; + + // Overwrite the expert view Summary__pageStatContainer + // white-space: nowrap value + white-space: normal; } .GhosteryFeatureButton.g-tooltip .tooltip-content.right { margin-top: -18px; } + .sub-component.pause-button .g-tooltip .tooltip-content.right { + margin-top: -12px; + margin-left: 28px; + } + .CliqzFeature .g-tooltip .tooltip-content.top { &.top-right { margin-left: -40px; @@ -161,17 +165,19 @@ } } } +} - .SummaryPageStat.total-requests-modified.g-tooltip .tooltip-content.right { - margin-top: -43px; +.Summary--condensed { + .Summary__totalTrackerCount.g-tooltip .tooltip-content.right { + margin-top: -20px; + margin-left: 24px; + } - // Overwrite the expert view Summary__pageStatContainer - // white-space: nowrap value - white-space: normal; + .SummaryPageStat.total-requests-modified.g-tooltip .tooltip-content.right { + margin-top: -42px; + margin-left: 31px; } -} -.Summary--condensed { .sub-component.pause-button .g-tooltip .tooltip-content.right { margin-top: -12px; margin-left: 28px; @@ -184,11 +190,6 @@ .CliqzFeature .g-tooltip .tooltip-content.right { margin-left: 16px; } - - .SummaryPageStat.total-requests-modified.g-tooltip .tooltip-content.right { - margin-top: -42px; - margin-left: 31px; - } } .gx-tooltip { From f024579bc615ce8e04b2f60a1d084f74919d1363 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 14:54:05 -0400 Subject: [PATCH 125/131] Make donut category tooltips show again --- app/panel/components/BuildingBlocks/DonutGraph.jsx | 8 ++++---- app/scss/partials/_donut_graph.scss | 5 +---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index 8a676dc88..1765c3f69 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -216,7 +216,7 @@ class DonutGraph extends React.Component { categories.forEach((cat) => { const tooltip = document.getElementById(`${cat.id}_tooltip`); if (tooltip) { - tooltip.classList.remove('show'); + tooltip.classList.remove('DonutGraph__tooltip--show'); } }); @@ -268,13 +268,13 @@ class DonutGraph extends React.Component { if (tooltip) { tooltip.style.left = `${pX - (tooltip.offsetWidth / 2)}px`; tooltip.style.top = `${pY - (tooltip.offsetHeight + 8)}px`; - tooltip.classList.add('show'); + tooltip.classList.add('DonutGraph__tooltip--show'); } }) .on('mouseout', (d) => { const tooltip = this.grabTooltip(d); if (tooltip) { - tooltip.classList.remove('show'); + tooltip.classList.remove('DonutGraph__tooltip--show'); } }) .on('click', (d) => { @@ -323,7 +323,7 @@ class DonutGraph extends React.Component {
{this.props.categories.map(cat => ( - + {cat.name} ))} diff --git a/app/scss/partials/_donut_graph.scss b/app/scss/partials/_donut_graph.scss index 7b25fbc45..829bce2a4 100644 --- a/app/scss/partials/_donut_graph.scss +++ b/app/scss/partials/_donut_graph.scss @@ -46,12 +46,9 @@ .DonutGraph__tooltip { white-space: nowrap; pointer-events: none; - transition: opacity .2s ease-in; -} - -.DonutGraph__tooltip--hide { visibility: hidden; opacity: 0; + transition: opacity .2s ease-in; } .DonutGraph__tooltip--show { From 0e84e9ec8464f251df69b80b04e697d95c571a44 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 15:09:19 -0400 Subject: [PATCH 126/131] Restore Foundation formatting to donut category tooltips --- app/panel/components/BuildingBlocks/DonutGraph.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index 1765c3f69..127ac4551 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -319,11 +319,12 @@ class DonutGraph extends React.Component { 'DonutGraph--small': isSmall, }); + // TODO Foundation dependency: tooltip return (
{this.props.categories.map(cat => ( - + {cat.name} ))} From 1052d930aaa82f3ba1fd77df19b47f76a0816919 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 15:24:08 -0400 Subject: [PATCH 127/131] Update pause button snapshots and tests to reflect code updates --- .../components/__tests__/PauseButton.jsx | 6 ++++-- .../__snapshots__/PauseButton.jsx.snap | 21 ++++++------------- app/scss/partials/_pause_button.scss | 2 +- 3 files changed, 11 insertions(+), 18 deletions(-) diff --git a/app/panel/components/__tests__/PauseButton.jsx b/app/panel/components/__tests__/PauseButton.jsx index fd22fceec..9f83869b8 100644 --- a/app/panel/components/__tests__/PauseButton.jsx +++ b/app/panel/components/__tests__/PauseButton.jsx @@ -98,11 +98,12 @@ describe('app/panel/components/BuildingBlocks/PauseButton.jsx', () => { expect(component.find('.button.button-pause.active').length).toBe(0); expect(component.find('.button.button-pause.smaller').length).toBe(1); expect(component.find('.button.button-pause.smallest').length).toBe(0); - expect(component.find('.dropdown-container').length).toBe(1); + expect(component.find('.dropdown-container').length).toBe(0); expect(component.find('.dropdown-container .dropdown-item').length).toBe(0); expect(component.find('.button-caret').length).toBe(1); expect(component.find('.button-caret.active').length).toBe(0); component.setState({ showDropdown: true }); + expect(component.find('.dropdown-container').length).toBe(1); expect(component.find('.dropdown-container .dropdown-item').length).toBe(3); expect(component.find('.dropdown-container .dropdown-item.selected').length).toBe(0); expect(component.find('.button-caret.active').length).toBe(1); @@ -127,11 +128,12 @@ describe('app/panel/components/BuildingBlocks/PauseButton.jsx', () => { expect(component.find('.button.button-pause.active').length).toBe(1); expect(component.find('.button.button-pause.smaller').length).toBe(0); expect(component.find('.button.button-pause.smallest').length).toBe(0); - expect(component.find('.dropdown-container').length).toBe(1); + expect(component.find('.dropdown-container').length).toBe(0); expect(component.find('.dropdown-container .dropdown-item').length).toBe(0); expect(component.find('.button-caret').length).toBe(1); expect(component.find('.button-caret.active').length).toBe(0); component.setState({ showDropdown: true }); + expect(component.find('.dropdown-container').length).toBe(1); expect(component.find('.dropdown-container .dropdown-item').length).toBe(3); expect(component.find('.dropdown-container .dropdown-item.selected').length).toBe(1); expect(component.find('.button-caret.active').length).toBe(1); diff --git a/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap b/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap index c32282d05..c6184528b 100644 --- a/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap +++ b/app/panel/components/__tests__/__snapshots__/PauseButton.jsx.snap @@ -8,7 +8,7 @@ exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with className="button-group" >
-
`; @@ -44,7 +41,7 @@ exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with className="button-group" >
-
`; @@ -82,7 +76,7 @@ exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with className="button-group" >
-
`; diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss index 8941929d4..c398075d9 100644 --- a/app/scss/partials/_pause_button.scss +++ b/app/scss/partials/_pause_button.scss @@ -170,7 +170,7 @@ } .dropdown-container.centered .dropdown-item { - padding: 9px 0; + padding: 6px 0; } .no-border-radius { From 522397ee7ce73fe0bb287bbeebe3b38b93cd0296 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 19:24:35 -0400 Subject: [PATCH 128/131] Fix typo in panel.scss. Remove double header in ghostery_feature.scss. Remove commented code in ghostery_feature.scss --- app/scss/panel.scss | 2 +- app/scss/partials/_ghostery_feature.scss | 52 +----------------------- 2 files changed, 2 insertions(+), 52 deletions(-) diff --git a/app/scss/panel.scss b/app/scss/panel.scss index 8954c3a1a..c37affeec 100644 --- a/app/scss/panel.scss +++ b/app/scss/panel.scss @@ -20,7 +20,7 @@ @import './partials/_placeholders'; @import './partials/_mixins'; -// IMport shared helpers +// Import shared helpers @import 'shared_helper_classes'; html body { diff --git a/app/scss/partials/_ghostery_feature.scss b/app/scss/partials/_ghostery_feature.scss index 56f245491..7d1d41a12 100644 --- a/app/scss/partials/_ghostery_feature.scss +++ b/app/scss/partials/_ghostery_feature.scss @@ -1,5 +1,5 @@ /** - * Ghostery Features Sass + * Ghostery Feature Sass * * Ghostery Browser Extension * https://www.ghostery.com/ @@ -11,56 +11,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -/** - * Ghostery Features Sass - * - * 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 - */ - -/* -.sub-component.ghostery-features { - .button { - &:hover { - background-color: #efefef; - } - } - - .button-top { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom: 0; - } - .button-left { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0; - } - .button-center { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .button-bottom { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-top: 0; - } - .button-right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: 0; - } -} -*/ - .GhosteryFeatureButton__text { background-repeat: no-repeat; background-size: 14px 14px; From 870b9c8729993935438f4aecf3938e8c52461015 Mon Sep 17 00:00:00 2001 From: Caleb Richelson Date: Mon, 10 Jun 2019 19:58:07 -0400 Subject: [PATCH 129/131] Remove count from Cliqz Features, replace with ON/OFF indicator (#393) * Remove count from Cliqz Features, replace with ON/OFF indicator * Stop passing now unneeded data prop to CliqzFeature --- .../BuildingBlocks/CliqzFeature.jsx | 26 ++----------- app/panel/components/Summary.jsx | 6 --- app/scss/partials/_cliqz_feature.scss | 38 +++++-------------- app/scss/partials/_svgs.scss | 5 --- 4 files changed, 13 insertions(+), 62 deletions(-) diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 9c97b1aa3..6ded5c7d0 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -50,28 +50,9 @@ class CliqzFeature extends React.Component { }); } - _getCount(active, data, type) { - if (!active) { - return '-'; - } - - if (type === 'anti_track') { - return data && data.totalUnsafeCount || 0; - } else if (type === 'ad_block') { - return data && data.totalCount || 0; - } else if (type === 'smart_block') { - return this._count(data, data.blocked) + this._count(data, data.unblocked); - } - - return 0; + _getStatus(active) { + return active ? t('drawer_on') : t('drawer_off'); } - _count(object, property) { - return object && this._length(property) || 0; - } - _length(object) { - return Object.keys(object).length; - } - _getTooltipBodyText(active, isTooltipBody, type) { if (!isTooltipBody) return false; @@ -99,7 +80,6 @@ class CliqzFeature extends React.Component { const { active, cliqzInactive, - data, isSmaller, isCondensed, isTooltipBody, @@ -125,7 +105,7 @@ class CliqzFeature extends React.Component { return (
-
{this._getCount(active, data, type)}
+
{this._getStatus(active)}
%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226%22%20stroke-width%3D%222%22%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20fill%3D%22none%22/%3E%3C/svg%3E'); From e7a8adcb34a1bf906eadf60cfbd99063a00901aa Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 11 Jun 2019 12:06:26 -0400 Subject: [PATCH 130/131] Remove commented out code from GhosteryFeature --- .../BuildingBlocks/GhosteryFeature.jsx | 81 ------------------- 1 file changed, 81 deletions(-) diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index 6db9f49f2..afd498a35 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -127,87 +127,6 @@ class GhosteryFeature extends React.Component {
); } - - /** - * React's required render function. Returns JSX - * @return {JSX} JSX for rendering the Ghostery Features portion of the Summary View - */ - /* - render() { - const { - isAbPause, - isInactive, - isStacked, - isCondensed, - sitePolicy - } = this.props; - - const buttonGroupClassNames = ClassNames('button-group', { - inactive: isInactive, - stacked: isStacked, - }); - const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', { - 'ab-pause': isAbPause, - 'button-left': isAbPause && !isStacked, - 'button-top': (isAbPause || isCondensed) && isStacked, - condensed: isCondensed, - active: sitePolicy === 2, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - const customClassNames = ClassNames('button', 'button-custom', 'g-tooltip', { - 'ab-pause': isAbPause, - 'button-center': isAbPause && true, - condensed: isCondensed, - active: !sitePolicy, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', { - 'ab-pause': isAbPause, - 'button-right': isAbPause && !isStacked, - 'button-bottom': isAbPause && isStacked, - 'button-center': !isAbPause && isCondensed && isStacked, - condensed: isCondensed, - active: sitePolicy === 1, - clickable: !isInactive, - 'not-clickable': isInactive, - }); - - return ( -
-
-
- - - {this.getTrustText()} - - - -
- {isAbPause && ( -
- - - {t('summary_custom_settings')} - - - -
- )} -
- - - {this.getRestrictText()} - - - -
-
-
- ); - } - */ } export default GhosteryFeature; From d7c955912539b30d2d6c6a004820d554daa3d2da Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 11 Jun 2019 12:29:20 -0400 Subject: [PATCH 131/131] Make CliqzFeature-specific locale string keys for CliqzFeature status labels --- _locales/en/messages.json | 6 ++++++ app/panel/components/BuildingBlocks/CliqzFeature.jsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 65dd927f8..ec921e741 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2206,5 +2206,11 @@ }, "panel_stats_pitch_modal_tooltip": { "message": "Erase all statistics history up until this point in time." + }, + "cliqz_feature_status_on": { + "message": "On" + }, + "cliqz_feature_status_off": { + "message": "Off" } } diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 6ded5c7d0..93d786c15 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -51,7 +51,7 @@ class CliqzFeature extends React.Component { } _getStatus(active) { - return active ? t('drawer_on') : t('drawer_off'); + return active ? t('cliqz_feature_status_on') : t('cliqz_feature_status_off'); } _getTooltipBodyText(active, isTooltipBody, type) {