1617672 - Avoid outputting filter category as an unprefixed class on filter buttons

Status: RESOLVED FIXED

(DevTools :: Console, task, P3)

Description

[Florens Verschelde :fvsch]

We're generating this DOM for filter buttons:

<button aria-pressed="true" class="devtools-togglebutton error">
  Errors
</button>

where the second class is one of these values:

const FILTERS = {
  CSS: "css",
  DEBUG: "debug",
  ERROR: "error",
  INFO: "info",
  LOG: "log",
  NET: "net",
  NETXHR: "netxhr",
  TEXT: "text",
  WARN: "warn",
};

This means we have elements with super generic classes like "error", "info", "log", or "text", and any somewhat rogue style that would target one of these could break the toolbar styles.

On top of that, those classes are awkward to work with:

/* devtools/client/webconsole/test/browser/head.js#getFilterState */
for (const button of buttons) {
  const classes = new Set(button.classList.values());
  classes.delete("devtools-togglebutton");
  const category = classes.values().next().value;
  result[category] = button.getAttribute("aria-pressed") === "true";
}

We could use a data attribute instead:

<button aria-pressed="true" class="devtools-togglebutton" data-category="error">
  Errors
</button>

which simplifies the above code:

for (const button of buttons) {
  result[button.dataset.category] = button.getAttribute("aria-pressed") === "true";
}

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Thanks for filing Florens, I totally agree with you.

Comment 2

[Outvi V]

Attachment: Bug 1617672 - Avoid outputting filter category as an unprefixed class on filter buttons. r=nchevobbe

Comment 3

[Outvi V]

Attachment: Bug 1617672 - Avoid outputting filter category as an unprefixed class on filter buttons. r=nchevobbe

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3eb6676c83ad
Avoid outputting filter category as an unprefixed class on filter buttons. r=nchevobbe

Comment 5

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/3eb6676c83ad