1593555 - [Inactive CSS] Popup mis-informs the user when a would-be grid element is floated.

Status: VERIFIED FIXED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Leonie Philine]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

Firefox 70.0.1 on OpenSUSE Tumbleweed.

Worked on a CSS grid.
In this case, I require not only direct children of the grid container, but also grand-children to partake in the grid layout.
Therefore, I "dump" some of the grand-children into the grid by applying display: contents on their parents (= direct children of the grid container).
The browser renders this perfectly - the problem is only in the Inactive CSS detection.

Actual results:

Some of the grid container's grand children have become part of the grid due to their parents being display: contents. These grand children have a grid-area assigned.
The DevTools Inspector shows the grid-area: somearea rule as inactive, because the parents of these elements are not display: grid.

Expected results:

The DevTools Inspector should realize that the parents of these elements are display: contents and thus the grand parents need to be investigated for validating the effectivity of the rule.

The grid-area rule should not be marked as "Inactive CSS", since in fact it is active.

Comment 1

[Leonie Philine]

Update:
While working to isolate the bug, I found the reason to be different from what I had initially reported.

HTML:

<section class="grid-container">
    <h2 class="grid-item--heading">Heading</h2>
    
    <div class="display-contents">
        <img class="grid-item--grand-child-image" src="https://placekitten.com/300/200" alt="" >
        <div class="grid-item--grand-child-text"><p>Text...</p></div>
        <div class="grid-item--grand-child-ctas">
            <a href="https://example.com">A link</a>
        </div>
    </div>
</section>

CSS:

.grid-container {
  display: grid;
  grid-template-areas: "image heading" "image text" "image ctas";
  grid-template-columns: 480px 450px;
}

.grid-item--heading{
  grid-area: heading;
}

.display-contents {
  display: contents;
}

.grid-item--grand-child-image {
  grid-area: image;
  float: left; /* This rule causes "Try setting `display: grid` on the parent." */
}

.grid-item--grand-child-text {
  grid-area: text;
}

.grid-item--grand-child-ctas {
  grid-area: ctas;
}

There is a float: left on the .grid-item--grand-child-image selector to support ancient browsers.
This float effectively makes the <img /> no longer be a grid item.
The detection of Inactive CSS appears to be right (please correct me if I am wrong, but AFAIK the float does override the grid item role), but the popup message is wrong.
The popup message indicates a parent needs to get display: grid or display: inline-grid set, while the actual reason for grid-area: image to be inactive is the float: left on the same element.

Comment 2

[Leonie Philine]

Simplified testcase:

<section class="grid-container">
        <img class="grid-item--floated" src="https://placekitten.com/300/200" alt="A kitten." />    
</section>

.grid-container {
  display: grid;
  grid-template-areas: "image";
  grid-template-columns: 480px;
}

.grid-item--floated {
  grid-area: image;
  float: left; /* This rule causes "Try setting `display: grid` on the parent." */
}

Steps:

• Place into jsfiddle / codepen / a HTML document.
• Inspect img.grid-item--floated in the devtools inspector / rules pane.
• Find a wrong text in the popup informing about the inactive grid-area: image rule.
• Disable the float: left rule to confirm that its presence is the reason for grid-area: image to be inactive.

Comment 3

[Patrick Brosset <:pbro>]

Thanks for filing. I copied the code and placed it into a jsbin: https://jsbin.com/welujarihu/edit?html,css,output

Steps:

• Open the jsbin
• Inspect img.grid-item--floated in the devtools inspector / rules pane.
• Find a wrong text in the popup informing about the inactive grid-area: image rule.
• Disable the float: left rule to confirm that its presence is the reason for grid-area: image to be inactive.

Looks like our inactive CSS validator thinks that a floated element can not be a grid item.

Comment 4

[Patrick Brosset <:pbro>]

Attachment: Bug 1593555 - Floated elements can be grid items, don't show warnings about them

Even if floated, an child element to a grid container can still be positioned
using the grid-row/column/area placement properties.
So, when that happens, don't show a warning telling users that these properties
are inactive, because they are.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d827ca47ac5b
Floated elements can be grid items, don't show warnings about them r=miker

Comment 6

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/d827ca47ac5b

Comment 7

[Rares Doghi, Desktop QA]

This issue is Verified as Fixed in our latest Nightly build 75.0a1 (2020-02-11) and Beta 74.0b1, I will update the flags accordingly.