Firefox DevTools Filter Text Visibility Fix

at last - an end to the insanity. In FireFox, this is how you make the text inside of devtools actually visible when the filter field contains text. Whoever thought dark grey on black was a good idea should be fired :-P. Now, there's no mistake when filter text is entered. How many times have you been like "WHY ARE THERE NO RESULTS" only to find that you had text entered but couldn't see it because the UI sucks?

Steps

1. go to: about:config

2. set:

   toolkit.legacyUserProfileCustomizations.stylesheets
   

   to true.

3. Then go to about:support and click "Profile Folder" → "Open Folder".

4. Create a folder named chrome

5. Create a CSS file named userContent.css

6. Inside of that, put this:

   @-moz-document url-prefix("chrome://devtools/") { /* search filter text */
     .devtools-filterinput {
       color: #5be82c !important;          /* text color */
       font-weight: bold !important;
       /*background-color: #f0d1bb !important;*/ /* field bg */
     }
   }
   
   @-moz-document url-prefix("chrome://devtools/") {
     .devtools-filterinput:not(:placeholder-shown) {
       border: 1px solid #5be82c !important;
     }
   }

7. then restart everything