Error when clicking on "scroll" badge when element causing overflow has pseudo element
Categories
(DevTools :: Inspector, defect, P3)
Tracking
(firefox98 verified, firefox99 verified)
People
(Reporter: nchevobbe, Assigned: saihemanth9019, Mentored)
Details
(Keywords: good-first-bug)
Attachments
(2 files)
Steps to reproduce
- Navigate to
data:text/html,<style>html {max-height: 100px; overflow: auto;} h1 {font-size: 400px;} h1:before{ content: "--";}</style><h1>Hello</h1> - Open the inspector
- In the markup view, click on the
scrollbadge next to the<body>element
Expected results
The <h1> line gets highlighted
Actual results
The <h1> line isn't highlighted, and there's an error:
devtools/client/inspector/markup/views/element-editor.js, line 1058: TypeError: markupContainer.editor.setOverflowHighlight is not a function
This is because for pseudo element, we're using https://searchfox.org/mozilla-central/source/devtools/client/inspector/markup/views/read-only-editor.js , which don't have setOverflowHighlight (unlike devtools/client/inspector/markup/views/element-editor.js )
|
||
Updated•2 years ago
|
|
Assignee | |
Comment 1•2 years ago
|
||
Hi, I've been able to partially reproduce this on Nightly and 96.0.1. As mentioned, the h1 line isn't highlighted on the first click on scroll. However, on increasing window height to a size where h1 fits and decreasing it again, h1 line is highlighted. I'm not sure how it works, so bringing it to your attention if it matters. Attaching a gif for the same.
The fix, I assume, will be to add a stub for this method, similar to getInfoAtNode? Tried it, and this works as expected. Can I be assigned to this bug to send a patch? Are we looking for something else instead? Thanks!
|
|
Assignee | |
Comment 2•2 years ago
|
||
|
Reporter | |
Comment 3•2 years ago
|
||
Hello Sai,
I think we should copy what's in https://searchfox.org/mozilla-central/rev/6b4e19ad33650fdf9cd8529cd68eeb98bff1b935/devtools/client/inspector/markup/views/element-editor.js#545-550 in red-only-editor.js (because we do want the line to be in purple)
Then we may update this test https://searchfox.org/mozilla-central/source/devtools/client/inspector/markup/test/browser_markup_scrollable_badge_click.js#121 so it includes a pseudo element and we'd check the line is properly highlighted.
|
|
Assignee | |
Comment 4•2 years ago
|
||
ElementEditor's setOverflowHighlight is called from two places: updateOverflowHighlight and onScrollableBadgeClick.
However, ReadOnlyEditor's setOverflowHighlight is only being called from onScrollableBadgeClick. After copying over the setOverflowHighlight method into ReadOnlyEditor, the pseudo element highlight updates only when the badge is toggled, not when resized.
|
|
Reporter | |
Comment 5•2 years ago
|
||
(In reply to Sai Hemanth from comment #4)
ElementEditor's
setOverflowHighlightis called from two places: updateOverflowHighlight and onScrollableBadgeClick.
However, ReadOnlyEditor'ssetOverflowHighlightis only being called fromonScrollableBadgeClick. After copying over thesetOverflowHighlightmethod into ReadOnlyEditor, the pseudo element highlight updates only when the badge is toggled, not when resized.
For now, I'd say let's take care of the issue caused when clicking on the badge. We can take care of the update one later/in another bug as it's not as bad (the error currently stop the highlighting to go on following nodes)
|
|
||
Updated•2 years ago
|
|
|
Assignee | |
Comment 6•2 years ago
|
||
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f2e7497ddfd1 Add setOverflowHighlight method to ReadOnlyEditor. r=nchevobbe
|
||
Comment 8•2 years ago
|
||
| bugherder | ||
|
||
Updated•2 years ago
|
|
||
Comment 9•2 years ago
|
||
I was able to reproduce the issue(h1 line is not highlighted) on Win10x64 using 97.0a1 (2022-01-06).
Verified as fixed on Win10/Ubuntu20.4 using builds: 99.0a1(2022-02-24) and 98.0b9 (64-bit).
Description
•