Bugzilla

I quickly wanted to see if it's only about adding the right classes in the right spots
You can quickly show them in the pseudo class panel with: 

```diff
diff --git a/devtools/shared/css/constants.js b/devtools/shared/css/constants.js
index cc8748c5536f..7f99045c0402 100644
--- a/devtools/shared/css/constants.js
+++ b/devtools/shared/css/constants.js
@@ -35,4 +35,11 @@ exports.PSEUDO_CLASSES = [
   ":focus-within",
   ":visited",
   ":target",
+  ":playing",
+  ":paused",
+  ":seeking",
+  ":buffering",
+  ":stalled",
+  ":muted",
+  ":volume-locked",
 ];
```

and it does work for _some_ cases (e.g. `:stalled`)
When trying to click on the `:playing` checkbox, it automatically checks the `:paused` one for some reason
Trying to click on the `:volume-locked` one doesn't work (the checkbox gets unchecked directly)
So we'd need to figure this out.
We should also probably put those in a specific section, and only having them visible when a HTMLMediaElement is selected (so `<audio>` or `<video>`)
We also need to handle the "exclusiveness" of those (e.g. if you check `:paused`, you `:playing` should be toggled)
I also wonder if enabling those should actually impact the element itself. It could be weird having the video actually playing and the `:paused` pseudo being applied? I'm not sure about this one though

I quickly wanted to see if it's only about adding the right classes in the right spots
You can quickly show them in the pseudo class panel with: 

```diff
diff --git a/devtools/shared/css/constants.js b/devtools/shared/css/constants.js
index cc8748c5536f..7f99045c0402 100644
--- a/devtools/shared/css/constants.js
+++ b/devtools/shared/css/constants.js
@@ -35,4 +35,11 @@ exports.PSEUDO_CLASSES = [
   ":focus-within",
   ":visited",
   ":target",
+  ":playing",
+  ":paused",
+  ":seeking",
+  ":buffering",
+  ":stalled",
+  ":muted",
+  ":volume-locked",
 ];
```

and it does work for _some_ cases (e.g. `:stalled`)
When trying to click on the `:playing` checkbox, it automatically checks the `:paused` one for some reason
Trying to click on the `:volume-locked` one doesn't work (the checkbox gets unchecked directly)
So we'd need to figure this out.
We should also probably put those in a specific section, and only having them visible when a `HTMLMediaElement` is selected (so `<audio>` or `<video>`)
We also need to handle the "exclusiveness" of those (e.g. if you check `:paused`, you `:playing` should be toggled)
I also wonder if enabling those should actually impact the element itself. It could be weird having the video actually playing and the `:paused` pseudo being applied? I'm not sure about this one though