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

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>

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;

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,

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

toolkit/themes/shared/datetimeinputpickers.css

@@ -16,6 +16,7 @@
 
   --border: 0.1rem solid #D6D6D6;
   --border-radius: 0.3rem;
+  --border-active-color: #B1B1B1;
 
   --font-color: #191919;
   --fill-color: #EBEBEB;
@@ -26,6 +27,7 @@
   --button-font-color: #858585;
   --button-font-color-hover: #4D4D4D;
   --button-font-color-active: #191919;
+  --button-fill-color-active: #D4D4D4;
 
   --weekday-font-color: #6C6C6C;
   --weekday-outside-font-color: #6C6C6C;
@@ -46,6 +48,12 @@ body {
   font-size: var(--font-size-default);
 }
 
+button {
+  -moz-appearance: none;
+  background: none;
+  border: none;
+}
+
 .nav {
   display: flex;
   width: var(--calendar-width);
@@ -54,15 +62,29 @@ body {
   justify-content: space-between;
 }
 
-.nav button {
-  -moz-appearance: none;
-  background: none;
-  border: none;
+.nav > button {
   width: 3rem;
   height: var(--date-picker-item-height);
+  background-color: var(--button-font-color);
 }
 
-.month-year {
+.nav > button:hover {
+  background-color: var(--button-font-color-hover);
+}
+
+.nav > button.active {
+  background-color: var(--button-font-color-active);
+}
+
+.nav > button.left {
+  background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%;
+}
+
+.nav > button.right {
+  background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%;
+}
+
+.month-year-container {
   position: absolute;
   display: flex;
   justify-content: center;
@@ -74,6 +96,35 @@ body {
   z-index: 10;
 }
 
+button.month-year {
+  font-size: 1.3rem;
+  border: var(--border);
+  border-radius: 0.3rem;
+  padding: 0.2rem 2.6rem 0.2rem 1.2rem;
+}
+
+button.month-year:hover {
+  background: var(--fill-color);
+}
+
+button.month-year.active {
+  border-color: var(--border-active-color);
+  background: var(--button-fill-color-active);
+}
+
+button.month-year::after {
+  position: absolute;
+  content: "";
+  width: 2.6rem;
+  height: 1.6rem;
+  background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
+  background-color: var(--button-font-color);
+}
+
+button.month-year.active::after {
+  background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+}
+
 .month-year-view {
   position: absolute;
   z-index: 5;
@@ -187,9 +238,6 @@ body {
 }
 
 .spinner-container > button {
-  -moz-appearance: none;
-  border: none;
-  background: none;
   background-color: var(--button-font-color);
   height: var(--spinner-button-height);
 }

toolkit/themes/shared/icons/calendar-arrows.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+  <style>
+    path:not(:target) {
+      display: none;
+    }
+  </style>
+  <path id="right" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
+  <path id="left" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
+</svg>

toolkit/themes/shared/jar.inc.mn

@@ -23,6 +23,7 @@ toolkit.jar:
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
   skin/classic/global/datetimepopup.css                    (../../shared/datetimepopup.css)
+  skin/classic/global/icons/calendar-arrows.svg            (../../shared/icons/calendar-arrows.svg)
   skin/classic/global/icons/find-arrows.svg                (../../shared/icons/find-arrows.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)