--- a/mail/base/content/FilterListDialog.js
+++ b/mail/base/content/FilterListDialog.js
@@ -289,28 +289,29 @@ function setRunFolder(aFolder) {
   updateButtons();
 }
 
 /**
  * Toggle enabled state of a filter, in both the filter properties and the UI.
  *
  * @param aFilterItem  an item (row) of the filter list to be toggled
  */
-function toggleFilter(aFilterItem)
+function toggleFilter(aFilterItem, aSetForEvent)
 {
   let filter = aFilterItem._filter;
-  if (filter.unparseable && !filter.enabled)
-  {
+  if (filter.unparseable && !filter.enabled) {
     Services.prompt.alert(window, null, gFilterBundle.getString("cannotEnableFilter"));
     return;
   }
-  filter.enabled = !filter.enabled;
+  filter.enabled = aSetForEvent === undefined ? !filter.enabled : aSetForEvent;
 
   // Now update the checkbox
-  aFilterItem.childNodes[1].setAttribute("enabled", filter.enabled);
+  if (aSetForEvent === undefined) {
+    aFilterItem.firstChild.nextSibling.setAttribute("checked", filter.enabled);
+  }
   // For accessibility set the checked state on listitem
   aFilterItem.setAttribute("aria-checked", filter.enabled);
 }
 
 /**
  * Selects a specific filter in the filter list.
  * The listbox view is scrolled to the corresponding item.
  *
@@ -723,43 +724,44 @@ function rebuildFilterList()
 
     filter = gCurrentFilterList.getFilterAt(i);
     if (aTempFilterList && aTempFilterList[listitemIndex] != i)
       continue;
 
     if (listitemCount > listitemIndex) {
       // If there is a free existing listitem, reuse it.
       // Use .children[] instead of .getItemAtIndex() as it is much faster.
-      listitem = gFilterListbox.children[listitemIndex + 1];
-      nameCell = listitem.childNodes[0];
-      enabledCell = listitem.childNodes[1];
+      listitem = gFilterListbox.children[listitemIndex];
+      nameCell = listitem.firstChild;
+      enabledCell = nameCell.nextSibling;
     }
     else
     {
       // If there are not enough listitems in the list, create a new one.
-      listitem = document.createElement("listitem");
+      listitem = document.createElement("richlistitem");
+      listitem.setAttribute("align", "center");
       listitem.setAttribute("role", "checkbox");
-      nameCell = document.createElement("listcell");
-      enabledCell = document.createElement("listcell");
-      enabledCell.setAttribute("class", "listcell-iconic");
-      enabledCell.setAttribute("pack", "center");
+      nameCell = document.createElement("label");
+      nameCell.setAttribute("flex", "1");
+      enabledCell = document.createElement("checkbox");
+      enabledCell.setAttribute("style", "padding-inline-start: 25px;");
+      enabledCell.addEventListener("click", onFilterClick, true);
       listitem.appendChild(nameCell);
       listitem.appendChild(enabledCell);
       gFilterListbox.appendChild(listitem);
       // We have to attach this listener to the listitem, even though we only care
       // about clicks on the enabledCell. However, attaching to that item doesn't
       // result in any events actually getting received.
-      listitem.addEventListener("click", onFilterClick, true);
       listitem.addEventListener("dblclick", onFilterDoubleClick, true);
     }
     // For accessibility set the label on listitem.
     listitem.setAttribute("label", filter.filterName);
     // Set the listitem values to represent the current filter.
-    nameCell.setAttribute("label", filter.filterName);
-    enabledCell.setAttribute("enabled", filter.enabled);
+    nameCell.setAttribute("value", filter.filterName);
+    enabledCell.setAttribute("checked", filter.enabled);
     listitem.setAttribute("aria-checked", filter.enabled);
     listitem._filter = filter;
 
     if (selectedNames.includes(filter.filterName))
       gFilterListbox.addItemToSelection(listitem);
 
     listitemIndex++;
   }
@@ -886,27 +888,21 @@ function getServerThatCanHaveFilters()
     }
 
     return null;
 }
 
 function onFilterClick(event)
 {
     // we only care about button 0 (left click) events
-    if (event.button != 0)
+    if (event.button != 0) {
       return;
+    }
 
-    // Remember, we had to attach the click-listener to the whole listitem, so
-    // now we need to see if the clicked the enable-column
-    let toggle = event.target.childNodes[1];
-    if ((event.clientX < toggle.boxObject.x + toggle.boxObject.width) &&
-        (event.clientX > toggle.boxObject.x)) {
-      toggleFilter(event.target);
-      event.stopPropagation();
-    }
+    toggleFilter(this.parentNode, !this.checked);
 }
 
 function onFilterDoubleClick(event)
 {
     // we only care about button 0 (left click) events
     if (event.button != 0)
       return;
 

--- a/mail/base/content/FilterListDialog.xul
+++ b/mail/base/content/FilterListDialog.xul
@@ -72,24 +72,24 @@
             &filterHeader.label;
           </label>
           <label id="countBox"/>
         </hbox>
       </row>
 
       <row flex="1">
         <vbox>
-          <listbox id="filterList" flex="1" onselect="updateButtons();"
-                   seltype="multiple"
-                   onkeypress="onFilterListKeyPress(event);">
-            <listhead>
-              <listheader id="nameColumn" label="&nameColumn.label;" flex="1"/>
-              <listheader id="activeColumn" label="&activeColumn.label;" minwidth="40px"/>
-            </listhead>
-          </listbox>
+          <richlistbox id="filterList" flex="1" onselect="updateButtons();"
+                       class="theme-listbox" seltype="multiple"
+                       onkeypress="onFilterListKeyPress(event);">
+            <treecols>
+              <treecol id="nameColumn" label="&nameColumn.label;" flex="1"/>
+              <treecol id="activeColumn" label="&activeColumn.label;" width="100"/>
+            </treecols>
+          </richlistbox>
         </vbox>
 
         <vbox>
           <button id="newButton"
                   type="menu-button"
                   label="&newButton.label;"
                   accesskey="&newButton.accesskey;"
                   oncommand="onNewFilter();">

--- a/mail/themes/linux/mail/filterDialog.css
+++ b/mail/themes/linux/mail/filterDialog.css
@@ -7,25 +7,26 @@
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: columns :::::: */
 
-listcell[enabled="false"] {
-  list-style-image: url("chrome://messenger/skin/icons/notchecked.gif");
+treecolpicker {
+  display: none;
 }
 
-listcell[enabled="true"] {
-  list-style-image: url("chrome://messenger/skin/icons/check.gif");
+richlistitem > checkbox {
+  width: 100px;
+  margin: 0;
 }
 
-.listcell-iconic .listcell-label {
+checkbox:not([label]) .checkbox-label-box {
   display: none;
 }
 
 #gray_horizontal_splitter {
   margin-right: -6px;
   margin-left: -6px;
 }
 

--- a/mail/themes/osx/mail/filterDialog.css
+++ b/mail/themes/osx/mail/filterDialog.css
@@ -18,28 +18,29 @@
    margin: 8px;
    font: menu;
 }
 
 #filterListDialog > grid {
    margin: 8px;
 }
 
-.listcell-iconic .listcell-label {
+/* ::::: columns :::::: */
+
+treecolpicker {
   display: none;
 }
 
-/* ::::: columns :::::: */
-
-listcell[enabled="false"] {
-  list-style-image: url("chrome://messenger/skin/icons/dot.png");
+richlistitem > checkbox {
+  width: 100px;
+  margin: 0;
 }
 
-listcell[enabled="true"] {
- list-style-image: url("chrome://messenger/skin/icons/check.png");
+checkbox:not([label]) .checkbox-label-box {
+  display: none;
 }
 
 .small-button {
   -moz-appearance: none;
   font: icon;
   text-shadow: 0 1px #F2F2F2;
   border: 1px solid #A8A8A8;
   background: linear-gradient(to top, #ECECEC, #ECECEC 50%, #F9F9F9 0%, #F9F9F9);

--- a/mail/themes/windows/mail/filterDialog.css
+++ b/mail/themes/windows/mail/filterDialog.css
@@ -7,25 +7,26 @@
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: columns :::::: */
 
-listcell[enabled="false"] {
-  list-style-image: url("chrome://messenger/skin/icons/notchecked.gif");
+treecolpicker {
+  display: none;
 }
 
-listcell[enabled="true"] {
-  list-style-image: url("chrome://messenger/skin/icons/check.gif");
+richlistitem > checkbox {
+  width: 100px;
+  margin: 0;
 }
 
-.listcell-iconic .listcell-label {
+checkbox:not([label]) .checkbox-label-box {
   display: none;
 }
 
 #gray_horizontal_splitter {
   margin-right: -6px;
   margin-left: -6px;
 }