Bug 1314544: [DateTimeInput] browser keyboard shortcut does not work when focus is on input box

author: janekptacijarabaci <janekptacijarabaci@seznam.cz> 2018-02-14 14:10:13 +0100
committer: janekptacijarabaci <janekptacijarabaci@seznam.cz> 2018-02-14 14:10:13 +0100
commit: 34125a031ed9c7814d2145070294ead44b7504b3 (patch)
tree: 0e91eeac42ef55a2f4b26e19af8ac1531e623066
parent: 631b690ac3fecb1406246237d282390283c77e2c (diff)
download: UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar
UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar.gz
UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar.lz
UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar.xz
UXP-34125a031ed9c7814d2145070294ead44b7504b3.zip
2 files changed, 151 insertions, 59 deletions
diff --git a/toolkit/content/widgets/datetimebox.css b/toolkit/content/widgets/datetimebox.css
index 4a9593a69..18ff024c7 100644
--- a/toolkit/content/widgets/datetimebox.css
+++ b/toolkit/content/widgets/datetimebox.css
@@ -20,6 +20,8 @@
   border: 0;
   margin: 0;
   ime-mode: disabled;
+  cursor: default;
+  -moz-user-select: none;
 }
 
 .datetime-separator {
diff --git a/toolkit/content/widgets/datetimebox.xml b/toolkit/content/widgets/datetimebox.xml
index 05591e65a..21cc6c1bd 100644
--- a/toolkit/content/widgets/datetimebox.xml
+++ b/toolkit/content/widgets/datetimebox.xml
@@ -282,21 +282,25 @@
           if (this.mHourField && !this.mHourField.disabled &&
               !this.mHourField.readOnly) {
             this.mHourField.value = "";
+            this.mHourField.setAttribute("typeBuffer", "");
           }
 
           if (this.mMinuteField && !this.mMinuteField.disabled &&
               !this.mMinuteField.readOnly) {
             this.mMinuteField.value = "";
+            this.mMinuteField.setAttribute("typeBuffer", "");
           }
 
           if (this.mSecondField && !this.mSecondField.disabled &&
               !this.mSecondField.readOnly) {
             this.mSecondField.value = "";
+            this.mSecondField.setAttribute("typeBuffer", "");
           }
 
           if (this.mMillisecField && !this.mMillisecField.disabled &&
               !this.mMillisecField.readOnly) {
             this.mMillisecField.value = "";
+            this.mMillisecField.setAttribute("typeBuffer", "");
           }
 
           if (this.mDayPeriodField && !this.mDayPeriodField.disabled &&
@@ -579,9 +583,40 @@
         this.mMax = this.mInputElement.max;
         this.mStep = this.mInputElement.step;
         this.mIsPickerOpen = false;
+
+        this.EVENTS.forEach((eventName) => {
+          this.addEventListener(eventName, this, { mozSystemGroup: true });
+        });
+        // Handle keypress separately since we need to catch it on capturing.
+        this.addEventListener("keypress", this, {
+          capture: true,
+          mozSystemGroup: true
+        });
       ]]>
       </constructor>
 
+      <destructor>
+      <![CDATA[
+        this.mInputElement = null;
+
+        this.EVENTS.forEach((eventName) => {
+          this.removeEventListener(eventName, this, { mozSystemGroup: true });
+        });
+        this.removeEventListener("keypress", onKeyPress, {
+          capture: true,
+          mozSystemGroup: true
+        });
+      ]]>
+      </destructor>
+
+      <property name="EVENTS" readonly="true">
+        <getter>
+        <![CDATA[
+          return ["click", "focus", "blur", "copy", "cut", "paste"];
+        ]]>
+        </getter>
+      </property>
+
       <method name="log">
         <parameter name="aMsg"/>
         <body>
@@ -736,72 +771,127 @@
         </body>
       </method>
 
-    </implementation>
-
-    <handlers>
-      <handler event="focus">
-      <![CDATA[
-        this.log("focus on: " + event.originalTarget);
-
-        let target = event.originalTarget;
-        if (target.type == "text") {
-          this.mLastFocusedField = target;
-          target.select();
-        }
-      ]]>
-      </handler>
-
-      <handler event="blur">
-      <![CDATA[
-        this.setInputValueFromFields();
-      ]]>
-      </handler>
+      <method name="handleEvent">
+        <parameter name="aEvent"/>
+        <body>
+        <![CDATA[
+          this.log("handleEvent: " + aEvent.type);
 
-      <handler event="click">
-      <![CDATA[
-        // XXX: .originalTarget is not expected.
-        // When clicking on one of the inner text boxes, the .originalTarget is
-        // a HTMLDivElement and when clicking on the reset button, it's a
-        // HTMLButtonElement but it's not equal to our reset-button.
-        this.log("click on: " + event.originalTarget);
-        if (event.defaultPrevented || this.isDisabled() || this.isReadonly()) {
-          return;
-        }
+          switch (aEvent.type) {
+            case "keypress": {
+              this.onKeyPress(aEvent);
+              break;
+            }
+            case "click": {
+              this.onClick(aEvent);
+              break;
+            }
+            case "focus": {
+              this.onFocus(aEvent);
+              break;
+            }
+            case "blur": {
+              this.setInputValueFromFields();
+              break;
+            }
+            case "copy":
+            case "cut":
+            case "paste": {
+              aEvent.preventDefault();
+              break;
+            }
+            default:
+              break;
+          }
+        ]]>
+        </body>
+      </method>
 
-        if (!(event.originalTarget instanceof HTMLButtonElement)) {
-          this.mInputElement.openDateTimePicker(this.getCurrentValue());
-        }
-      ]]>
-      </handler>
+      <method name="onFocus">
+        <parameter name="aEvent"/>
+        <body>
+        <![CDATA[
+          this.log("onFocus originalTarget: " + aEvent.originalTarget);
 
-      <handler event="keypress" phase="capturing">
-      <![CDATA[
-        let key = event.key;
-        this.log("keypress: " + key);
+          let target = aEvent.originalTarget;
+          if ((target instanceof HTMLInputElement) && target.type == "text") {
+            this.mLastFocusedField = target;
+            target.select();
+          }
+        ]]>
+        </body>
+      </method>
 
-        if (key == "Backspace" || key == "Tab") {
-          return;
-        }
+      <method name="onKeyPress">
+        <parameter name="aEvent"/>
+        <body>
+        <![CDATA[
+          this.log("onKeyPress key: " + aEvent.key);
+
+          switch (aEvent.key) {
+            // Close picker on Enter or Space key.
+            case "Enter":
+            case " ": {
+              this.mInputElement.closeDateTimePicker();
+              aEvent.preventDefault();
+              break;
+            }
+            case "Backspace": {
+              let targetField = aEvent.originalTarget;
+              targetField.setAttribute("typeBuffer", "");
+              break;
+            }
+            case "ArrowRight":
+            case "ArrowLeft": {
+              this.advanceToNextField(aEvent.key == "ArrowRight" ? false : true);
+              aEvent.preventDefault();
+              break;
+            }
+            case "ArrowUp":
+            case "ArrowDown":
+            case "PageUp":
+            case "PageDown":
+            case "Home":
+            case "End": {
+              this.handleKeyboardNav(aEvent);
+              aEvent.preventDefault();
+              break;
+            }
+            default: {
+              // printable characters
+              if (aEvent.keyCode == 0 &&
+                  !(aEvent.ctrlKey || aEvent.altKey || aEvent.metaKey)) {
+                this.handleKeypress(aEvent);
+                aEvent.preventDefault();
+              }
+              break;
+            }
+          }
+        ]]>
+        </body>
+      </method>
 
-        if (key == "Enter" || key == " ") {
-          // Close picker on Enter and Space.
-          this.mInputElement.closeDateTimePicker();
-        }
+      <method name="onClick">
+        <parameter name="aEvent"/>
+        <body>
+        <![CDATA[
+          this.log("onClick originalTarget: " + aEvent.originalTarget);
 
-        if (key == "ArrowUp" || key == "ArrowDown" ||
-            key == "PageUp" || key == "PageDown" ||
-            key == "Home" || key == "End") {
-          this.handleKeyboardNav(event);
-        } else if (key == "ArrowRight" || key == "ArrowLeft") {
-          this.advanceToNextField((key == "ArrowRight" ? false : true));
-        } else {
-          this.handleKeypress(event);
-        }
+          // XXX: .originalTarget is not expected.
+          // When clicking on one of the inner text boxes, the .originalTarget is
+          // a HTMLDivElement and when clicking on the reset button, it's a
+          // HTMLButtonElement but it's not equal to our reset-button.
+          if (aEvent.defaultPrevented || this.isDisabled() || this.isReadonly()) {
+            return;
+          }
 
-        event.preventDefault();
-      ]]>
-      </handler>
-    </handlers>
+          if (!(aEvent.originalTarget instanceof HTMLButtonElement)) {
+            this.mInputElement.openDateTimePicker(this.getCurrentValue());
+          }
+        ]]>
+        </body>
+      </method>
+    </implementation>
   </binding>
 
 </bindings>
author	janekptacijarabaci <janekptacijarabaci@seznam.cz>	2018-02-14 14:10:13 +0100
committer	janekptacijarabaci <janekptacijarabaci@seznam.cz>	2018-02-14 14:10:13 +0100
commit	34125a031ed9c7814d2145070294ead44b7504b3 (patch)
tree	0e91eeac42ef55a2f4b26e19af8ac1531e623066
parent	631b690ac3fecb1406246237d282390283c77e2c (diff)
download	UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar.gz UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar.lz UXP-34125a031ed9c7814d2145070294ead44b7504b3.tar.xz UXP-34125a031ed9c7814d2145070294ead44b7504b3.zip