feat(feedback): Implement highlighting and hiding controls for screenshots - #15951

Merged
ryan953 merged 6 commits into
developfrom
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged

feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom
ryan953/feat-feedback-highlight-mask

Conversation

@ryan953

@ryan953ryan953 commented Apr 1, 2025•
edited
Loading

Copy link
Copy Markdown
Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft

I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.
The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.

  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.

The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.

CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm

Related to #15424
Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786

@github-actions

github-actionsBot commented Apr 1, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--

View base workflow run

@ryan953
ryan953force-pushed the ryan953/feat-feedback-highlight-mask branch from 08e387a to a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953 marked this pull request as ready for review April 2, 2025 17:11
@ryan953
ryan953 requested a review from a team as a code ownerApril 2, 2025 17:11
billyvg
billyvg approved these changes Apr 2, 2025
View reviewed changes

@billyvgbillyvg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated
@ryan953
ryan953 merged commit 2c1c189 into developApr 3, 2025
@ryan953
ryan953 deleted the ryan953/feat-feedback-highlight-mask branch April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations

2 participants

@ryan953@billyvg
, '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
feat(feedback): Implement highlighting and hiding controls for screenshots - #15951
Merged
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged
feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Conversation
@ryan953
@ryan953ryan953
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft
I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.

The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.
  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.
The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.
CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm
Related to #15424

Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786
@github-actions
github-actionsBot
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--
View base workflow run
@ryan953
ryan953force-pushed
the
ryan953/feat-feedback-highlight-mask
branch
from
08e387a to
a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953
marked this pull request as ready for review
April 2, 2025 17:11
@ryan953
ryan953
requested a review
from a team
as a code ownerApril 2, 2025 17:11
billyvg
billyvg
approved these changes
Apr 2, 2025
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

@ryan953
ryan953
merged commit 2c1c189
into
developApr 3, 2025
@ryan953
ryan953
deleted the

ryan953/feat-feedback-highlight-mask

branch
April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations


2 participants

@ryan953@billyvg

, '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
feat(feedback): Implement highlighting and hiding controls for screenshots - #15951
Merged
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged
feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Conversation
@ryan953
@ryan953ryan953
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft
I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.

The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.
  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.
The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.
CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm
Related to #15424

Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786
@github-actions
github-actionsBot
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--
View base workflow run
@ryan953
ryan953force-pushed
the
ryan953/feat-feedback-highlight-mask
branch
from
08e387a to
a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953
marked this pull request as ready for review
April 2, 2025 17:11
@ryan953
ryan953
requested a review
from a team
as a code ownerApril 2, 2025 17:11
billyvg
billyvg
approved these changes
Apr 2, 2025
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

@ryan953
ryan953
merged commit 2c1c189
into
developApr 3, 2025
@ryan953
ryan953
deleted the

ryan953/feat-feedback-highlight-mask

branch
April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations


2 participants

@ryan953@billyvg

, '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
feat(feedback): Implement highlighting and hiding controls for screenshots - #15951
Merged
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged
feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Conversation
@ryan953
@ryan953ryan953
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft
I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.

The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.
  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.
The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.
CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm
Related to #15424

Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786
@github-actions
github-actionsBot
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--
View base workflow run
@ryan953
ryan953force-pushed
the
ryan953/feat-feedback-highlight-mask
branch
from
08e387a to
a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953
marked this pull request as ready for review
April 2, 2025 17:11
@ryan953
ryan953
requested a review
from a team
as a code ownerApril 2, 2025 17:11
billyvg
billyvg
approved these changes
Apr 2, 2025
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

@ryan953
ryan953
merged commit 2c1c189
into
developApr 3, 2025
@ryan953
ryan953
deleted the

ryan953/feat-feedback-highlight-mask

branch
April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations


2 participants

@ryan953@billyvg

, '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
feat(feedback): Implement highlighting and hiding controls for screenshots - #15951
Merged
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged
feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Conversation
@ryan953
@ryan953ryan953
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft
I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.

The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.
  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.
The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.
CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm
Related to #15424

Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786
@github-actions
github-actionsBot
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--
View base workflow run
@ryan953
ryan953force-pushed
the
ryan953/feat-feedback-highlight-mask
branch
from
08e387a to
a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953
marked this pull request as ready for review
April 2, 2025 17:11
@ryan953
ryan953
requested a review
from a team
as a code ownerApril 2, 2025 17:11
billyvg
billyvg
approved these changes
Apr 2, 2025
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

@ryan953
ryan953
merged commit 2c1c189
into
developApr 3, 2025
@ryan953
ryan953
deleted the

ryan953/feat-feedback-highlight-mask

branch
April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations


2 participants

@ryan953@billyvg

, '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
feat(feedback): Implement highlighting and hiding controls for screenshots - #15951
Merged
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged
feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Conversation
@ryan953
@ryan953ryan953
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft
I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.

The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.
  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.
The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.
CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm
Related to #15424

Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786
@github-actions
github-actionsBot
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--
View base workflow run
@ryan953
ryan953force-pushed
the
ryan953/feat-feedback-highlight-mask
branch
from
08e387a to
a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953
marked this pull request as ready for review
April 2, 2025 17:11
@ryan953
ryan953
requested a review
from a team
as a code ownerApril 2, 2025 17:11
billyvg
billyvg
approved these changes
Apr 2, 2025
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

@ryan953
ryan953
merged commit 2c1c189
into
developApr 3, 2025
@ryan953
ryan953
deleted the

ryan953/feat-feedback-highlight-mask

branch
April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations


2 participants

@ryan953@billyvg

, '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
feat(feedback): Implement highlighting and hiding controls for screenshots - #15951
Merged
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged
feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Conversation
@ryan953
@ryan953ryan953
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft
I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.

The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.
  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.
The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.
CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm
Related to #15424

Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786
@github-actions
github-actionsBot
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--
View base workflow run
@ryan953
ryan953force-pushed
the
ryan953/feat-feedback-highlight-mask
branch
from
08e387a to
a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953
marked this pull request as ready for review
April 2, 2025 17:11
@ryan953
ryan953
requested a review
from a team
as a code ownerApril 2, 2025 17:11
billyvg
billyvg
approved these changes
Apr 2, 2025
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

@ryan953
ryan953
merged commit 2c1c189
into
developApr 3, 2025
@ryan953
ryan953
deleted the

ryan953/feat-feedback-highlight-mask

branch
April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations


2 participants

@ryan953@billyvg

, '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
feat(feedback): Implement highlighting and hiding controls for screenshots - #15951
Merged
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Apr 3, 2025
Merged
feat(feedback): Implement highlighting and hiding controls for screenshots#15951
ryan953 merged 6 commits into
developfrom 
ryan953/feat-feedback-highlight-mask
Conversation
@ryan953
@ryan953ryan953
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Member
EditingIn Sentry
SCR-20250402-pfujSCR-20250402-pgft
I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.

The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.
  1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
  2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
  3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.
The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.
CaseImg
No boxes drawn everSCR-20250402-jidz
Drew some, then removed themSCR-20250402-jifp
Some boxesSCR-20250402-jigm
Related to #15424

Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixesgetsentry/sentry#69786
@github-actions
github-actionsBot
commented
Apr 1, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize% ChangeChange
@sentry/browser23.2 KB--
@sentry/browser - with treeshaking flags23.02 KB--
@sentry/browser (incl. Tracing)36.83 KB--
@sentry/browser (incl. Tracing, Replay)73.99 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags67.39 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)78.66 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB-0.81%-755 B 🔽
@sentry/browser (incl. Feedback)39.58 KB-1.85%-761 B 🔽
@sentry/browser (incl. sendFeedback)27.81 KB-0.05%-14 B 🔽
@sentry/browser (incl. FeedbackAsync)32.59 KB-0.1%-32 B 🔽
@sentry/react25 KB--
@sentry/react (incl. Tracing)38.75 KB--
@sentry/vue27.41 KB--
@sentry/vue (incl. Tracing)38.55 KB--
@sentry/svelte23.23 KB--
CDN Bundle24.44 KB--
CDN Bundle (incl. Tracing)36.85 KB--
CDN Bundle (incl. Tracing, Replay)71.87 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)77.06 KB-0.02%-12 B 🔽
CDN Bundle - uncompressed71.24 KB--
CDN Bundle (incl. Tracing) - uncompressed108.94 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed220.23 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed232.77 KB-0.02%-33 B 🔽
@sentry/nextjs (client)40.06 KB--
@sentry/sveltekit (client)37.26 KB--
@sentry/node142.89 KB--
@sentry/node - without tracing96.08 KB-0.01%-1 B 🔽
@sentry/aws-serverless120.43 KB--
View base workflow run
@ryan953
ryan953force-pushed
the
ryan953/feat-feedback-highlight-mask
branch
from
08e387a to
a0ceb68CompareApril 2, 2025 17:08
@ryan953
ryan953
marked this pull request as ready for review
April 2, 2025 17:11
@ryan953
ryan953
requested a review
from a team
as a code ownerApril 2, 2025 17:11
billyvg
billyvg
approved these changes
Apr 2, 2025
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

haven't tested it but code seems reasonable
Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

Comment threadpackages/feedback/src/screenshot/components/ScreenshotEditor.tsx
Outdated

@ryan953
ryan953
merged commit 2c1c189
into
developApr 3, 2025
@ryan953
ryan953
deleted the

ryan953/feat-feedback-highlight-mask

branch
April 3, 2025 18:33
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Epic] User Feedback Annotations


2 participants

@ryan953@billyvg