Privacy mode: instead of blurring, use an illegible font (#3376) #3377
Conversation
actual-github-bot
bot
changed the title
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
olets
force-pushed
the
3376-decrease-privacy-mode-legibility
branch
from
a78736f
to
49b25c0
Compare
Bundle Stats — desktop-clientHey 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
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller
Unchanged
|
Bundle Stats — loot-coreHey 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
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller
Unchanged No assets were unchanged |
olets
force-pushed
the
3376-decrease-privacy-mode-legibility
branch
from
49b25c0
to
7f01cd7
Compare
|
This looks cool :) I wonder if moving the privacy filter to wrap the text instead of the entire component would fix the shifting |
| style: { | ||
| position: 'absolute', | ||
| width: '100%', | ||
| height: '100%', | ||
| }, |
There was a problem hiding this comment.
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.
| @@ -175,6 +175,7 @@ export const GroupMonth = memo(function GroupMonth({ | |||
| valueProps={{ | |||
| binding: reportBudget.groupBalance(id), | |||
| type: 'financial', | |||
| // TODO: may no longer be unnecessary | |||
There was a problem hiding this comment.
Haven't found where this appears in the UI. Can someone point me to it?
| [ | ||
| { | ||
| display: 'inline-flex', | ||
| position: 'relative', |
There was a problem hiding this comment.
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
force-pushed
the
3376-decrease-privacy-mode-legibility
branch
2 times, most recently
from
cbd9de3
to
f8e0530
Compare
|
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 |
olets
force-pushed
the
3376-decrease-privacy-mode-legibility
branch
from
f8e0530
to
b21f57f
Compare
Have you tried |
|
Okay I did and then in another terminal once on
|
|
We're getting there :) You need to push the new screenshots that were updated due to the |
|
👋 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. |
olets
force-pushed
the
3376-decrease-privacy-mode-legibility
branch
from
b21f57f
to
1a774d4
Compare
olets
changed the title
|
That's odd. @MatissJanis Any idea why would the screenshots show up as added instead of modified? |
|
Heh that's why I hadn't added them before. Note that none of them include private mode text either. |
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 |
|
@MatissJanis I ran |
|
Perfect. Then undo all the screenshot changes you did here and re-run that command once more. The output will be updates to screenshots. |
|
@coderabbitai full review |
|
@MikesGlitch: Understood, I will perform a full review of the pull request. Actions performedFull review triggered. |
WalkthroughThe changes involve the addition of a new font dependency, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PrivacyFilter
participant PrivacyOverlay
participant Component
User->>Component: Interacts with component
Component->>PrivacyFilter: Render without blurIntensity
PrivacyFilter->>PrivacyOverlay: Manage hover state
PrivacyOverlay->>User: Show/hide content based on hover
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
olets
force-pushed
the
3376-decrease-privacy-mode-legibility
branch
from
96f9885
to
c9beb9a
Compare
|
Removed the snapshot updates, reran tests, no snapshot files were generated, and everything passes 🎉 Thanks for the assistance. This is the first time in dozens of local runs that I've seen this branch pass. It's the first time in seven GitHub Actions runs that its results have matched my local for this branch. Fwiw the "Mobile › opens individual account page and checks that filtering is working" test is failing for me locally on the |
|
Nice! We're nearly there. I think there is one remaining item. The budget cell seem to have shrunk: Once that's addressed I think we're good to go! :) |
|
Really excited for this feature! |
|
@joel-jeremy good catch. While I'm in here: now that PrivacyFilter uses glamor, is there still a reason to use JS state for hover rather than CSS :hover? Were you accounting for some edge case or can I safely make the switch? Using :hover would make it easier to debug the cell height. |
Feel free to use :hover as long as it's functionally the same :) I just avoided glamor early on because I was also attempting to migrate to a different CSS library at the time. So I tried to minimize usage of glamor but realized there's no point doing that. It's easier to use className + glamor then replace glamor later on than doing inline styles now then migrating. |
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-elementline-heightcustomization, and could easily be extended to support per-elementletter-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
Summary by CodeRabbit
New Features
Bug Fixes
PrivacyFiltercomponent, improving user interaction and visual effects.Documentation