Bug 1563001 - Use HTML input instead of XUL textbox in calendar/content/preferences. r=mkmelin
authorAlessandro Castellani <alessandro@thunderbird.net>
Wed, 25 Sep 2019 15:36:59 -0700
changeset 36964 bd512e39e53240481c5b7a0a2e8c0df75379fb4a
parent 36963 8bafe0778749599ffc7f7007301335ed35f4f188
child 36965 0e193af944ebe11fb4504e743333537fb9769647
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersmkmelin
bugs1563001
Bug 1563001 - Use HTML input instead of XUL textbox in calendar/content/preferences. r=mkmelin
calendar/base/content/preferences/alarms.inc.xul
calendar/base/content/preferences/alarms.js
calendar/base/content/preferences/editCategory.js
calendar/base/content/preferences/editCategory.xul
calendar/base/themes/common/calendar-preferences.css
--- a/calendar/base/content/preferences/alarms.inc.xul
+++ b/calendar/base/content/preferences/alarms.inc.xul
@@ -28,24 +28,24 @@
                 </hbox>
                 <hbox>
                     <radio id="alarmSoundCustom"
                            value="1"
                            label="&pref.calendar.alarms.sound.useCustom.label;"
                            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;"
                         oncommand="gAlarmsPane.browseAlarm()"/>
             </hbox>
         </vbox>
         <hbox align="center" flex="1">
             <checkbox id="alarmshow"
--- a/calendar/base/content/preferences/alarms.js
+++ b/calendar/base/content/preferences/alarms.js
@@ -151,16 +151,17 @@ var gAlarmsPane = {
     let alarmsPlaySoundPref = Preferences.get("calendar.alarms.playsound");
     let alarmsSoundType = Preferences.get("calendar.alarms.soundType");
 
     for (let item of ["alarmSoundType", "calendar.prefs.alarm.sound.play"]) {
       document.getElementById(item).disabled = !alarmsPlaySoundPref.value;
     }
 
     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;
     }
   },
 };
 
 Preferences.get("calendar.alarms.playsound").on("change", gAlarmsPane.alarmsPlaySoundPrefChanged);
 Preferences.get("calendar.alarms.soundType").on("change", gAlarmsPane.alarmsPlaySoundPrefChanged);
 Preferences.get("calendar.alarms.soundURL").on("change", gAlarmsPane.readSoundLocation);
--- a/calendar/base/content/preferences/editCategory.js
+++ b/calendar/base/content/preferences/editCategory.js
@@ -66,34 +66,34 @@ function colorPickerChanged() {
 /**
  * Handler called when the use color checkbox is toggled.
  */
 function toggleColor() {
   let useColor = document.getElementById("useColor").checked;
   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 = "";
   }
 }
 
 /**
  * Click handler for the color picker. Turns the button back into a colorpicker
  * when clicked.
  */
 function clickColor() {
   let categoryColor = document.getElementById("categoryColor");
-  if (categoryColor.getAttribute("type") == "button") {
+  if (categoryColor.hasAttribute("disabled")) {
     colorPickerChanged();
     toggleColor();
     categoryColor.click();
   }
 }
 
 /**
  * Call the function after the given timeout, resetting the timer if delay is
--- a/calendar/base/content/preferences/editCategory.xul
+++ b/calendar/base/content/preferences/editCategory.xul
@@ -12,29 +12,35 @@
   <!ENTITY % dtd2 SYSTEM "chrome://calendar/locale/global.dtd" > %dtd2;
 ]>
 
 <dialog id="editCategory"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         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;"
                 oncommand="toggleColor(); categoryNameChanged()"/>
       <html:input id="categoryColor"
                   type="color"
                   style="width: 64px; height: 23px"
                   onclick="clickColor()"
-                  onchange="colorPickerChanged()"/>
+                  onchange="colorPickerChanged()"
+                  aria-labelledby="useColor"/>
     </hbox>
   </vbox>
 </dialog>
--- a/calendar/base/themes/common/calendar-preferences.css
+++ b/calendar/base/themes/common/calendar-preferences.css
@@ -37,17 +37,16 @@
 
 #eventdefalarm,
 #tododefalarm,
 #alarmSoundFileField {
   width: calc(100% - 8px); /* 8px is the sum of the element margins. */
 }
 
 #alarm-sound-buttons-box,
-#calendar\.prefs\.alarm\.sound\.browse,
 #calendar\.prefs\.alarm\.sound\.useDefault {
   width: 100%;
 }
 
 .defaultTimeBox {
   width: 100%;
   margin-inline-start: 8px;
 }