Open Bug 1887569 Opened 11 months ago Updated 11 months ago

Node picker doesn't work on embedded svg <object>

Categories

(DevTools :: Inspector, defect, P3)

Firefox 124
defect

Tracking

(Not tracked)

UNCONFIRMED

People

(Reporter: gyorokpeter1, Unassigned)

References

()

Details

Attachments

(2 files, 2 obsolete files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Steps to reproduce:

Extract the attached .zip and open test.html.
Open the console with F12, click on "Pick an element from the page", then click on the text element in the SVG (that reads 00:00).

Actual results:

The element is not highlighted when pointed at. Further, the inspector doesn't highlight the element after clicking on it. See actual.png.

Expected results:

The element should be highlighted in the inspector. See expected.png.

Attached file html.zip

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Inspector
Product: Firefox → DevTools
Attached file test.html (obsolete) —
Attached image test.svg (obsolete) —

I'll set up a proper test case so we can investigate

Flags: needinfo?(nchevobbe)
Flags: needinfo?(nchevobbe)
Summary: Inspector doesn't highlight elements in embedded SVG → Node picker doesn't work on embedded svg <object>
Attachment #9393463 - Attachment is obsolete: true
Attachment #9393464 - Attachment is obsolete: true

For the node picker part, in https://searchfox.org/mozilla-central/rev/7bbc54b70e348a11f9cd12071ada2cb47c8a14e3/devtools/server/actors/highlighters/utils/markup.js#689,693,699-700

function moveInfobar(container, bounds, win, options = {}) {
...
  const { computedStyle } = container;
...
  const containerHeight = parseFloat(computedStyle.getPropertyValue("height"));
  const containerWidth = parseFloat(computedStyle.getPropertyValue("width"));

computedStyle.getPropertyValue("height") and computedStyle.getPropertyValue("width") are returning "auto", which creates a NaN when calling parseFloat on it, and messes up with the style we set on the highlighter.

Severity: -- → S3
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: