From c4492fc48c3da17f92fcacbd2e6397ea58cc28ea Mon Sep 17 00:00:00 2001
From: Sam Johnson <sam@scj.me>
Date: Tue, 16 Jun 2026 16:29:44 +0000
Subject: [PATCH] Bug 2047355 - Fix time picker button visible on disabled
 fields. r=mkennedy

Adjusts the order of CSS rules so that the time picker button is correctly hidden when the input is disabled.

Differential Revision: https://phabricator.services.mozilla.com/D306587
---
 dom/html/test/forms/mochitest.toml            |  2 +
 ...st_input_datetime_timepicker_disabled.html | 54 +++++++++++++++++++
 toolkit/content/widgets/datetimebox.css       |  7 ++-
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 dom/html/test/forms/test_input_datetime_timepicker_disabled.html
diff --git a/dom/html/test/forms/mochitest.toml b/dom/html/test/forms/mochitest.toml
index 24a7f01c1c1f..ea8df7a549fb 100644
--- a/dom/html/test/forms/mochitest.toml
+++ b/dom/html/test/forms/mochitest.toml
@@ -87,6 +87,8 @@ skip-if = [
 
 ["test_input_datetime_tabindex.html"]
 
+["test_input_datetime_timepicker_disabled.html"]
+
 ["test_input_defaultValue.html"]
 
 ["test_input_email.html"]
diff --git a/dom/html/test/forms/test_input_datetime_timepicker_disabled.html b/dom/html/test/forms/test_input_datetime_timepicker_disabled.html
new file mode 100644
index 000000000000..2110c3c3ec15
--- /dev/null
+++ b/dom/html/test/forms/test_input_datetime_timepicker_disabled.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=2047355
+-->
+<head>
+<title>Test time picker button stays hidden on disabled/readonly inputs when the timepicker pref is enabled</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+Created for <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2047355">Mozilla Bug 2047355</a>
+<p id="display"></p>
+<div id="content">
+<input type="time" id="id_time" value="10:30">
+<input type="time" id="id_time_readonly" value="10:30" readonly>
+<input type="time" id="id_time_disabled" value="10:30" disabled>
+</div>
+<pre id="test">
+<script class="testbody">
+
+SimpleTest.waitForExplicitFinish();
+
+function picker_display(id) {
+  const input = document.getElementById(id);
+  const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
+  const button = shadowRoot.getElementById("picker-button");
+  return SpecialPowers.wrap(window).getComputedStyle(button).display;
+}
+
+(async function run() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["dom.forms.datetime.timepicker", true]],
+  });
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  isnot(picker_display("id_time"), "none",
+    "Enabled time input shows the picker button when the pref is on");
+  is(picker_display("id_time_disabled"), "none",
+    "Disabled time input hides the picker button");
+  is(picker_display("id_time_readonly"), "none",
+    "Read-only time input hides the picker button");
+
+  document.getElementById("id_time_disabled").disabled = false;
+  isnot(picker_display("id_time_disabled"), "none",
+    "Removing disabled re-shows the picker button");
+
+  SimpleTest.finish();
+})();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/toolkit/content/widgets/datetimebox.css b/toolkit/content/widgets/datetimebox.css
index 90006867202b..1cbfea452929 100644
--- a/toolkit/content/widgets/datetimebox.css
+++ b/toolkit/content/widgets/datetimebox.css
@@ -99,7 +99,7 @@
   display: none;
 }
 
-:host(:is(:disabled, :read-only, [type="time"])) .datetime-picker-button {
+:host([type="time"]) .datetime-picker-button {
   display: none;
 }
 
@@ -120,3 +120,8 @@
     }
   }
 }
+
+/* Must stay below the dom.forms.datetime.timepicker @media block to override its display: initial for disabled/read-only states. */
+:host(:is(:disabled, :read-only)) .datetime-picker-button {
+  display: none;
+}
