+
+ );
+ }
+}
+
+export default CliqzFeatures;
diff --git a/app/panel/components/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx
similarity index 58%
rename from app/panel/components/DonutGraph.jsx
rename to app/panel/components/BuildingBlocks/DonutGraph.jsx
index 5f98631d5..43f80cb16 100644
--- a/app/panel/components/DonutGraph.jsx
+++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx
@@ -12,18 +12,22 @@
*/
import React, { Component } from 'react';
+import ClassNames from 'classnames';
import * as d3 from 'd3';
import { scaleLinear } from 'd3-scale';
+
/**
- * @class Generate donut graph with tracker data in the Summary view.
+ * @class Generate donut graph. Used to display tracker data in the Summary View.
* @memberOf PanelClasses
*/
class DonutGraph extends React.Component {
constructor(props) {
super(props);
- // event bindings
- this.clickTrackersAll = this.clickTrackersAll.bind(this);
+ // Event Bindings
+ this.clickGraphText = this.clickGraphText.bind(this);
+
+ // Variables
this.colors = {
regular: (id) => {
switch (id) {
@@ -47,56 +51,75 @@ class DonutGraph extends React.Component {
return '#e8e8e8';
}
},
- restricted: scaleLinear().range(['#f75065', '#ffb0Ba']),
- paused: scaleLinear().range(['#848484', '#c9c9c9']),
+ redscale: scaleLinear().range(['#f75065', '#ffb0Ba']),
+ greyscale: scaleLinear().range(['#848484', '#c9c9c9']),
};
}
+
/**
* Lifecycle event
*/
componentDidMount() {
const {
- categories, sitePolicy, pausedBlocking, trackerCounts, isExpert
+ categories,
+ renderRedscale,
+ renderGreyscale,
+ totalCount,
+ isSmall,
} = this.props;
+
this.generateGraph(categories, {
- sitePolicy,
- pausedBlocking,
- trackerCounts,
- isExpert,
+ renderRedscale,
+ renderGreyscale,
+ totalCount,
+ isSmall,
});
}
+
/**
* Lifecycle event
*/
componentWillReceiveProps(nextProps) {
const {
- categories, sitePolicy, pausedBlocking, trackerCounts, isExpert
+ categories,
+ renderRedscale,
+ renderGreyscale,
+ totalCount,
+ ghosteryFeatureSelect,
+ isSmall,
} = this.props;
+
if (categories.length !== nextProps.categories.length ||
- sitePolicy !== nextProps.sitePolicy ||
- pausedBlocking !== nextProps.pausedBlocking ||
- isExpert !== nextProps.isExpert) {
+ renderRedscale !== nextProps.renderRedscale ||
+ renderGreyscale !== nextProps.renderGreyscale ||
+ totalCount !== nextProps.totalCount ||
+ ghosteryFeatureSelect !== nextProps.ghosteryFeatureSelect ||
+ isSmall !== nextProps.isSmall) {
this.generateGraph(nextProps.categories, {
- sitePolicy: nextProps.sitePolicy,
- pausedBlocking: nextProps.pausedBlocking,
- trackerCounts: nextProps.trackerCounts,
- isExpert: nextProps.isExpert,
+ renderRedscale: nextProps.renderRedscale,
+ renderGreyscale: nextProps.renderGreyscale,
+ totalCount: nextProps.totalCount,
+ isSmall: nextProps.isSmall,
});
}
}
+
/**
- * Generate donut-shaped graph with the scanning results. Add mouse event listeners
- * to the parts of the created donut which would navigate to the corresponding
- * tracker category in the blocking view.
- * @param {Object} categories list of categories detected on the site
- * @param {Object} options site policy, paused state, stats of the scanning
+ * Generate donut-shaped graph with the scanning results.
+ * Add mouse event listeners to the arcs of the donut graph that filter the
+ * detailed view to the corresponding tracker category.
+ * @param {Array} categories list of categories detected on the site
+ * @param {Object} options options for the graph
*/
generateGraph(categories, options) {
- const { sitePolicy, pausedBlocking } = options;
+ const {
+ renderRedscale,
+ renderGreyscale,
+ totalCount,
+ isSmall
+ } = options;
const graphData = [];
- const trackerCounts = options.trackerCounts || {};
- const trackerCount = trackerCounts.allowed + trackerCounts.blocked || 0;
- const size = options.isExpert ? 94 : 121;
+ const size = isSmall ? 94 : 120;
const width = +size;
const height = +size;
const radius = Math.min(width, height) / 2;
@@ -124,6 +147,14 @@ class DonutGraph extends React.Component {
// Clear graph
d3.select(this.node).selectAll('*').remove();
+ // Clear tooltips
+ categories.forEach((cat) => {
+ const tooltip = document.getElementById(`${cat.id}_tooltip`);
+ if (tooltip) {
+ tooltip.classList.remove('show');
+ }
+ });
+
// Draw graph
const chart = d3.select(this.node)
.append('svg')
@@ -149,16 +180,21 @@ class DonutGraph extends React.Component {
g.append('path')
.style('fill', (d, i) => {
- if (pausedBlocking) {
- const pausedExp = graphData.length > 1 ? 100 / (graphData.length - 1) * i * 0.01 : 0;
- return this.colors.paused(pausedExp);
- } else if (sitePolicy === 1) {
- const restrictedExp = graphData.length > 1 ? 100 / (graphData.length - 1) * i * 0.01 : 0;
- return this.colors.restricted(restrictedExp);
+ if (renderGreyscale) {
+ const greyTone = graphData.length > 1 ? 100 / (graphData.length - 1) * i * 0.01 : 0;
+ return this.colors.greyscale(greyTone);
+ } else if (renderRedscale) {
+ const redTone = graphData.length > 1 ? 100 / (graphData.length - 1) * i * 0.01 : 0;
+ return this.colors.redscale(redTone);
}
return this.colors.regular(d.data.id);
})
- .attr('class', (d, i) => ((d.data.name) ? 'clickable' : 'disabled'))
+ .attr('class', (d, i) => {
+ if (d.data.name) {
+ return (isSmall) ? 'clickable' : 'not-clickable';
+ }
+ return 'disabled';
+ })
.on('mouseover', (d, i) => {
const pX = arc.centroid(d)[0] + (width / 2);
const pY = arc.centroid(d)[1] + (height / 2);
@@ -176,8 +212,8 @@ class DonutGraph extends React.Component {
}
})
.on('click', (d, i) => {
- if (d.data.name) {
- this.props.actions.filterTrackers({ type: 'category', name: d.data.id });
+ if (d.data.name && isSmall) {
+ this.props.clickDonut({ type: 'category', name: d.data.id });
}
})
.transition()
@@ -205,35 +241,44 @@ class DonutGraph extends React.Component {
})
.ease(d3.easeLinear);
}
+
/**
- * Trigger action which results in navigating to full blocking view.
- * @param {Object} event mouseclick on the total number of trackers
- * displayed in the 'hole' of the donut
+ * Handle click event for graph text. Filters to show all categories.
*/
- clickTrackersAll(event) {
- this.props.actions.filterTrackers({ type: 'trackers', name: 'all' });
+ clickGraphText() {
+ this.props.clickDonut({ type: 'trackers', name: 'all' });
}
+
/**
- * Render Donut Chart.
- * @return {ReactComponent} ReactComponent instance
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the donut-graph portion of the Summary View
*/
render() {
+ const { isSmall, totalCount } = this.props;
+ const componentClasses = ClassNames('sub-component', 'donut-graph', {
+ small: isSmall,
+ big: !isSmall,
+ });
+
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') }
+
+
-
-
-
-
- {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked || 0}
-
- Trackers
- { this.node = node; }} />
+
+
{this.props.categories.map(cat => (
{cat.name}
))}
+ { this.node = node; }} />
+
);
}
diff --git a/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx b/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx
new file mode 100644
index 000000000..ea4600d9f
--- /dev/null
+++ b/app/panel/components/BuildingBlocks/GhosteryFeatures.jsx
@@ -0,0 +1,170 @@
+/**
+ * Ghostery Features Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React, { Component } from 'react';
+import ClassNames from 'classnames';
+import Tooltip from '../Tooltip';
+
+/**
+ * @class Implements buttons to render and toggle for Ghostery's features on/off.
+ * @memberof PanelClasses
+ */
+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 {
+ 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 (
+
+
{totalCount}
+
+ {(totalCount === 1) ? t('tracker_signular') : t('tracker_plural')}
+
+
+ {t('tracker_found')}
+
+
+
+ );
+ }
+}
+
+export default GhosteryFeatures;
diff --git a/app/panel/components/NotScanned.jsx b/app/panel/components/BuildingBlocks/NotScanned.jsx
similarity index 51%
rename from app/panel/components/NotScanned.jsx
rename to app/panel/components/BuildingBlocks/NotScanned.jsx
index cd634675f..ef010894e 100644
--- a/app/panel/components/NotScanned.jsx
+++ b/app/panel/components/BuildingBlocks/NotScanned.jsx
@@ -1,5 +1,5 @@
/**
- * NotScanned Component
+ * Not Scanned Component
*
* Ghostery Browser Extension
* https://www.ghostery.com/
@@ -12,24 +12,31 @@
*/
import React, { Component } from 'react';
+import ClassNames from 'classnames';
+
/**
- * @class Implement Not Scanned component to be displayed in main panel
- * when a site is not scannable or has not been scanned.
+ * @class Implements the Not Scanned component displayed in the Summary view
+ * when a site is not scannable or has not yet been scanned.
* @memberof PanelClasses
*/
-const NotScanned = (props) => ( // eslint-disable-line arrow-parens
-
+
+
+
+
+ {this.getTrustText()}
+
+
+
+ {isAbPause && (
+
+
+
+ {t('summary_custom_settings')}
+
+
+
+ )}
+
+
+
+ {this.getRestrictText()}
+
+
+
+
-
-
+const NotScanned = (props) => {
+ const notScannedClassNames = ClassNames('sub-component', 'not-scanned', {
+ small: props.isSmall,
+ });
+
+ return ( // eslint-disable-line arrow-parens
+
{ this.listClickHandler(item); }}>
-
- ));
-
- return (
-
}
- {settingsData.enable_metrics_abtest &&
+ {settingsData.enable_offers_abtest &&
+
-);
+ );
+};
export default NotScanned;
diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx
new file mode 100644
index 000000000..2aec23a37
--- /dev/null
+++ b/app/panel/components/BuildingBlocks/PauseButton.jsx
@@ -0,0 +1,191 @@
+/**
+ * Pause Button Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React, { Component } from 'react';
+import ClassNames from 'classnames';
+import Tooltip from '../Tooltip';
+
+/**
+ * @class Implements the Pause button on the Summary view.
+ * @memberof PanelClasses
+ */
+class PauseButton extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showDropdown: false,
+ };
+
+ // Event Bindings
+ this.clickDropdownCaret = this.clickDropdownCaret.bind(this);
+ this.clickDropdownPause = this.clickDropdownPause.bind(this);
+ this.clickOutside = this.clickOutside.bind(this);
+ }
+
+ /**
+ * Handles the click event for the Dropdown Caret
+ */
+ clickDropdownCaret() {
+ if (!this.state.showDropdown) {
+ this.setState({ showDropdown: true });
+ document.body.addEventListener('click', this.clickOutside);
+ } else {
+ this.setState({ showDropdown: false });
+ document.body.removeEventListener('click', this.clickOutside);
+ }
+ }
+
+ /**
+ * Handles clicking outside the dropdown menu when the menu is exposed
+ * @param {Object} event the click event
+ */
+ clickOutside(event) {
+ const classes = event.target.className || '';
+ if (classes && typeof classes === 'string' && (classes.indexOf('button-caret') !== -1 || classes.indexOf('dropdown-clickable') !== -1)) {
+ return;
+ }
+ document.body.removeEventListener('click', this.clickOutside);
+ this.setState({ showDropdown: false });
+ }
+
+ /**
+ * Handles the click event for timed pause in the dropdown list
+ */
+ /**
+ * Handles the click event for timed pause in the dropdown list
+ * @param {int} time The time in minutes that Ghostery should be paused`
+ */
+ clickDropdownPause(time) {
+ this.setState({ showDropdown: false });
+ document.body.removeEventListener('click', this.clickOutside);
+ this.props.clickPause(time);
+ }
+
+ /**
+ * Helper render function for the dropdown list
+ * @return {JSX} JSX for the dropdown list
+ */
+ renderDropdown() {
+ const { isCondensed, isPausedTimeout } = this.props;
+
+ function dropdownItemClassName(value) {
+ return ClassNames('dropdown-item', 'clickable', 'dropdown-clickable', {
+ selected: value === isPausedTimeout / 60000,
+ });
+ }
+
+ const dropdownStyles = {
+ width: `${this.pauseWidth + 26}px`,
+ };
+
+ return (
+
{t('summary_page_not_scanned') }
-
+
-
{ t('summary_description_not_scanned_1') }
-
+
+ +
{ t('summary_description_not_scanned_2') }
+ {this.props.dropdownItems.map(item => (
+
+ );
+ }
+
+ /**
+ * Helper render function for Pause Button text
+ * @return {JSX} JSX for the Pause Button's text
+ */
+ renderPauseButtonText() {
+ const {
+ isPaused,
+ isCondensed,
+ isAbPause,
+ } = this.props;
+
+ if (isCondensed) {
+ return ();
+ } else if (isAbPause) {
+ return (
+
+ {isPaused ? t('summary_resume_ghostery_ab_pause') : t('summary_pause_ghostery_ab_pause')}
+
+ );
+ }
+ return (
+
+ {isPaused ? t('summary_resume_ghostery') : t('summary_pause_ghostery')}
+
+ );
+ }
+
+ /**
+ * React's required render function. Returns JSX
+ * @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,
+ 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 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 dropdownContainerClassNames = ClassNames('button-group', 'dropdown-container', {
+ centered: this.props.isCentered,
+ });
+ const dropdownContainerStyles = {
+ left: `${(this.props.isCentered && this.props.isAbPause) ? this.pauseLeft : 0}px`,
+ };
+
+ return (
+ { this.clickDropdownPause(item.val); }}>
+
+ {!isCondensed ? item.name : item.name_condensed}
+
+
+ ))}
+
+
+ );
+ }
+}
+
+export default PauseButton;
diff --git a/app/panel/components/BuildingBlocks/index.js b/app/panel/components/BuildingBlocks/index.js
new file mode 100644
index 000000000..6d3ab2d18
--- /dev/null
+++ b/app/panel/components/BuildingBlocks/index.js
@@ -0,0 +1,26 @@
+/**
+ * Building Blocks Sub Components
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 CliqzFeatures from './CliqzFeatures';
+import DonutGraph from './DonutGraph';
+import GhosteryFeatures from './GhosteryFeatures';
+import NotScanned from './NotScanned';
+import PauseButton from './PauseButton';
+
+export {
+ CliqzFeatures,
+ DonutGraph,
+ GhosteryFeatures,
+ NotScanned,
+ PauseButton
+};
diff --git a/app/panel/components/Detail.jsx b/app/panel/components/Detail.jsx
index e0a602cdf..cb33319e6 100644
--- a/app/panel/components/Detail.jsx
+++ b/app/panel/components/Detail.jsx
@@ -13,6 +13,7 @@
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
+import ClassNames from 'classnames';
import DetailMenu from './DetailMenu';
import Summary from '../containers/SummaryContainer';
import Blocking from '../containers/BlockingContainer';
@@ -59,13 +60,14 @@ class Detail extends React.Component {
* @return {ReactComponent} ReactComponent instance
*/
render() {
+ const condensedToggleClassNames = ClassNames('condensed-toggle', {
+ condensed: this.props.is_expanded,
+ });
+
return (
+
+ {
+ this.pauseWidth = node && node.clientWidth;
+ this.pauseLeft = node && node.offsetLeft;
+ }}
+ >
+ {this.renderPauseButtonText()}
+ {!this.props.isAbPause && (
+
+
+
+ {t('summary_show_menu')}
+
+
+
+ {this.state.showDropdown && this.renderDropdown()}
+
+
-
+ { showTabs && (
+
-
+
- { t('panel_needs_reload') }
- { t('panel_click_to_reload') }
-
- ) : (this.props.notificationFilter === 'slow') ?
-
-
- { t('panel_tracker_slow_non_secure_end') }
-
- : (this.props.notificationFilter === 'compatibility') ?
+
+ if (this.props.notificationText) {
+ return (
+
+
+ {needsReload && (
+
);
}
diff --git a/app/panel/components/SelectButton.jsx b/app/panel/components/SelectButton.jsx
deleted file mode 100644
index dc9425869..000000000
--- a/app/panel/components/SelectButton.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * Select Button Component
- *
- * Ghostery Browser Extension
- * https://www.ghostery.com/
- *
- * Copyright 2018 Ghostery, Inc. All rights reserved.
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0
- */
-
-import React, { Component } from 'react';
-/**
- * @class Implement generic split button component
- * used currently in Pause Ghostery button on Summary view.
- * @memberof PanelClasses
- */
-class SelectButton extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- isOpen: false,
- };
- }
- /**
- * Handler for mouse clicks outside of the Select Button.
- * @param {Object} e mouseclick event
- */
- clickOutside = (e) => {
- // skip if clicking on right button or select menu to avoid
- // click event conflicts
- if (this.rightButton.contains(e.target) || this.selectMenu.contains(e.target)) {
- return;
- }
- this.setState({ isOpen: false });
- }
- /**
- * Toogle showing of the menu
- * @return {Object} iOpen as its property
- */
- toggleMenu = () => {
- this.setState((prevState, props) => {
- if (!prevState.isOpen) {
- document.body.addEventListener('click', this.clickOutside);
- } else {
- document.body.removeEventListener('click', this.clickOutside);
- }
- return { isOpen: !prevState.isOpen };
- });
- }
- /**
- * Handle click on a menu item
- */
- listClickHandler = (item) => {
- this.toggleMenu();
- this.props.callback(item.val);
- }
- /**
- * Handle click on the button itself
- */
- buttonClickHandler = () => {
- if (this.state.isOpen) {
- this.toggleMenu();
- }
- this.props.callback();
- }
- /**
- * Render Select Button component.
- * @return {ReactComponent} ReactComponent instance
- */
- render() {
- const listItems = this.props.menuItems.map((item, idx) => (
-
-
-
-
+
-
- );
- }
-}
-
-export default Drawer;
diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx
index 54eb1359f..d7e746b35 100644
--- a/app/panel/components/Header.jsx
+++ b/app/panel/components/Header.jsx
@@ -10,14 +10,16 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
+
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ClassNames from 'classnames';
import HeaderMenu from './HeaderMenu';
import { sendMessage } from '../utils/msg';
import { log } from '../../../src/utils/common';
+
/**
- * @class Implement header component which is common to all panel views
+ * @class Implements header component which is common to all panel views
* @memberof PanelClasses
*/
class Header extends React.Component {
@@ -27,26 +29,53 @@ class Header extends React.Component {
dropdownOpen: false,
};
- // event bindings
+ // Event Bindings
+ this.clickSimpleTab = this.clickSimpleTab.bind(this);
+ this.clickDetailedTab = this.clickDetailedTab.bind(this);
+ this.toggleExpert = this.toggleExpert.bind(this);
this.toggleDropdown = this.toggleDropdown.bind(this);
- this.getKebab = this.getKebab.bind(this);
this.clickSignInVerify = this.clickSignInVerify.bind(this);
}
+
/**
- * Initialize kebab menu icon with refrence to DOM elementiption]
- * @param {Object} ref React reference attribute of the menu icon
+ * Handles clicking on the Simple View tab
*/
- getKebab(ref) {
- this.kebab = ref;
+ clickSimpleTab() {
+ if (this.props.is_expert) {
+ this.toggleExpert();
+ }
}
+
/**
- * Toggle drop-down pane with menu items
+ * Handles clicking on the Detailed View tab
+ */
+ clickDetailedTab() {
+ if (!this.props.is_expert) {
+ this.toggleExpert();
+ }
+ }
+
+ /**
+ * 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 toggling the drop-down pane open/closed
*/
toggleDropdown() {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
}
+
/**
- * Click the sign in / verify link in the header
+ * Handles clicking the sign-in / verify link
*/
clickSignInVerify() {
if (!this.props.logged_in) {
@@ -63,17 +92,40 @@ class Header extends React.Component {
});
}
}
+
/**
- * Render header.
- * @return {ReactComponent} ReactComponent instance
- */
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the Header Component of the panel
+ */
render() {
const { pathname } = this.props.location;
+ const showTabs = pathname === '/' || pathname.startsWith('/detail');
const headerLogoClasses = ClassNames('header-logo', {
'show-back-arrow': (pathname !== '/' && !pathname.startsWith('/detail')),
});
+ const tabSimpleClassNames = ClassNames('header-tab', {
+ active: !this.props.is_expert,
+ });
+ const tabDetailedClassNames = ClassNames('header-tab', {
+ active: this.props.is_expert,
+ });
+
return (
-
- { t(`drawer_title_${this.props.activeDrawerType}`) }
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
- {this.getCount(this.props.activeDrawerType)}
-
-
-
-
- { t(`drawer_label_${this.props.activeDrawerType}`) }
-
-
- 
-
-
- {t(`drawer_desc_${this.props.activeDrawerType}`)}
-
-
-
- { t(`drawer_status_${this.props.activeDrawerType}`) }
- {this.isChecked() ? t('drawer_on') : t('drawer_off')}
-
-
-
+
+ )}
+
+ {t('panel_header_simple_view')}
+
+
+
+
+ {t('panel_header_detailed_view')}
+
+
+
@@ -87,7 +139,11 @@ class Header extends React.Component {
{ !this.props.logged_in ? t('panel_header_sign_in') : (!this.props.is_validated ? t('panel_header_verify_account') : '') }
{ this.kebab = node; }}
+ />
{ this.state.dropdownOpen &&
{ t('alert_reload') }
+ )}
+
+ );
+ } else if (needsReload) {
+ return (
+
+ {t('panel_needs_reload')}
+ { t('alert_reload') }
+
+ );
+ } else if (this.props.notificationFilter === 'slow') {
+ return (
+
+
+ { t('panel_tracker_slow_non_secure_end') }
+
+ );
+ } else if (this.props.notificationFilter === 'compatibility') {
+ return (
{ t('panel_tracker_breaking_page_end') }
- : (
-
- );
+ );
+ }
+
+ return (
+
+ );
+ }
+
+ /**
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the Panel
+ */
+ render() {
+ // this prevents double rendering when waiting for getPanelData() to finish
+ if (!this.props.initialized) {
+ return null;
+ }
+
return (
@@ -143,20 +169,12 @@ class Panel extends React.Component {
- {calloutText}
+ {this.renderNotification()}
-
- {item.name}
-
-
-
- );
- }
-}
-
-export default SelectButton;
diff --git a/app/panel/components/Settings/GlobalBlocking.jsx b/app/panel/components/Settings/GlobalBlocking.jsx
index 5ddc0285f..a28578e1e 100644
--- a/app/panel/components/Settings/GlobalBlocking.jsx
+++ b/app/panel/components/Settings/GlobalBlocking.jsx
@@ -12,6 +12,7 @@
*/
import React, { Component } from 'react';
+import ClassNames from 'classnames';
import Categories from '../Blocking/Categories';
import BlockingHeader from '../Blocking/BlockingHeader';
/**
@@ -40,12 +41,12 @@ class GlobalBlocking extends React.Component {
const categories = this.props.settingsData ? this.props.settingsData.categories : [];
const filterText = this.props.settingsData ? this.props.settingsData.filterText : t('settings_filter_all_label');
const expandAll = this.props.settingsData ? this.props.settingsData.expand_all_trackers : false;
+ const condensedToggleClassNames = ClassNames('condensed-toggle', {
+ condensed: settingsData.is_expanded,
+ });
return (
-
-
- {this.state.isOpen ?
- { this.selectMenu = ref; }}>
-
- :
- null
- }
- -
- {listItems}
-
- {
-
-
-
+
diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx
index 338759617..9d4651fdd 100644
--- a/app/panel/components/Summary.jsx
+++ b/app/panel/components/Summary.jsx
@@ -14,17 +14,23 @@
import React, { Component } from 'react';
import ClassNames from 'classnames';
import { sendMessage } from '../utils/msg';
-import DonutGraph from './DonutGraph';
-import SelectButton from './SelectButton';
-import Tooltip from './Tooltip';
-import NotScanned from './NotScanned';
import globals from '../../../src/classes/Globals';
-import { updateSummaryBlockingCount } from '../utils/blocking';
+import {
+ CliqzFeatures,
+ DonutGraph,
+ GhosteryFeatures,
+ NotScanned,
+ PauseButton
+} from './BuildingBlocks';
-const { BROWSER_INFO } = globals;
const { IS_CLIQZ } = globals;
+const AB_PAUSE_BUTTON = false;
+
/**
- * @class Implement Summary view.
+ * @class Implements the Summary View, which is displayed as the entire panel
+ * as the Simple View or condensed as part of the Detailed View. Summary View
+ * displays site information, aggregate tracker data, and options for toggling
+ * Ghostery and Cliqz features.
* @memberof PanelClasses
*/
class Summary extends React.Component {
@@ -33,47 +39,49 @@ class Summary extends React.Component {
this.state = {
trackerLatencyTotal: '',
disableBlocking: false,
+ abPause: AB_PAUSE_BUTTON,
};
- // event bindings
- this.clickGhosteryPause = this.clickGhosteryPause.bind(this);
- this.clickSitePolicy = this.clickSitePolicy.bind(this);
+ // Event Bindings
+ this.toggleExpert = this.toggleExpert.bind(this);
+ this.clickPauseButton = this.clickPauseButton.bind(this);
+ this.clickDonut = this.clickDonut.bind(this);
+ this.clickTrackersCount = this.clickTrackersCount.bind(this);
this.clickTrackersBlocked = this.clickTrackersBlocked.bind(this);
- this.clickTrackersAlerts = this.clickTrackersAlerts.bind(this);
+ this.clickSitePolicy = this.clickSitePolicy.bind(this);
+ this.clickCliqzFeature = this.clickCliqzFeature.bind(this);
this.clickMapTheseTrackers = this.clickMapTheseTrackers.bind(this);
- this.toggleExpert = this.toggleExpert.bind(this);
- this.openDrawer = this.openDrawer.bind(this);
this.pauseOptions = [
- { name: t('pause_30_min'), val: 30 },
- { name: t('pause_1_hour'), val: 60 },
- { name: t('pause_24_hours'), val: 1440 },
+ { name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
+ { name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
+ { name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
];
}
+
/**
- * Lifecycle event.
+ * Lifecycle event
*/
componentWillMount() {
this.setTrackerLatency(this.props);
this.updateSiteNotScanned(this.props);
}
+
/**
- * Lifecycle event.
+ * Lifecycle event
*/
componentWillReceiveProps(nextProps) {
- // triggered by update to the redux store
this.setTrackerLatency(nextProps);
this.updateSiteNotScanned(nextProps);
- if (nextProps.alertCounts.total !== this.props.alertCounts.total) {
- this.updateTrackerCountAlert(nextProps);
- }
+
// Set page title for Firefox for Android
window.document.title = `Ghostery's findings for ${this.props.pageUrl}`;
}
+
/**
- * Calculate pageLatency and set to state
- * @param {Object} props nextProps
- */
+ * 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 = '';
@@ -94,46 +102,66 @@ class Summary extends React.Component {
this.setState({ trackerLatencyTotal: `${pageLatency}` });
}
}
+
/**
- * Open feature drawer
- * @param {Object} event clicking on feature button event
+ * Disable controls when Ghostery cannot or has not yet scanne a page.
+ * @param {Object} props Summary's props, either this.props or nextProps.
*/
- openDrawer(event) {
- if (this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false) { return; }
-
- const type = event.target.value;
- switch (type) {
- case 'antiTrackBtn': {
- if (!IS_CLIQZ) {
- this.props.actions.openDrawer('enable_anti_tracking');
- }
- break;
- }
- case 'adBlockBtn': {
- if (!IS_CLIQZ) {
- this.props.actions.openDrawer('enable_ad_block');
- }
- break;
- }
- case 'smartBlockBtn': {
- this.props.actions.openDrawer('enable_smart_block');
- break;
- }
- default: {
- break;
- }
+ updateSiteNotScanned(props) {
+ const { siteNotScanned, categories } = props;
+ const pageUrl = props.pageUrl || '';
+
+ if (siteNotScanned || !categories || pageUrl.search('http') === -1) {
+ this.setState({ disableBlocking: true });
+ } else {
+ this.setState({ disableBlocking: false });
+ }
+ }
+
+ /**
+ * Handles clicking on the Pause Ghostery button.
+ * @param {Int} time Optional number of minutes after which Ghostery should un-pause.
+ */
+ clickPauseButton(time) {
+ const ghosteryPaused = this.props.paused_blocking;
+ const text = ghosteryPaused ? t('alert_ghostery_resumed') : t('alert_ghostery_paused');
+ sendMessage('ping', ghosteryPaused ? 'resume' : 'pause');
+ if (typeof time === 'number') {
+ sendMessage('ping', 'pause_snooze');
}
+
+ this.props.actions.updateGhosteryPaused({
+ ghosteryPaused: (typeof time === 'number' ? true : !ghosteryPaused),
+ time: time * 60000,
+ });
+ this.props.actions.filterTrackers({ type: 'trackers', name: 'all' });
+ this.props.actions.showNotification({
+ updated: 'ghosteryPaused',
+ reload: true,
+ text,
+ });
}
+
/**
- * Wrapper of toggleExpert call
+ * Handles clicking on any part of the Donut graph
+ * @param {Object} data Properties of the click and resulting filter
*/
- toExpert = () => {
+ 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 detail (expert) views
+ * Toggle between Simple and Detailed Views.
*/
toggleExpert() {
this.props.actions.toggleExpert();
@@ -143,94 +171,48 @@ class Summary extends React.Component {
this.props.history.push('/detail');
}
}
- /**
- * Disable controls for a site that cannot be scanned by
- * Ghostery or has not yet been scanned.
- * @param {Object} props nextProps
- */
- updateSiteNotScanned(props) {
- const { siteNotScanned, categories } = props;
- const pageUrl = props.pageUrl || '';
- if (siteNotScanned || !categories || pageUrl.search('http') === -1) {
- this.setState({ disableBlocking: true });
- } else {
- this.setState({ disableBlocking: false });
- }
- }
/**
- * Trigger actions which display notifications
- * about slow or non-secure trackers.
- * @param {Object} props nextProps
- */
- updateTrackerCountAlert(props) {
- const { alertCounts } = props;
-
- if (alertCounts.total) {
- // Set notification on Panel View
- if (alertCounts.compatibility) {
- if (BROWSER_INFO.name === 'edge') {
- let text = t('panel_tracker_breaking_page');
- text = text.replace('$1', alertCounts.compatibility);
- text = text.replace('$2', (alertCounts.compatibility === 1) ? t('tracker_signular') : t('tracker_plural'));
- props.actions.showNotification({
- classes: 'hideous',
- filter: 'compatibility',
- text,
- });
- } else {
- props.actions.showNotification({
- classes: 'hideous',
- filter: 'compatibility',
- text: t(
- 'panel_tracker_breaking_page',
- [alertCounts.compatibility,
- (alertCounts.compatibility === 1) ? t('tracker_signular') : t('tracker_plural')],
- ),
- });
- }
- } else if (BROWSER_INFO.name === 'edge') {
- let text = t('panel_tracker_slow_non_secure');
- text = text.replace('$1', alertCounts.total - alertCounts.compatibility);
- text = text.replace('$2', (alertCounts.total - alertCounts.compatibility === 1) ? t('tracker_signular') : t('tracker_plural'));
- props.actions.showNotification({
- classes: 'hideous',
- filter: 'slow',
- text,
- });
+ * 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 {
- props.actions.showNotification({
- classes: 'hideous',
- filter: 'slow',
- text: t(
- 'panel_tracker_slow_non_secure',
- [alertCounts.total - alertCounts.compatibility,
- (alertCounts.total - alertCounts.compatibility === 1) ? t('tracker_signular') : t('tracker_plural')],
- ),
- });
+ this.props.actions.filterTrackers({ type: 'trackers', name: 'blocked' });
}
}
}
+
+
/**
- * Implement handler for clicks on the 'trust' and 'restrict' buttons
- * @param {Object} event click event
- */
- clickSitePolicy(event) {
- const { ghosteryPaused, sitePolicy } = this.props;
- const targetClasses = event.currentTarget.classList || [];
- const type = targetClasses.contains('controls-trust') ? 'whitelist' : 'blacklist';
- let updated_site_policy;
+ * Handles clicking on Ghostery Features: Trust Site, Restrict Site, Custom Settings
+ * @param {String} button The button that was clicked: trust, restrict, custom
+ */
+ clickSitePolicy(button) {
+ const { paused_blocking, sitePolicy } = this.props;
+ let type;
+ let text;
+ let classes;
- if (this.state.disableBlocking || ghosteryPaused) {
+ if (this.state.disableBlocking || paused_blocking) {
return;
}
- if (type === 'whitelist') {
+ if (button === 'trust' || (button === 'custom' && sitePolicy === 2)) {
sendMessage('ping', 'trust_site');
- updated_site_policy = (sitePolicy === 1 || !sitePolicy) ? 2 : false;
- } else {
+ 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)) {
sendMessage('ping', 'restrict_site');
- updated_site_policy = (sitePolicy === 2 || !sitePolicy) ? 1 : false;
+ type = 'blacklist';
+ text = (sitePolicy === 1) ? t('alert_site_restricted_off') : t('alert_site_restricted');
+ classes = (sitePolicy === 1) ? 'warning' : 'alert';
+ } else {
+ return;
}
this.props.actions.updateSitePolicy({
@@ -242,52 +224,33 @@ class Summary extends React.Component {
this.props.actions.showNotification({
updated: type,
reload: true,
+ classes,
+ text,
});
}
/**
- * Implement handler for clicks on the 'pause' button. Trigger appropriate actions.
- */
- clickGhosteryPause(time) {
- const ghosteryPaused = this.props.paused_blocking;
- sendMessage('ping', ghosteryPaused ? 'resume' : 'pause');
- if (typeof time === 'number') {
- sendMessage('ping', 'pause_snooze');
- }
-
- this.props.actions.updateGhosteryPaused({
- ghosteryPaused: (typeof time === 'number' ? true : !ghosteryPaused),
- time: time * 60000,
- });
- this.props.actions.filterTrackers({ type: 'trackers', name: 'all' });
+ * 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.
+ */
+ clickCliqzFeature(options) {
+ const { feature, status, text } = options;
this.props.actions.showNotification({
- updated: 'ghosteryPaused',
+ updated: feature,
reload: true,
+ text,
});
- }
- /**
- * Implement handler for clicking on the blocked tracker count. Trigger a filter action.
- */
- clickTrackersBlocked(event) {
- const { sitePolicy } = this.props;
-
- if (sitePolicy === 1) {
- this.props.actions.filterTrackers({ type: 'trackers', name: 'all' });
- } else {
- this.props.actions.filterTrackers({ type: 'trackers', name: 'blocked' });
- }
- }
- /**
- * Implement handler for clicking on the slow and/or non-secure tracker count. Trigger a filter action.
- */
- clickTrackersAlerts(event) {
- this.props.actions.filterTrackers({ type: 'trackers', name: 'warning' });
+ this.props.actions.toggleCliqzFeature(feature, status);
}
/**
- * Implement handler for clicking 'Map These Trackers' which opens Evidon page.
- */
+ * Handles clicking on Map These Trackers, which opens Evidon page.
+ */
clickMapTheseTrackers() {
+ if (this.state.disableBlocking) { return; }
sendMessage('ping', 'live_scan');
sendMessage('openNewTab', {
url: `https:\/\/www.evidon.com/solutions/trackermap/?url=${this.props.pageUrl}&utm_source=Ghostery&utm_medium=referral&utm_term=&utm_content=&utm_campaign=GhosteryMapTrackers`,
@@ -296,169 +259,150 @@ class Summary extends React.Component {
});
window.close(); // for firefox
}
+
/**
- * Render Summary view.
- * @return {ReactComponent} ReactComponent instance
- */
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the Summary View of the panel
+ */
render() {
- const showBody = (!this.props.is_expanded || !this.props.is_expert);
+ const { abPause } = this.state;
+ const { is_expert, is_expanded } = this.props;
+ const showCondensed = is_expert && is_expanded;
- const getTooltipClass = () => ((!this.props.is_expert && 'top')
- || ((this.props.is_expert && this.props.is_expanded) && 'right'));
+ const summaryClassNames = ClassNames('', {
+ expert: is_expert,
+ condensed: showCondensed,
+ 'ab-pause': abPause,
+ });
- const summaryClassNames = [
- this.props.is_expanded && this.props.is_expert ? 'expanded' : '',
- this.props.is_expert || this.props.is_android ? 'expert' : 'simple',
- this.state.disableBlocking ? 'not-scanned' : '',
- ];
- const loadInfoClasses = ClassNames('columns small-12 medium-4 text-left load-info g-tooltip', {
+ const blockedTrackersClassNames = ClassNames('blocked-trackers', {
+ clickable: is_expert,
+ });
+ const pageLoadClassNames = ClassNames('page-load', {
fast: +this.state.trackerLatencyTotal < 5,
slow: +this.state.trackerLatencyTotal > 10,
});
+ const mapTheseTrackersClassNames = ClassNames('map-these-trackers', {
+ clickable: !this.state.disableBlocking,
+ 'not-clickable': this.state.disableBlocking
+ });
+
return (
-
-
- {(!this.props.is_expanded || !this.props.is_expert) &&
-
-
-
+
+ {abPause && (
+
+
+ )}
+
+ {this.state.disableBlocking && !showCondensed && (
+
+ {this.props.pageHost}
- }
+ )}
-
-
+ {!this.state.disableBlocking && !showCondensed && (
+
+ )}
-
+
+ )}
+ {!this.state.disableBlocking && showCondensed && (
+
{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked || 0}
-
-
+ {!this.state.disableBlocking && (!abPause || !is_expert) && !showCondensed && (
+
+ )}
- { this.state.disableBlocking ?
-
{this.props.pageHost}
-
-
- }
-
-
- {t('summary_blocked')}:
- {this.props.trackerCounts.blocked}
- { !showBody &&
-
-
- { (this.props.alertCounts.total === 1) ? t('summary_alert') : t('summary_alerts') }:
- {this.props.alertCounts.total}
- { !showBody &&
-
-
- { t('page_load') }:
- {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '–'}
- { !showBody &&
-
-
-
-
-
-
+ {!this.state.disableBlocking && (
+
-
-
-
-
-
-
-
-
-
+
);
}
diff --git a/app/panel/components/Tooltip.jsx b/app/panel/components/Tooltip.jsx
index 02f2264ca..1cf8a204a 100644
--- a/app/panel/components/Tooltip.jsx
+++ b/app/panel/components/Tooltip.jsx
@@ -13,8 +13,9 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
+
/**
- * @class Implements tooltip component used throughout the views.
+ * @class Implements a Tooltip component that is used in many panel views.
* @memberof PanelClasses
*/
class Tooltip extends React.Component {
@@ -23,7 +24,13 @@ class Tooltip extends React.Component {
this.state = {
show: false,
};
+
+ // Event Bindings
+ this.delayHover = this.delayHover.bind(this);
+ this.enter = this.enter.bind(this);
+ this.leave = this.leave.bind(this);
}
+
/**
* Lifecycle event. Set listeners.
*/
@@ -34,6 +41,7 @@ class Tooltip extends React.Component {
this.parentNode.addEventListener('mouseleave', this.leave);
this.parentNode.addEventListener('click', this.leave);
}
+
/**
* Lifecycle event. Remove listeners.
*/
@@ -42,30 +50,37 @@ class Tooltip extends React.Component {
this.parentNode.removeEventListener('mouseleave', this.leave);
this.parentNode.removeEventListener('click', this.leave);
}
+
/**
- * Set 1 sec delay for showing the tooltip.
+ * Implements mouseenter. Sets a 1 second delay for showing the tooltip.
*/
- delayHover = (e) => {
+ delayHover() {
this.delay = setTimeout(() => {
this.enter();
}, 1000);
}
+
/**
- * Set tooltip show state.
+ * Sets the state for Show.
*/
- enter = () => {
+ enter() {
this.setState({ show: true });
+ if (this.props.disabled && this.props.showNotification && this.props.alertText) {
+ this.props.showNotification({ text: this.props.alertText, classes: 'warning', filter: 'tooltip' });
+ }
}
+
/**
- * Implement handler for mouseleave event and hide the tooltip.
+ * Implements mouseleave.
*/
- leave = (e) => {
+ leave() {
clearTimeout(this.delay);
this.setState({ show: false });
}
+
/**
- * Render Tooltip component.
- * @return {ReactComponent} ReactComponent instance
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the Tooltip component
*/
render() {
return (
diff --git a/app/panel/components/__tests__/PauseButton.jsx b/app/panel/components/__tests__/PauseButton.jsx
new file mode 100644
index 000000000..b0e78f2cb
--- /dev/null
+++ b/app/panel/components/__tests__/PauseButton.jsx
@@ -0,0 +1,163 @@
+/**
+ * Pause Button Test Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import PauseButton from '../BuildingBlocks/PauseButton';
+
+// Fake the translation function to only return the translation key
+global.t = function (str) {
+ return str;
+};
+
+// Fake the Tooltip implementation
+jest.mock('../Tooltip');
+
+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: () => {},
+ dropdownItems: [
+ { name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
+ { name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
+ { name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
+ ],
+ isCentered: true,
+ isCondensed: false,
+ };
+ const component = renderer.create(
+ {t('trackers_blocked')}
+
+ {this.props.trackerCounts.blocked || 0}
+
-
-
+ )}
+
+ {this.state.disableBlocking && is_expert && showCondensed && (
+
+ )}
+
+
-
+
-
-
-
-
-
-
-
-
-
-
+ {t('page_load')}
+
+ {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'}
+
- {(this.props.is_expert && !this.props.is_expanded) &&
- { t('summary_map_these_trackers') }
- }
+
+
+
+
+
+ {is_expert && !showCondensed && (
+
+ { t('summary_map_these_trackers') }
+
+ )}
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with react-test-renderer paused state in detailed view 1`] = `
+
+
+
+
+
+
+
+
+ summary_show_menu
+
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/PauseButton.jsx Snapshot tests with react-test-renderer unpaused state in simple view 1`] = `
+
+
+
+
+
+ summary_resume_ghostery
+
+
+
+
+ summary_show_menu
+
+
+
+
+`;
diff --git a/app/panel/constants/constants.js b/app/panel/constants/constants.js
index 4ac0dcd96..530eebfc7 100644
--- a/app/panel/constants/constants.js
+++ b/app/panel/constants/constants.js
@@ -14,6 +14,7 @@
// panel
export const GET_PANEL_DATA = 'GET_PANEL_DATA';
export const SHOW_NOTIFICATION = 'SHOW_NOTIFICATION';
+export const TOGGLE_CLIQZ_FEATURE = 'TOGGLE_CLIQZ_FEATURE';
export const CLOSE_NOTIFICATION = 'CLOSE_NOTIFICATION';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILED = 'LOGIN_FAILED';
@@ -63,8 +64,3 @@ export const SETTINGS_TOGGLE_EXPAND_ALL = 'SETTINGS_TOGGLE_EXPAND_ALL';
export const SETTINGS_TOGGLE_EXPAND_CATEGORY = 'SETTINGS_TOGGLE_EXPAND_CATEGORY';
export const SETTINGS_UPDATE_SEARCH_VALUE = 'SETTINGS_UPDATE_SEARCH_VALUE';
export const SETTINGS_FILTER = 'SETTINGS_FILTER';
-
-// drawer
-export const GET_CLIQZ_MODULE_DATA = 'GET_CLIQZ_MODULE_DATA';
-export const CLOSE_DRAWER = 'CLOSE_DRAWER';
-export const OPEN_DRAWER = 'OPEN_DRAWER';
diff --git a/app/panel/containers/BlockingContainer.js b/app/panel/containers/BlockingContainer.js
index 58c809157..0af7a577c 100644
--- a/app/panel/containers/BlockingContainer.js
+++ b/app/panel/containers/BlockingContainer.js
@@ -27,6 +27,7 @@ import { showNotification } from '../actions/PanelActions';
* 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, ownProps) => Object.assign({}, state.blocking, {
+ is_expanded: state.panel.is_expanded,
language: state.panel.language,
pageHost: state.summary.pageHost,
paused_blocking: state.summary.paused_blocking,
diff --git a/app/panel/containers/DrawerContainer.js b/app/panel/containers/DrawerContainer.js
deleted file mode 100644
index 1efac8c12..000000000
--- a/app/panel/containers/DrawerContainer.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Drawer Container
- *
- * Ghostery Browser Extension
- * https://www.ghostery.com/
- *
- * Copyright 2018 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 { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import Drawer from '../components/Drawer';
-import * as drawerActions from '../actions/DrawerActions';
-import { showNotification } from '../actions/PanelActions';
-/**
- * Map redux store state properties to Drawer component own properties.
- * @memberOf PanelContainers
- * @param {Object} state entire Redux store's state
- * @param {Object} ownProps props passed to the connected component
- * @return {function} this function returns plain object, which will be merged into Drawer component props
- * @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, ownProps) => Object.assign({}, state.drawer);
-/**
- * Bind Drawer component action creators using Redux's bindActionCreators
- * @memberOf PanelContainers
- * @param {function} dispatch redux store method which dispatches actions
- * @param {Object} ownProps Drawer component own props
- * @return {function} to be used as an argument in redux connect call
- */
-const mapDispatchToProps = (dispatch, ownProps) => ({
- actions: bindActionCreators(Object.assign(drawerActions, { showNotification }), dispatch),
-});
-/**
- * Connects Drawer component to the Redux store.
- * @memberOf PanelContainers
- * @param {function} mapStateToProps maps redux store state properties to Drawer component own properties
- * @param {function} mapDispatchToProps binds Drawer component action creators
- * @return {Object} A higher-order React component class that passes state and action
- * creators into Drawer component. Used by React framework.
- */
-export default connect(mapStateToProps, mapDispatchToProps)(Drawer);
diff --git a/app/panel/containers/PanelContainer.js b/app/panel/containers/PanelContainer.js
index 2bfff2956..30d32e1ed 100644
--- a/app/panel/containers/PanelContainer.js
+++ b/app/panel/containers/PanelContainer.js
@@ -39,7 +39,7 @@ const mapStateToProps = (state, ownProps) => Object.assign({}, state.panel, stat
* @return {function} to be used as an argument in redux connect call
*/
const mapDispatchToProps = (dispatch, ownProps) => ({
- actions: bindActionCreators(Object.assign(panelActions, { filterTrackers }), dispatch),
+ actions: bindActionCreators(Object.assign({}, panelActions, { filterTrackers }), dispatch),
});
/**
* Connects Panel component to the Redux store. Pass updated match, location, and history props to the wrapped component.
diff --git a/app/panel/containers/SummaryContainer.js b/app/panel/containers/SummaryContainer.js
index e48b29cff..d128280c6 100644
--- a/app/panel/containers/SummaryContainer.js
+++ b/app/panel/containers/SummaryContainer.js
@@ -16,7 +16,6 @@ import { bindActionCreators } from 'redux';
import Summary from '../components/Summary';
import * as summaryActions from '../actions/SummaryActions';
import * as panelActions from '../actions/PanelActions';
-import * as drawerActions from '../actions/DrawerActions';
/**
* Map redux store state properties to Summary view component own properties.
* @memberOf PanelContainers
@@ -26,7 +25,7 @@ import * as drawerActions from '../actions/DrawerActions';
* @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, ownProps) => Object.assign({}, state.summary, state.panel, state.drawer, {
+const mapStateToProps = (state, ownProps) => Object.assign({}, state.summary, state.panel, {
is_expanded: state.panel.is_expanded,
is_expert: state.panel.is_expert,
tab_id: state.panel.tab_id,
@@ -39,7 +38,7 @@ const mapStateToProps = (state, ownProps) => Object.assign({}, state.summary, st
* @return {function} to be used as an argument in redux connect call
*/
const mapDispatchToProps = (dispatch, ownProps) => ({
- actions: bindActionCreators(Object.assign(summaryActions, panelActions, drawerActions), dispatch),
+ actions: bindActionCreators(Object.assign(summaryActions, panelActions), dispatch),
});
/**
* Connects Summary view component to the Redux store. Pass updated match, location, and history props to the wrapped component.
diff --git a/app/panel/reducers/__tests__/summary.js b/app/panel/reducers/__tests__/summary.js
new file mode 100644
index 000000000..c198fa0a1
--- /dev/null
+++ b/app/panel/reducers/__tests__/summary.js
@@ -0,0 +1,102 @@
+/**
+ * Test file for the Summary Reducer
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 Immutable from 'seamless-immutable';
+import summaryReducer from '../summary';
+import {
+ GET_SUMMARY_DATA,
+ UPDATE_TRACKER_COUNTS,
+ UPDATE_GHOSTERY_PAUSED,
+ UPDATE_SITE_POLICY
+} from '../../constants/constants';
+
+// Copied from app/panel/reducers/summary.js
+const initialState = Immutable({
+ alertCounts: {
+ total: 0,
+ },
+ pageHost: '',
+ pageUrl: '',
+ paused_blocking: false,
+ siteNotScanned: false,
+ trackerCounts: {
+ allowed: 0,
+ blocked: 0,
+ },
+ tab_id: 0,
+});
+
+describe('app/panel/reducers/summary.js', () => {
+ test('initial state is correct', () => {
+ expect(summaryReducer(undefined, {})).toEqual(initialState);
+ });
+
+ test('reducer correctly handles GET_SUMMARY_DATA', () => {
+ const data = { test: true };
+ const action = { data, type: GET_SUMMARY_DATA };
+ const initState = Immutable({});
+
+ expect(summaryReducer(initState, action)).toEqual(data);
+ });
+
+ test('reducer correctly handles UPDATE_GHOSTERY_PAUSED', () => {
+ const data = { time: null, ghosteryPaused: true };
+ const action = { data, type: UPDATE_GHOSTERY_PAUSED };
+
+ const updatedState = Immutable.merge(initialState, {
+ paused_blocking: data.ghosteryPaused,
+ paused_blocking_timeout: data.time
+ });
+
+ expect(summaryReducer(undefined, action)).toEqual(updatedState);
+ });
+
+ test('reducer correctly handles UPDATE_SITE_POLICY', () => {
+ const data = { type: 'blacklist' };
+ const action = { data, type: UPDATE_SITE_POLICY };
+
+ const initState = Immutable({
+ pageHost: 'www.cnn.com',
+ sitePolicy: 2,
+ site_blacklist: [],
+ site_whitelist: ['cnn.com']
+ });
+
+ expect(summaryReducer(initState, action)).toEqual({
+ pageHost: 'www.cnn.com',
+ sitePolicy: 1,
+ site_blacklist: ['cnn.com'],
+ site_whitelist: []
+ });
+ });
+
+ test('reducer correctly handles UPDATE_TRACKER_COUNTS', () => {
+ const data = {
+ num_blocked: 3,
+ num_total: 8,
+ num_ss_blocked: 1,
+ num_ss_allowed: 2
+ };
+ const action = { data, type: UPDATE_TRACKER_COUNTS };
+ const initState = Immutable({});
+
+ expect(summaryReducer(initState, action)).toEqual({
+ trackerCounts: {
+ blocked: 3,
+ allowed: 5,
+ ssBlocked: 1,
+ ssAllowed: 2
+ }
+ });
+ });
+});
diff --git a/app/panel/reducers/blocking.js b/app/panel/reducers/blocking.js
index ce691ed99..d1ec55feb 100644
--- a/app/panel/reducers/blocking.js
+++ b/app/panel/reducers/blocking.js
@@ -12,7 +12,8 @@
*/
/* eslint no-use-before-define: 0 */
-import { GET_BLOCKING_DATA,
+import {
+ GET_BLOCKING_DATA,
FILTER_TRACKERS,
UPDATE_BLOCK_ALL_TRACKERS,
UPDATE_CATEGORIES,
@@ -20,7 +21,8 @@ import { GET_BLOCKING_DATA,
UPDATE_TRACKER_BLOCKED,
UPDATE_TRACKER_TRUST_RESTRICT,
TOGGLE_EXPAND_ALL,
- TOGGLE_EXPAND_CATEGORY } from '../constants/constants';
+ TOGGLE_EXPAND_CATEGORY
+} from '../constants/constants';
import { updateTrackerBlocked, updateCategoryBlocked, updateBlockAllTrackers, toggleExpandAll, toggleExpandCategory } from '../utils/blocking';
import { removeFromObject, updateObject } from '../utils/utils';
import { sendMessage } from '../utils/msg';
diff --git a/app/panel/reducers/drawer.js b/app/panel/reducers/drawer.js
deleted file mode 100644
index 88c371668..000000000
--- a/app/panel/reducers/drawer.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Drawer Reducer
- *
- * Ghostery Browser Extension
- * https://www.ghostery.com/
- *
- * Copyright 2018 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 { GET_CLIQZ_MODULE_DATA,
- OPEN_DRAWER,
- CLOSE_DRAWER } from '../constants/constants';
-
-const initialState = {
- activeDrawerType: null,
- adBlock: {},
- antiTracking: {},
- drawerIsOpen: false,
-};
-/**
- * Default export for drawer component reducer.
- * @memberOf PanelReactReducers
- *
- * @param {Object} state current state
- * @param {Object} action action which provides data
- * @return {Object} updated state clone
- */
-export default (state = initialState, action) => {
- switch (action.type) {
- case GET_CLIQZ_MODULE_DATA: {
- return Object.assign({}, state, { adBlock: action.data.adblock, antiTracking: action.data.antitracking });
- }
- case OPEN_DRAWER: {
- return Object.assign({}, state, {
- drawerIsOpen: true,
- activeDrawerType: action.data,
- });
- }
- case CLOSE_DRAWER: {
- return Object.assign({}, state, { drawerIsOpen: false });
- }
- default: return state;
- }
-};
diff --git a/app/panel/reducers/index.js b/app/panel/reducers/index.js
index a32f293ac..1313ce387 100644
--- a/app/panel/reducers/index.js
+++ b/app/panel/reducers/index.js
@@ -22,7 +22,6 @@ import login from './login';
import createAccount from './createAccount';
import settings from './settings';
import forgotPassword from './forgotPassword';
-import drawer from './drawer';
/**
* Export combined reducers object which provides
* the full list of reducers. To be imported by React.
@@ -40,7 +39,6 @@ const Reducers = combineReducers({
createAccount,
settings,
forgotPassword,
- drawer,
});
export default Reducers;
diff --git a/app/panel/reducers/panel.js b/app/panel/reducers/panel.js
index d896a51b0..ce80ae40c 100644
--- a/app/panel/reducers/panel.js
+++ b/app/panel/reducers/panel.js
@@ -13,7 +13,8 @@
/* eslint no-use-before-define: 0 */
-import { GET_PANEL_DATA,
+import {
+ GET_PANEL_DATA,
SHOW_NOTIFICATION,
CLOSE_NOTIFICATION,
LOGIN_SUCCESS,
@@ -21,8 +22,9 @@ import { GET_PANEL_DATA,
CREATE_ACCOUNT_SUCCESS,
TOGGLE_EXPANDED,
TOGGLE_EXPERT,
- TOGGLE_DRAWER_SETTING,
- UPDATE_NOTIFICATION_STATUS } from '../constants/constants';
+ TOGGLE_CLIQZ_FEATURE,
+ UPDATE_NOTIFICATION_STATUS
+} from '../constants/constants';
import { sendMessage } from '../utils/msg';
const initialState = {
@@ -71,7 +73,6 @@ export default (state = initialState, action) => {
return Object.assign({}, state, updated);
}
case CREATE_ACCOUNT_SUCCESS:
- sendMessage('ping', 'create_account_extension');
return Object.assign({}, state, {
logged_in: true,
email: action.data.ClaimEmailAddress,
@@ -93,9 +94,9 @@ export default (state = initialState, action) => {
decoded_user_token: action.data.decoded_user_token,
});
}
- case TOGGLE_DRAWER_SETTING: {
+ case TOGGLE_CLIQZ_FEATURE: {
let pingName = '';
- switch (action.data.settingName) {
+ switch (action.data.featureName) {
case 'enable_anti_tracking':
pingName = action.data.isEnabled ? 'antitrack_off' : 'antitrack_on';
break;
@@ -108,11 +109,11 @@ export default (state = initialState, action) => {
default:
break;
}
+ sendMessage('setPanelData', { [action.data.featureName]: !action.data.isEnabled });
if (pingName) {
sendMessage('ping', pingName);
}
- sendMessage('setPanelData', { [action.data.settingName]: !action.data.isEnabled });
- return Object.assign({}, state, { [action.data.settingName]: !action.data.isEnabled });
+ return Object.assign({}, state, { [action.data.featureName]: !action.data.isEnabled });
}
case TOGGLE_EXPANDED: {
sendMessage('setPanelData', { is_expanded: !state.is_expanded });
@@ -185,13 +186,13 @@ const _showNotification = (state, action) => {
sendMessage('setPanelData', { needsReload: updated_needsReload });
// if we have changes and the user wants to see banners, then show
- if (Object.keys(updated_needsReload.changes).length > 0 && reloadBannerStatus.show && nowTime > reloadBannerStatus.show_time) {
+ if ((msg.text || Object.keys(updated_needsReload.changes).length > 0) && reloadBannerStatus.show && nowTime > reloadBannerStatus.show_time) {
updated_notificationShown = true;
} else {
updated_notificationShown = false;
}
- updated_notificationClasses = 'warning';
+ updated_notificationClasses = msg.classes || 'warning';
} else {
// Notification banners (success/warnings)
if (trackersBannerStatus.show && nowTime > trackersBannerStatus.show_time) {
@@ -201,8 +202,10 @@ const _showNotification = (state, action) => {
}
updated_notificationClasses = msg.classes;
+ if (msg.filter === 'tooltip') {
+ updated_needsReload.changes = {};
+ }
}
-
return {
needsReload: updated_needsReload,
notificationClasses: updated_notificationClasses,
diff --git a/app/panel/reducers/settings.js b/app/panel/reducers/settings.js
index 8f8021188..6549dcb2d 100644
--- a/app/panel/reducers/settings.js
+++ b/app/panel/reducers/settings.js
@@ -14,7 +14,8 @@
/* eslint no-use-before-define: 0 */
import moment from 'moment/min/moment-with-locales.min';
-import { GET_SETTINGS_DATA,
+import {
+ GET_SETTINGS_DATA,
IMPORT_SETTINGS_DIALOG,
IMPORT_SETTINGS_NATIVE,
IMPORT_SETTINGS_FAILED,
@@ -28,7 +29,8 @@ import { GET_SETTINGS_DATA,
SETTINGS_TOGGLE_EXPAND_ALL,
SETTINGS_TOGGLE_EXPAND_CATEGORY,
SETTINGS_UPDATE_SEARCH_VALUE,
- SETTINGS_FILTER } from '../constants/constants';
+ SETTINGS_FILTER
+} from '../constants/constants';
import { updateTrackerBlocked, updateCategoryBlocked, updateBlockAllTrackers, toggleExpandAll, toggleExpandCategory } from '../utils/blocking';
import { removeFromObject, updateObject } from '../utils/utils';
import { sendMessage } from '../utils/msg';
diff --git a/app/panel/reducers/summary.js b/app/panel/reducers/summary.js
index 0b6bc92cc..91779e6d5 100644
--- a/app/panel/reducers/summary.js
+++ b/app/panel/reducers/summary.js
@@ -13,10 +13,12 @@
/* eslint no-use-before-define: 0 */
-import { GET_SUMMARY_DATA,
+import {
+ GET_SUMMARY_DATA,
UPDATE_GHOSTERY_PAUSED,
UPDATE_SITE_POLICY,
- UPDATE_TRACKER_COUNTS } from '../constants/constants';
+ UPDATE_TRACKER_COUNTS
+} from '../constants/constants';
import { addToArray, removeFromArray } from '../utils/utils';
import { sendMessage } from '../utils/msg';
diff --git a/app/scss/panel.scss b/app/scss/panel.scss
index fe6153ac0..24d52d40d 100644
--- a/app/scss/panel.scss
+++ b/app/scss/panel.scss
@@ -8,7 +8,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
@@ -26,6 +26,11 @@ html body {
}
*:focus {outline: none;}
+// Function helper with color variables
+@function url-friendly-colour($colour) {
+ @return '%23' + str-slice('#{$colour}', 2, -1)
+}
+
// Foundation Helpers
.collapse-left {padding-left: 0;}
.collapse-right {padding-right: 0;}
@@ -41,6 +46,7 @@ html body {
}
// Partial View SASS files
+@import './partials/_svgs';
@import './partials/_header';
@import './partials/_callout';
@import './partials/_summary';
@@ -50,6 +56,9 @@ html body {
@import './partials/_help';
@import './partials/_account';
@import './partials/_drawer';
-@import './partials/_select_button';
+@import './partials/_pause_button';
+@import './partials/_donut_graph';
+@import './partials/_ghostery_features';
+@import './partials/_cliqz_features';
@import './partials/_tooltip';
@import './partials/_not_scanned';
diff --git a/app/scss/partials/_blocking.scss b/app/scss/partials/_blocking.scss
index f478c413c..6180a5480 100644
--- a/app/scss/partials/_blocking.scss
+++ b/app/scss/partials/_blocking.scss
@@ -5,7 +5,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
@@ -75,7 +75,7 @@
}
&.smart-blocked .warning-image,
&.smart-unblocked .warning-image {
- background-image: buildSmartBlockIcon($button-purple);
+ background-image: buildIconSmartBlockingNoCircle(#1dafed);
}
}
}
@@ -294,58 +294,6 @@
}
}
-.expertTab {
- @extend %pointer;
- position: absolute;
- top: 200px;
- left: -26px;
- width: 25px;
- height: 50px;
- .dash {
- height: 20px;
- width: 3px;
- border-radius: 2px;
- background-color: #D1D9DC;
- margin-right: 7px;
- }
- .reverse-dash {
- @extend .dash;
- margin-right: -12px !important;
- }
- .moon {
- display: none;
- position: inherit;
- }
- .reverse-moon {
- @extend .moon;
- right: -26px !important;
- }
- &:hover {
- .dash .reverse-dash {
- display: none;
- }
- .moon {
- display: block;
- &:after {
- content: url('../../app/images/panel/left-left-moon.svg');
- }
- }
- .reverse-moon {
- display: block;
- &:after {
- content: url('../../app/images/panel/right-right-moon.svg') !important;
- }
- }
- }
- &.expanded {
- &:hover {
- .moon:after {
- content: url('../../app/images/panel/left-right-moon.svg');
- }
- }
- }
-}
-
@import './partials/_blocking_category';
@import './partials/_blocking_tracker';
@import './partials/_blocking_header';
diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss
index 284e40085..b48aeba93 100644
--- a/app/scss/partials/_blocking_tracker.scss
+++ b/app/scss/partials/_blocking_tracker.scss
@@ -5,7 +5,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
@@ -35,10 +35,10 @@
}
.warning-image {
display: block;
- width: 18px;
- height: 18px;
- margin-right: 5px;
- background-size: auto 18px;
+ width: 32px;
+ height: 25px;
+ margin-right: -12px;
+ background-size: auto 25px;
background-repeat: no-repeat;
}
}
diff --git a/app/scss/partials/_cliqz_features.scss b/app/scss/partials/_cliqz_features.scss
new file mode 100644
index 000000000..5c8350567
--- /dev/null
+++ b/app/scss/partials/_cliqz_features.scss
@@ -0,0 +1,122 @@
+/**
+ * Cliqz Features Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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.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;
+ }
+ .icon {
+ width: 40px;
+ height: 40px;
+ background-size: 30px 30px;
+ }
+ }
+
+ .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 {
+ color: #1dafed;
+ background: none;
+ }
+ &.inactive .count {
+ color: rgba(#dedede, 0);
+ background-image: buildIconDash(#dedede);
+ }
+ &.inactive .active .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); }
+
+ .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); }
+
+ .feature-name {
+ color: #c8c7c2;
+ 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;
+ }
+ .active .feature-name { color: #1dafed; }
+ &.inactive .feature-name { color: #dedede; }
+ &.inactive .active .feature-name { color: #a4d4f2; }
+ &.smaller .feature-name { display: none; }
+
+ .cliqz-feature.clickable:hover {
+ .count { background-image: buildIconDash(#a4a4a4); }
+ &.anti-tracking .icon { background-image: buildIconAntiTracking(#a4a4a4); }
+ &.ad-blocking .icon { background-image: buildIconAdBlocking(#a4a4a4); }
+ &.smart-blocking .icon { background-image: buildIconSmartBlocking(#a4a4a4); }
+ .feature-name { color: #a4a4a4; }
+ }
+ .cliqz-feature.active.clickable:hover {
+ .count {
+ color: #0093bd;
+ background: none;
+ }
+ &.anti-tracking .icon { background-image: buildIconAntiTracking(#0093bd); }
+ &.ad-blocking .icon { background-image: buildIconAdBlocking(#0093bd); }
+ &.smart-blocking .icon { background-image: buildIconSmartBlocking(#0093bd); }
+ .feature-name { color: #0093bd; }
+ }
+}
diff --git a/app/scss/partials/_colors.scss b/app/scss/partials/_colors.scss
index c9981bdd0..e81faafbf 100644
--- a/app/scss/partials/_colors.scss
+++ b/app/scss/partials/_colors.scss
@@ -8,7 +8,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
@@ -56,9 +56,3 @@ $transparent-green: rgba($apple, 0.08);
$transparent-red: rgba($red, 0.08);
/* ADD PROJECT COLORS HERE */
-
-$button-grey: 979797;
-$button-dark-grey: 4A4A4A;
-$button-purple: 930194;
-$button-white: ffffff;
-$button-purple-f: unquote("##{$button-purple}");
diff --git a/app/scss/partials/_detail.scss b/app/scss/partials/_detail.scss
index 995d08eb4..721799448 100644
--- a/app/scss/partials/_detail.scss
+++ b/app/scss/partials/_detail.scss
@@ -5,7 +5,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
@@ -63,13 +63,34 @@
}
#content-detail {
- @include expanding-panel(70px);
+ @include expanding-panel(66px);
}
#settings-global-blocking {
@include expanding-panel(2px);
}
+.condensed-toggle {
+ position: absolute;
+ height: 50px;
+ width: 25px;
+ top: 198px;
+ z-index: 2;
+ cursor: pointer;
+ background-position: 7px center;
+ background-size: 3px 20px;
+ background-repeat: no-repeat;
+ background-image: url('../../app/images/panel/line-empty-moon.svg');
+ &:hover {
+ background-size: 25px 50px;
+ background-position: center;
+ background-image: url('../../app/images/panel/right-left-moon.svg');
+ }
+ &.condensed:hover {
+ background-image: url('../../app/images/panel/right-right-moon.svg');
+ }
+}
+
.coming-soon {
background-color: #fff;
.detail-header {
diff --git a/app/scss/partials/_donut_graph.scss b/app/scss/partials/_donut_graph.scss
new file mode 100644
index 000000000..af2d8d9fa
--- /dev/null
+++ b/app/scss/partials/_donut_graph.scss
@@ -0,0 +1,66 @@
+/**
+ * Donut Graph Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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.donut-graph {
+ .show-on-big { display: none; }
+ &.big .show-on-big { display: block; }
+
+ .graph-text {
+ text-transform: capitalize;
+ text-align: center;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 500;
+ color: #4a4a4a;
+ }
+ &.big .graph-text {
+ margin-top: -125px;
+ padding-top: 22px;
+ height: 120px;
+ }
+ &.small .graph-text {
+ margin-top: -99px;
+ padding-top: 18px;
+ height: 94px;
+ }
+ .graph-text-count {
+ font-size: 30px;
+ line-height: 41px;
+ font-weight: 700;
+ }
+ &.small .graph-text-count {
+ font-size: 28px;
+ line-height: 35px;
+ }
+
+ .tooltip-container {
+ position: relative;
+ height: 0;
+ width: 0;
+ .tooltip {
+ white-space: nowrap;
+ pointer-events: none;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity .2s ease-in;
+ }
+ .tooltip.show {
+ visibility: visible;
+ opacity: 1;
+ }
+ .tooltip::before {
+ left: 50%;
+ margin-left: -8px;
+ }
+ }
+}
diff --git a/app/scss/partials/_ghostery_features.scss b/app/scss/partials/_ghostery_features.scss
new file mode 100644
index 000000000..954152bf6
--- /dev/null
+++ b/app/scss/partials/_ghostery_features.scss
@@ -0,0 +1,160 @@
+/**
+ * Ghostery Features Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 {
+ 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;
+ 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;
+ }
+}
diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss
index 8af95ceb5..c40978638 100644
--- a/app/scss/partials/_header.scss
+++ b/app/scss/partials/_header.scss
@@ -5,13 +5,37 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
*/
#ghostery-header {
+ .header-tab-group {
+ position: absolute;
+ height: 36px;
+ width: 280px;
+ left: calc(50% - 140px);
+ }
+ .header-tab {
+ cursor: pointer;
+ height: 20px;
+ width: 140px;
+ text-align: center;
+ color: $white;
+ background-color: #2092bf;
+ }
+ .header-tab.active {
+ color: #4a4a4a;
+ background-color: $white;
+ }
+ .header-tab-text {
+ text-align: center;
+ width: 100%;
+ font-size: 10px;
+ }
+
.top-bar {
background-color: $ghosty-blue;
color: $white;
diff --git a/app/scss/partials/_not_scanned.scss b/app/scss/partials/_not_scanned.scss
index c478414c1..425dcd5cf 100644
--- a/app/scss/partials/_not_scanned.scss
+++ b/app/scss/partials/_not_scanned.scss
@@ -1,73 +1,42 @@
/**
- * Panel Not Scanned Sass
+ * Not Scanned Sass
*
* Ghostery Browser Extension
* https://www.ghostery.com/
*
* Copyright 2018 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
*/
-#panel {
- .not-scanned-wrapper {
- .title {
- font-size: 18px;
- color: #4a90e2;
- }
- .text {
- font-size: 12px;
- color: #4a4a4a;
- max-width: 270px;
- margin: 0 auto;
- }
+.sub-component.not-scanned {
+ text-align: center;
+ margin: 0 auto;
+ overflow: hidden;
+
+ height: 247px;
+ max-width: 300px;
+ padding-top: 57px;
+ &.small {
+ height: 200px;
+ max-width: 160px;
+ padding-top: 30px;
+ }
+
+ .not-scanned-header {
+ font-size: 18px;
+ color: #1dafed;
+ margin-bottom: 10px;
}
- #content-summary {
- .not-scanned-wrapper {
- .title {
- padding-top: 90px;
- padding-bottom: 45px;
- }
- .text {
- margin: 0 auto;
- }
- }
- &.expert {
- .not-scanned-wrapper {
- .title {
- padding-top: 36px;
- padding-bottom: 37px;
- }
- .text {
- padding: 0 40px;
- }
- }
- }
- &.expanded.expert {
- .not-scanned-wrapper {
- display: none;
- }
- }
+ .not-scanned-text {
+ color: #4a4a4a;
+ font-size: 14px;
+ margin-bottom: 10px;
}
- #content-detail {
- #content-blocking {
- .not-scanned-wrapper {
- .title {
- padding-top: 92px;
- }
- .text {
- padding-top: 44px;
- }
- }
- }
- &:not(.expanded) {
- #content-blocking {
- .not-scanned-wrapper {
- display: none;
- }
- }
- }
+ &.small .not-scanned-text {
+ font-size: 12px;
+ margin-bottom: 20px;
}
}
diff --git a/app/scss/partials/_pause_button.scss b/app/scss/partials/_pause_button.scss
new file mode 100644
index 000000000..91ec1c37d
--- /dev/null
+++ b/app/scss/partials/_pause_button.scss
@@ -0,0 +1,201 @@
+/**
+ * Pause Button Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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.pause-button {
+ .button {
+ color: #4a4a4a;
+ border-color: #cccccc;
+ background-color: #ffffff;
+ margin-bottom: 0;
+
+ transition: background-image 0.25s ease-out,
+ background-color 0.25s ease-out,
+ border-color 0.25s ease-out,
+ color 0.25s ease-out;
+ }
+ .button.active {
+ color: #ffffff;
+ border-color: #1dafed;
+ background-color: #1dafed;
+ box-shadow: inset 0px 1px 7px 2px rgba(#1dafed, 0);
+ & + .button.active {
+ border-left-color: #efefea;
+ }
+ }
+ .button:hover { background-color: #efefef; }
+ .button.active:hover {
+ border-color: #0093bd;
+ background-color: #0093bd;
+ }
+
+ .button-pause {
+ min-width: 125px;
+ max-width: 125px;
+ line-height: 17px;
+ .pause-button-text {
+ overflow-x: hidden;
+ text-overflow: clip;
+ font-size: 11px;
+ }
+ .pause-button-icon {
+ padding: 0 10px 0 30px;
+ background-repeat: no-repeat;
+ background-position: 0 center;
+ background-size: 14px 16px;
+ background-image: buildIconPause(#4a4a4a);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ }
+ &.active .pause-button-icon {
+ background-image: buildIconPlay(#ffffff);
+ }
+ &.smaller {
+ min-width: 100px;
+ max-width: 150px;
+ }
+ &.smallest {
+ min-width: 41px;
+ max-width: 41px;
+ padding-left: 17px;
+ .pause-button-icon {
+ padding: 0 0 0 15px;
+ }
+ }
+ }
+ .button-caret {
+ width: 25px;
+ padding-top: 21px;
+ padding-right: 0;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 9px 5px;
+ background-image: buildIconCaretDown(#4a4a4a);
+ &.active {
+ background-image: buildIconCaretDown(#ffffff);
+ }
+ }
+
+ .button-left {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right: 0;
+ &.dropdown-open {
+ border-bottom-left-radius: 0;
+ }
+ }
+ .button-right {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ &.dropdown-open {
+ border-bottom-right-radius: 0;
+ }
+ }
+
+ .dropdown-container {
+ position: relative;
+ width: 0;
+ height: 0;
+ top: 0;
+
+ .dropdown {
+ text-align: center;
+ background-color: #ffffff;
+ border: 1px solid #cccccc;
+ border-top: 0;
+ margin: 0 auto;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
+ .dropdown-item {
+ padding: 12px 0;
+ background-color: #ffffff;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ }
+ .dropdown-item:hover {
+ background-color: #ebebeb;
+ }
+ .dropdown-item.selected {
+ background-color: #ebebeb;
+ .dropdown-clickable {
+ padding: 0 0 0 10px;
+ background-repeat: no-repeat;
+ background-position: 0 center;
+ background-size: 4px 4px;
+ background-image: buildIconCircle(#4a4a4a);
+ }
+ }
+ }
+
+ .no-border-radius {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ 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;
+ line-height: 26px;
+ }
+ .button-caret.smaller {
+ height: 45px;
+ }
+ .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;
+ 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;
+ border-bottom-right-radius: 3px;
+ &.dropdown-open {
+ border-bottom-right-radius: 0;
+ }
+ }
+ .dropdown {
+ position: absolute;
+ z-index: 1;
+ }
+ .dropdown-container.centered .dropdown-item {
+ padding: 9px 0;
+ }
+}
diff --git a/app/scss/partials/_placeholders.scss b/app/scss/partials/_placeholders.scss
index 688ca67d9..d914669d2 100644
--- a/app/scss/partials/_placeholders.scss
+++ b/app/scss/partials/_placeholders.scss
@@ -8,7 +8,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
diff --git a/app/scss/partials/_select_button.scss b/app/scss/partials/_select_button.scss
index 655aa3235..f6bab77f7 100644
--- a/app/scss/partials/_select_button.scss
+++ b/app/scss/partials/_select_button.scss
@@ -13,6 +13,57 @@
$grey: #ccc;
$dark-grey: #4a4a4a;
+$menu-height: 102px;
+
+$menuItemDot: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%224px%22%20height%3D%224px%22%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EOval%209%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---Trust/Restric/Pause%22%20transform%3D%22translate%28-813.000000%2C%20-2171.000000%29%22%20fill%3D%22%234A4A4A%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval-9%22%20cx%3D%22815%22%20cy%3D%222173%22%20r%3D%222%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
+
+%select-menu-base {
+ overflow-y: auto;
+ height: $menu-height;
+ position: absolute;
+ top: -$menu-height;
+ left: 0;
+ right: 0;
+ border: 1px solid $grey;
+ width: 100%;
+ border-bottom: 0px;
+ box-shadow: inset 2px 2px 2px -2px $grey, inset 2px 2px 2px -2px $grey, inset -2px 2px 2px -1px $grey;
+ background-color: #fff;
+ ul {
+ list-style-type: none;
+ margin: 0px;
+ text-align: center;
+ li {
+ cursor: pointer;
+ &.selected {
+ background-color: #A6A6A6;
+ .bullet {
+ background-image: $menuItemDot;
+ }
+ }
+ .item-wrapper {
+ line-height: 33px;
+ position: relative;
+ height: 33px;
+ display: inline-block;
+ }
+ .bullet {
+ position: absolute;
+ top: 14px;
+ left: -12px;
+ height: 4px;
+ width: 4px;
+ background-repeat: no-repeat;
+ }
+ &:not(.selected):hover {
+ background-color: #ebebeb;
+ .bullet {
+ background-image: $menuItemDot;
+ }
+ }
+ }
+ }
+}
#panel {
#content-summary {
@@ -45,54 +96,8 @@ $dark-grey: #4a4a4a;
}
}
- $menuItemDot: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%224px%22%20height%3D%224px%22%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EOval%209%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---Trust/Restric/Pause%22%20transform%3D%22translate%28-813.000000%2C%20-2171.000000%29%22%20fill%3D%22%234A4A4A%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval-9%22%20cx%3D%22815%22%20cy%3D%222173%22%20r%3D%222%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
-
.select-menu {
- overflow-y: auto;
- height: 100px;
- position: absolute;
- top: -100px;
- left: 0;
- right: 0;
- border: 1px solid $grey;
- width: 100%;
- border-bottom: 0px;
- box-shadow: inset 2px 2px 2px -2px $grey, inset 2px 2px 2px -2px $grey, inset -2px 2px 2px -1px $grey;
- background-color: #fff;
- ul {
- list-style-type: none;
- margin: 0px;
- text-align: center;
- li {
- cursor: pointer;
- &.selected {
- background-color: #A6A6A6;
- .bullet {
- background-image: $menuItemDot;
- }
- }
- .item-wrapper {
- line-height: 33px;
- position: relative;
- height: 33px;
- display: inline-block;
- }
- .bullet {
- position: absolute;
- top: 14px;
- left: -12px;
- height: 4px;
- width: 4px;
- background-repeat: no-repeat;
- }
- &:not(.selected):hover {
- background-color: #ebebeb;
- .bullet {
- background-image: $menuItemDot;
- }
- }
- }
- }
+ @extend %select-menu-base;
}
}
}
@@ -114,6 +119,13 @@ $dark-grey: #4a4a4a;
width: 20px;
}
}
+ .select-menu {
+ @extend %select-menu-base;
+ top: -$menu-height + 1px;
+ width: 170%;
+ border-bottom: 1px solid $grey;
+ z-index: 2;
+ }
}
}
}
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss
index 5c38faba0..2047732bb 100644
--- a/app/scss/partials/_summary.scss
+++ b/app/scss/partials/_summary.scss
@@ -5,381 +5,196 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
*/
-@mixin controls-btns {
+#content-summary {
position: absolute;
- background-repeat: no-repeat;
- left: 13px;
-}
-
-@function buildIconTrust($stroke-color) {
- @return url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EOval%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Card-view---list-expanded-MAX---HOVER%22%20transform%3D%22translate%28-687.000000%2C%20-498.000000%29%22%20stroke-width%3D%222%22%20stroke%3D%22%23#{$stroke-color}%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval%22%20cx%3D%22693.875%22%20cy%3D%22504.875%22%20r%3D%225.875%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
-}
-
-@function buildIconRestrict($stroke-color) {
- @return url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-%20restrict%20site%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Card-view---list-expanded-MAX---HOVER%22%20transform%3D%22translate%28-687.000000%2C%20-536.000000%29%22%20stroke%3D%22%23#{$stroke-color}%22%20stroke-width%3D%222%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon--restrict-site%22%20transform%3D%22translate%28688.000000%2C%20537.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1.95833333%2C1.95833333%20L9.79166667%2C9.79166667%22%20id%3D%22Line%22%20stroke-linecap%3D%22square%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval%22%20cx%3D%225.75260417%22%20cy%3D%225.75260417%22%20r%3D%225.75260417%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
-}
-
-@function buildIconPause($stroke-color) {
- @return url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%2213px%22%20viewBox%3D%220%200%2010%2013%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EShape%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Card-view---list-expanded-MAX---HOVER%22%20transform%3D%22translate%28-684.000000%2C%20-575.000000%29%22%20fill%3D%22%23#{$stroke-color}%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate%28684.000000%2C%20575.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22pause%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C12.173913%20L2.60869565%2C12.173913%20L2.60869565%2C0%20L0%2C0%20L0%2C12.173913%20L0%2C12.173913%20Z%20M6.95652174%2C0%20L6.95652174%2C12.173913%20L9.56521739%2C12.173913%20L9.56521739%2C0%20L6.95652174%2C0%20L6.95652174%2C0%20Z%22%20id%3D%22Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
-}
+ height: 479px;
+ width: 100%;
+ &.expert { width: 235px; }
+ &.expert.condensed {
+ width: 66px;
+ background-color: #f9f6f6;
+ }
-@function buildIconResume($stroke-color) {
- @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M72%2C48.3l-42-24c-1.313-0.875-3%2C0.295-3%2C1.7v48c0%2C1.533%2C1.767%2C2.523%2C3%2C1.7l42-24C73.589%2C50.639%2C73.047%2C48.824%2C72%2C48.3z%20%20%20M31%2C70.6V29.4L67%2C50L31%2C70.6z%22%3E%3C/path%3E%3C/svg%3E%0A');
+ .clickable { cursor: pointer; }
+ .not-clickable { cursor: not-allowed; }
- // url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23#{$stroke-color}%22%3E%3Cpath%20d%3D%22M72%2048.3l-42-24c-1.313-.875-3%20.295-3%201.7v48c0%201.533%201.767%202.523%203%201.7l42-24c1.59-1.06%201.047-2.876%200-3.4zM31%2070.6V29.4L67%2050%2031%2070.6z%22/%3E%3C/svg%3E');
-}
+ &.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;
+ }
-// cliqz drawer buttons
-@function buildAntiTrackIcon($stroke-color){
- @return url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2222px%22%20height%3D%2222px%22%20viewBox%3D%220%200%2022%2022%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EPage%201%20Copy%202%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---hover---adblocing%22%20transform%3D%22translate%28-1082.000000%2C%20-690.000000%29%22%20stroke%3D%22%23#{$stroke-color}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1093.2127%2C691.032068%20C1093.08497%2C690.989311%201092.91503%2C690.989311%201092.7873%2C691.032068%20L1083.63836%2C693.457515%20C1083.25545%2C693.542485%201083%2C693.882908%201083%2C694.265816%20C1083.04276%2C700.776614%201086.53196%2C706.81899%201092.53185%2C710.861584%20C1092.65958%2C710.946554%201092.82979%2C710.989311%201093%2C710.989311%20C1093.17021%2C710.989311%201093.34042%2C710.946554%201093.46815%2C710.861584%20C1099.46804%2C706.81899%201102.95724%2C700.776614%201103%2C694.265816%20C1103%2C693.882908%201102.74455%2C693.542485%201102.36164%2C693.457515%20L1093.2127%2C691.032068%20Z%22%20id%3D%22Page-1-Copy-2%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
-}
+ .page-host {
+ color: #4a4a4a;
+ text-align: center;
+ font-size: 11px;
+ font-weight: 600;
+ margin-bottom: 36px;
+ }
+ &.ab-pause .page-host {
+ margin-bottom: 30px;
+ }
+ &.expert .page-host {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+ &.expert.ab-pause .page-host {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ }
-@function buildAdBlockIcon($stroke-color){
- @return url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EFill%201%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---hover---adblocing%22%20transform%3D%22translate%28-1166.000000%2C%20-735.000000%29%22%20stroke%3D%22%23#{$stroke-color}%22%20stroke-width%3D%220.5%22%20fill%3D%22%23#{$stroke-color}%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1171.71317%2C754.301569%20C1172.4562%2C755.045891%201173.19537%2C755.790213%201173.94227%2C756.528096%20C1173.99635%2C756.582182%201174.10195%2C756.610513%201174.18565%2C756.610513%20C1176.73025%2C756.614376%201179.27356%2C756.615664%201181.81816%2C756.609225%20C1181.91088%2C756.609225%201182.02806%2C756.56029%201182.09374%2C756.495903%20C1183.89659%2C754.700773%201185.69429%2C752.901779%201187.4907%2C751.098923%20C1187.55638%2C751.03196%201187.60918%2C750.91735%201187.60918%2C750.824631%20C1187.6169%2C748.272302%201187.61561%2C745.72126%201187.61304%2C743.16893%20C1187.61175%2C743.099391%201187.5963%2C743.007961%201187.55252%2C742.961601%20C1186.80562%2C742.203114%201186.05357%2C741.451065%201185.31054%2C740.704168%20C1180.77122%2C745.242215%201176.24734%2C749.766097%201171.71317%2C754.301569%20M1170.68168%2C753.279092%20C1175.21843%2C748.74362%201179.74488%2C744.215875%201184.27648%2C739.684266%20C1183.54761%2C738.955397%201182.80844%2C738.212362%201182.06154%2C737.474479%20C1182.00617%2C737.420393%201181.90186%2C737.389487%201181.82073%2C737.389487%20C1179.27614%2C737.384336%201176.73154%2C737.384336%201174.18823%2C737.390775%20C1174.09422%2C737.390775%201173.97575%2C737.435846%201173.91007%2C737.501522%20C1172.10207%2C739.301803%201170.29664%2C741.104659%201168.49637%2C742.912667%20C1168.43971%2C742.970616%201168.39077%2C743.068485%201168.39077%2C743.147038%20C1168.38562%2C745.714821%201168.38562%2C748.281316%201168.38948%2C750.847811%20C1168.38948%2C750.91735%201168.41524%2C751.003629%201168.46289%2C751.049988%20C1169.20463%2C751.802037%201169.95281%2C752.548935%201170.68168%2C753.279092%20M1188.99608%2C747.014165%20C1188.99608%2C748.386912%201188.99093%2C749.75837%201188.99995%2C751.129829%20C1189.00252%2C751.4273%201188.90981%2C751.655233%201188.6999%2C751.865137%20C1186.75025%2C753.805783%201184.80574%2C755.75158%201182.86381%2C757.699953%20C1182.66163%2C757.903418%201182.44143%2C758%201182.1504%2C758%20C1179.38559%2C757.993561%201176.6195%2C757.993561%201173.85213%2C758%20C1173.56367%2C758%201173.34346%2C757.905994%201173.13871%2C757.702529%20C1171.19292%2C755.749005%201169.24198%2C753.798057%201167.28717%2C751.850972%20C1167.08885%2C751.653945%201167%2C751.437602%201167.00129%2C751.156872%20C1167.00644%2C748.390775%201167.00644%2C745.624678%201167%2C742.857293%20C1167%2C742.568836%201167.08757%2C742.347343%201167.29232%2C742.14259%20C1169.24713%2C740.195505%201171.19807%2C738.245844%201173.14515%2C736.291033%20C1173.34218%2C736.094006%201173.55594%2C736%201173.83667%2C736%20C1176.61049%2C736.005151%201179.38431%2C736.005151%201182.15812%2C736%20C1182.44014%2C736%201182.6552%2C736.090143%201182.85093%2C736.288457%20C1184.80445%2C738.24842%201186.76184%2C740.203231%201188.72051%2C742.156755%20C1188.91109%2C742.347343%201189.00124%2C742.558534%201188.99995%2C742.830251%20C1188.99222%2C744.224889%201188.99608%2C745.619527%201188.99608%2C747.014165%22%20id%3D%22Fill-1%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
-}
+ .donut-graph-container {
+ margin: 26px auto;
+ height: 120px;
+ width: 120px;
+ }
+ &.ab-pause .donut-graph-container {
+ margin-top: 0px;
+ margin-bottom: 30px;
+ }
+ &.expert .donut-graph-container {
+ height: 94px;
+ width: 94px;
+ margin-top: 21px;
+ margin-bottom: 20px;
+ }
+ &.expert.ab-pause .donut-graph-container {
+ margin-top: 0px;
+ margin-bottom: 16px;
+ }
-@function buildSmartBlockIcon($stroke-color){
- @return url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2218px%22%20height%3D%2228px%22%20viewBox%3D%220%200%2018%2028%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EGroup%2011%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---hover---adblocing%22%20transform%3D%22translate%28-1105.000000%2C%20-711.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-11%22%20transform%3D%22translate%281105.000000%2C%20711.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon--smart-blocking-light-bulb%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M15.9766215%2C9.23905085%20C15.8801207%2C10.9165559%2015.2802076%2C12.3962344%2014.3232416%2C13.7536786%20C13.8922048%2C14.3648501%2013.456343%2C14.9711966%2013.038173%2C15.5936266%20C12.4414766%2C16.4814337%2011.9637978%2C17.4255329%2011.7804463%2C18.4918664%20C11.7498877%2C18.6671761%2011.6389118%2C18.6543094%2011.5166775%2C18.6543094%20C10.6755125%2C18.652701%209.83434744%2C18.652701%208.99157404%2C18.652701%20C8.16005907%2C18.652701%207.32854409%2C18.647876%206.49542077%2C18.6559177%20C6.31367765%2C18.6575261%206.24934381%2C18.606059%206.21235184%2C18.4178825%20C6.01452526%2C17.3869326%205.55453826%2C16.4637419%204.9707086%2C15.60006%20C4.47372963%2C14.8666541%203.95584216%2C14.146115%203.45725484%2C13.4127092%20C2.5501476%2C12.0826069%202.07568548%2C10.6109701%202.01135163%2C9.00101562%20C1.8987674%2C6.18158477%203.4974635%2C3.72242346%206.19626838%2C2.58049768%20C9.65421266%2C1.118511%2013.7426286%2C2.58532272%2015.3622332%2C5.87439065%20C15.8833374%2C6.93589913%2016.044172%2C8.0633498%2015.9766215%2C9.23905085%20L15.9766215%2C9.23905085%20Z%20M6.35227796%2C21.3000388%20L11.6566037%2C21.3000388%20L11.6566037%2C20.6695671%20L6.35227796%2C20.6695671%20L6.35227796%2C21.3000388%20Z%20M11.1113743%2C23.9811519%20L6.89589897%2C23.9811519%20C6.38766158%2C23.9811519%206.2943775%2C23.8733927%206.36031969%2C23.3281634%20L11.6405202%2C23.3281634%20C11.7145041%2C23.865351%2011.6180033%2C23.9811519%2011.1113743%2C23.9811519%20L11.1113743%2C23.9811519%20Z%20M17.3501491%2C5.40475357%20C15.9010292%2C2.2363116%2013.3839675%2C0.476780878%209.96462348%2C0.0698692952%20C7.05190855%2C-0.277533479%204.51876332%2C0.679432497%202.45364683%2C2.74294064%20C0.148886755%2C5.04930906%20-0.40438433%2C7.86713156%200.26468768%2C10.9841065%20C0.615307147%2C12.6133611%201.41304685%2C14.0303141%202.36840448%2C15.3732832%20C2.80587464%2C15.9908881%203.23691142%2C16.6165348%203.63899796%2C17.2566565%20C4.01052593%2C17.8501363%204.2742947%2C18.4982998%204.30002824%2C19.2027554%20C4.33058682%2C20.0165786%204.30806997%2C20.8304018%204.30806997%2C21.6442249%20L4.34023689%2C21.6442249%20C4.34023689%2C22.3197303%204.33862855%2C22.9952357%204.34184524%2C23.6707411%20C4.34827862%2C24.8753924%205.29398618%2C25.8918672%206.49220408%2C25.9706761%20C6.649822%2C25.9819346%206.70289743%2C26.0269683%206.74149774%2C26.1845862%20C6.99722478%2C27.242878%207.92684887%2C27.9746755%208.99157404%2C27.9762838%20C10.0772077%2C27.9778922%2011.0003984%2C27.2541364%2011.2657755%2C26.1781528%20C11.2995508%2C26.0382267%2011.3381511%2C25.9835429%2011.490944%2C25.9722845%20C12.7325872%2C25.8790004%2013.6622113%2C24.8753924%2013.665428%2C23.6353575%20C13.665428%2C22.3776308%2013.6750781%2C21.1199041%2013.6622113%2C19.860569%20C13.6509529%2C18.9196865%2013.869688%2C18.0447462%2014.3682753%2C17.2502232%20C14.7703619%2C16.6101014%2015.1997903%2C15.9828464%2015.6420855%2C15.3700665%20C16.9046372%2C13.6137525%2017.7972694%2C11.7175123%2017.9645374%2C9.52694482%20C18.0739049%2C8.10355845%2017.9468456%2C6.71073066%2017.3501491%2C5.40475357%20L17.3501491%2C5.40475357%20Z%22%20id%3D%22Page-1%22%20fill%3D%22%23#{$stroke-color}%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M9.09571339%2C7.21443826%20C9.03823634%2C7.19518725%208.96176366%2C7.19518725%208.90428661%2C7.21443826%20L4.78726273%2C8.3064732%20C4.61495411%2C8.34472999%204.5%2C8.49800235%204.5%2C8.67040311%20C4.51924072%2C11.6018291%206.08938152%2C14.3223522%208.7893325%2C16.1424922%20C8.84680955%2C16.180749%208.92340478%2C16.2%209%2C16.2%20C9.07659522%2C16.2%209.15319045%2C16.180749%209.2106675%2C16.1424922%20C11.9106185%2C14.3223522%2013.4807593%2C11.6018291%2013.5%2C8.67040311%20C13.5%2C8.49800235%2013.3850459%2C8.34472999%2013.2127373%2C8.3064732%20L9.09571339%2C7.21443826%20Z%22%20id%3D%22Page-1-Copy-2%22%20stroke%3D%22%23#{$stroke-color}%22%20stroke-width%3D%221.5%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
-}
+ &.expert.condensed .total-tracker-count {
+ text-align: center;
+ padding: 0;
+ color: #4a4a4a;
+ font-size: 24px;
+ font-weight: 600;
+ margin: 18px 0;
+ }
+ &.expert.condensed.ab-pause .total-tracker-count {
+ margin: 13px 0;
+ }
-@mixin purple-dot {
- position: absolute;
- display: block;
- background-color: $button-purple-f;
- border-radius: 50%;
- height: 4px;
- width: 4px;
- top: -8px;
- margin-left: auto;
- margin-right: auto;
- left: 0;
- right: 0;
- content: '';
-}
+ .page-stats {
+ color: #4a4a4a;
+ text-align: center;
+ font-size: 14px;
+ line-height: 21px;
+ font-weight: 600;
+ margin-bottom: 40px;
+ .blocked-trackers .value { color: #e74055; }
+ .page-load .value { color: #ffc063; }
+ .page-load.fast .value { color: #9ecc42; }
+ .page-load.slow .value { color: #e74055; }
-#content-summary {
- position: absolute;
- height: 479px;
- width: 100%;
- &.not-scanned {
- .tracker-count-total,
- .tracker-found-text,
- .tracker-category-wheel,
- #tracker-host {
- display: none;
+ .blocked-trackers,
+ .page-load {
+ display: inline-block;
+ padding: 0 20px;
}
}
- .tracker-category-wheel {
- margin-top: 42px;
- position: relative;
- #categories-donut {
- margin: 0 auto;
- position: relative;
- height: 121px;
- width: 121px;
- .donut-text {
- font-size: 12px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- .categories-donut-count {
- @extend %pointer;
- font-size: 30px;
- font-weight: 700;
- color: #4a4a4a;
- text-align: center;
- }
- }
- }
- // Wheel tooltip. Difficult to change content of :before dynamically,
- // So we treat tooltip and its tip as elements (tip being a child of tooltip)
- .w-tooltip {
- @extend %g-tooltip-body;
- position: absolute;
- }
- .w-tip {
- @extend %g-tip-body;
- border-width: 6px 6px 0 6px;
- }
- .tooltip {
+ &.expert .page-stats {
+ margin-bottom: 21px;
+ .blocked-trackers,
+ .page-load {
+ display: block;
+ text-overflow: ellipsis;
white-space: nowrap;
- pointer-events: none;
- opacity: 0;
- visibility: hidden;
- transition: opacity .2s ease-in;
- }
- .tooltip.show {
- visibility: visible;
- opacity: 1;
+ overflow-x: hidden;
}
- .tooltip::before {
- left: 50%;
- margin-left: -8px;
+ }
+ &.expert.ab-pause .page-stats {
+ margin-bottom: 16px;
+ }
+ &.expert.condensed .page-stats {
+ div {
+ text-align: center;
+ padding: 0;
+ margin: 21px 0;
}
+ .text { display: none; }
}
- .tracker-count-total-expanded-expert {
- display: none;
+ &.expert.condensed.ab-pause .page-stats {
+ margin-bottom: 0;
+ div { margin: 13px 0; }
}
- #tracker-host {
- color: #9b9b9b;
- font-size: 11px;
- margin-top: 25px;
+
+ .not-scanned-expert-condensed-space-taker {
+ height: 162px;
}
- .info {
- font-size: 14px;
- color: #4a4a4a;
- font-weight: 600;
- margin: 30px auto;
- > .row {
- margin-top: 11px;
- }
- .block-info {
- .value {
- color: $red;
- }
- }
- .load-info,
- .alert-info {
- .value {
- color: #f5a623;
- }
- }
- .load-info.fast .value {
- color: $atlantis;
- }
- .load-info.slow .value {
- color: $red;
- }
+ &.ab-pause .not-scanned-expert-condensed-space-taker {
+ height: 130px;
}
- #controls {
- bottom: 0;
- left: 0;
- padding-bottom: 60px;
- right: 0;
- #cliqz-controls {
- width: 314px;
- height: 59px;
- border-top: 1px solid #ebebeb;
- border-bottom: 1px solid #ebebeb;
- margin: 0 auto;
- button {
- height: 35px;
- width: 35px;
- margin-top: 15px;
- margin-bottom: 8px;
- padding: 0;
- background-color: transparent;
- border-radius: 50%;
- background-size: auto 25px;
- background-position: center;
- &:hover:not(.disabled) {
- background-color: #EBEBEB;
- }
- }
- }
- #ghostery-controls {
- margin-top: 41px;
- background-color: #fff;
- > .row > .columns {
- padding: 0 16px;
- }
- .button {
- height: 31px;
- width: 125px;
- margin-bottom: 0px;
- font-size: 11px;
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 3px;
- color: #4a4a4a;
- line-height: 14px;
- text-align: left;
- .title, .select-title, .undo {
- margin-left: 30px;
- margin-right: 1em;
- position: absolute;
- left: 0;
- right: 0;
- text-align: center;
- top: 50%;
- transform: translateY(-50%);
- }
- .icon {
- margin-top: 1px;
- fill: #4a4a4a;
- @include controls-btns;
- height: 14px;
- width: 14px;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- &.pause {
- left: 14px;
- }
- }
- .undo {
- display: none;
- }
- &.active,
- &:hover:not(.disabled) {
- color: #fff;
- }
- &.active:hover:not(.disabled) {
- .title {
- display: none;
- }
- .undo {
- display: inline-block;
- }
- }
- &.controls-trust {
- &.active,
- &:hover:not(.disabled) {
- border-color: #9ecc42;
- background-color: #9ecc42;
- }
- &.active .icon,
- &:hover:not(.disabled) .icon {
- background-image: buildIconTrust($button-white);
- }
- .icon {
- background-image: buildIconTrust($button-dark-grey);
- }
- }
- &.controls-restrict {
- &.active,
- &:hover:not(.disabled) {
- border-color: #e74055;
- background-color: #e74055;
- }
- &.active .icon,
- &:hover:not(.disabled) .icon {
- background-image: buildIconRestrict($button-white);
- }
- .icon {
- background-image: buildIconRestrict($button-dark-grey);
- }
- }
- &.controls-pause {
- &.active,
- &:hover:not(.disabled) {
- border-color: $ghosty-blue;
- background-color: $ghosty-blue;
- }
- &:hover:not(.disabled) .icon {
- background-image: buildIconPause($button-white);
- }
- &.active:hover:not(.disabled) {
- .title {
- display: block;
- }
- }
- .icon {
- background-image: buildIconPause($button-dark-grey);
- &.resume {
- width: 25px;
- height: 100%;
- left: 8px;
- }
- }
- &.active .icon, &.active:hover .icon {
- background-image: buildIconResume($button-white);
- }
- }
- }
+ .ghostery-features-container {
+ text-align: center;
+ .ghostery-features,
+ .pause-button {
+ display: inline-block;
}
}
- .toggleExpert {
- background-image: url('../images/panel/icon-list-view.svg');
- background-repeat: no-repeat;
- background-size: auto;
- border: none;
- height: 21px;
+ &.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;
+ }
+ &.expert.condensed .ghostery-features-container .button-restrict {
margin: 0;
- padding: 0px;
- position: absolute;
- right: 18px;
- top: 22px;
- width: 21px;
- z-index: 2;
}
-}
-
-.anti-track-btn {
- background-position: center;
- height: 24px;
- background-image: buildAntiTrackIcon($button-grey);
- background-repeat: no-repeat;
- &.active {
- background-image: buildAntiTrackIcon($button-purple);
- &:after {
- @include purple-dot;
- }
+ &.ab-pause .ghostery-features-container .button-restrict {
+ margin: 0;
}
-}
-.ad-block-btn {
- background-position: center;
- height: 25px;
- background-repeat: no-repeat;
- background-image: buildAdBlockIcon($button-grey);
- &.active {
- background-image: buildAdBlockIcon($button-purple);
- &:after {
- @include purple-dot;
- }
+ .cliqz-features-container {
+ text-align: center;
}
-}
-
-.smart-block-btn {
- background-position: center;
- height: 30px;
- background-repeat: no-repeat;
- background-image: buildSmartBlockIcon($button-grey);
- &.active {
- background-image: buildSmartBlockIcon($button-purple);
- &:after {
- @include purple-dot;
+ &.expert .cliqz-features-container {
+ margin-top: 10px;
+ 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;
+ .cliqz-feature:last-of-type {
+ margin-bottom: 0;
}
}
-}
-
-// trust + restrict + pause buttons
-.controls-trust, .controls-restrict, .controls-pause {
- position: relative;
-}
-
-.icon-trust {
- @include controls-btns;
- height: 14px;
- width: 14px;
- background-image: buildIconTrust($button-dark-grey);
-}
-.icon-restrict {
- @include controls-btns;
- height: 14px;
- width: 14px;
- background-image: buildIconRestrict($button-dark-grey);
-}
-
-.active {
- & .icon-trust {
- background-image: buildIconTrust($button-white);
- }
- & .icon-restrict {
- background-image: buildIconRestrict($button-white);
+ .map-these-trackers {
+ text-align: center;
+ font-size: 10px;
+ color: #9b9b9b;
}
}
-
-@import "./summary_expert";
-@import "./summary_expert_collapsed";
diff --git a/app/scss/partials/_summary_expert.scss b/app/scss/partials/_summary_expert.scss
index 83bdf4637..09d256683 100644
--- a/app/scss/partials/_summary_expert.scss
+++ b/app/scss/partials/_summary_expert.scss
@@ -51,10 +51,15 @@
@extend %pointer;
}
.block-info,
- .load-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;
diff --git a/app/scss/partials/_svgs.scss b/app/scss/partials/_svgs.scss
new file mode 100644
index 000000000..f33625732
--- /dev/null
+++ b/app/scss/partials/_svgs.scss
@@ -0,0 +1,68 @@
+/**
+ * SVGs Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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
+ */
+
+// Used in Blocking
+@function buildIconSmartBlockingNoCircle($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E');
+}
+
+
+// Used in Cliqz Features
+@function buildIconAntiTracking($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20d%3D%22M25.213%2015.032a.721.721%200%200%200-.426%200l-9.149%202.427a.82.82%200%200%200-.638.809c.043%206.514%203.532%2012.56%209.532%2016.604A.859.859%200%200%200%2025%2035c.17%200%20.34-.043.468-.128%206-4.045%209.49-10.09%209.532-16.604a.82.82%200%200%200-.638-.81l-9.15-2.426z%22/%3E%3C/g%3E%3C/svg%3E');
+}
+
+// Used in Cliqz Features
+@function buildIconAdBlocking($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20fill-rule%3D%22nonzero%22%20transform%3D%22translate%2814%2C14%29%22%20d%3D%22M14.873%201.312l-7.973.07-5.588%205.686.07%207.973%205.686%205.589%207.973-.07%205.589-5.687-.07-7.973-5.687-5.588z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20d%3D%22M31.5%2C18.5%20L18.5%2C31.5%22/%3E%3C/g%3E%3C/svg%3E');
+}
+
+// Used in Cliqz Features
+@function buildIconSmartBlocking($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E');
+}
+
+// Used in Cliqz Features
+@function buildIconDash($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%223%22%20d%3D%22M1%205h8%22/%3E%3C/svg%3E');
+}
+
+// Used in Ghostery Features
+@function buildIconTrust($stroke-color) {
+ @return url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22>%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');
+}
+
+// Used in Ghostery Features
+@function buildIconRestrict($stroke-color) {
+ @return url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20fill%3D%22none%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226%22/%3E%3Cpath%20d%3D%22M3%203l8%208%22/%3E%3C/g%3E%3C/svg%3E');
+}
+
+// Used in Pause Button
+@function buildIconPause($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2214%22%20height=%2216%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%2015h3V1H1v14zM9%201v14h3V1H9z%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
+}
+
+// Used in Pause Button
+@function buildIconPlay($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2214%22%20height=%2216%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12.74%207.543a.532.532%200%200%201%200%20.915L1.782%2014.92c-.322.222-.783-.045-.783-.458V1.54c0-.378.44-.693.783-.458l10.956%206.462zM2.043%2013.547L11.435%208%202.044%202.454v11.093z%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
+}
+
+// Used in Pause Button
+@function buildIconCaretDown($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%229%22%20height=%225%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M0%200h9L4.5%205%200%200%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
+}
+
+// Used in Pause Button
+@function buildIconCircle($stroke-color) {
+ @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%224%22%20height=%224%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx=%222%22%20cy=%222%22%20r=%222%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
+}
diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss
index 7e59daac4..be35680ee 100644
--- a/app/scss/partials/_tooltip.scss
+++ b/app/scss/partials/_tooltip.scss
@@ -5,7 +5,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
@@ -17,12 +17,13 @@
.tooltip-content {
color: #4a4a4a;
font-size: 11px;
+ line-height: 1.5;
padding: 11px 10px;
width: 150px;
background-color: $mystic;
text-align: center;
position: absolute;
- z-index: 2;
+ z-index: 3;
box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
&:after {
@@ -92,17 +93,20 @@
}
}
-#cliqz-controls .tooltip-content.right {
- margin-left: 28px;
+.expert .sub-component.cliqz-features .g-tooltip .tooltip-content.right {
+ margin-left: 16px;
}
-.toggleExpert.g-tooltip .tooltip-content.right {
- top: -10px;
- margin-left: 10px;
+.expert .sub-component.ghostery-features .g-tooltip .tooltip-content.right {
+ top: -50%;
}
-.expanded .toggleExpert.g-tooltip .tooltip-content.right {
- top: 15px;
- margin-left: 0px;
+.expert .sub-component.pause-button .g-tooltip .tooltip-content.right {
+ margin-left: 28px;
+ top: -33%;
}
+.sub-component.pause-button .g-tooltip .tooltip-content.top {
+ left: 75px;
+}
+
.expert .g-tooltip .tooltip-content.top {
&.top-right {
margin-left: -40px;
@@ -117,3 +121,14 @@
}
}
}
+
+.gx-tooltip {
+ @extend .g-tooltip;
+ .tooltip-content.top {
+ bottom: 100%;
+ }
+ .tooltip-content.right {
+ margin-left: 0 !important;
+ }
+}
+
diff --git a/app/scss/setup.scss b/app/scss/setup.scss
index 92e2f5ec8..c52ffc21c 100644
--- a/app/scss/setup.scss
+++ b/app/scss/setup.scss
@@ -69,6 +69,10 @@ body {
}
#setup-page {
+ //Don't show blue border on click
+ *:focus {
+ outline: none;
+ }
#header {
height: 53px;
color: $white;
diff --git a/app/setup/actions/NavigationActions.js b/app/setup/actions/NavigationActions.js
index 7070e6c9c..be19f13bc 100644
--- a/app/setup/actions/NavigationActions.js
+++ b/app/setup/actions/NavigationActions.js
@@ -74,6 +74,9 @@ export function triggerSignIn() {
*/
export function close() {
msg.sendMessage('closeSetup');
+ return {
+ type: 'DO_NOTHING',
+ };
}
/**
diff --git a/app/setup/actions/SetupChoiceViewActions.js b/app/setup/actions/SetupChoiceViewActions.js
index 4c48a3401..f95a35700 100644
--- a/app/setup/actions/SetupChoiceViewActions.js
+++ b/app/setup/actions/SetupChoiceViewActions.js
@@ -11,9 +11,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import {
- DISABLE_SHOW_ALERT
-} from '../constants/constants';
import { msg } from '../utils';
/**
@@ -23,4 +20,7 @@ import { msg } from '../utils';
*/
export function disableShowAlert() {
msg.sendMessage('disableShowAlert');
+ return {
+ type: 'DO_NOTHING',
+ };
}
diff --git a/app/setup/components/Views/AdditionalFeaturesView.jsx b/app/setup/components/Views/AdditionalFeaturesView.jsx
index bfc4d994a..913f06e40 100644
--- a/app/setup/components/Views/AdditionalFeaturesView.jsx
+++ b/app/setup/components/Views/AdditionalFeaturesView.jsx
@@ -45,7 +45,9 @@ class AdditionalFeaturesView extends Component {
* @param {Object} event The event created by the onChange property
*/
_handleAntiTrack = (event) => {
- this.props.actions.updateAntiTrack(event.target.checked);
+ if (!IS_CLIQZ) {
+ this.props.actions.updateAntiTrack(event.target.checked);
+ }
}
/**
@@ -61,7 +63,9 @@ class AdditionalFeaturesView extends Component {
* @param {Object} event The event created by the onChange property
*/
_handleAdBlock = (event) => {
- this.props.actions.updateAdBlock(event.target.checked);
+ if (!IS_CLIQZ) {
+ this.props.actions.updateAdBlock(event.target.checked);
+ }
}
/**
@@ -78,7 +82,7 @@ class AdditionalFeaturesView extends Component {
* @return {Object}
*/
createAntiTrackDescriptionMarkup() {
- return { __html: IS_CLIQZ ? t('setup_feature_active_in_cliqz') : t('setup_additional_view_adblock_desc') };
+ return { __html: IS_CLIQZ ? t('setup_feature_active_in_cliqz') : t('setup_additional_view_antitrack_desc') };
}
/**
@@ -86,7 +90,7 @@ class AdditionalFeaturesView extends Component {
* @return {Object}
*/
createAdBlockDescriptionMarkup() {
- return { __html: IS_CLIQZ ? t('setup_feature_active_in_cliqz') : t('setup_additional_view_antitrack_desc') };
+ return { __html: IS_CLIQZ ? t('setup_feature_active_in_cliqz') : t('setup_additional_view_adblock_desc') };
}
/**
diff --git a/app/setup/components/Views/BlockingView.jsx b/app/setup/components/Views/BlockingView.jsx
index 25b6e60b4..08f42fd67 100644
--- a/app/setup/components/Views/BlockingView.jsx
+++ b/app/setup/components/Views/BlockingView.jsx
@@ -112,7 +112,7 @@ class BlockingView extends Component {
/**
* React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the #additional-features step of the setup flow
+ * @return {JSX} JSX for rendering the #blocking step of the setup flow
*/
render() {
return (
diff --git a/app/setup/components/Views/DataCollectionView.jsx b/app/setup/components/Views/DataCollectionView.jsx
index a92b36b0e..5e32f759f 100644
--- a/app/setup/components/Views/DataCollectionView.jsx
+++ b/app/setup/components/Views/DataCollectionView.jsx
@@ -61,7 +61,7 @@ class DataCollectionView extends Component {
/**
* React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the data collection view
+ * @return {JSX} JSX for rendering the #data-collection step of the setup flow
*/
render() {
return (
diff --git a/app/setup/components/Views/DisplayView.jsx b/app/setup/components/Views/DisplayView.jsx
index f8d224d4a..cd980d750 100644
--- a/app/setup/components/Views/DisplayView.jsx
+++ b/app/setup/components/Views/DisplayView.jsx
@@ -66,7 +66,7 @@ class DisplayView extends Component {
/**
* React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the display view
+ * @return {JSX} JSX for rendering the #display step of the setup flow
*/
render() {
return (
diff --git a/app/setup/components/Views/DoneView.jsx b/app/setup/components/Views/DoneView.jsx
index ac239fc81..c1e2b7290 100644
--- a/app/setup/components/Views/DoneView.jsx
+++ b/app/setup/components/Views/DoneView.jsx
@@ -45,7 +45,7 @@ class DoneView extends Component {
/**
* React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the done view
+ * @return {JSX} JSX for rendering the #done step of the setup flow
*/
render() {
return (
diff --git a/app/setup/components/Views/LogInView.jsx b/app/setup/components/Views/LogInView.jsx
index c6f90fd89..8bf9cb73e 100644
--- a/app/setup/components/Views/LogInView.jsx
+++ b/app/setup/components/Views/LogInView.jsx
@@ -358,7 +358,7 @@ class LogInView extends Component {
/**
* React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the #additional-features step of the setup flow
+ * @return {JSX} JSX for rendering the #log-in step of the setup flow
*/
render() {
return (
diff --git a/app/setup/components/Views/SetupChoiceView.jsx b/app/setup/components/Views/SetupChoiceView.jsx
index 3469c0c5c..da978c04b 100644
--- a/app/setup/components/Views/SetupChoiceView.jsx
+++ b/app/setup/components/Views/SetupChoiceView.jsx
@@ -78,7 +78,7 @@ class SetupChoiceView extends Component {
/**
* React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the #additional-features step of the setup flow
+ * @return {JSX} JSX for rendering the first step of the setup flow
*/
render() {
return (
diff --git a/app/setup/components/Views/UpgradeView.jsx b/app/setup/components/Views/UpgradeView.jsx
index 820585553..904d0807b 100644
--- a/app/setup/components/Views/UpgradeView.jsx
+++ b/app/setup/components/Views/UpgradeView.jsx
@@ -45,7 +45,7 @@ class UpgradeView extends Component {
/**
* React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the #additional-features step of the setup flow
+ * @return {JSX} JSX for rendering the Upgrade page
*/
render() {
return (
diff --git a/app/setup/reducers/additionalFeatures.js b/app/setup/reducers/additionalFeatures.js
index aa5dd3e33..08a669898 100644
--- a/app/setup/reducers/additionalFeatures.js
+++ b/app/setup/reducers/additionalFeatures.js
@@ -40,6 +40,9 @@ const initialState = {
export default (state = initialState, action) => {
switch (action.type) {
case UPDATE_ANTITRACK: {
+ if (IS_CLIQZ) {
+ return state;
+ }
msg.sendMessage('updateAntiTrack', action.data);
return Object.assign({}, state, {
antiTrack: action.data,
@@ -52,6 +55,9 @@ export default (state = initialState, action) => {
});
}
case UPDATE_ADBLOCK: {
+ if (IS_CLIQZ) {
+ return state;
+ }
msg.sendMessage('updateAdBlock', action.data);
return Object.assign({}, state, {
adBlock: action.data,
diff --git a/app/setup/reducers/display.js b/app/setup/reducers/display.js
index e7b76780f..63f1f25db 100644
--- a/app/setup/reducers/display.js
+++ b/app/setup/reducers/display.js
@@ -11,9 +11,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import {
- UPDATE_DISPLAY_MODE
-} from '../constants/constants';
+import { UPDATE_DISPLAY_MODE } from '../constants/constants';
import { msg } from '../utils';
const initialState = {
diff --git a/app/templates/panel.html b/app/templates/panel.html
index 0a475fe67..b9c84de86 100644
--- a/app/templates/panel.html
+++ b/app/templates/panel.html
@@ -22,7 +22,6 @@
+
+
+
+
+ summary_pause_ghostery
+
+
+
+
+ summary_show_menu
+
+
+