Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

add 3rd party fingerprinting block option #10181

Merged
merged 3 commits into from
Aug 15, 2017
Merged

add 3rd party fingerprinting block option #10181

merged 3 commits into from
Aug 15, 2017

Conversation

diracdeltas
Copy link
Member

@diracdeltas diracdeltas commented Jul 28, 2017

fix #9029

regular panel:
screen shot 2017-08-02 at 12 09 21 am

compact:
screen shot 2017-08-02 at 12 09 45 am

Submitter Checklist:

  • Submitted a ticket for my issue if one did not already exist.
  • Used Github auto-closing keywords in the commit message.
  • Added/updated tests for this change (for new code or code which already has tests).
  • Ran git rebase -i to squash commits (if needed).
  • Tagged reviewers and labelled the pull request as needed.

Test Plan:

Reviewer Checklist:

Tests

  • Adequate test coverage exists to prevent regressions
  • Tests should be independent and work correctly when run individually or as a suite ref
  • New files have MPL2 license header

docs/state.md Outdated
@@ -69,6 +69,12 @@ AppStore
cookieblockAll: {
enabled: boolean // enable all cookie/referer blocking
},
fingerprintingProtection: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sort this alphabetically

@diracdeltas diracdeltas added this to the 0.21.x (Nightly Channel) milestone Aug 2, 2017
@diracdeltas diracdeltas changed the title WIP: add 3rd party fingerprinting block option add 3rd party fingerprinting block option Aug 2, 2017
@@ -85,3 +85,6 @@
}
}
}
.pullRight {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a fix which is much more straightforward. please wait for a moment.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++ please feel free to push to this branch (but do not rebase or squash commits)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done bcdfa30

@luixxiul
Copy link
Contributor

luixxiul commented Aug 2, 2017

CC @bradleyrichter for review:

screenshot 2017-08-03 5 16 28

We could align the switches to a left row like this:

screenshot 2017-08-03 5 20 27

Which one is better?

@diracdeltas
Copy link
Member Author

the fp setting was right-aligned because that is where it was before (so people might be used to clicking in that area), but i don't have a strong opinion. actually i think 3 rows with 2 items each would look best.

@luixxiul
Copy link
Contributor

luixxiul commented Aug 3, 2017

that would be look like this:

screenshot 2017-08-03 11 10 43

screenshot 2017-08-03 11 12 25

@diracdeltas
Copy link
Member Author

@luixxiul i like the last one the most because it matches with our existing placement

@bradleyrichter
Copy link
Contributor

bradleyrichter commented Aug 3, 2017 via email

@luixxiul
Copy link
Contributor

luixxiul commented Aug 3, 2017

@diracdeltas @bradleyrichter OK, so should we tag this PR as WIP for now?

@luixxiul luixxiul added the needs-info Another team member needs information from the PR/issue opener. label Aug 3, 2017
@diracdeltas
Copy link
Member Author

This is blocking some work that others are doing on improving fingerprinting protection, so I would prefer it not be pushed to a later milestone. Why can't we just do compact-panel only?

@diracdeltas
Copy link
Member Author

Can i get this approved and then @bradleyrichter open up a follow-up issue for the UI tweak?

@diracdeltas diracdeltas removed the request for review from NejcZdovc August 4, 2017 17:21
luixxiul pushed a commit that referenced this pull request Aug 5, 2017
Also:
- Add globalStyles.appIcons.question

Addresses #9029

Auditors: @cezaraugusto

Test Plan:
1. Open about:preferences#shields
2. Enable compact panel
3. Open https://twitter.com
4. Open compact panel
5. Make sure the fp block pulldown is placed properly
6. Disable compact panel
7. Open twitter.com again
8. Open the default panel
9. Make sure the fp pulldown is placed properly
@@ -241,21 +241,22 @@ const globalStyles = {
prefsPanelHeading: '23px'
},
appIcons: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

elements below this are alphabetized.

styles.braveryPanel__body__advanced__control__forms__title
)}>
<span data-l10n-id='fingerprintingProtection' />
<span className={globalStyles.appIcons.question}
Copy link
Contributor

@luixxiul luixxiul Aug 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

braveryPanel__body__advanced__control__fpWrapper is created to wrap the l10n string and the question mark to align them with flex.

@Jacalz
Copy link
Contributor

Jacalz commented Aug 5, 2017

From a users perspective I think this looks best:
screenshot 2017-08-03 5 16 28
This makes it possible to add two more things to the panel in the future, one with a drop down menu and also one with a switch 🙂

@@ -675,6 +675,28 @@ module.exports.runPreMigrations = (data) => {
}

module.exports.runPostMigrations = (data) => {
// fingerprinting protection migration
Copy link
Member

@bsclifton bsclifton Aug 7, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not that we have to do it now... but I'm Curious what you think @diracdeltas and @darkdh

Similar to Ruby and Python, maybe we could create a /migrations/ folder and have a single file (ex: 0-20-0_1st_3rd_fingerprint) with a two possible functions (postMigrate, preMigrate) for each type of migration that we'd like to run.

We could then call them like so:

module.exports.runPostMigrations = (data) => {
  migrations = [
    require('../migrations/0-12-0_search_xml'),
    require('../migrations/0-14-0_autofill_data'),
    require('../migrations/0-20-0_1st_3rd_fingerprint')
  ]
  migrations.runPostMigrations()
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like this idea ++

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm for a migrations-migration. :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We were talking with @bbondy when can we remove some old migrations from session store file and this solution would solve it. What I would suggest as well is to create an upgrade script. So it automatically check if file for that version exists or not. For example: let's say that you are upgrading from 0.10 to 0.15.4. When we start the upgrade process we determinate that we need to check versions 0.10.x to 0.15.4 (it can be many versions in between, hot fixes). Then we check if file migration/0.10.15.js (hot fix) exist and if so run both pre and post migration. Then you check if migration/0.11.jsexist and so on. I would have one file per version and it would be standardized with predefined functions. This way we know exactly what was added/removed in which version.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++ for aggregated migrations. We have many migration scattered around now and some of them are made by me 😝

@bsclifton bsclifton mentioned this pull request Aug 7, 2017
8 tasks
@diracdeltas diracdeltas removed needs-info Another team member needs information from the PR/issue opener. PR/needs-rebase ۞ labels Aug 15, 2017
@diracdeltas
Copy link
Member Author

This has been updated to use @Jacalz's recommended layout. @bsclifton can you review?

@bradleyrichter
Copy link
Contributor

I think what @Jacalz added above will be fine for now. I am adding another switch so I will re-examine the layout very soon.

@luixxiul Can you adjust the layout as shown above?

@diracdeltas
Copy link
Member Author

@bradleyrichter see my comment above yours. no need to adjust since i already did.

@luixxiul
Copy link
Contributor

Let me confirm the adjustment by @diracdeltas.

@bradleyrichter
Copy link
Contributor

oops. sorry @diracdeltas. Thanks...

diracdeltas and others added 3 commits August 15, 2017 01:22
Also:
- Add globalStyles.appIcons.question

Addresses #9029

Auditors: @cezaraugusto

Test Plan:
1. Open about:preferences#shields
2. Enable compact panel
3. Open https://twitter.com
4. Open compact panel
5. Make sure the fp block pulldown is placed properly
6. Disable compact panel
7. Open twitter.com again
8. Open the default panel
9. Make sure the fp pulldown is placed properly
@luixxiul
Copy link
Contributor

LGTM!

@codecov-io
Copy link

codecov-io commented Aug 15, 2017

Codecov Report

Merging #10181 into master will decrease coverage by 0.06%.
The diff coverage is 43.18%.

@@            Coverage Diff             @@
##           master   #10181      +/-   ##
==========================================
- Coverage   54.35%   54.29%   -0.07%     
==========================================
  Files         245      245              
  Lines       21085    21117      +32     
  Branches     3249     3258       +9     
==========================================
+ Hits        11461    11465       +4     
- Misses       9624     9652      +28
Flag Coverage Δ
#unittest 54.29% <43.18%> (-0.07%) ⬇️
Impacted Files Coverage Δ
js/constants/settings.js 100% <ø> (ø) ⬆️
app/renderer/components/styles/global.js 100% <ø> (ø) ⬆️
js/constants/appConfig.js 100% <ø> (ø) ⬆️
js/state/syncUtil.js 39.35% <0%> (-0.31%) ⬇️
js/state/siteSettings.js 91.39% <100%> (+0.66%) ⬆️
js/about/preferences.js 43.85% <15.38%> (-0.07%) ⬇️
app/sessionStore.js 62.74% <50%> (-2.37%) ⬇️

@bsclifton
Copy link
Member

I created #10488 so that we don't lose the ideas mentioned here 😄

Copy link
Member

@bsclifton bsclifton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look great (implementation matches spec, blocking/unblocking fingerprint works great) 😄 Awesome job on the tests!

@diracdeltas can you add some manual tests steps (if required)? ex: a website that uses 3rd party fingerprinting. If it's covered by tests, let's tag this as QA/no-qa-needed 👍

BTW- do we need to update the wiki?
https://github.com/brave/browser-laptop/wiki/Fingerprinting-Protection-Mode

@bsclifton bsclifton merged commit e8f32db into master Aug 15, 2017
@bsclifton bsclifton deleted the feature/9029 branch August 15, 2017 05:49
@bsclifton
Copy link
Member

bsclifton commented Aug 15, 2017

NOTE: I updated the original issue with a link to a jsfiddle where 3rd party fingerprint block can be tested:
https://jsfiddle.net/bkf50r8v/13/

@luixxiul luixxiul mentioned this pull request Aug 15, 2017
8 tasks
dfperry5 pushed a commit to dfperry5/browser-laptop that referenced this pull request Aug 18, 2017
Also:
- Add globalStyles.appIcons.question

Addresses brave#9029

Auditors: @cezaraugusto

Test Plan:
1. Open about:preferences#shields
2. Enable compact panel
3. Open https://twitter.com
4. Open compact panel
5. Make sure the fp block pulldown is placed properly
6. Disable compact panel
7. Open twitter.com again
8. Open the default panel
9. Make sure the fp pulldown is placed properly
@bbondy bbondy modified the milestones: 0.21.x (Developer Channel), 0.20.x (Beta Channel) Oct 25, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fingerprinting protection should distinguish between first and third party
9 participants