Bug 1325922: [DateTimePicker] Add arrows svg file and style month-year button for date picker

4 files changed, 31 insertions, 12 deletions

diff --git a/toolkit/content/datepicker.xhtml b/toolkit/content/datepicker.xhtml
index abc7db303..d79b53102 100644
--- a/toolkit/content/datepicker.xhtml
+++ b/toolkit/content/datepicker.xhtml
@@ -16,8 +16,8 @@
   <div id="date-picker">
     <div class="calendar-container">
       <div class="nav">
-        <button class="left">&lt;</button>
-        <button class="right">&gt;</button>
+        <button class="left"/>
+        <button class="right"/>
       </div>
       <div class="week-header"></div>
       <div class="days-viewport">
@@ -25,8 +25,8 @@
       </div>
     </div>
     <div class="month-year">
-      <div class="month-year-label"></div>
-      <div class="month-year-arrow"></div>
+    <div class="month-year-container">
+      <button class="month-year"/>
     </div>
     <div class="month-year-view"></div>
   </div>
diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js
index d3f0fd1a4..7453b67eb 100644
--- a/toolkit/content/widgets/datepicker.js
+++ b/toolkit/content/widgets/datepicker.js
@@ -174,7 +174,8 @@ function DatePicker(context) {
      */
     _attachEventListeners() {
       window.addEventListener("message", this);
-      document.addEventListener("click", this);
+      document.addEventListener("mouseup", this, { passive: true });
+      document.addEventListener("mousedown", this);
     },
 
     /**
@@ -188,16 +189,28 @@ function DatePicker(context) {
           this.handleMessage(event);
           break;
         }
-        case "click": {
+        case "mousedown": {
+          // Use preventDefault to keep focus on input boxes
+          event.preventDefault();
+          event.target.setCapture();
+
           if (event.target == this.context.buttonLeft) {
+            event.target.classList.add("active");
             this.state.dateKeeper.setMonthByOffset(-1);
             this._update();
           } else if (event.target == this.context.buttonRight) {
+            event.target.classList.add("active");
             this.state.dateKeeper.setMonthByOffset(1);
             this._update();
           }
           break;
         }
+        case "mouseup": {
+          if (event.target == this.context.buttonLeft || event.target == this.context.buttonRight) {
+            event.target.classList.remove("active");
+          }
+
+        }
       }
     },
 
@@ -307,6 +320,7 @@ function DatePicker(context) {
       this.context.monthYear.textContent = this.state.dateFormat(props.dateObj);
 
       if (props.isVisible) {
+        this.context.monthYear.classList.add("active");
         this.components.month.setState({
           value: props.month,
           items: props.months,
@@ -323,6 +337,7 @@ function DatePicker(context) {
         });
         this.state.firstOpened = false;
       } else {
+        this.context.monthYear.classList.remove("active");
         this.state.isMonthSet = false;
         this.state.isYearSet = false;
         this.state.firstOpened = true;
diff --git a/toolkit/content/widgets/spinner.js b/toolkit/content/widgets/spinner.js
index b3d996fb5..059e151fc 100644
--- a/toolkit/content/widgets/spinner.js
+++ b/toolkit/content/widgets/spinner.js
@@ -268,11 +268,11 @@ function Spinner(props, context) {
      * Attach event listeners to the spinner and buttons.
      */
     _attachEventListeners() {
-      const { spinner } = this.elements;
+      const { spinner, container } = this.elements;
 
       spinner.addEventListener("scroll", this, { passive: true });
-      document.addEventListener("mouseup", this, { passive: true });
-      document.addEventListener("mousedown", this);
+      container.addEventListener("mouseup", this, { passive: true });
+      container.addEventListener("mousedown", this, { passive: true });
     },
 
     /**
@@ -290,9 +290,6 @@ function Spinner(props, context) {
           break;
         }
         case "mousedown": {
-          // Use preventDefault to keep focus on input boxes
-          event.preventDefault();
-          event.target.setCapture();
           this.state.mouseState = {
             down: true,
             layerX: event.layerX,
diff --git a/toolkit/content/widgets/timepicker.js b/toolkit/content/widgets/timepicker.js
index f438e9ec6..544032e9f 100644
--- a/toolkit/content/widgets/timepicker.js
+++ b/toolkit/content/widgets/timepicker.js
@@ -218,6 +218,7 @@ function TimePicker(context) {
     },
     _attachEventListeners() {
       window.addEventListener("message", this);
+      document.addEventListener("mousedown", this);
     },
 
     /**
@@ -231,6 +232,12 @@ function TimePicker(context) {
           this.handleMessage(event);
           break;
         }
+        case "mousedown": {
+          // Use preventDefault to keep focus on input boxes
+          event.preventDefault();
+          event.target.setCapture();
+          break;
+        }
       }
     },