From eeadeb80351090104ad78ea30c3a62fcb2a615b0 Mon Sep 17 00:00:00 2001
From: Alessandro Castellani <alessandro@thunderbird.net>
Date: Wed, 25 Sep 2019 15:36:59 -0700
Subject: [PATCH] Bug 1563001 - Use HTML input instead of XUL textbox in
 calendar/content/preferences. r=mkmelin

---
 .../base/content/preferences/alarms.inc.xul    | 16 ++++++++--------
 calendar/base/content/preferences/alarms.js    |  3 ++-
 .../base/content/preferences/editCategory.js   |  6 +++---
 .../base/content/preferences/editCategory.xul  | 18 ++++++++++++------
 .../themes/common/calendar-preferences.css     |  1 -
 5 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/calendar/base/content/preferences/alarms.inc.xul b/calendar/base/content/preferences/alarms.inc.xul
index 6ae6a3fadb..af3de1cd2a 100644
--- a/calendar/base/content/preferences/alarms.inc.xul
+++ b/calendar/base/content/preferences/alarms.inc.xul
@@ -33,14 +33,14 @@
                            accesskey="&pref.calendar.alarms.sound.useCustom.accessKey;"/>
                 </hbox>
             </radiogroup>
-            <hbox align="center">
-                <textbox id="alarmSoundFileField"
-                         type="filefield"
-                         class="indent"
-                         readonly="true"
-                         flex="1"
-                         preference="calendar.alarms.soundURL"
-                         preference-editable="true"/>
+            <hbox align="center" class="input-container">
+                <html:input id="alarmSoundFileField"
+                            type="text"
+                            class="input-filefield indent"
+                            readonly="readonly"
+                            preference="calendar.alarms.soundURL"
+                            preference-editable="true"
+                            aria-labelledby="alarmSoundCustom"/>
                 <button id="calendar.prefs.alarm.sound.browse"
                         label="&pref.calendar.alarms.sound.browse.label;"
                         accesskey="&pref.calendar.alarms.sound.browse.accessKey;"
diff --git a/calendar/base/content/preferences/alarms.js b/calendar/base/content/preferences/alarms.js
index 559c206f13..3d7df25a78 100644
--- a/calendar/base/content/preferences/alarms.js
+++ b/calendar/base/content/preferences/alarms.js
@@ -156,7 +156,8 @@ var gAlarmsPane = {
     }
 
     for (let item of ["alarmSoundFileField", "calendar.prefs.alarm.sound.browse"]) {
-      document.getElementById(item).disabled = alarmsSoundType.value != 1;
+      document.getElementById(item).disabled =
+        alarmsSoundType.value != 1 || !alarmsPlaySoundPref.value;
     }
   },
 };
diff --git a/calendar/base/content/preferences/editCategory.js b/calendar/base/content/preferences/editCategory.js
index adb58215d4..c5a4ae3729 100644
--- a/calendar/base/content/preferences/editCategory.js
+++ b/calendar/base/content/preferences/editCategory.js
@@ -71,12 +71,12 @@ function toggleColor() {
   let categoryColor = document.getElementById("categoryColor");
 
   if (useColor) {
-    categoryColor.setAttribute("type", "color");
+    categoryColor.removeAttribute("disabled");
     if (toggleColor.lastColor) {
       categoryColor.value = toggleColor.lastColor;
     }
   } else {
-    categoryColor.setAttribute("type", "button");
+    categoryColor.setAttribute("disabled", "disabled");
     toggleColor.lastColor = categoryColor.value;
     categoryColor.value = "";
   }
@@ -88,7 +88,7 @@ function toggleColor() {
  */
 function clickColor() {
   let categoryColor = document.getElementById("categoryColor");
-  if (categoryColor.getAttribute("type") == "button") {
+  if (categoryColor.hasAttribute("disabled")) {
     colorPickerChanged();
     toggleColor();
     categoryColor.click();
diff --git a/calendar/base/content/preferences/editCategory.xul b/calendar/base/content/preferences/editCategory.xul
index 7709e3ea8d..e443519638 100644
--- a/calendar/base/content/preferences/editCategory.xul
+++ b/calendar/base/content/preferences/editCategory.xul
@@ -17,15 +17,20 @@
         xmlns:html="http://www.w3.org/1999/xhtml"
         buttons="accept,cancel"
         onload="editCategoryLoad();">
+
+  <script src="chrome://global/content/globalOverlay.js"/>
+  <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://calendar/content/preferences/editCategory.js"/>
 
   <vbox id="dialog-box">
-    <label value="&pref.categories.name.label;"
+    <label id="categoryNameLabel"
+           value="&pref.categories.name.label;"
            control="categoryName"/>
-    <textbox id="categoryName"
-             flex="1"
-             onchange="categoryNameChanged()"
-             oninput="delay(500, categoryNameChanged)"/>
+    <html:input id="categoryName"
+                type="text"
+                onchange="categoryNameChanged()"
+                oninput="delay(500, categoryNameChanged)"
+                aria-labelledby="categoryNameLabel"/>
     <hbox id="colorSelectRow">
       <checkbox id="useColor"
                 label="&pref.categories.usecolor.label;"
@@ -34,7 +39,8 @@
                   type="color"
                   style="width: 64px; height: 23px"
                   onclick="clickColor()"
-                  onchange="colorPickerChanged()"/>
+                  onchange="colorPickerChanged()"
+                  aria-labelledby="useColor"/>
     </hbox>
   </vbox>
 </dialog>
diff --git a/calendar/base/themes/common/calendar-preferences.css b/calendar/base/themes/common/calendar-preferences.css
index fb61fb6cf6..f58324ea01 100644
--- a/calendar/base/themes/common/calendar-preferences.css
+++ b/calendar/base/themes/common/calendar-preferences.css
@@ -42,7 +42,6 @@
 }
 
 #alarm-sound-buttons-box,
-#calendar\.prefs\.alarm\.sound\.browse,
 #calendar\.prefs\.alarm\.sound\.useDefault {
   width: 100%;
 }