Bug 1563001 - Use HTML input instead of XUL textbox in calendar/content/preferences. r=mkmelin

calendar/base/content/preferences/alarms.inc.xul

@@ -33,14 +33,14 @@
                            accesskey="&pref.calendar.alarms.sound.useCustom.accessKey;"/>
                 </hbox>
             </radiogroup>
-            <hbox align="center">
+            <hbox align="center" class="input-container">
-                <textbox id="alarmSoundFileField"
+                <html:input id="alarmSoundFileField"
-                         type="filefield"
+                            type="text"
-                         class="indent"
+                            class="input-filefield indent"
-                         readonly="true"
+                            readonly="readonly"
-                         flex="1"
                             preference="calendar.alarms.soundURL"
-                         preference-editable="true"/>
+                            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;"

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;
     }
   },
 };

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();

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"
+    <html:input id="categoryName"
-             flex="1"
+                type="text"
                 onchange="categoryNameChanged()"
-             oninput="delay(500, 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>

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%;
 }