DevTools Flexbox overlay is incorrect on buttons with paddings
Categories
(DevTools :: Inspector, defect, P3)
Tracking
(Not tracked)
People
(Reporter: cnsimonchan, Unassigned)
Details
Attachments
(1 file)
27.50 KB,
image/png
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0
Steps to reproduce:
- Open https://codepen.io/yume-chan/pen/abrGeRv
- Right click the <button> element, select Inspect
- In DevTools, enable Flexbox overlay for the button
Actual results:
A box is drawn around the "Content" text
Expected results:
Some random boxes are drawn
Comment 1•8 months ago
|
||
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.
Comment 2•8 months ago
|
||
Can you check which platform API we are using here? Thanks
Comment 3•8 months ago
|
||
So I created a small example with 2 flex containers, one being a button and the other a div. I made the 2 exactly similar (same width, height, font, font-size, no border), and fixed positionned them at top:0;left:0
.
Here's the data url for the document: data:text/html,<!DOCTYPE html><meta charset=utf8><style>body { margin: 0; } .f { display: flex; padding: 10px; width: 200px; height: 100px;%20 justify-content: space-between; border: none;box-sizing: border-box; font-family: monospace; font-size: 16px !important; position: fixed; top: 0; left: 0;opacity: 0.4;background: none;align-items: center; span { outline: 1px solid; }}</style><button class=f><span>hello</span><span>world</span></button><div class=f><span>hello</span><span>world</span></div>
If you open the regular console and evaluate:
inspect([
...document.querySelectorAll(".f")
].map(el => el.firstChild.getBoundingClientRect()))
So here we can confirm that the first flex item of the button and the div have the same bounding client rect.
Now, open the browser toolbox, and inspect one of the "hello" element in the page, then, switch to the console, and change the evaluation context to the process for the tab (should just be above the previously selected document).
Then evaluate the following:
inspect([
...globalThis.tabs[0].content.document.querySelectorAll(".f")
].map(el => el.getAsFlexContainer())
.map(flexContainer => flexContainer.getLines()[0])
.map(line => line.getItems()[0])
.map(item => item.frameRect))
This gives us the frameRect
of the first flex item, for both the div and the button flex container.
For the button flex item, we're getting a rect with left: 0
and top: 0
.
For the div flex item, we're getting a rect with left: 10
and top: 10
which takes the padding into account.
Emilio, would you know what's happening here?
Comment 4•8 months ago
|
||
So what's happening is that the button box tree has two boxes, nsHTMLButtonControlFrame, and the flex frame as an anonymous box. The padding is on the first, not the second.
Basically, this code digs into the inner frame, but nothing takes care of the offset from the outer...
That should be accounted for somewhere, not sure where it's more convenient... Maybe something like Flex.offset{.left,.top}
or something?
Description
•