Bug 1824323 - Open picker from datetimebox to get current date/time value. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D173959

dom/html/HTMLInputElement.cpp

@@ -5724,10 +5724,14 @@ void HTMLInputElement::ShowPicker(ErrorResult& aRv) {
     return;
   }
 
-  if (IsDateTimeInputType(mType) && IsInComposedDoc()) {
-    DateTimeValue value;
-    GetDateTimeInputBoxValue(value);
-    OpenDateTimePicker(value);
+  if (CreatesDateTimeWidget() && IsInComposedDoc()) {
+    if (RefPtr<Element> dateTimeBoxElement = GetDateTimeBoxElement()) {
+      // Event is dispatched to closed-shadow tree and doesn't bubble.
+      RefPtr<Document> doc = dateTimeBoxElement->OwnerDoc();
+      nsContentUtils::DispatchTrustedEvent(doc, dateTimeBoxElement,
+                                           u"MozDateTimeShowPickerForJS"_ns,
+                                           CanBubble::eNo, Cancelable::eNo);
+    }
   }
 }
 

toolkit/content/tests/browser/datetime/browser_datetime_showPicker.js

@@ -31,3 +31,22 @@ add_task(async function test_datepicker_showPicker() {
 
   await helper.tearDown();
 });
+
+/**
+ * Test that date picker opens with showPicker and the explicit value.
+ */
+add_task(async function test_datepicker_showPicker_value() {
+  await helper.openPicker(
+    "data:text/html, <input type='date' value='2012-10-15'>",
+    false,
+    "showPicker"
+  );
+
+  Assert.equal(
+    helper.getElement(MONTH_YEAR).textContent,
+    DATE_FORMAT_LOCAL(new Date("2012-10-12")),
+    "Date picker opens when a showPicker method is called"
+  );
+
+  await helper.tearDown();
+});

toolkit/content/widgets/datetimebox.js

@@ -272,6 +272,7 @@ this.DateTimeBoxWidget = class {
       "MozDateTimeAttributeChanged",
       "MozPickerValueChanged",
       "MozSetDateTimePickerState",
+      "MozDateTimeShowPickerForJS",
     ];
   }
 
@@ -552,6 +553,10 @@ this.DateTimeBoxWidget = class {
         this.setPickerState(aEvent.detail);
         break;
       }
+      case "MozDateTimeShowPickerForJS": {
+        this.openDateTimePicker();
+        break;
+      }
       case "keydown": {
         this.onKeyDown(aEvent);
         break;