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

olets · 2024-09-06T01:15:42Z

For [Feature] privacy mode: decrease visual legibility of redacted content #3376

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.

screenshot

screencap, updated

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

OLD outdated screencapture, for posterity

actual-privacy-mode-redacted-font.mov

netlify · 2024-09-06T01:15:58Z

✅ 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... Use your smartphone camera to open QR code link.

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

github-actions · 2024-09-06T01:18:44Z

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%

github-actions · 2024-09-06T01:18:45Z

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%

joel-jeremy · 2024-09-06T02:41:09Z

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

olets

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

olets · 2024-09-06T19:20:22Z

packages/desktop-client/src/components/table.tsx

-            style: {
-              position: 'absolute',
-              width: '100%',
-              height: '100%',
-            },


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.

packages/desktop-client/src/components/budget/report/ReportComponents.tsx

olets · 2024-09-06T19:23:18Z

packages/desktop-client/src/components/PrivacyFilter.tsx

+        [
+          {
+            display: 'inline-flex',
+            position: 'relative',


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 · 2024-09-06T20:51:19Z

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.

joel-jeremy · 2024-09-07T04:48:31Z

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 · 2024-09-07T22:36:40Z

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 · 2024-09-08T23:19:41Z

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

github-actions · 2024-09-16T02:01:35Z

👋 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.

joel-jeremy · 2024-09-16T20:11:38Z

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

olets · 2024-09-16T20:42:45Z

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

MatissJanis · 2024-09-16T20:57:44Z

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 · 2024-09-16T21:49:26Z

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

MatissJanis · 2024-09-17T07:02:32Z

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 · 2024-09-17T16:15:28Z

@coderabbitai full review

coderabbitai · 2024-09-17T16:16:14Z

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

Actions performed

Full review triggered.

coderabbitai

Actionable comments posted: 2

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between f689729 and b4005db.

Files selected for processing (1)

packages/desktop-client/src/components/PrivacyFilter.tsx (2 hunks)

Additional comments not posted (5)

packages/desktop-client/src/components/PrivacyFilter.tsx (5)
8-9: LGTM: Import of css from 'glamor'

The addition of the css import from 'glamor' is appropriate for the new styling approach used in the refactored component. This change enables more dynamic and flexible CSS-in-JS styling.

67-67: LGTM: Updated PrivacyFilter to use PrivacyOverlay

The change from BlurredOverlay to PrivacyOverlay is consistent with the PR objectives to replace the blurring effect with a more privacy-focused approach using an illegible font.

102-111: LGTM: Styling of the first child div

The styling of the first child div using glamor is appropriate. The use of flex display and flex-grow ensures that the content fills the available space correctly.

Line range hint 41-43: LGTM: Removal of blurIntensity prop

The removal of the blurIntensity prop from PrivacyFilterProps is appropriate given the shift from a blur effect to using an illegible font. This change simplifies the component's interface and aligns with the new privacy implementation.

81-81: Verify potential breaking change in positioning

As noted in a previous comment, there's a potential for breaking changes related to positioning of PrivacyFilter content relative to higher DOM elements. While visual tests have passed, it's crucial to thoroughly investigate this across the application.

To ensure there are no unexpected layout shifts or positioning issues, please run the following verification steps:

Review the output to identify any instances where PrivacyFilter is used in a context sensitive to positioning. Pay special attention to cases where it's nested within other positioned elements or used with specific layout techniques.

Verification successful

Potential breaking change in positioning: Verified

After reviewing all instances of the PrivacyFilter component, no positioning-related properties (position, top, left, bottom, right, transform) were found. This confirms that there are no potential breaking changes related to the positioning of PrivacyFilter within the application.
Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Description: Search for all usages of PrivacyFilter and analyze their context

# Step 1: Find all files using PrivacyFilter
echo "Files using PrivacyFilter:"
rg --type typescript --type tsx "PrivacyFilter"

# Step 2: Analyze the context of PrivacyFilter usage
echo "\nContext of PrivacyFilter usage:"
rg --type typescript --type tsx -C 5 "PrivacyFilter"

# Step 3: Look for potential positioning-related props or styles
echo "\nPotential positioning-related usage:"
rg --type typescript --type tsx -C 5 "PrivacyFilter.*position|top|left|bottom|right|transform"
Length of output: 529

Script:
#!/bin/bash
# Description: Search for all usages of PrivacyFilter and analyze their context

# Step 1: Find all files using PrivacyFilter
echo "Files using PrivacyFilter:"
rg "PrivacyFilter" --glob "*.ts" --glob "*.tsx"

# Step 2: Analyze the context of PrivacyFilter usage
echo "\nContext of PrivacyFilter usage:"
rg -C 5 "PrivacyFilter" --glob "*.ts" --glob "*.tsx"

# Step 3: Look for potential positioning-related props or styles
echo "\nPotential positioning-related usage:"
rg "PrivacyFilter.*(position|top|left|bottom|right|transform)" --glob "*.ts" --glob "*.tsx"
Length of output: 71627

packages/desktop-client/src/components/PrivacyFilter.tsx

olets · 2024-09-25T00:01:32Z

Re #3377 (comment)

The budget cell seem to have shrunk

Updated @joel-jeremy

`master` public	`master` private	this PR public	this PR private

matt-fidd · 2024-09-25T20:31:11Z

@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?

packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx

…t#3376)

actualbudget#3377

MikesGlitch

This is excellent work. LGTM!

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

olets · 2024-09-26T18:44:57Z

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.

joel-jeremy

LGTM! Thank you for your efforts on this!

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

actual-github-bot bot added the 🚧 WIP label Sep 6, 2024

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

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

olets commented Sep 6, 2024

View reviewed changes

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 force-pushed the 3376-decrease-privacy-mode-legibility branch from f8e0530 to b21f57f Compare September 6, 2024 21:05

github-actions bot added the Stale label Sep 16, 2024

olets force-pushed the 3376-decrease-privacy-mode-legibility branch from b21f57f to 1a774d4 Compare September 16, 2024 19:13

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

actual-github-bot bot added 🔍 Ready for review and removed 🚧 WIP labels Sep 16, 2024

joel-jeremy removed the Stale label Sep 16, 2024

coderabbitai bot reviewed Sep 24, 2024

View reviewed changes

packages/desktop-client/src/components/PrivacyFilter.tsx Show resolved Hide resolved

packages/desktop-client/src/components/PrivacyFilter.tsx Show resolved Hide resolved

youngcw linked an issue Sep 25, 2024 that may be closed by this pull request

[Feature] privacy mode: decrease visual legibility of redacted content #3376

Closed

2 tasks

MikesGlitch reviewed Sep 26, 2024

View reviewed changes

packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx Outdated Show resolved Hide resolved

MikesGlitch self-assigned this Sep 26, 2024

olets added 5 commits September 26, 2024 07:46

Privacy mode: instead of blurring, use an illegible font (actualbudge…

08314b9

…t#3376)

Privacy mode: no layout shift when switching mode

2e0cee8

fix(Spending): update for latest PrivacyFilter

5ba91ab

refactor(PrivacyFilter): use CSS :hover

6f0971a

chore(PrivacyFilter): no privacy mode BudgetCell height regression...

a1d0dce

actualbudget#3377

olets force-pushed the 3376-decrease-privacy-mode-legibility branch from b4005db to a1d0dce Compare September 26, 2024 17:47

chore(GroupMonth): drop no-impact PrivacyFilter styles

134180d

olets force-pushed the 3376-decrease-privacy-mode-legibility branch from c3a0833 to 134180d Compare September 26, 2024 17:59

MikesGlitch approved these changes Sep 26, 2024

View reviewed changes

actual-github-bot bot added ✅ Approved and removed 🔍 Ready for review labels Sep 26, 2024

joel-jeremy approved these changes Sep 27, 2024

View reviewed changes

joel-jeremy merged commit 686ce5b into actualbudget:master Sep 27, 2024
20 checks passed

actual-github-bot bot added ✨ Merged and removed ✅ Approved labels Sep 27, 2024

github-actions bot mentioned this pull request Sep 27, 2024

[Feature] privacy mode: decrease visual legibility of redacted content #3376

Closed

2 tasks

This was referenced Sep 27, 2024

Move file settings to the file management area #3500

Closed

[WIP] POC Budget Bar Graph #3424

Closed

Openid #2945

Open

♻️ split ImportTransactionsModal into smaller component files #3552

Merged

This was referenced Oct 4, 2024

♻️ (typescript) migrate parts of ImportTransactionModal to TS #3570

Merged

[e2e] Mobile budget menu modal VRT #3583

Open

coderabbitai bot mentioned this pull request Nov 4, 2024

Update the budget page to be printable #3780

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

olets commented Sep 6, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

joel-jeremy commented Sep 6, 2024

olets left a comment •

edited

Loading

olets Sep 6, 2024 •

edited

Loading

olets Sep 6, 2024 •

edited

Loading

olets commented Sep 6, 2024 •

edited

Loading

joel-jeremy commented Sep 7, 2024 •

edited

Loading

olets commented Sep 7, 2024 •

edited

Loading

joel-jeremy commented Sep 8, 2024

github-actions bot commented Sep 16, 2024

joel-jeremy commented Sep 16, 2024

olets commented Sep 16, 2024

MatissJanis commented Sep 16, 2024

olets commented Sep 16, 2024

MatissJanis commented Sep 17, 2024

MikesGlitch commented Sep 17, 2024 •

edited

Loading

coderabbitai bot commented Sep 17, 2024

coderabbitai bot left a comment

olets commented Sep 25, 2024 •

edited

Loading

matt-fidd commented Sep 25, 2024

MikesGlitch left a comment

olets commented Sep 26, 2024

joel-jeremy left a comment

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

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

Conversation

olets commented Sep 6, 2024 • edited by coderabbitai bot Loading

netlify bot commented Sep 6, 2024 • edited Loading

✅ Deploy Preview for actualbudget ready!

github-actions bot commented Sep 6, 2024 • edited Loading

Bundle Stats — desktop-client

github-actions bot commented Sep 6, 2024 • edited Loading

Bundle Stats — loot-core

joel-jeremy commented Sep 6, 2024

olets left a comment • edited Loading

Choose a reason for hiding this comment

olets Sep 6, 2024 • edited Loading

Choose a reason for hiding this comment

olets Sep 6, 2024 • edited Loading

Choose a reason for hiding this comment

olets commented Sep 6, 2024 • edited Loading

joel-jeremy commented Sep 7, 2024 • edited Loading

olets commented Sep 7, 2024 • edited Loading

joel-jeremy commented Sep 8, 2024

github-actions bot commented Sep 16, 2024

joel-jeremy commented Sep 16, 2024

olets commented Sep 16, 2024

MatissJanis commented Sep 16, 2024

olets commented Sep 16, 2024

MatissJanis commented Sep 17, 2024

MikesGlitch commented Sep 17, 2024 • edited Loading

coderabbitai bot commented Sep 17, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

olets commented Sep 25, 2024 • edited Loading

matt-fidd commented Sep 25, 2024

MikesGlitch left a comment

Choose a reason for hiding this comment

olets commented Sep 26, 2024

joel-jeremy left a comment

Choose a reason for hiding this comment

olets commented Sep 6, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

olets left a comment •

edited

Loading

olets Sep 6, 2024 •

edited

Loading

olets Sep 6, 2024 •

edited

Loading

olets commented Sep 6, 2024 •

edited

Loading

joel-jeremy commented Sep 7, 2024 •

edited

Loading

olets commented Sep 7, 2024 •

edited

Loading

MikesGlitch commented Sep 17, 2024 •

edited

Loading

olets commented Sep 25, 2024 •

edited

Loading