Closed Bug 1601083 Opened 4 years ago Closed 4 years ago

Add an API that returns an element's containing block

Categories

(Core :: Layout, enhancement, P3)

Product:
Core
Component:
Layout
Type:
enhancement

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla73
Tracking Flags:
Tracking Status
firefox73 --- fixed

People

(Reporter: mtigley, Assigned: emilio)

References

Details

Attachments

(1 file)

Bug 1601083 - Add an InspectorUtils API to get the containing block of an Element. r=mats
47 bytes, text/x-phabricator-request
Details | Review

Having layout identify an element's containing block would be very helpful when determining what sort of CSS properties can affect it.

For example, Bug 1598893 looks at elements absolutely-positioned within a grid. Being able to have layout tell us the containing block would help DevTools' Inactive CSS feature know which grid item properties affect non-grid items (grid-column, grid-row, etc...).

See Also: → 1598893
Priority: -- → P3

We might want to narrow this API to be specifically about abspos/fixed-pos elements for now, for simplicity's sake, if that's the intended use case at this point. For those elements, the implementation is pretty simple -- we can implement this by simply getting their parent-frame. (The frame constructor inserts abspos/fixed-pos frames as direct children of their containing block frame, even if it's not a direct child in the DOM tree.)

One other subtlety: if a grid container forms the containing block, then technically the containing block is a grid area (not necessarily the full grid container), per https://drafts.csswg.org/css-grid-1/#abspos-items (This probably doesn't affect the API itself, but it influences the wording that we'd want to include in its documentation. We'd want to word it as e.g. "Get the ancestor node that generates the containing block..." rather than "Get the containing block...")

Alternatively, the API could just answer the original question directly: "does this property apply to this element"?
E.g. element.isPropertyApplied('grid-column-start')

(In reply to Mats Palmgren (:mats) from comment #2)

Alternatively, the API could just answer the original question directly: "does this property apply to this element"?
E.g. element.isPropertyApplied('grid-column-start')

I think having the API tell us this directly would be extremely helpful for not only the properties I mentioned above but any future properties DevTools' Inactive CSS would add too. I'd be excited to see something like this!

(In reply to Mats Palmgren (:mats) from comment #2)

Alternatively, the API could just answer the original question directly: "does this property apply to this element"?
E.g. element.isPropertyApplied('grid-column-start')

Note that the Inactive CSS feature isn't about whether properties apply to an element, but whether they have any effect on it.
While grid-column applies to any element, it has no effect if the element isn't inside a grid.

If that's what you meant by apply, then I second what Micah said, this would be an extremely useful API for us to have.

(In reply to Patrick Brosset <:pbro> from comment #4)

While grid-column applies to any element, it has no effect if the element isn't inside a grid.

It doesn't apply to all elements, see https://drafts.csswg.org/css-grid/#placement-shorthands:

Applies to: grid items and absolutely-positioned boxes whose containing block is a grid container

But it's true that sometimes the "applies to" fields are loosely defined and a property may apply but have no effect.

Just FYI, we have nsIFrame::GetContainingBlock. It might be useful when developing such an API around it.

Patrick, yes, I meant "applied" as used in the "Applies to" statements in CSS specs which basically means "has an effect on".

(In reply to Mats Palmgren (:mats) from comment #2)

Alternatively, the API could just answer the original question directly: "does this property apply to this element"?
E.g. element.isPropertyApplied('grid-column-start')

Would there be any benefit of having this logic in the binary itself? I think we only have a few more mechanisms relevant for this than devtools, like knowing for sure if something is replaced or not, or walking the containing block.

(In reply to Oriol Brufau [:Oriol] from comment #5)

It doesn't apply to all elements, see https://drafts.csswg.org/css-grid/#placement-shorthands:

(In reply to Mats Palmgren (:mats) from comment #7)

Patrick, yes, I meant "applied" as used in the "Applies to" statements in CSS specs which basically means "has an effect on".

Right, sorry, I didn't think of the spec meaning of the word.

Emilio, would it be simple to add something like what Mats suggested? To narrow down what we can expect, we can focus on what was originally asked: does this grid item property affect this element (I.e: grid-column, grid-column-start, etc…). But I'm also I'm interested in knowing what other clarifications need to be made.

I realize we’re now talking about something that’s different from what the original bug is asking. So if it’s necessary, we can file another issue for this other suggestion and discuss it there (or just rename this bug).

Flags: needinfo?(emilio)

Emilio, would it be simple to add something like what Mats suggested?

Well, I don't think so... we'd need to move all the logic that right now lives in devtools to be in Gecko. I'm not sure that's particularly feasible or desirable. But maybe Mats had a better idea?

To narrow down what we can expect, we can focus on what was originally asked: does this grid item property affect this element (I.e: grid-column, grid-column-start, etc…).

Yeah, this should be pretty easy.

I realize we’re now talking about something that’s different from what the original bug is asking. So if it’s necessary, we can file another issue for this other suggestion and discuss it there (or just rename this bug).

Yeah, I agree, we should probably add the grid item API here, and discuss bigger changes in other bug. Did you or Brad plan to do the grid item API work? Otherwise I can do it, though I'm on PTO today.

Flags: needinfo?(emilio)

Yeah, I agree, we should probably add the grid item API here, and discuss bigger changes in other bug. Did you or Brad plan to do the grid item API work? Otherwise I can do it, though I'm on PTO today.

Yeah, that would be great if you could! Otherwise, I can work on it if no one else can (will definitely need guidance on it though).

Ok, I'll put it in my queue, could probably get to it early next week.

Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Assignee: nobody → emilio
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/03aefa643991
Add an InspectorUtils API to get the containing block of an Element. r=mats

https://hg.mozilla.org/mozilla-central/rev/03aefa643991

Status: NEW → RESOLVED
Closed: 4 years ago
status-firefox73: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla73
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: