add linting for class-methods-use-this and fix most resulting errors.…

… Add /tools and /tests to linter. Update height in UpgradeBanner

.eslintrc.js

@@ -40,7 +40,7 @@ module.exports = {
 	rules: {
 		'arrow-parens': [2, 'as-needed', { 'requireForBlockBody': true }],
 		'camelcase': [0],
-		'class-methods-use-this': [0], // TODO: enable this check
+		'class-methods-use-this': [1],
 		'comma-dangle': [2, {
 			'arrays': 'only-multiline',
 			'objects': 'only-multiline',
@@ -90,7 +90,7 @@ module.exports = {
 		'react/no-danger': [0],
 		'react/prop-types': [0],
 		'react/jsx-fragments': [1, 'element'],
-		'react/sort-comp': [2, {
+		'react/sort-comp': [0, { //TODO: enable this check
 			order: [
 				"static-variables",
 				"instance-variables",

app/licenses/Licenses.jsx

@@ -31,7 +31,7 @@ class Licenses extends React.Component {
 	 * Wrapper function for dangerouslySetInnerHTML. Provides extra security
 	 * @return {Object}
 	 */
-	createFooterMarkup() {
+	static createFooterMarkup() {
 		return { __html: t('license_footer') };
 	}
 
@@ -60,7 +60,7 @@ class Licenses extends React.Component {
 					<div className="license-list">{ list }</div>
 				</div>
 				<div id="footer">
-					<div className="columns copyright text-center" dangerouslySetInnerHTML={this.createFooterMarkup()} />
+					<div className="columns copyright text-center" dangerouslySetInnerHTML={Licenses.createFooterMarkup()} />
 				</div>
 			</div>
 		);

app/panel-android/components/content/FixedMenu.jsx

@@ -20,11 +20,11 @@ export default class FixedMenu extends React.Component {
 		super(props);
 		this.state = {
 			open: false,
-			currentMenuItemText: this.defaultHeaderText,
+			currentMenuItemText: FixedMenu.defaultHeaderText,
 		};
 	}
 
-	get defaultHeaderText() {
+	static get defaultHeaderText() {
 		return 'Enhanced Options';
 	}
 
@@ -86,7 +86,7 @@ export default class FixedMenu extends React.Component {
 	}
 
 	updateHeadeText = (text) => {
-		const textToShow = text || this.defaultHeaderText;
+		const textToShow = text || FixedMenu.defaultHeaderText;
 
 		this.setState({
 			currentMenuItemText: textToShow,

app/panel-android/components/content/Path.jsx

@@ -42,7 +42,7 @@ export default class Path extends React.Component {
 		this.props.handler();
 	}
 
-	polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+	static polarToCartesian(centerX, centerY, radius, angleInDegrees) {
 		const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
 
 		return {
@@ -51,9 +51,9 @@ export default class Path extends React.Component {
 		};
 	}
 
-	describeArc(x, y, radius, startAngle, endAngle) {
-		const start = this.polarToCartesian(x, y, radius, startAngle);
-		const end = this.polarToCartesian(x, y, radius, endAngle);
+	static describeArc(x, y, radius, startAngle, endAngle) {
+		const start = Path.polarToCartesian(x, y, radius, startAngle);
+		const end = Path.polarToCartesian(x, y, radius, endAngle);
 
 		const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
 
@@ -71,7 +71,7 @@ export default class Path extends React.Component {
 		// Fix error for single path
 		const end = path.end === 360 ? 359.9999 : path.end;
 
-		const d = this.describeArc(0, 0, radius, start, end);
+		const d = Path.describeArc(0, 0, radius, start, end);
 
 		return (
 			<path

app/panel/components/Blocking/Tracker.jsx

@@ -242,14 +242,14 @@ class Tracker extends React.Component {
 				{(oneOrMoreCookies || oneOrMoreFingerprints) && (
 					<div className="trk-cliqz-stats-container">
 						{this._renderCliqzCookiesAndFingerprintsIcon()}
-						{oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)}
-						{oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)}
+						{oneOrMoreCookies && Tracker._renderCliqzCookieStat(cliqzCookieCount)}
+						{oneOrMoreFingerprints && Tracker._renderCliqzFingerprintStat(cliqzFingerprintCount)}
 					</div>
 				)}
 				{oneOrMoreAds && (
 					<div className="trk-cliqz-stats-container">
 						{this._renderCliqzAdsIcon()}
-						{this._renderCliqzAdStat(cliqzAdCount)}
+						{Tracker._renderCliqzAdStat(cliqzAdCount)}
 					</div>
 				)}
 			</div>
@@ -275,13 +275,13 @@ class Tracker extends React.Component {
 		);
 	}
 
-	_renderCliqzCookieStat(count) { return this._renderCliqzStat(count, 'cookie'); }
+	static _renderCliqzCookieStat(count) { return Tracker._renderCliqzStat(count, 'cookie'); }
 
-	_renderCliqzFingerprintStat(count) { return this._renderCliqzStat(count, 'fingerprint'); }
+	static _renderCliqzFingerprintStat(count) { return Tracker._renderCliqzStat(count, 'fingerprint'); }
 
-	_renderCliqzAdStat(count) { return this._renderCliqzStat(count, 'ad'); }
+	static _renderCliqzAdStat(count) { return Tracker._renderCliqzStat(count, 'ad'); }
 
-	_renderCliqzStat(count, type) {
+	static _renderCliqzStat(count, type) {
 		const exactlyOne = count === 1;
 		const label = exactlyOne ?
 			t(`${type}`) :

app/panel/components/BuildingBlocks/CliqzFeature.jsx

@@ -46,15 +46,15 @@ class CliqzFeature extends React.Component {
 		clickButton({
 			feature: `enable_${featureType}`,
 			status: active,
-			text: this._getAlertText(active, type),
+			text: CliqzFeature._getAlertText(active, type),
 		});
 	}
 
-	_getStatus(active) {
+	static _getStatus(active) {
 		return active ? t('on') : t('off');
 	}
 
-	_getTooltipBodyText(active, isTooltipBody, type) {
+	static _getTooltipBodyText(active, isTooltipBody, type) {
 		if (!isTooltipBody) return false;
 
 		if (active) {
@@ -82,7 +82,7 @@ class CliqzFeature extends React.Component {
 		}
 	}
 
-	_getTooltipHeaderText(isTooltipHeader, type) {
+	static _getTooltipHeaderText(isTooltipHeader, type) {
 		if (!isTooltipHeader) return false;
 
 		switch (type) {
@@ -97,7 +97,7 @@ class CliqzFeature extends React.Component {
 		}
 	}
 
-	_getAlertText(active, type) {
+	static _getAlertText(active, type) {
 		return active ?
 			t(`alert_${type}_off`) :
 			t(`alert_${type}_on`);
@@ -145,11 +145,11 @@ class CliqzFeature extends React.Component {
 
 		return (
 			<div className={cliqzFeatureClassNames} onClick={this.clickCliqzFeature}>
-				<div className="CliqzFeature__status">{this._getStatus(active)}</div>
+				<div className="CliqzFeature__status">{CliqzFeature._getStatus(active)}</div>
 				<div className={iconClassNames}>
 					<Tooltip
-						header={this._getTooltipHeaderText(isTooltipHeader, type)}
-						body={this._getTooltipBodyText(active, isTooltipBody, type)}
+						header={CliqzFeature._getTooltipHeaderText(isTooltipHeader, type)}
+						body={CliqzFeature._getTooltipBodyText(active, isTooltipBody, type)}
 						position={tooltipPosition}
 						// className={isTiny ? 'CliqzFeature--tooltipUp' : ''}
 					/>

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -142,14 +142,14 @@ class DonutGraph extends React.Component {
 	/**
 	 *  Helper function that calculates domain value for greyscale / redscale rendering
 	 */
-	getTone(catCount, catIndex) {
+	static getTone(catCount, catIndex) {
 		return catCount > 1 ? 100 / (catCount - 1) * catIndex * 0.01 : 0;
 	}
 
 	/**
 	 *  Helper to retrieve a category's tooltip from the DOM
 	 */
-	grabTooltip(d) {
+	static grabTooltip(d) {
 		return document.getElementById(`${d.data.id}_tooltip`);
 	}
 
@@ -278,10 +278,10 @@ class DonutGraph extends React.Component {
 			.append('path')
 			.style('fill', (d, i) => {
 				if (renderGreyscale) {
-					return this.colors.greyscale(this.getTone(categoryCount, i));
+					return this.colors.greyscale(DonutGraph.getTone(categoryCount, i));
 				}
 				if (renderRedscale) {
-					return this.colors.redscale(this.getTone(categoryCount, i));
+					return this.colors.redscale(DonutGraph.getTone(categoryCount, i));
 				}
 				return this.colors.regular(d.data.id);
 			})
@@ -295,15 +295,15 @@ class DonutGraph extends React.Component {
 				const centroid = trackerArc.centroid(d);
 				const pX = centroid[0] + this.donutRadius;
 				const pY = centroid[1] + this.donutRadius;
-				const tooltip = this.grabTooltip(d);
+				const tooltip = DonutGraph.grabTooltip(d);
 				if (tooltip) {
 					tooltip.style.left = `${pX - (tooltip.offsetWidth / 2)}px`;
 					tooltip.style.top = `${pY - (tooltip.offsetHeight + 8)}px`;
 					tooltip.classList.add('DonutGraph__tooltip--show');
 				}
 			})
 			.on('mouseout', (d) => {
-				const tooltip = this.grabTooltip(d);
+				const tooltip = DonutGraph.grabTooltip(d);
 				if (tooltip) {
 					tooltip.classList.remove('DonutGraph__tooltip--show');
 				}

app/panel/components/BuildingBlocks/GhosteryFeature.jsx

@@ -40,7 +40,7 @@ class GhosteryFeature extends React.Component {
 		this.props.handleClick(this.props.type);
 	}
 
-	_getButtonText(sitePolicy, showText, type) {
+	static _getButtonText(sitePolicy, showText, type) {
 		if (!showText) {
 			return '';
 		}
@@ -59,7 +59,7 @@ class GhosteryFeature extends React.Component {
 		}
 	}
 
-	_getTooltipText(sitePolicy, type) {
+	static _getTooltipText(sitePolicy, type) {
 		switch (type) {
 			case 'trust':
 				return (sitePolicy === WHITELISTED ?
@@ -74,7 +74,7 @@ class GhosteryFeature extends React.Component {
 		}
 	}
 
-	_isFeatureActive(type, sitePolicy) {
+	static _isFeatureActive(type, sitePolicy) {
 		switch (type) {
 			case 'trust':
 				return sitePolicy === WHITELISTED;
@@ -96,7 +96,7 @@ class GhosteryFeature extends React.Component {
 			type
 		} = this.props;
 
-		const active = this._isFeatureActive(type, sitePolicy);
+		const active = GhosteryFeature._isFeatureActive(type, sitePolicy);
 		// TODO Foundation dependency: button
 		const ghosteryFeatureClassNames = ClassNames(
 			'button',
@@ -120,10 +120,10 @@ class GhosteryFeature extends React.Component {
 			<div className={ghosteryFeatureClassNames} onClick={this.handleClick}>
 				<span className="flex-container align-center-middle full-height">
 					<span className="GhosteryFeatureButton__text">
-						{this._getButtonText(sitePolicy, showText, type)}
+						{GhosteryFeature._getButtonText(sitePolicy, showText, type)}
 					</span>
 				</span>
-				<Tooltip body={this._getTooltipText(sitePolicy, type)} position={tooltipPosition} />
+				<Tooltip body={GhosteryFeature._getTooltipText(sitePolicy, type)} position={tooltipPosition} />
 			</div>
 		);
 	}

app/panel/components/Rewards.jsx

@@ -45,7 +45,6 @@ class Rewards extends React.Component {
 
 		// helper render functions
 		this.renderRewardListComponent = this.renderRewardListComponent.bind(this);
-		this.handleFaqClick = this.handleFaqClick.bind(this);
 		this.handlePortMessage = this.handlePortMessage.bind(this);
 
 
@@ -141,7 +140,7 @@ class Rewards extends React.Component {
 	/**
 	 * Handles clicking the learn more button
 	 */
-	handleFaqClick() {
+	static handleFaqClick() {
 		sendMessage('openNewTab', {
 			url: 'https://www.ghostery.com/faqs/what-new-ghostery-features-can-we-expect-in-the-future/',
 			become_active: true,
@@ -202,7 +201,7 @@ class Rewards extends React.Component {
 	 * Helper render function for Reward Icon SVG
 	 * @return {JSX} JSX for the Rewards Icon SVG
 	 */
-	renderRewardSvg() {
+	static renderRewardSvg() {
 		return (
 			<svg className="RewardsPanel__reward_icon" viewBox="0 0 18 23" width="50" height="50">
 				<g strokeWidth=".5" fillRule="evenodd">
@@ -212,35 +211,35 @@ class Rewards extends React.Component {
 		);
 	}
 
-	renderCLIQZtext() {
+	static renderCLIQZtext() {
 		return (
 			<div className="RewardsPanel__info">
-				{ this.renderRewardSvg() }
+				{ Rewards.renderRewardSvg() }
 				<div>{ t('panel_detail_rewards_cliqz_text') }</div>
 				<hr />
 				<div
 					className="RewardsPanel__learn_more button primary hollow"
-					onClick={this.handleFaqClick}
+					onClick={Rewards.handleFaqClick}
 				>
 					{ t('panel_detail_learn_more') }
 				</div>
 			</div>
 		);
 	}
 
-	renderRewardsTurnoffText() {
+	static renderRewardsTurnoffText() {
 		return (
 			<div className="RewardsPanel__info">
-				{ this.renderRewardSvg() }
+				{ Rewards.renderRewardSvg() }
 				<div>{ t('panel_detail_rewards_off') }</div>
 			</div>
 		);
 	}
 
-	renderRewardsNoneFoundText() {
+	static renderRewardsNoneFoundText() {
 		return (
 			<div className="RewardsPanel__info">
-				{ this.renderRewardSvg() }
+				{ Rewards.renderRewardSvg() }
 				<div>{ t('panel_detail_rewards_none_found') }</div>
 			</div>
 		);
@@ -251,17 +250,17 @@ class Rewards extends React.Component {
 	 * @return {JSX} JSX for the Rewards Items List
 	 */
 	renderRewardListComponent() {
-		if (IS_CLIQZ) { return this.renderCLIQZtext(); }
+		if (IS_CLIQZ) { return Rewards.renderCLIQZtext(); }
 		const { enable_offers, is_expanded } = this.props;
-		if (!enable_offers) { return this.renderRewardsTurnoffText(); }
+		if (!enable_offers) { return Rewards.renderRewardsTurnoffText(); }
 
 		const {
 			shouldHideRewards,
 			iframeWidth,
 			iframeHeight,
 			rewardsCount,
 		} = this.state;
-		if (shouldHideRewards) { return this.renderRewardsNoneFoundText(); }
+		if (shouldHideRewards) { return Rewards.renderRewardsNoneFoundText(); }
 
 		const src = chrome.runtime.getURL('cliqz/offers-templates/control-center.html?cross-origin');
 		const text = t(`panel_rewards_view__reward${rewardsCount === 1 ? '' : 's'}`);

app/panel/components/Settings/TrustAndRestrict.jsx

@@ -120,7 +120,7 @@ class TrustAndRestrict extends React.Component {
 
 		// Check for Validity
 		if (pageHost.length >= 2083
-			|| !this.isValidUrlorWildcard(pageHost)) {
+			|| !TrustAndRestrict.isValidUrlorWildcard(pageHost)) {
 			this.showWarning(t('white_black_list_error_invalid_url'));
 			return;
 		}
@@ -144,7 +144,7 @@ class TrustAndRestrict extends React.Component {
 		}
 	}
 
-	isValidUrlorWildcard(pageHost) {
+	static isValidUrlorWildcard(pageHost) {
 		// Only allow valid host name characters, ':' for port numbers and '*' for wildcards
 		const isSafePageHost = /^[a-zA-Z0-9-.:*]*$/;
 		if (!isSafePageHost.test(pageHost)) { return false; }