add "[x] only Usercss" filter in the manager

js/prefs.js

@@ -19,8 +19,10 @@ var prefs = new function Prefs() {
 
     'manage.onlyEnabled': false,    // display only enabled styles
     'manage.onlyLocal': false,      // display only styles created locally
+    'manage.onlyUsercss': false,    // display only usercss styles
     'manage.onlyEnabled.invert': false, // display only disabled styles
     'manage.onlyLocal.invert': false,   // display only externally installed styles
+    'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
     'manage.newUI': true,           // use the new compact layout
     'manage.newUI.favicons': false, // show favicons for the sites in applies-to
     'manage.newUI.faviconsGray': true, // gray out favicons

manage.html

@@ -180,6 +180,15 @@
         <option i18n-text="manageOnlyExternal" value="true"></option>
       </select>
     </label>
+    <label>
+      <input id="manage.onlyUsercss" type="checkbox"
+             data-filter=".usercss"
+             data-filter-hide=":not(.usercss)">
+      <select id="manage.onlyUsercss.invert">
+        <option i18n-text="manageOnlyUsercss" value="false"></option>
+        <option i18n-text="manageOnlyNonUsercss" value="true"></option>
+      </select>
+    </label>
     <label id="onlyUpdates" class="hidden">
       <input type="checkbox"
              data-filter=".can-update, .update-problem, .update-done"

manage/manage.js

@@ -185,7 +185,8 @@ function createStyleElement({style, name}) {
   entry.styleMeta = getStyleWithNoCode(style);
   entry.className = parts.entryClassBase + ' ' +
     (style.enabled ? 'enabled' : 'disabled') +
-    (style.updateUrl ? ' updatable' : '');
+    (style.updateUrl ? ' updatable' : '') +
+    (style.usercssData ? ' usercss' : '');
 
   if (style.url) {
     $('.homepage', entry).appendChild(parts.homepageIcon.cloneNode(true));