diff --git a/layout/base/nsCSSFrameConstructor.cpp b/layout/base/nsCSSFrameConstructor.cpp
index 73208cabe17a..03d5a5611b84 100644
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -3977,6 +3977,7 @@ nsCSSFrameConstructor::FindXULTagData(const Element& aElement, nsAtom* aTag,
       SCROLLABLE_XUL_CREATE(titlebar, NS_NewTitleBarFrame),
       SCROLLABLE_XUL_CREATE(resizer, NS_NewResizerFrame),
       SCROLLABLE_XUL_CREATE(toolbarpaletteitem, NS_NewBoxFrame),
+      SCROLLABLE_XUL_CREATE(treecolpicker, NS_NewButtonBoxFrame),
       SIMPLE_XUL_CREATE(image, NS_NewImageBoxFrame),
       SIMPLE_XUL_CREATE(spring, NS_NewLeafBoxFrame),
       SIMPLE_XUL_CREATE(spacer, NS_NewLeafBoxFrame),
diff --git a/toolkit/content/widgets/tree.js b/toolkit/content/widgets/tree.js
index e6ac1c6a3607..2c16dad783fc 100644
--- a/toolkit/content/widgets/tree.js
+++ b/toolkit/content/widgets/tree.js
@@ -164,6 +164,93 @@
 
   customElements.define("treechildren", MozTreeChildren);
 
+  class MozTreecolPicker extends MozElements.BaseControl {
+    constructor() {
+      super();
+
+      this.addEventListener("command", (event) => {
+        if (event.originalTarget == this) {
+          var popup = this.querySelector("[anonid=\"popup\"]");
+          this.buildPopup(popup);
+          popup.openPopup(this, "after_end");
+        } else {
+          var tree = this.parentNode.parentNode;
+          tree.stopEditing(true);
+          var menuitem = this.querySelector("[anonid=\"menuitem\"]");
+          if (event.originalTarget == menuitem) {
+            tree.columns.restoreNaturalOrder();
+            this.removeAttribute("ordinal");
+            tree._ensureColumnOrder();
+          } else {
+            var colindex = event.originalTarget.getAttribute("colindex");
+            var column = tree.columns[colindex];
+            if (column) {
+              var element = column.element;
+              if (element.getAttribute("hidden") == "true")
+                element.setAttribute("hidden", "false");
+              else
+                element.setAttribute("hidden", "true");
+            }
+          }
+        }
+      });
+
+    }
+
+    connectedCallback() {
+      if (this.delayConnectedCallback()) {
+        return;
+      }
+
+      this.textContent = "";
+      this.appendChild(MozXULElement.parseXULToFragment(`
+        <image class="tree-columnpicker-icon"></image>
+        <menupopup anonid="popup">
+          <menuseparator anonid="menuseparator"></menuseparator>
+          <menuitem anonid="menuitem" label="&restoreColumnOrder.label;"></menuitem>
+        </menupopup>
+      `, ["chrome://global/locale/tree.dtd"]));
+
+    }
+
+    buildPopup(aPopup) {
+      // We no longer cache the picker content, remove the old content.
+      while (aPopup.childNodes.length > 2)
+        aPopup.firstChild.remove();
+
+      var refChild = aPopup.firstChild;
+
+      var tree = this.parentNode.parentNode;
+      for (var currCol = tree.columns.getFirstColumn(); currCol; currCol = currCol.getNext()) {
+        // Construct an entry for each column in the row, unless
+        // it is not being shown.
+        var currElement = currCol.element;
+        if (!currElement.hasAttribute("ignoreincolumnpicker")) {
+          var popupChild = document.createElement("menuitem");
+          popupChild.setAttribute("type", "checkbox");
+          var columnName = currElement.getAttribute("display") ||
+            currElement.getAttribute("label");
+          popupChild.setAttribute("label", columnName);
+          popupChild.setAttribute("colindex", currCol.index);
+          if (currElement.getAttribute("hidden") != "true")
+            popupChild.setAttribute("checked", "true");
+          if (currCol.primary)
+            popupChild.setAttribute("disabled", "true");
+          aPopup.insertBefore(popupChild, refChild);
+        }
+      }
+
+      var hidden = !tree.enableColumnDrag;
+      const anonids = ["menuseparator", "menuitem"];
+      for (var i = 0; i < anonids.length; i++) {
+        var element = this.querySelector(`[anonid=\"${anonids[i]}\"]`);
+        element.hidden = hidden;
+      }
+    }
+  }
+
+  customElements.define("treecolpicker", MozTreecolPicker);
+
   class MozTreecol extends MozElements.BaseControl {
     static get observedAttributes() {
       return [
diff --git a/toolkit/content/widgets/tree.xml b/toolkit/content/widgets/tree.xml
index 611904335c49..b96d20699e7d 100644
--- a/toolkit/content/widgets/tree.xml
+++ b/toolkit/content/widgets/tree.xml
@@ -911,88 +911,4 @@
     </handlers>
   </binding>
 
-  <binding id="columnpicker" display="xul:button"
-           extends="chrome://global/content/bindings/general.xml#basecontrol">
-    <content>
-      <xul:image class="tree-columnpicker-icon"/>
-      <xul:menupopup anonid="popup">
-        <xul:menuseparator anonid="menuseparator"/>
-        <xul:menuitem anonid="menuitem" label="&restoreColumnOrder.label;"/>
-      </xul:menupopup>
-    </content>
-
-    <implementation>
-      <method name="buildPopup">
-        <parameter name="aPopup"/>
-        <body>
-          <![CDATA[
-            // We no longer cache the picker content, remove the old content.
-            while (aPopup.childNodes.length > 2)
-              aPopup.firstChild.remove();
-
-            var refChild = aPopup.firstChild;
-
-            var tree = this.parentNode.parentNode;
-            for (var currCol = tree.columns.getFirstColumn(); currCol;
-                 currCol = currCol.getNext()) {
-              // Construct an entry for each column in the row, unless
-              // it is not being shown.
-              var currElement = currCol.element;
-              if (!currElement.hasAttribute("ignoreincolumnpicker")) {
-                var popupChild = document.createElement("menuitem");
-                popupChild.setAttribute("type", "checkbox");
-                var columnName = currElement.getAttribute("display") ||
-                                 currElement.getAttribute("label");
-                popupChild.setAttribute("label", columnName);
-                popupChild.setAttribute("colindex", currCol.index);
-                if (currElement.getAttribute("hidden") != "true")
-                  popupChild.setAttribute("checked", "true");
-                if (currCol.primary)
-                  popupChild.setAttribute("disabled", "true");
-                aPopup.insertBefore(popupChild, refChild);
-              }
-            }
-
-            var hidden = !tree.enableColumnDrag;
-            const anonids = ["menuseparator", "menuitem"];
-            for (var i = 0; i < anonids.length; i++) {
-              var element = document.getAnonymousElementByAttribute(this, "anonid", anonids[i]);
-              element.hidden = hidden;
-            }
-          ]]>
-        </body>
-      </method>
-    </implementation>
-
-    <handlers>
-      <handler event="command">
-        <![CDATA[
-          if (event.originalTarget == this) {
-            var popup = document.getAnonymousElementByAttribute(this, "anonid", "popup");
-            this.buildPopup(popup);
-            popup.openPopup(this, "after_end");
-          } else {
-            var tree = this.parentNode.parentNode;
-            tree.stopEditing(true);
-            var menuitem = document.getAnonymousElementByAttribute(this, "anonid", "menuitem");
-            if (event.originalTarget == menuitem) {
-              tree.columns.restoreNaturalOrder();
-              this.removeAttribute("ordinal");
-              tree._ensureColumnOrder();
-            } else {
-              var colindex = event.originalTarget.getAttribute("colindex");
-              var column = tree.columns[colindex];
-              if (column) {
-                var element = column.element;
-                if (element.getAttribute("hidden") == "true")
-                  element.setAttribute("hidden", "false");
-                else
-                  element.setAttribute("hidden", "true");
-              }
-            }
-          }
-        ]]>
-      </handler>
-    </handlers>
-  </binding>
 </bindings>
diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css
index 0460e7f2fde2..22fa3818c41f 100644
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -448,10 +448,6 @@ treerows {
   -moz-binding: url("chrome://global/content/bindings/tree.xml#treerows");
 }
 
-treecolpicker {
-  -moz-binding: url("chrome://global/content/bindings/tree.xml#columnpicker");
-}
-
 tree {
   -moz-box-orient: vertical;
   min-width: 0px;