--- a/accessible/base/nsAccessibilityService.cpp
+++ b/accessible/base/nsAccessibilityService.cpp
@@ -68,17 +68,16 @@
 #include "mozilla/ArrayUtils.h"
 #include "mozilla/dom/DOMStringList.h"
 #include "mozilla/Preferences.h"
 #include "mozilla/Services.h"
 #include "nsDeckFrame.h"
 
 #ifdef MOZ_XUL
 #include "XULAlertAccessible.h"
-#include "XULColorPickerAccessible.h"
 #include "XULComboboxAccessible.h"
 #include "XULElementAccessibles.h"
 #include "XULFormControlAccessible.h"
 #include "XULListboxAccessibleWrap.h"
 #include "XULMenuAccessibleWrap.h"
 #include "XULSliderAccessible.h"
 #include "XULTabAccessible.h"
 #include "XULTreeGridAccessibleWrap.h"
@@ -1483,20 +1482,17 @@ nsAccessibilityService::CreateAccessible
 
   } else if (role.EqualsLiteral("xul:button")) {
     accessible = new XULButtonAccessible(aContent, aDoc);
 
   } else if (role.EqualsLiteral("xul:checkbox")) {
     accessible = new XULCheckboxAccessible(aContent, aDoc);
 
   } else if (role.EqualsLiteral("xul:colorpicker")) {
-    accessible = new XULColorPickerAccessible(aContent, aDoc);
-
-  } else if (role.EqualsLiteral("xul:colorpickertile")) {
-    accessible = new XULColorPickerTileAccessible(aContent, aDoc);
+    accessible = new EnumRoleAccessible<roles::SECTION>(aContent, aDoc);
 
   } else if (role.EqualsLiteral("xul:combobox")) {
     accessible = new XULComboboxAccessible(aContent, aDoc);
 
   } else if (role.EqualsLiteral("xul:tabpanels")) {
       accessible = new XULTabpanelsAccessible(aContent, aDoc);
 
   } else if (role.EqualsLiteral("xul:dropmarker")) {

deleted file mode 100644
--- a/accessible/xul/XULColorPickerAccessible.cpp
+++ /dev/null
@@ -1,144 +0,0 @@
-/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-#include "XULColorPickerAccessible.h"
-
-#include "Accessible-inl.h"
-#include "nsAccUtils.h"
-#include "nsCoreUtils.h"
-#include "DocAccessible.h"
-#include "Role.h"
-#include "States.h"
-
-#include "nsIDOMElement.h"
-#include "nsMenuPopupFrame.h"
-
-using namespace mozilla::a11y;
-
-////////////////////////////////////////////////////////////////////////////////
-// XULColorPickerTileAccessible
-////////////////////////////////////////////////////////////////////////////////
-
-XULColorPickerTileAccessible::
-  XULColorPickerTileAccessible(nsIContent* aContent, DocAccessible* aDoc) :
-  AccessibleWrap(aContent, aDoc)
-{
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// XULColorPickerTileAccessible: Accessible
-
-void
-XULColorPickerTileAccessible::Value(nsString& aValue)
-{
-  aValue.Truncate();
-
-  mContent->AsElement()->GetAttr(kNameSpaceID_None, nsGkAtoms::color, aValue);
-}
-
-role
-XULColorPickerTileAccessible::NativeRole()
-{
-  return roles::PUSHBUTTON;
-}
-
-uint64_t
-XULColorPickerTileAccessible::NativeState()
-{
-  uint64_t state = AccessibleWrap::NativeState();
-  if (mContent->AsElement()->HasAttr(kNameSpaceID_None, nsGkAtoms::selected))
-    state |= states::SELECTED;
-
-  return state;
-}
-
-uint64_t
-XULColorPickerTileAccessible::NativeInteractiveState() const
-{
-  return NativelyUnavailable() ?
-    states::UNAVAILABLE : states::FOCUSABLE | states::SELECTABLE;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// XULColorPickerTileAccessible: Widgets
-
-Accessible*
-XULColorPickerTileAccessible::ContainerWidget() const
-{
-  Accessible* parent = Parent();
-  if (parent) {
-    Accessible* grandParent = parent->Parent();
-    if (grandParent && grandParent->IsMenuButton())
-      return grandParent;
-  }
-  return nullptr;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// XULColorPickerAccessible
-////////////////////////////////////////////////////////////////////////////////
-
-XULColorPickerAccessible::
-  XULColorPickerAccessible(nsIContent* aContent, DocAccessible* aDoc) :
-  XULColorPickerTileAccessible(aContent, aDoc)
-{
-  mGenericTypes |= eMenuButton;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// XULColorPickerAccessible: Accessible
-
-uint64_t
-XULColorPickerAccessible::NativeState()
-{
-  uint64_t state = AccessibleWrap::NativeState();
-  return state | states::HASPOPUP;
-}
-
-role
-XULColorPickerAccessible::NativeRole()
-{
-  return roles::BUTTONDROPDOWNGRID;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// XULColorPickerAccessible: Widgets
-
-bool
-XULColorPickerAccessible::IsWidget() const
-{
-  return true;
-}
-
-bool
-XULColorPickerAccessible::IsActiveWidget() const
-{
-  return FocusMgr()->HasDOMFocus(mContent);
-}
-
-bool
-XULColorPickerAccessible::AreItemsOperable() const
-{
-  Accessible* menuPopup = mChildren.SafeElementAt(0, nullptr);
-  if (menuPopup) {
-    nsMenuPopupFrame* menuPopupFrame = do_QueryFrame(menuPopup->GetFrame());
-    return menuPopupFrame && menuPopupFrame->IsOpen();
-  }
-  return false;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// XULColorPickerAccessible: Accessible
-
-bool
-XULColorPickerAccessible::IsAcceptableChild(nsIContent* aEl) const
-{
-  nsAutoString role;
-  nsCoreUtils::XBLBindingRole(aEl, role);
-  return role.EqualsLiteral("xul:panel") &&
-    aEl->IsElement() &&
-    aEl->AsElement()->AttrValueIs(kNameSpaceID_None, nsGkAtoms::noautofocus,
-                                  nsGkAtoms::_true, eCaseMatters);
-}

deleted file mode 100644
--- a/accessible/xul/XULColorPickerAccessible.h
+++ /dev/null
@@ -1,57 +0,0 @@
-/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-#ifndef mozilla_a11y_XULColorPickerAccessible_h__
-#define mozilla_a11y_XULColorPickerAccessible_h__
-
-#include "AccessibleWrap.h"
-
-namespace mozilla {
-namespace a11y {
-
-/**
- * Used for color button in colorpicker palette.
- */
-class XULColorPickerTileAccessible : public AccessibleWrap
-{
-public:
-  XULColorPickerTileAccessible(nsIContent* aContent,
-                               DocAccessible* aDoc);
-
-  // Accessible
-  virtual void Value(nsString& aValue) override;
-  virtual a11y::role NativeRole() override;
-  virtual uint64_t NativeState() override;
-  virtual uint64_t NativeInteractiveState() const override;
-
-  // Widgets
-  virtual Accessible* ContainerWidget() const override;
-};
-
-
-/**
- * Used for colorpicker button (xul:colorpicker@type="button").
- */
-class XULColorPickerAccessible : public XULColorPickerTileAccessible
-{
-public:
-  XULColorPickerAccessible(nsIContent* aContent, DocAccessible* aDoc);
-
-  // Accessible
-  virtual a11y::role NativeRole() override;
-  virtual uint64_t NativeState() override;
-
-  // Widgets
-  virtual bool IsWidget() const override;
-  virtual bool IsActiveWidget() const override;
-  virtual bool AreItemsOperable() const override;
-
-  virtual bool IsAcceptableChild(nsIContent* aEl) const override;
-};
-
-} // namespace a11y
-} // namespace mozilla
-
-#endif

--- a/accessible/xul/moz.build
+++ b/accessible/xul/moz.build
@@ -1,17 +1,16 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 UNIFIED_SOURCES += [
     'XULAlertAccessible.cpp',
-    'XULColorPickerAccessible.cpp',
     'XULComboboxAccessible.cpp',
     'XULElementAccessibles.cpp',
     'XULFormControlAccessible.cpp',
     'XULListboxAccessible.cpp',
     'XULMenuAccessible.cpp',
     'XULSelectControlAccessible.cpp',
     'XULSliderAccessible.cpp',
     'XULTabAccessible.cpp',

--- a/toolkit/content/widgets/colorpicker.xml
+++ b/toolkit/content/widgets/colorpicker.xml
@@ -1,121 +1,40 @@
 <?xml version="1.0"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 
 <bindings id="colorpickerBindings"
    xmlns="http://www.mozilla.org/xbl"
+   xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:xbl="http://www.mozilla.org/xbl">
 
-  <binding id="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol">
+  <binding id="colorpicker-button" extends="chrome://global/content/bindings/general.xml#basecontrol">
     <resources>
       <stylesheet src="chrome://global/skin/colorpicker.css"/>
     </resources>
 
     <content>
-      <xul:vbox flex="1">
-
-        <xul:hbox>
-          <xul:image class="colorpickertile cp-light" color="#FFFFFF"/>
-          <xul:image class="colorpickertile cp-light" color="#FFCCCC"/>
-          <xul:image class="colorpickertile cp-light" color="#FFCC99"/>
-          <xul:image class="colorpickertile cp-light" color="#FFFF99"/>
-          <xul:image class="colorpickertile cp-light" color="#FFFFCC"/>
-          <xul:image class="colorpickertile cp-light" color="#99FF99"/>
-          <xul:image class="colorpickertile cp-light" color="#99FFFF"/>
-          <xul:image class="colorpickertile cp-light" color="#CCFFFF"/>
-          <xul:image class="colorpickertile cp-light" color="#CCCCFF"/>
-          <xul:image class="colorpickertile cp-light" color="#FFCCFF"/>
-        </xul:hbox>
-        <xul:hbox>
-          <xul:image class="colorpickertile" color="#CCCCCC"/>
-          <xul:image class="colorpickertile" color="#FF6666"/>
-          <xul:image class="colorpickertile" color="#FF9966"/>
-          <xul:image class="colorpickertile cp-light" color="#FFFF66"/>
-          <xul:image class="colorpickertile cp-light" color="#FFFF33"/>
-          <xul:image class="colorpickertile cp-light" color="#66FF99"/>
-          <xul:image class="colorpickertile cp-light" color="#33FFFF"/>
-          <xul:image class="colorpickertile cp-light" color="#66FFFF"/>
-          <xul:image class="colorpickertile" color="#9999FF"/>
-          <xul:image class="colorpickertile" color="#FF99FF"/>
-        </xul:hbox>
-        <xul:hbox>
-          <xul:image class="colorpickertile" color="#C0C0C0"/>
-          <xul:image class="colorpickertile" color="#FF0000"/>
-          <xul:image class="colorpickertile" color="#FF9900"/>
-          <xul:image class="colorpickertile" color="#FFCC66"/>
-          <xul:image class="colorpickertile cp-light" color="#FFFF00"/>
-          <xul:image class="colorpickertile cp-light" color="#33FF33"/>
-          <xul:image class="colorpickertile" color="#66CCCC"/>
-          <xul:image class="colorpickertile" color="#33CCFF"/>
-          <xul:image class="colorpickertile" color="#6666CC"/>
-          <xul:image class="colorpickertile" color="#CC66CC"/>
-        </xul:hbox>
-        <xul:hbox>
-          <xul:image class="colorpickertile" color="#999999"/>
-          <xul:image class="colorpickertile" color="#CC0000"/>
-          <xul:image class="colorpickertile" color="#FF6600"/>
-          <xul:image class="colorpickertile" color="#FFCC33"/>
-          <xul:image class="colorpickertile" color="#FFCC00"/>
-          <xul:image class="colorpickertile" color="#33CC00"/>
-          <xul:image class="colorpickertile" color="#00CCCC"/>
-          <xul:image class="colorpickertile" color="#3366FF"/>
-          <xul:image class="colorpickertile" color="#6633FF"/>
-          <xul:image class="colorpickertile" color="#CC33CC"/>
-        </xul:hbox>
-        <xul:hbox>
-          <xul:image class="colorpickertile" color="#666666"/>
-          <xul:image class="colorpickertile" color="#990000"/>
-          <xul:image class="colorpickertile" color="#CC6600"/>
-          <xul:image class="colorpickertile" color="#CC9933"/>
-          <xul:image class="colorpickertile" color="#999900"/>
-          <xul:image class="colorpickertile" color="#009900"/>
-          <xul:image class="colorpickertile" color="#339999"/>
-          <xul:image class="colorpickertile" color="#3333FF"/>
-          <xul:image class="colorpickertile" color="#6600CC"/>
-          <xul:image class="colorpickertile" color="#993399"/>
-        </xul:hbox>
-        <xul:hbox>
-          <xul:image class="colorpickertile" color="#333333"/>
-          <xul:image class="colorpickertile" color="#660000"/>
-          <xul:image class="colorpickertile" color="#993300"/>
-          <xul:image class="colorpickertile" color="#996633"/>
-          <xul:image class="colorpickertile" color="#666600"/>
-          <xul:image class="colorpickertile" color="#006600"/>
-          <xul:image class="colorpickertile" color="#336666"/>
-          <xul:image class="colorpickertile" color="#000099"/>
-          <xul:image class="colorpickertile" color="#333399"/>
-          <xul:image class="colorpickertile" color="#663366"/>
-        </xul:hbox>
-        <xul:hbox>
-          <xul:image class="colorpickertile" color="#000000"/>
-          <xul:image class="colorpickertile" color="#330000"/>
-          <xul:image class="colorpickertile" color="#663300"/>
-          <xul:image class="colorpickertile" color="#663333"/>
-          <xul:image class="colorpickertile" color="#333300"/>
-          <xul:image class="colorpickertile" color="#003300"/>
-          <xul:image class="colorpickertile" color="#003333"/>
-          <xul:image class="colorpickertile" color="#000066"/>
-          <xul:image class="colorpickertile" color="#330099"/>
-          <xul:image class="colorpickertile" color="#330033"/>
-        </xul:hbox>
-      </xul:vbox>
-      <!-- Something to take tab focus
-      <button style="border : 0px; width: 0px; height: 0px;"/>
-      -->
+      <html:input class="colorpicker-input"
+                  type="color"
+                  xbl:inherits="value=color"
+                  anonid="input"/>
     </content>
 
     <implementation implements="nsIDOMEventListener">
+      <constructor><![CDATA[
+        this.colorInput = document.getAnonymousElementByAttribute(this, "anonid", "input");
+      ]]></constructor>
+
       <property name="color">
         <getter><![CDATA[
-          return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null;
+          return this.colorInput.value;
         ]]></getter>
         <setter><![CDATA[
           if (!val)
             return val;
           var uppercaseVal = val.toUpperCase();
           // Translate standard HTML color strings:
           if (uppercaseVal[0] != "#") {
             switch (uppercaseVal) {
@@ -164,66 +83,21 @@
               case "GRAY":
                 uppercaseVal = "#808080";
                 break;
               default: // BLACK
                 uppercaseVal = "#000000";
                 break;
             }
           }
-          var cells = this.mBox.getElementsByAttribute("color", uppercaseVal);
-          if (cells.item(0)) {
-            this.selectCell(cells[0]);
-            this.hoverCell(this.mSelectedCell);
-          }
+          this.colorInput.value = uppercaseVal;
           return val;
         ]]></setter>
       </property>
 
-      <method name="initColor">
-        <parameter name="aColor"/>
-        <body><![CDATA[
-          // Use this to initialize color without
-          //  triggering the "onselect" handler,
-          //  which closes window when it's a popup
-          this.mDoOnSelect = false;
-          this.color = aColor;
-          this.mDoOnSelect = true;
-        ]]></body>
-      </method>
-
-      <method name="initialize">
-        <body><![CDATA[
-          this.mSelectedCell = null;
-          this.mHoverCell = null;
-          this.mBox = document.getAnonymousNodes(this)[0];
-          this.mIsPopup = false;
-          this.mDoOnSelect = true;
-
-          let imageEls = this.mBox.querySelectorAll("image");
-          // We set the background of the picker tiles here using images in
-          // order for the color to show up even when author colors are
-          // disabled or the user is using high contrast mode.
-          for (let el of imageEls) {
-            let dataURI = "data:image/svg+xml,<svg style='background-color: " +
-                          encodeURIComponent(el.getAttribute("color")) +
-                          "' xmlns='http://www.w3.org/2000/svg' />";
-            el.setAttribute("src", dataURI);
-          }
-
-          this.hoverCell(this.mBox.childNodes[0].childNodes[0]);
-
-          // used to capture keydown at the document level
-          this.mPickerKeyDown = function(aEvent) {
-            document._focusedPicker.pickerKeyDown(aEvent);
-          };
-
-        ]]></body>
-      </method>
-
       <method name="_fireEvent">
         <parameter name="aTarget"/>
         <parameter name="aEventName"/>
         <body>
         <![CDATA[
           try {
             var event = document.createEvent("Events");
             event.initEvent(aEventName, true, true);
@@ -237,325 +111,32 @@
             return !cancel;
           } catch (e) {
             Components.utils.reportError(e);
           }
           return false;
         ]]>
         </body>
       </method>
-
-      <method name="resetHover">
-        <body><![CDATA[
-          if (this.mHoverCell)
-            this.mHoverCell.removeAttribute("hover");
-        ]]></body>
-      </method>
-
-      <method name="getColIndex">
-        <parameter name="aCell"/>
-        <body><![CDATA[
-          var cell = aCell;
-          var idx;
-          for (idx = -1; cell; idx++)
-            cell = cell.previousSibling;
-
-          return idx;
-        ]]></body>
-      </method>
-
-      <method name="isColorCell">
-        <parameter name="aCell"/>
-        <body><![CDATA[
-          return aCell && aCell.hasAttribute("color");
-        ]]></body>
-      </method>
-
-      <method name="hoverLeft">
-        <body><![CDATA[
-          var cell = this.mHoverCell.previousSibling;
-          this.hoverCell(cell);
-        ]]></body>
-      </method>
-
-      <method name="hoverRight">
-        <body><![CDATA[
-          var cell = this.mHoverCell.nextSibling;
-          this.hoverCell(cell);
-        ]]></body>
-      </method>
-
-      <method name="hoverUp">
-        <body><![CDATA[
-          var row = this.mHoverCell.parentNode.previousSibling;
-          if (row) {
-            var colIdx = this.getColIndex(this.mHoverCell);
-            var cell = row.childNodes[colIdx];
-            this.hoverCell(cell);
-          }
-        ]]></body>
-      </method>
-
-      <method name="hoverDown">
-        <body><![CDATA[
-          var row = this.mHoverCell.parentNode.nextSibling;
-          if (row) {
-            var colIdx = this.getColIndex(this.mHoverCell);
-            var cell = row.childNodes[colIdx];
-            this.hoverCell(cell);
-          }
-        ]]></body>
-      </method>
-
-      <method name="hoverTo">
-        <parameter name="aRow"/>
-        <parameter name="aCol"/>
-
-        <body><![CDATA[
-          var row = this.mBox.childNodes[aRow];
-          if (!row) return;
-          var cell = row.childNodes[aCol];
-          if (!cell) return;
-          this.hoverCell(cell);
-        ]]></body>
-      </method>
-
-      <method name="hoverCell">
-        <parameter name="aCell"/>
-
-        <body><![CDATA[
-          if (this.isColorCell(aCell)) {
-            this.resetHover();
-            aCell.setAttribute("hover", "true");
-            this.mHoverCell = aCell;
-            var event = document.createEvent("Events");
-            event.initEvent("DOMMenuItemActive", true, true);
-            aCell.dispatchEvent(event);
-          }
-        ]]></body>
-      </method>
-
-      <method name="selectHoverCell">
-        <body><![CDATA[
-          this.selectCell(this.mHoverCell);
-        ]]></body>
-      </method>
-
-      <method name="selectCell">
-        <parameter name="aCell"/>
-
-        <body><![CDATA[
-          if (this.isColorCell(aCell)) {
-            if (this.mSelectedCell)
-              this.mSelectedCell.removeAttribute("selected");
-
-            this.mSelectedCell = aCell;
-            aCell.setAttribute("selected", "true");
-
-            if (this.mDoOnSelect)
-              this._fireEvent(this, "select");
-          }
-        ]]></body>
-      </method>
-
-      <method name="handleEvent">
-        <parameter name="aEvent"/>
-        <body><![CDATA[
-          switch (aEvent.keyCode) {
-            case 37: // left
-              this.hoverLeft();
-              break;
-            case 38: // up
-              this.hoverUp();
-              break;
-            case 39: // right
-              this.hoverRight();
-              break;
-            case 40: // down
-              this.hoverDown();
-              break;
-            case 13: // enter
-            case 32: // space
-              this.selectHoverCell();
-              break;
-          }
-        ]]></body>
-      </method>
-
-	  <constructor><![CDATA[
-        this.initialize();
-      ]]></constructor>
-
     </implementation>
 
     <handlers>
-      <handler event="mouseover"><![CDATA[
-        this.hoverCell(event.originalTarget);
-      ]]></handler>
-
-      <handler event="click"><![CDATA[
-        if (event.originalTarget.hasAttribute("color")) {
-          this.selectCell(event.originalTarget);
-          this.hoverCell(this.mSelectedCell);
-        }
-      ]]></handler>
-
-
       <handler event="focus" phase="capturing">
       <![CDATA[
-        if (!this.mIsPopup && this.getAttribute("focused") != "true") {
+        if (this.getAttribute("focused") != "true") {
           this.setAttribute("focused", "true");
-          document.addEventListener("keydown", this, true);
-          if (this.mSelectedCell)
-            this.hoverCell(this.mSelectedCell);
+          this.colorInput.focus();
         }
       ]]>
       </handler>
 
       <handler event="blur" phase="capturing">
       <![CDATA[
-        if (!this.mIsPopup && this.getAttribute("focused") == "true") {
-          document.removeEventListener("keydown", this, true);
+        if (this.getAttribute("focused") == "true") {
           this.removeAttribute("focused");
-          this.resetHover();
+          this.colorInput.blur();
         }
       ]]>
       </handler>
     </handlers>
   </binding>
 
-  <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
-           extends="chrome://global/content/bindings/general.xml#basecontrol">
-    <resources>
-      <stylesheet src="chrome://global/skin/colorpicker.css"/>
-    </resources>
-
-    <content>
-      <xul:image class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
-
-      <xul:panel class="colorpicker-button-menupopup"
-                 anonid="colorpopup" noautofocus="true" level="top"
-                 onmousedown="event.stopPropagation()"
-                 onpopupshowing="this._colorPicker.onPopupShowing()"
-                 onpopuphiding="this._colorPicker.onPopupHiding()"
-                 onselect="this._colorPicker.pickerChange()">
-        <xul:colorpicker xbl:inherits="palettename,disabled" allowevents="true" anonid="colorpicker"/>
-      </xul:panel>
-    </content>
-
-    <implementation>
-      <property name="open"
-                onget="return this.getAttribute('open') == 'true'"
-                onset="this.showPopup();"/>
-      <property name="color">
-        <getter><![CDATA[
-          return this.getAttribute("color");
-        ]]></getter>
-        <setter><![CDATA[
-          this.mColorBox.setAttribute("src",
-            "data:image/svg+xml,<svg style='background-color: " +
-            encodeURIComponent(val) +
-            "' xmlns='http://www.w3.org/2000/svg' />");
-          this.setAttribute("color", val);
-          return val;
-        ]]></setter>
-      </property>
-
-      <method name="initialize">
-        <body><![CDATA[
-          this.mColorBox = document.getAnonymousElementByAttribute(this, "anonid", "colorbox");
-          this.mColorBox.setAttribute("src",
-            "data:image/svg+xml,<svg style='background-color: " +
-            encodeURIComponent(this.color) +
-            "' xmlns='http://www.w3.org/2000/svg' />");
-
-          var popup = document.getAnonymousElementByAttribute(this, "anonid", "colorpopup");
-          popup._colorPicker = this;
-
-          this.mPicker = document.getAnonymousElementByAttribute(this, "anonid", "colorpicker");
-        ]]></body>
-      </method>
-
-      <method name="_fireEvent">
-        <parameter name="aTarget"/>
-        <parameter name="aEventName"/>
-        <body>
-        <![CDATA[
-          try {
-            var event = document.createEvent("Events");
-            event.initEvent(aEventName, true, true);
-            var cancel = !aTarget.dispatchEvent(event);
-            if (aTarget.hasAttribute("on" + aEventName)) {
-              var fn = new Function("event", aTarget.getAttribute("on" + aEventName));
-              var rv = fn.call(aTarget, event);
-              if (rv == false)
-                cancel = true;
-            }
-            return !cancel;
-          } catch (e) {
-            dump(e);
-          }
-          return false;
-        ]]>
-        </body>
-      </method>
-
-      <method name="showPopup">
-        <body><![CDATA[
-          this.mPicker.parentNode.openPopup(this, "after_start", 0, 0, false, false);
-        ]]></body>
-      </method>
-
-      <method name="hidePopup">
-        <body><![CDATA[
-          this.mPicker.parentNode.hidePopup();
-        ]]></body>
-      </method>
-
-      <method name="onPopupShowing">
-        <body><![CDATA[
-          if ("resetHover" in this.mPicker)
-            this.mPicker.resetHover();
-          document.addEventListener("keydown", this.mPicker, true);
-          this.mPicker.mIsPopup = true;
-          // Initialize to current button's color
-          this.mPicker.initColor(this.color);
-        ]]></body>
-      </method>
-
-      <method name="onPopupHiding">
-        <body><![CDATA[
-          // Removes the key listener
-          document.removeEventListener("keydown", this.mPicker, true);
-          this.mPicker.mIsPopup = false;
-        ]]></body>
-      </method>
-
-      <method name="pickerChange">
-        <body><![CDATA[
-          this.color = this.mPicker.color;
-          setTimeout(function(aPopup) { aPopup.hidePopup(); }, 1, this.mPicker.parentNode);
-
-          this._fireEvent(this, "change");
-        ]]></body>
-      </method>
-
-      <constructor><![CDATA[
-        this.initialize();
-      ]]></constructor>
-
-    </implementation>
-
-    <handlers>
-      <handler event="keydown"><![CDATA[
-        // open popup if key is space/up/left/right/down and popup is closed
-        if ( (event.keyCode == 32 || (event.keyCode > 36 && event.keyCode < 41)) && !this.open)
-          this.showPopup();
-        else if ( (event.keyCode == 27) && this.open)
-          this.hidePopup();
-      ]]></handler>
-    </handlers>
-  </binding>
-
-  <binding id="colorpickertile" role="xul:colorpickertile">
-  </binding>
-
 </bindings>

--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -862,28 +862,20 @@ popup[type="autocomplete"][hidden="true"
   max-width: 0px;
   width: 0 !important;
   min-width: 0%;
   min-height: 0%;
 }
 
 /********** colorpicker **********/
 
-colorpicker {
-  -moz-binding: url("chrome://global/content/bindings/colorpicker.xml#colorpicker");
-}
-
 colorpicker[type="button"] {
   -moz-binding: url("chrome://global/content/bindings/colorpicker.xml#colorpicker-button");
 }
 
-.colorpickertile {
-  -moz-binding: url("chrome://global/content/bindings/colorpicker.xml#colorpickertile");
-}
-
 /********** menulist **********/
 
 menulist {
   -moz-binding: url("chrome://global/content/bindings/menulist.xml#menulist");
 }
 
 menulist[popuponly="true"] {
   -moz-binding: url("chrome://global/content/bindings/menulist.xml#menulist-popuponly");

deleted file mode 100644
--- a/toolkit/themes/linux/global/colorpicker.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* ===== colorpicker.css ================================================
-  == Styles used by the XUL colorpicker element.
-  ======================================================================= */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: colorpicker button ::::: */
- 
-/* colorpicker button */
-
-colorpicker[type="button"] {
-  -moz-appearance: button;
-  width: 38px;
-  height: 24px;
-}
-
-.colorpicker-button-colorbox {
-  border: 1px solid #000000;
-}
-
-/* ::::: colorpicker tiles ::::: */
-
-.colorpickertile {
-  width: 20px;
-  height: 20px;
-  margin: 1px;
-  border-left: 1px solid ThreeDShadow;
-  border-top: 1px solid ThreeDShadow;
-  border-right: 1px solid ThreeDHighlight;
-  border-bottom: 1px solid ThreeDHighlight;
-}
-
-.colorpickertile[selected="true"] {
-  border: 2px outset #C0C0C0;
-}
-
-.colorpickertile[hover="true"] {
-  border: 2px dotted #FFFFFF;
-}
-
-.cp-light[hover="true"] {
-  border: 2px dotted #909090;
-}

--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -3,17 +3,16 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 #include ../../shared/non-mac.jar.inc.mn
 
 toolkit.jar:
    skin/classic/global/autocomplete.css
    skin/classic/global/button.css
    skin/classic/global/checkbox.css
-   skin/classic/global/colorpicker.css
    skin/classic/global/commonDialog.css
    skin/classic/global/dropmarker.css
    skin/classic/global/findBar.css
 *  skin/classic/global/global.css
    skin/classic/global/groupbox.css
    skin/classic/global/listbox.css
    skin/classic/global/menu.css
    skin/classic/global/menulist.css

deleted file mode 100644
--- a/toolkit/themes/osx/global/colorpicker.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: colorpicker button ::::: */
-
-colorpicker[type="button"] {
-  width: 38px;
-  height: 24px;
-  border: 1px solid #a7a7a7;
-  background-color: ThreeDFace;
-  padding: 3px;
-  -moz-appearance: button-bevel;
-}
-
-.colorpicker-button-colorbox {
-  border: 1px solid #000000;
-}
-
-/* ::::: colorpicker tiles ::::: */
-
-.colorpickertile {
-  width                 : 20px;
-  height                : 20px;
-  margin                : 1px;
-}
-
-.colorpickertile[selected="true"] {
-  border : 1px outset #C0C0C0;
-
-}
-
-.colorpickertile[hover="true"] {
-  border : 1px dotted #A7A7A7;
-}
-
-.cp-light[hover="true"] {
-  border : 1px dotted #000000;
-}

--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -4,17 +4,16 @@
 
 #include ../../shared/jar.inc.mn
 
 toolkit.jar:
   skin/classic/global/10pct_transparent_grey.png
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
   skin/classic/global/checkbox.css
-  skin/classic/global/colorpicker.css
   skin/classic/global/commonDialog.css
   skin/classic/global/dialog.css
   skin/classic/global/dropmarker.css
   skin/classic/global/filefield.css
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/groupbox.css
   skin/classic/global/listbox.css

new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/colorpicker.css
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* ===== colorpicker.css ================================================
+  == Styles used by the XUL colorpicker element.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html "http://www.w3.org/1999/xhtml";
+
+/* ::::: colorpicker button ::::: */
+
+colorpicker[type="button"] {
+  width: 38px;
+  height: 24px;
+  -moz-appearance: button;
+}
+
+colorpicker[type="button"] > html|input.colorpicker-input {
+  -moz-appearance: none;
+  -moz-box-flex: 1;
+  padding: 0;
+  width: auto;
+  height: auto;
+  border: none;
+  background: none;
+}

--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -15,16 +15,17 @@ toolkit.jar:
   skin/classic/global/aboutCache.css                       (../../shared/aboutCache.css)
   skin/classic/global/aboutCacheEntry.css                  (../../shared/aboutCacheEntry.css)
   skin/classic/global/aboutMemory.css                      (../../shared/aboutMemory.css)
 * skin/classic/global/aboutReader.css                      (../../shared/aboutReader.css)
   skin/classic/global/aboutRights.css                      (../../shared/aboutRights.css)
   skin/classic/global/aboutLicense.css                     (../../shared/aboutLicense.css)
   skin/classic/global/aboutSupport.css                     (../../shared/aboutSupport.css)
   skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
+  skin/classic/global/colorpicker.css                      (../../shared/colorpicker.css)
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
   skin/classic/global/datetimepopup.css                    (../../shared/datetimepopup.css)
   skin/classic/global/passwordmgr.css                      (../../shared/passwordmgr.css)
   skin/classic/global/scale.css                            (../../shared/scale.css)
   skin/classic/global/icons/autoscroll.svg                 (../../shared/icons/autoscroll.svg)
   skin/classic/global/icons/autoscroll-horizontal.svg      (../../shared/icons/autoscroll-horizontal.svg)
   skin/classic/global/icons/autoscroll-vertical.svg        (../../shared/icons/autoscroll-vertical.svg)

deleted file mode 100644
--- a/toolkit/themes/windows/global/colorpicker.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* ===== colorpicker.css ================================================
-  == Styles used by the XUL colorpicker element.
-  ======================================================================= */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: colorpicker button ::::: */
- 
-/* colorpicker button */
-
-colorpicker[type="button"] {
-  -moz-appearance: button;
-  width: 38px;
-  height: 24px;
-  padding: 3px;
-}
-
-.colorpicker-button-colorbox {
-  border: 1px solid #000000;
-}
-
-/* ::::: colorpicker tiles ::::: */
-
-.colorpickertile {
-  width: 20px;
-  height: 20px;
-  margin: 1px;
-  border-left: 1px solid ThreeDShadow;
-  border-top: 1px solid ThreeDShadow;
-  border-right: 1px solid ThreeDHighlight;
-  border-bottom: 1px solid ThreeDHighlight;
-}
-
-.colorpickertile[selected="true"] {
-  border: 2px outset #C0C0C0;
-}
-
-.colorpickertile[hover="true"] {
-  border: 2px dotted #FFFFFF;
-}
-
-.cp-light[hover="true"] {
-  border: 2px dotted #909090;
-}

--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -11,17 +11,16 @@ toolkit.jar:
   skin/classic/global/dropmarker.css
   skin/classic/global/groupbox.css
 * skin/classic/global/menu.css
   skin/classic/global/menulist.css
 * skin/classic/global/popup.css
   skin/classic/global/radio.css
   skin/classic/global/tabbox.css
   skin/classic/global/textbox.css
-  skin/classic/global/colorpicker.css
   skin/classic/global/commonDialog.css
   skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/listbox.css
   skin/classic/global/netError.css
   skin/classic/global/numberbox.css
 * skin/classic/global/notification.css
   skin/classic/global/printPageSetup.css