1815212 - Display size of viewport in a popup for screen media queries

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: container query popup

I was demoing the container query support in DevTools to a web developer and when seeing the popup that display the container size, they told me that it would be a nice thing to have for regular screen media queries as well.

It shouldn't be too hard to implement

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Marlene, would you like to work on this one?

Comment 2

[mgomes]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

Marlene, would you like to work on this one?

Yes, I can try

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

(In reply to mgomes from comment #2)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

Marlene, would you like to work on this one?

Yes, I can try

Great!

So this is where we display media queries in the rules view https://searchfox.org/mozilla-central/rev/3002762e41363de8ee9ca80196d55e79651bcb6b/devtools/client/inspector/rules/views/rule-editor.js#222-224

if (ancestorData.type == "media") {
  return `@media ${ancestorData.value}`;
}

We only return a simple string, so we need to change things a bit, and we can take some inspiration from what we do for container queries:

https://searchfox.org/mozilla-central/rev/3002762e41363de8ee9ca80196d55e79651bcb6b/devtools/client/inspector/rules/views/rule-editor.js#147-161,210-215

if (ancestorData.type == "container") {
  const container = this.doc.createElement("li");
  container.classList.add("container-query");
  container.setAttribute("data-ancestor-index", index);

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

  container.classList.add("has-tooltip");
...
  createChild(container, "span", {
    // Add a space between the container name (or @container if there's no name)
    // and the query so the title, which is computed from the DOM, displays correctly.
    textContent: " " + ancestorData.containerQuery,
  });
  return container;

We will need a new tooltip for this, again, we can take inspiration from the container query one: https://searchfox.org/mozilla-central/source/devtools/client/shared/widgets/tooltip/css-query-container-tooltip-helper.js
We'll instantiate it from there https://searchfox.org/mozilla-central/rev/3002762e41363de8ee9ca80196d55e79651bcb6b/devtools/client/inspector/shared/tooltips-overlay.js#117 , and display it from https://searchfox.org/mozilla-central/rev/3002762e41363de8ee9ca80196d55e79651bcb6b/devtools/client/inspector/shared/tooltips-overlay.js#400-414

Something we need to take care of is that we only want to display the tooltip for media queries handling sizes (e.g. not for @media (prefers-reduced-motion: reduce))

I hope this helps, don't hesitate to ask any question!