Add the Filter settings section.

Settings are done.
4chan X v3 is entirely usable now.

css/style.css

@@ -258,11 +258,28 @@ a[href="javascript:;"] {
 .section-main label {
   text-decoration: underline;
 }
+.section-filter ul {
+  padding: 0;
+}
+.section-filter li {
+  margin: 10px 40px;
+}
+.section-filter textarea {
+  height: 500px;
+}
 .section-sauce textarea {
   height: 350px;
+}
+#settings textarea {
+  font-family: monospace;
   min-width: 100%;
   max-width: 100%;
 }
+#settings code {
+  color: #000;
+  background-color: #FFF;
+  padding: 0 2px;
+}
 .unscroll {
   overflow: hidden;
 }

src/config.coffee

@@ -72,7 +72,7 @@ Config =
       '#/Txhvk1Tl/'
     ].join '\n'
     tripcode: [
-      '# Filter any tripfags'
+      '# Filter any tripfag'
       '#/^!/'
     ].join '\n'
     capcode: [

src/features.coffee

@@ -254,7 +254,69 @@ Settings =
     $.after $('input[name="Stubs"]', section).parentNode.parentNode, li
 
   filter: (section) ->
-    # XXX TODO
+    section.innerHTML = """
+      <div class=warning #{if Conf['Sauce'] then 'hidden' else ''}><code>Filter</code> is disabled.</div>
+      <select name=filter>
+        <option value=guide>Guide</option>
+        <option value=name>Name</option>
+        <option value=uniqueID>Unique ID</option>
+        <option value=tripcode>Tripcode</option>
+        <option value=capcode>Capcode</option>
+        <option value=email>E-mail</option>
+        <option value=subject>Subject</option>
+        <option value=comment>Comment</option>
+        <option value=flag>Flag</option>
+        <option value=filename>Filename</option>
+        <option value=dimensions>Image dimensions</option>
+        <option value=filesize>Filesize</option>
+        <option value=MD5>Image MD5</option>
+      </select>
+      <div></div>
+    """
+    select = $ 'select', section
+    $.on select, 'change', Settings.selectFilter
+    Settings.selectFilter.call select
+  selectFilter: ->
+    div = @nextElementSibling
+    if (name = @value) isnt 'guide'
+      div.innerHTML = null
+      ta = $.el 'textarea',
+        name: name
+        className: 'field'
+        value: $.get name, Conf[name]
+      $.on ta, 'change', $.cb.value
+      $.add div, ta
+      return
+    div.innerHTML = """
+      <p>
+        Use <a href=https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions>regular expressions</a>, one per line.<br>
+        Lines starting with a <code>#</code> will be ignored.<br>
+        For example, <code>/weeaboo/i</code> will filter posts containing the string `<code>weeaboo</code>`, case-insensitive.<br>
+        MD5 filtering uses exact string matching, not regular expressions.
+      </p>
+      <ul>You can use these settings with each regular expression, separate them with semicolons:
+        <li>
+          Per boards, separate them with commas. It is global if not specified.<br>
+          For example: <code>boards:a,jp;</code>.
+        </li>
+        <li>
+          Filter OPs only along with their threads (`only`), replies only (`no`, this is default), or both (`yes`).<br>
+          For example: <code>op:only;</code>, <code>op:no;</code> or <code>op:yes;</code>.
+        </li>
+        <li>
+          Overrule the `Show Stubs` setting if specified: create a stub (`yes`) or not (`no`).<br>
+          For example: <code>stub:yes;</code> or <code>stub:no;</code>.
+        </li>
+        <li>
+          Highlight instead of hiding. You can specify a class name to use with a userstyle.<br>
+          For example: <code>highlight;</code> or <code>highlight:wallpaper;</code>.
+        </li>
+        <li>
+          Highlighted OPs will have their threads put on top of board pages by default.<br>
+          For example: <code>top:yes;</code> or <code>top:no;</code>.
+        </li>
+      </ul>
+    """
 
   sauce: (section) ->
     section.innerHTML = """
@@ -676,13 +738,14 @@ Filter =
 
       # Open the settings and display & focus the relevant filter textarea.
       Settings.open 'Filter'
-      # select = $ 'select[name=filter]', $.id 'options'
+      section = $ '.section-container'
-      # select.value = type
+      select = $ 'select[name=filter]', section
-      # $.event select, new Event 'change'
+      select.value = type
-      # ta = select.nextElementSibling
+      Settings.selectFilter.call select
-      # tl = ta.textLength
+      ta = $ 'textarea', section
-      # ta.setSelectionRange tl, tl
+      tl = ta.textLength
-      # ta.focus()
+      ta.setSelectionRange tl, tl
+      ta.focus()
 
 ThreadHiding =
   init: ->