Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Privacy mode: instead of blurring, use an illegible font (#3376) #3377

Merged

Conversation

olets
Copy link
Contributor

@olets olets commented Sep 6, 2024

Instead of blurring, uses the font Redacted Script https://github.com/christiannaths/redacted-font#redacted-script.

The good: much more private

Edit: the following limitation no longer applies (see #3377 (review))

The touchy: this font's sizing isn't identical to the non-private font. In some cases there's a minor layout shift on hover, and/or when toggling between modes.

The implementation support per-element line-height customization, and could easily be extended to support per-element letter-spacing. I haven't gone deep down that rabbit hole, only customizing line height on the two large font size numbers, where the difference is more significant.

screenshotimage
screencap, updated
actual-privacy-mode-redacted-font-2.mov
OLD outdated screencapture, for posterity
actual-privacy-mode-redacted-font.mov

@actual-github-bot actual-github-bot bot changed the title Privacy mode: instead of blurring, use an illegible font (#3376) [WIP] Privacy mode: instead of blurring, use an illegible font (#3376) Sep 6, 2024
Copy link

netlify bot commented Sep 6, 2024

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 134180d
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/66f5a0ed28bd55000703970f
😎 Deploy Preview https://deploy-preview-3377.demo.actualbudget.org
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@olets olets force-pushed the 3376-decrease-privacy-mode-legibility branch from a78736f to 49b25c0 Compare September 6, 2024 01:17
Copy link
Contributor

github-actions bot commented Sep 6, 2024

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
9 5.29 MB → 5.29 MB (-598 B) -0.01%
Changeset
File Δ Size
src/components/PrivacyFilter.tsx 📈 +177 B (+5.56%) 3.11 kB → 3.28 kB
src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx 📈 +40 B (+1.82%) 2.15 kB → 2.19 kB
package.json 📈 +43 B (+1.40%) 3 kB → 3.04 kB
src/components/reports/reports/CustomReport.tsx 📉 -48 B (-0.21%) 22.45 kB → 22.41 kB
src/components/table.tsx 📉 -100 B (-0.40%) 24.33 kB → 24.23 kB
src/components/reports/reports/NetWorth.jsx 📉 -36 B (-0.60%) 5.9 kB → 5.87 kB
src/components/budget/tracking/TrackingBudgetComponents.tsx 📉 -130 B (-0.97%) 13.05 kB → 12.92 kB
src/components/reports/reports/Spending.tsx 📉 -200 B (-0.97%) 20.05 kB → 19.85 kB
src/components/budget/tracking/budgetsummary/Saved.tsx 📉 -30 B (-1.12%) 2.61 kB → 2.58 kB
src/components/reports/ReportSummary.tsx 📉 -64 B (-1.60%) 3.9 kB → 3.84 kB
src/components/budget/envelope/EnvelopeBudgetComponents.tsx 📉 -250 B (-1.73%) 14.09 kB → 13.84 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

Asset File Size % Changed
static/js/ReportRouter.js 1.5 MB → 1.5 MB (-348 B) -0.02%
static/js/index.js 3.31 MB → 3.31 MB (-250 B) -0.01%

Unchanged

Asset File Size % Changed
static/js/resize-observer.js 18.37 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/AppliedFilters.js 20.97 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/usePreviewTransactions.js 1.64 kB 0%
static/js/narrow.js 82.1 kB 0%
static/js/wide.js 225.27 kB 0%

Copy link
Contributor

github-actions bot commented Sep 6, 2024

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
1 1.19 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.js 1.19 MB 0%

@olets olets force-pushed the 3376-decrease-privacy-mode-legibility branch from 49b25c0 to 7f01cd7 Compare September 6, 2024 01:24
@joel-jeremy
Copy link
Contributor

This looks cool :) I wonder if moving the privacy filter to wrap the text instead of the entire component would fix the shifting

Copy link
Contributor Author

@olets olets left a comment

Choose a reason for hiding this comment

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

Found the convention for using classes. I thought Actual was inline style only 😅 That opened doors. The layout shift is gone.

actual-privacy-mode-redacted-font-2.mov

Comment on lines -200 to -204
style: {
position: 'absolute',
width: '100%',
height: '100%',
},
Copy link
Contributor Author

@olets olets Sep 6, 2024

Choose a reason for hiding this comment

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

This appears to be safe to remove. But I'm also not sure why it's in current master. So I may be missing some edge case not covered by the visual tests, and this might need to be reverted.

[
{
display: 'inline-flex',
position: 'relative',
Copy link
Contributor Author

@olets olets Sep 6, 2024

Choose a reason for hiding this comment

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

Potentially breaking. I didn't notice any instances where PrivacyFilter content is positioned relative to something higher up the DOM. Doesn't break the visual tests, but I don't know how completely those cover the app. If someone else knows that this will be a problem, lmk

@olets olets force-pushed the 3376-decrease-privacy-mode-legibility branch 2 times, most recently from cbd9de3 to f8e0530 Compare September 6, 2024 20:42
@olets
Copy link
Contributor Author

olets commented Sep 6, 2024

For the breaking test I'd like help from someone more experienced with this project.

"Budget › transfer funds to another category" fails for this PR in GitHub Actions but passes for me locally.

Fwiw, locally I've seen "Onboarding > creates a new empty budget file" and "Accounts › Budgeted Accounts > creates a transfer from two existing transactions" be flaky.

Per https://github.com/actualbudget/actual/blob/master/packages/desktop-client/README.md#visual-regression, to run the tests locally I'm doing HTTPS=true yarn start and then, in another terminal, yarn vrt:docker.

@olets olets force-pushed the 3376-decrease-privacy-mode-legibility branch from f8e0530 to b21f57f Compare September 6, 2024 21:05
@joel-jeremy
Copy link
Contributor

joel-jeremy commented Sep 7, 2024

For the breaking test I'd like help from someone more experienced with this project.

"Budget › transfer funds to another category" fails for this PR in GitHub Actions but passes for me locally.

Fwiw, locally I've seen "Onboarding > creates a new empty budget file" and "Accounts › Budgeted Accounts > creates a transfer from two existing transactions" be flaky.

Per https://github.com/actualbudget/actual/blob/master/packages/desktop-client/README.md#visual-regression, to run the tests locally I'm doing HTTPS=true yarn start and then, in another terminal, yarn vrt:docker.

Have you tried yarn vrt:docker --update-snapshots?

@olets
Copy link
Contributor Author

olets commented Sep 7, 2024

Okay I did

git checkout [branch]
yarn install
HTTPS=true yarn start

and then in another terminal yarn vrt:docker --update-snapshots

once on master and once for this PR's branch. Those results, plus the GitHub Actions result or comparison:

Test master, olets' local this PR's branch, olets' local this PR's branch, GitHub Actions
Onboarding › creates a new budget file by importing nYNAB budget 🔴 Fail 🔴 Fail 🟢 Pass
Onboarding › creates a new empty budget file 🟢 Pass 🟡 Flaky 🟢 Pass
Accounts › Budgeted Accounts › creates a transfer from two existing transactions 🔴 Fail 🟢 Pass 🟢 Pass
Mobile › opens individual account page and checks that filtering is working 🔴 Fail 🔴 Fail 🟢 Pass
Reports › loads net worth and cash flow reports 🟡 Flaky 🟡 Flaky 🟢 Pass
Budget › transfer funds to another category 🟢 Pass 🟢 Pass 🔴 Fail

Based on my browser testing and the changeset, I expect all tests to pass.

@joel-jeremy
Copy link
Contributor

We're getting there :) You need to push the new screenshots that were updated due to the --update-screenshots flag.

Copy link
Contributor

👋 Hi! It looks like this PR has not had any changes for a week now. Would you like someone to review this PR? If so - please remove the "[WIP]" prefix from the PR title. That will let the community know that this PR is open for a review.

@github-actions github-actions bot added the Stale label Sep 16, 2024
@olets olets force-pushed the 3376-decrease-privacy-mode-legibility branch from b21f57f to 1a774d4 Compare September 16, 2024 19:13
@olets olets changed the title [WIP] Privacy mode: instead of blurring, use an illegible font (#3376) Privacy mode: instead of blurring, use an illegible font (#3376) Sep 16, 2024
@joel-jeremy joel-jeremy removed the Stale label Sep 16, 2024
@joel-jeremy
Copy link
Contributor

That's odd. @MatissJanis Any idea why would the screenshots show up as added instead of modified?

@olets
Copy link
Contributor Author

olets commented Sep 16, 2024

Heh that's why I hadn't added them before. Note that none of them include private mode text either.

@MatissJanis
Copy link
Member

That's odd. @MatissJanis Any idea why would the screenshots show up as added instead of modified?

I'm guessing the VRT command got ran outside the docker container (on a local machine). Please remove them and re-run the VRT tests inside docker. Here are the instructions: https://github.com/actualbudget/actual/blob/master/packages/desktop-client/README.md

@olets
Copy link
Contributor Author

olets commented Sep 16, 2024

@MatissJanis I ran yarn vrt:docker --update-snapshots. Details of what all I ran are further up in this thread.

@MatissJanis
Copy link
Member

Perfect. Then undo all the screenshot changes you did here and re-run that command once more. The output will be updates to screenshots.

@MikesGlitch
Copy link
Contributor

MikesGlitch commented Sep 17, 2024

@coderabbitai full review

Copy link
Contributor

coderabbitai bot commented Sep 17, 2024

@MikesGlitch: Understood, I will perform a full review of the pull request.

Actions performed

Full review triggered.

@olets
Copy link
Contributor Author

olets commented Sep 25, 2024

Re #3377 (comment)

The budget cell seem to have shrunk

Updated @joel-jeremy

master public master private this PR public this PR private
master branch public mode master branch private mode PR branch public mode PR branch private mode

@matt-fidd
Copy link
Contributor

@olets would be great to get this into the next release (start of October), would you mind having a look at the merge conflict please and then we'll get a review in?

@youngcw youngcw linked an issue Sep 25, 2024 that may be closed by this pull request
2 tasks
@MikesGlitch MikesGlitch self-assigned this Sep 26, 2024
@olets olets force-pushed the 3376-decrease-privacy-mode-legibility branch from b4005db to a1d0dce Compare September 26, 2024 17:47
@olets olets force-pushed the 3376-decrease-privacy-mode-legibility branch from c3a0833 to 134180d Compare September 26, 2024 17:59
Copy link
Contributor

@MikesGlitch MikesGlitch left a comment

Choose a reason for hiding this comment

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

This is excellent work. LGTM!

I'll wait for another review since others have given feedback.

@olets
Copy link
Contributor Author

olets commented Sep 26, 2024

That second-to-last CI run was "fixed" by git commit --amend --no-editing the "breaking" commit. Something's definitely brittle in the visual regression workflow.

Copy link
Contributor

@joel-jeremy joel-jeremy left a comment

Choose a reason for hiding this comment

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

LGTM! Thank you for your efforts on this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] privacy mode: decrease visual legibility of redacted content
7 participants