Skip to content

Commit

Permalink
Grey out icons depending on phishingStatus (#195)
Browse files Browse the repository at this point in the history 
Co-authored-by: Thomas Espach <[email protected]>
  • Loading branch information
@mgurgel @not-a-rootkit
mgurgel and not-a-rootkit authored Oct 24, 2024
1 parent ee8c6cb commit 53fd1a0
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 64 deletions.
100 changes: 70 additions & 30 deletions build/app/public/js/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12150,42 +12150,58 @@
};

// shared/js/ui/templates/shared/tracker-networks-text.js
function trackerNetworksText(requestDetails, protectionsEnabled) {
function trackerNetworksTitle(requestDetails, protectionsEnabled) {
const state = requestDetails.state(protectionsEnabled);
switch (state) {
case states.protectionsOn_blocked:
case states.protectionsOn_blocked_allowedTrackers:
case states.protectionsOn_blocked_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers_allowedNonTrackers: {
return {
title: ns.site("trackerNetworksDesc.title"),
icon: "blocked"
};
return ns.site("trackerNetworksDesc.title");
}
case states.protectionsOn_allowedTrackers_allowedNonTrackers:
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return {
title: ns.site("trackerNetworksNotBlocked.title"),
icon: "info"
};
}
case states.protectionsOn_allowedFirstParty_allowedNonTrackers:
case states.protectionsOff_allowedTrackers:
case states.protectionsOff_allowedTrackers_allowedNonTrackers: {
return {
title: ns.site("trackerNetworksNotBlocked.title"),
icon: "warning"
};
return ns.site("trackerNetworksNotBlocked.title");
}
case states.protectionsOn:
case states.protectionsOff:
case states.protectionsOn_allowedNonTrackers:
case states.protectionsOff_allowedNonTrackers: {
return {
title: ns.site("trackerNetworksNotFound.title"),
icon: "blocked"
};
return ns.site("trackerNetworksNotFound.title");
}
default:
return unreachable(state);
}
}
function trackerNetworksIcon(requestDetails, protectionsEnabled, phishingDetected) {
if (phishingDetected) {
return "info";
}
const state = requestDetails.state(protectionsEnabled);
switch (state) {
case states.protectionsOn_blocked:
case states.protectionsOn_blocked_allowedTrackers:
case states.protectionsOn_blocked_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers_allowedNonTrackers:
case states.protectionsOn:
case states.protectionsOff:
case states.protectionsOn_allowedNonTrackers:
case states.protectionsOff_allowedNonTrackers: {
return "blocked";
}
case states.protectionsOn_allowedTrackers_allowedNonTrackers:
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return "info";
}
case states.protectionsOff_allowedTrackers:
case states.protectionsOff_allowedTrackers_allowedNonTrackers: {
return "warning";
}
default:
return unreachable(state);
Expand Down Expand Up @@ -12247,16 +12263,13 @@
}

// shared/js/ui/templates/shared/thirdparty-text.js
function thirdpartyText(requestDetails, protectionsEnabled) {
function thirdpartyTitle(requestDetails, protectionsEnabled) {
const state = requestDetails.state(protectionsEnabled);
switch (state) {
case states.protectionsOn:
case states.protectionsOn_blocked:
case states.protectionsOff: {
return {
title: ns.site("thirdPartiesNoneFound.title"),
icon: "blocked"
};
return ns.site("thirdPartiesNoneFound.title");
}
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedNonTrackers:
Expand All @@ -12269,10 +12282,35 @@
case states.protectionsOff_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return {
title: ns.site("thirdPartiesLoaded.title"),
icon: "info"
};
return ns.site("thirdPartiesLoaded.title");
}
default:
return unreachable2(state);
}
}
function thirdpartyIcon(requestDetails, protectionsEnabled, phishingDetected) {
if (phishingDetected) {
return "info";
}
const state = requestDetails.state(protectionsEnabled);
switch (state) {
case states.protectionsOn:
case states.protectionsOn_blocked:
case states.protectionsOff: {
return "blocked";
}
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers:
case states.protectionsOn_blocked_allowedNonTrackers:
case states.protectionsOn_allowedTrackers_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers_allowedNonTrackers:
case states.protectionsOff_allowedTrackers_allowedNonTrackers:
case states.protectionsOff_allowedNonTrackers:
case states.protectionsOff_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return "info";
}
default:
return unreachable2(state);
Expand Down Expand Up @@ -15453,7 +15491,8 @@
</div>`;
}
function renderTrackerNetworksNew(model, cb) {
const { title, icon } = trackerNetworksText(model.tab.requestDetails, model.protectionsEnabled);
const title = trackerNetworksTitle(model.tab.requestDetails, model.protectionsEnabled);
const icon = trackerNetworksIcon(model.tab.requestDetails, model.protectionsEnabled, model.tab.phishingStatus);
return import_nanohtml5.default` <a
href="javascript:void(0)"
class="main-nav__item main-nav__item--link link-action link-action--dark"
Expand All @@ -15468,7 +15507,8 @@
</a>`;
}
function renderThirdPartyNew(model, cb) {
const { title, icon } = thirdpartyText(model.tab.requestDetails, model.protectionsEnabled);
const title = thirdpartyTitle(model.tab.requestDetails, model.protectionsEnabled);
const icon = thirdpartyIcon(model.tab.requestDetails, model.protectionsEnabled, model.tab.phishingStatus);
return import_nanohtml5.default` <a
href="javascript:void(0)"
class="main-nav__item main-nav__item--link link-action link-action--dark"
Expand Down
Binary file modified integration-tests/macos.spec-int.js-snapshots/phishing-warning-macos-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 40 additions & 10 deletions shared/js/ui/templates/shared/thirdparty-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,15 @@ import { ns } from '../../base/localize.js'
/**
* @param {import("../../../browser/utils/request-details.mjs").RequestDetails} requestDetails
* @param {boolean} protectionsEnabled
* @returns {{title: string, icon: string}}
* @returns {string}
*/
export function thirdpartyText(requestDetails, protectionsEnabled) {
export function thirdpartyTitle(requestDetails, protectionsEnabled) {
const state = requestDetails.state(protectionsEnabled)
switch (state) {
case states.protectionsOn:
case states.protectionsOn_blocked:
case states.protectionsOff: {
return {
title: ns.site('thirdPartiesNoneFound.title'),
icon: 'blocked',
}
return ns.site('thirdPartiesNoneFound.title')
}
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedNonTrackers:
Expand All @@ -28,10 +25,7 @@ export function thirdpartyText(requestDetails, protectionsEnabled) {
case states.protectionsOff_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return {
title: ns.site('thirdPartiesLoaded.title'),
icon: 'info',
}
return ns.site('thirdPartiesLoaded.title')
}

// if no 3rd party requests were observed in any way, then we use the 'nothing found' messaging
Expand All @@ -40,6 +34,42 @@ export function thirdpartyText(requestDetails, protectionsEnabled) {
}
}

/**
* @param {import("../../../browser/utils/request-details.mjs").RequestDetails} requestDetails
* @param {boolean} protectionsEnabled
* @param {boolean} [phishingDetected]
* @returns {'info'|'blocked'}
*/
export function thirdpartyIcon(requestDetails, protectionsEnabled, phishingDetected) {
if (phishingDetected) {
return 'info'
}

const state = requestDetails.state(protectionsEnabled)
switch (state) {
case states.protectionsOn:
case states.protectionsOn_blocked:
case states.protectionsOff: {
return 'blocked'
}
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers:
case states.protectionsOn_blocked_allowedNonTrackers:
case states.protectionsOn_allowedTrackers_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers_allowedNonTrackers:
case states.protectionsOff_allowedTrackers_allowedNonTrackers:
case states.protectionsOff_allowedNonTrackers:
case states.protectionsOff_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return 'info'
}
default:
return unreachable(state)
}
}

/**
* @param {import("../../../browser/utils/request-details.mjs").RequestDetails} requestDetails
* @param {boolean} protectionsEnabled
Expand Down
65 changes: 45 additions & 20 deletions shared/js/ui/templates/shared/tracker-networks-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,69 @@ import { ns } from '../../base/localize.js'
/**
* @param {import("../../../browser/utils/request-details.mjs").RequestDetails} requestDetails
* @param {any} protectionsEnabled
* @returns {{title: string, icon: string}}
* @returns {string}
*/
export function trackerNetworksText(requestDetails, protectionsEnabled) {
export function trackerNetworksTitle(requestDetails, protectionsEnabled) {
const state = requestDetails.state(protectionsEnabled)
switch (state) {
case states.protectionsOn_blocked:
case states.protectionsOn_blocked_allowedTrackers:
case states.protectionsOn_blocked_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers_allowedNonTrackers: {
return {
title: ns.site('trackerNetworksDesc.title'),
icon: 'blocked',
}
return ns.site('trackerNetworksDesc.title')
}
case states.protectionsOn_allowedTrackers_allowedNonTrackers:
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return {
title: ns.site('trackerNetworksNotBlocked.title'),
icon: 'info',
}
}
case states.protectionsOn_allowedFirstParty_allowedNonTrackers:
case states.protectionsOff_allowedTrackers:
case states.protectionsOff_allowedTrackers_allowedNonTrackers: {
return {
title: ns.site('trackerNetworksNotBlocked.title'),
icon: 'warning',
}
return ns.site('trackerNetworksNotBlocked.title')
}
case states.protectionsOn:
case states.protectionsOff:
case states.protectionsOn_allowedNonTrackers:
case states.protectionsOff_allowedNonTrackers: {
return {
title: ns.site('trackerNetworksNotFound.title'),
icon: 'blocked',
}
return ns.site('trackerNetworksNotFound.title')
}
// if no 3rd party requests were observed in any way, then we use the 'nothing found' messaging
default:
return unreachable(state)
}
}

/**
* @param {import("../../../browser/utils/request-details.mjs").RequestDetails} requestDetails
* @param {any} protectionsEnabled
* @param {boolean} [phishingDetected]
* @returns {'info'|'blocked'|'warning'}
*/
export function trackerNetworksIcon(requestDetails, protectionsEnabled, phishingDetected) {
if (phishingDetected) {
return 'info'
}

const state = requestDetails.state(protectionsEnabled)
switch (state) {
case states.protectionsOn_blocked:
case states.protectionsOn_blocked_allowedTrackers:
case states.protectionsOn_blocked_allowedNonTrackers:
case states.protectionsOn_blocked_allowedTrackers_allowedNonTrackers:
case states.protectionsOn:
case states.protectionsOff:
case states.protectionsOn_allowedNonTrackers:
case states.protectionsOff_allowedNonTrackers: {
return 'blocked'
}
case states.protectionsOn_allowedTrackers_allowedNonTrackers:
case states.protectionsOn_allowedTrackers:
case states.protectionsOn_allowedFirstParty:
case states.protectionsOn_allowedFirstParty_allowedNonTrackers: {
return 'info'
}
case states.protectionsOff_allowedTrackers:
case states.protectionsOff_allowedTrackers_allowedNonTrackers: {
return 'warning'
}
// if no 3rd party requests were observed in any way, then we use the 'nothing found' messaging
default:
Expand Down
12 changes: 8 additions & 4 deletions shared/js/ui/views/main-nav.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import html from 'nanohtml'
import { trackerNetworksText } from '../templates/shared/tracker-networks-text.js'
import { thirdpartyText } from '../templates/shared/thirdparty-text.js'
import { trackerNetworksTitle, trackerNetworksIcon } from '../templates/shared/tracker-networks-text.js'
import { thirdpartyTitle, thirdpartyIcon } from '../templates/shared/thirdparty-text.js'
import { i18n } from '../base/localize.js'
import { httpsMessages } from '../../../data/constants'
import { states } from '../../browser/utils/request-details.mjs'
Expand Down Expand Up @@ -114,7 +114,9 @@ function renderConnectionText(model) {
* @param {import('../models/site.js').PublicSiteModel} model
*/
function renderTrackerNetworksNew(model, cb) {
const { title, icon } = trackerNetworksText(model.tab.requestDetails, model.protectionsEnabled)
const title = trackerNetworksTitle(model.tab.requestDetails, model.protectionsEnabled)
const icon = trackerNetworksIcon(model.tab.requestDetails, model.protectionsEnabled, model.tab.phishingStatus)

return html` <a
href="javascript:void(0)"
class="main-nav__item main-nav__item--link link-action link-action--dark"
Expand All @@ -133,7 +135,9 @@ function renderTrackerNetworksNew(model, cb) {
* @param {import('../models/site.js').PublicSiteModel} model
*/
function renderThirdPartyNew(model, cb) {
const { title, icon } = thirdpartyText(model.tab.requestDetails, model.protectionsEnabled)
const title = thirdpartyTitle(model.tab.requestDetails, model.protectionsEnabled)
const icon = thirdpartyIcon(model.tab.requestDetails, model.protectionsEnabled, model.tab.phishingStatus)

return html` <a
href="javascript:void(0)"
class="main-nav__item main-nav__item--link link-action link-action--dark"
Expand Down

0 comments on commit 53fd1a0

Please sign in to comment.