2023125 - Teach devtools about @container rules with multiple conditions.

Status: NEW

(DevTools :: Inspector: Rules, task)

Description

[Emilio Cobos Álvarez [:emilio]]

In bug 2016929 and bug 2022827 we're implementing multiple comma-separated conditions for @container queries, as part of interop 2026.

It seems like DevTools currently relies on .container{Name,Query} here, but those accessors can't deal with multiple conditions at all. Plus, name is optional...

Maybe we should just use the .conditionText? Or update that to use .conditions alternatively (once it's clear that's the path forward).

I don't have strong opinions... Nicolas, wdyt?

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Thanks for filing a bug Emilio

In the client, we do use the containerName that we put in its own element https://searchfox.org/firefox-main/rev/7b08fa00f500ed877b16983a6a77d2c852aad1d0/devtools/client/inspector/rules/views/rule-editor.js#221-224

createChild(selectorContainer, "span", {
  class: "container-query-declaration",
  textContent: `@container${ancestorData.containerName ? " " + ancestorData.containerName : ""}`,
});

that we can then target to show the container information in a tooltip https://searchfox.org/firefox-main/rev/7b08fa00f500ed877b16983a6a77d2c852aad1d0/devtools/client/inspector/shared/tooltips-overlay.js#455-464

if (type === TOOLTIP_CSS_QUERY_CONTAINER) {
  // Ensure this is the correct node and not a parent.
  if (!target.closest(".container-query .container-query-declaration")) {
    return false;
  }

  await this.cssQueryContainerTooltipHelper.setContent(
    nodeInfo.value,
    this.getTooltip("interactiveTooltip")
  );

If I'm understanding what's done in https://phabricator.services.mozilla.com/D287344 , it seems like we could switch to conditions, which do expose the name and query for each condition.
I'll handle it, as this will also require changes on the client side

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Note that we also need to update the StyleEditor at-rule sidebar to be able to display multiple conditions at https://searchfox.org/firefox-main/rev/7b08fa00f500ed877b16983a6a77d2c852aad1d0/devtools/client/styleeditor/StyleEditorUI.sys.mjs#1391