Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Feedback modal UI tweaks - #4492

Merged
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui
Feb 11, 2025
Merged

Feedback modal UI tweaks#4492
krystofwoldrich merged 13 commits into
feedback-uifrom
antonis/feedback-modal-ui

Conversation

@antonis

@antonisantonis commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4435

📜 Description

  • Disables FeedbackForm bouncing
  • Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots
iPhone 16 Pro with notchiPhone SE without notch
Simulator Screenshot - iPhone 16 Pro - 2025-01-30 at 16 14 30Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-30 at 16 14 24
Pixel 8 Pro with camera notchPixel 2 with bottom buttons
Screenshot_20250130_161359Screenshot_1738246455

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time378.57 ms423.94 ms45.37 ms
Size7.15 MiB8.39 MiB1.23 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
269c976+dirty395.13 ms438.37 ms43.24 ms
e5d5735+dirty377.37 ms430.04 ms52.67 ms
9402883+dirty436.49 ms518.94 ms82.45 ms
0459aee+dirty424.10 ms466.63 ms42.53 ms
8cb898b+dirty393.33 ms416.20 ms22.87 ms
0325426+dirty418.89 ms485.00 ms66.11 ms
6b1624f+dirty382.17 ms441.00 ms58.83 ms
3e4cdf5+dirty642.13 ms702.23 ms60.10 ms
2646c98+dirty415.13 ms438.41 ms23.28 ms

App size

RevisionPlainWith SentryDiff
269c976+dirty7.15 MiB8.39 MiB1.23 MiB
e5d5735+dirty7.15 MiB8.39 MiB1.23 MiB
9402883+dirty7.15 MiB8.39 MiB1.23 MiB
0459aee+dirty7.15 MiB8.38 MiB1.23 MiB
8cb898b+dirty7.15 MiB8.39 MiB1.24 MiB
0325426+dirty7.15 MiB8.38 MiB1.23 MiB
6b1624f+dirty7.15 MiB8.39 MiB1.23 MiB
3e4cdf5+dirty7.15 MiB8.39 MiB1.23 MiB
2646c98+dirty7.15 MiB8.38 MiB1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
de197fe+dirty354.64 ms397.88 ms43.23 ms
47b8d2f+dirty356.43 ms403.11 ms46.69 ms
5bd21c5+dirty355.61 ms403.40 ms47.79 ms
8216878+dirty347.88 ms363.18 ms15.30 ms
bfcb8e8+dirty433.59 ms508.79 ms75.20 ms

App size

RevisionPlainWith SentryDiff
de197fe+dirty7.15 MiB8.39 MiB1.24 MiB
47b8d2f+dirty7.15 MiB8.39 MiB1.23 MiB
5bd21c5+dirty7.15 MiB8.39 MiB1.24 MiB
8216878+dirty7.15 MiB8.39 MiB1.24 MiB
bfcb8e8+dirty7.15 MiB8.39 MiB1.23 MiB

@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

iOS (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time1227.04 ms1229.16 ms2.12 ms
Size2.63 MiB3.71 MiB1.07 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f+dirty1224.65 ms1225.65 ms1.00 ms
8cb898b+dirty1221.40 ms1231.78 ms10.37 ms
269c976+dirty1210.02 ms1204.46 ms-5.56 ms
0325426+dirty1228.88 ms1229.92 ms1.04 ms
2646c98+dirty1218.51 ms1218.92 ms0.41 ms
9402883+dirty1219.65 ms1217.94 ms-1.72 ms
e5d5735+dirty1222.02 ms1222.22 ms0.20 ms
3e4cdf5+dirty1222.53 ms1224.42 ms1.89 ms
0459aee+dirty1232.82 ms1231.19 ms-1.63 ms

App size

RevisionPlainWith SentryDiff
6b1624f+dirty2.63 MiB3.71 MiB1.07 MiB
8cb898b+dirty2.63 MiB3.71 MiB1.08 MiB
269c976+dirty2.63 MiB3.69 MiB1.06 MiB
0325426+dirty2.63 MiB3.69 MiB1.06 MiB
2646c98+dirty2.63 MiB3.69 MiB1.06 MiB
9402883+dirty2.63 MiB3.71 MiB1.07 MiB
e5d5735+dirty2.63 MiB3.69 MiB1.06 MiB
3e4cdf5+dirty2.63 MiB3.69 MiB1.06 MiB
0459aee+dirty2.63 MiB3.69 MiB1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1220.35 ms1222.86 ms2.51 ms
47b8d2f+dirty1224.20 ms1226.63 ms2.42 ms
bfcb8e8+dirty1218.14 ms1223.16 ms5.02 ms
5bd21c5+dirty1232.90 ms1229.58 ms-3.31 ms
de197fe+dirty1222.35 ms1224.57 ms2.22 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty2.63 MiB3.71 MiB1.08 MiB
47b8d2f+dirty2.63 MiB3.71 MiB1.07 MiB
bfcb8e8+dirty2.63 MiB3.71 MiB1.07 MiB
5bd21c5+dirty2.63 MiB3.71 MiB1.08 MiB
de197fe+dirty2.63 MiB3.71 MiB1.08 MiB

@antonis
antonis marked this pull request as ready for review January 30, 2025 14:32
Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@github-actions

github-actionsBot commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Android (legacy) Performance metrics 🚀

PlainWith SentryDiff
Startup time431.23 ms465.60 ms34.37 ms
Size17.75 MiB20.12 MiB2.37 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
6b1624f462.78 ms465.13 ms2.35 ms
9402883448.53 ms468.73 ms20.20 ms
0459aee491.48 ms486.13 ms-5.35 ms
269c976448.08 ms428.86 ms-19.22 ms
8cb898b438.83 ms420.58 ms-18.25 ms
e5d5735452.70 ms453.04 ms0.34 ms
0325426477.32 ms457.43 ms-19.89 ms
3e4cdf5462.35 ms474.96 ms12.61 ms
2646c98429.98 ms421.63 ms-8.35 ms

App size

RevisionPlainWith SentryDiff
6b1624f17.75 MiB20.12 MiB2.37 MiB
940288317.75 MiB20.12 MiB2.37 MiB
0459aee17.75 MiB20.12 MiB2.37 MiB
269c97617.75 MiB20.12 MiB2.37 MiB
8cb898b17.75 MiB20.12 MiB2.37 MiB
e5d573517.75 MiB20.12 MiB2.37 MiB
032542617.75 MiB20.12 MiB2.37 MiB
3e4cdf517.75 MiB20.12 MiB2.37 MiB
2646c9817.75 MiB20.12 MiB2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
5bd21c5422.60 ms437.37 ms14.76 ms
47b8d2f465.92 ms481.88 ms15.96 ms
bfcb8e8437.53 ms465.48 ms27.95 ms
8216878434.78 ms431.30 ms-3.48 ms
de197fe471.60 ms457.30 ms-14.30 ms

App size

RevisionPlainWith SentryDiff
5bd21c517.75 MiB20.12 MiB2.37 MiB
47b8d2f17.75 MiB20.12 MiB2.37 MiB
bfcb8e817.75 MiB20.12 MiB2.37 MiB
821687817.75 MiB20.12 MiB2.37 MiB
de197fe17.75 MiB20.12 MiB2.37 MiB

Comment threadpackages/core/src/js/feedback/FeedbackForm.styles.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

@github-actions

github-actionsBot commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

iOS (new) Performance metrics 🚀

PlainWith SentryDiff
Startup time1224.04 ms1227.31 ms3.27 ms
Size3.19 MiB4.27 MiB1.09 MiB

Baseline results on branch: feedback-ui

Startup times

RevisionPlainWith SentryDiff
9402883+dirty1217.71 ms1213.02 ms-4.69 ms
894ebb0+dirty1210.94 ms1202.08 ms-8.85 ms
3e4cdf5+dirty1213.36 ms1221.31 ms7.95 ms
8cb898b+dirty1209.39 ms1207.57 ms-1.82 ms
2646c98+dirty1239.94 ms1246.90 ms6.96 ms
6b1624f+dirty1224.12 ms1220.73 ms-3.39 ms
0459aee+dirty1233.67 ms1239.80 ms6.12 ms
0325426+dirty1210.17 ms1216.37 ms6.20 ms
e5d5735+dirty1217.78 ms1221.80 ms4.02 ms
269c976+dirty1223.29 ms1222.90 ms-0.39 ms

App size

RevisionPlainWith SentryDiff
9402883+dirty3.19 MiB4.27 MiB1.09 MiB
894ebb0+dirty3.19 MiB4.27 MiB1.09 MiB
3e4cdf5+dirty3.19 MiB4.26 MiB1.07 MiB
8cb898b+dirty3.19 MiB4.28 MiB1.09 MiB
2646c98+dirty3.19 MiB4.26 MiB1.07 MiB
6b1624f+dirty3.19 MiB4.27 MiB1.09 MiB
0459aee+dirty3.19 MiB4.26 MiB1.07 MiB
0325426+dirty3.19 MiB4.26 MiB1.07 MiB
e5d5735+dirty3.19 MiB4.26 MiB1.07 MiB
269c976+dirty3.19 MiB4.26 MiB1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

RevisionPlainWith SentryDiff
8216878+dirty1215.94 ms1208.36 ms-7.57 ms
47b8d2f+dirty1228.90 ms1228.57 ms-0.33 ms
bfcb8e8+dirty1235.14 ms1225.31 ms-9.83 ms
5bd21c5+dirty1228.94 ms1220.00 ms-8.94 ms
de197fe+dirty1207.69 ms1200.61 ms-7.09 ms

App size

RevisionPlainWith SentryDiff
8216878+dirty3.19 MiB4.28 MiB1.09 MiB
47b8d2f+dirty3.19 MiB4.27 MiB1.09 MiB
bfcb8e8+dirty3.19 MiB4.27 MiB1.09 MiB
5bd21c5+dirty3.19 MiB4.28 MiB1.09 MiB
de197fe+dirty3.19 MiB4.28 MiB1.09 MiB

@antonis

antonis commented Jan 31, 2025

Copy link
Copy Markdown
ContributorAuthor

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created formModal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4
Android Animation
Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording
Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

@antonisantonis mentioned this pull request Feb 3, 2025
10 tasks

const backgroundColor = backgroundOpacity.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

q: why 0.9?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

@lucas-zimermanlucas-zimerman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@krystofwoldrich

Copy link
Copy Markdown
Contributor

Looks perfect, thank you!


Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

@krystofwoldrich
krystofwoldrich merged commit 7ec9441 into feedback-uiFeb 11, 2025
@krystofwoldrich
krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@antonis@krystofwoldrich@lucas-zimerman