2030236 - Add specific style for unmatched @container query conditions

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

Like we do for unmatched selectors, it would be nice to have a distinct style (grey, strike-through) for @container query condition that are not matching.
For this we would need a dedicated function that would call https://searchfox.org/firefox-main/rev/07e27bfce5acf193bdb89c7ba2aa73451a3e43b4/servo/components/style/stylesheets/container_rule.rs#268-275

/// Tries to match a container query condition for a given element.
pub(crate) fn matches<E>(
    &self,
    stylist: &Stylist,
    element: E,
    originating_element_style: Option<&ComputedValues>,
    invalidation_flags: &mut ComputedValueFlags,
) -> KleeneValue

---

Note that we can take some inspiration from the function that retrieves the container for a specific condition https://searchfox.org/firefox-main/rev/07e27bfce5acf193bdb89c7ba2aa73451a3e43b4/servo/ports/geckolib/glue.rs#3492-3503

pub extern "C" fn Servo_ContainerRule_QueryContainerFor(
    rule: &ContainerRule,
    element: &RawGeckoElement,
    condition_index: usize,
) -> *const RawGeckoElement {
    if let Some(condition) = rule.conditions.0.get(condition_index) {
        if let Some(result) = condition.find_container(GeckoElement(element), None) {
            return result.element.0;
        }
    }
    ptr::null()
}

we would call condition.matches instead of the condition.find_container, and return a boolean instead (we do need to pass additional data though)

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Sounds about right.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2030236 - [devtools] Add chrome-only CSSContainerRule#queryConditionMatchesElement. r=#layout-reviewers.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2030236 - [devtools] Use CSSContainerRule#queryConditionMatchesElement to detect unmatched @container conditions. r=#devtools.

Comment 4

[Phabricator Automation]

Comment on attachment 9568116 [details]
Bug 2030236 - [devtools] Add chrome-only CSSContainerRule#queryConditionMatchesElement. r=#layout-reviewers.

Revision D293027 was moved to bug 2030693. Setting attachment 9568116 [details] to obsolete.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/128c374b4908
https://hg.mozilla.org/integration/autoland/rev/d8d2b20d720b
[devtools] Use CSSContainerRule#queryConditionMatchesElement to detect unmatched @container conditions. r=devtools-reviewers,ochameau.

Comment 6

[rperta]

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