Open Bug 1904307 Opened 8 months ago Updated 8 months ago

DevTools Flexbox overlay is incorrect on buttons with paddings

Categories

(DevTools :: Inspector, defect, P3)

Firefox 128
defect

Tracking

(Not tracked)

People

(Reporter: cnsimonchan, Unassigned)

Details

Attachments

(1 file)

Attached image screenshot.png

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

Steps to reproduce:

  1. Open https://codepen.io/yume-chan/pen/abrGeRv
  2. Right click the <button> element, select Inspect
  3. 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

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

Can you check which platform API we are using here? Thanks

Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(nchevobbe)
Priority: -- → P3

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?

Flags: needinfo?(nchevobbe) → needinfo?(emilio)

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?

Flags: needinfo?(emilio)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: