From 03de1a202c32559e6950f88b9da973c41c06ef0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Wed, 10 Apr 2024 20:52:44 +0000
Subject: [PATCH] Bug 1890824 - Simplify number input styles in the print
 dialog. r=Itiel,desktop-theme-reviewers,dao

Use the non-native theme number input rather than rebuilding one.

D205379 actually broke the hover effect because nesting with a
pseudo-element doesn't work as you expect, see
https://github.com/w3c/csswg-drafts/issues/9492

Differential Revision: https://phabricator.services.mozilla.com/D207178
---
 toolkit/components/printing/content/print.css | 38 +------------------
 .../components/printing/content/print.html    | 11 +++---
 2 files changed, 6 insertions(+), 43 deletions(-)

diff --git a/toolkit/components/printing/content/print.css b/toolkit/components/printing/content/print.css
index a35972b738ad..fe84c93eb048 100644
--- a/toolkit/components/printing/content/print.css
+++ b/toolkit/components/printing/content/print.css
@@ -125,7 +125,7 @@ input:is([type="number"], [type="text"]) {
   padding-inline-start: var(--space-small);
 }
 
-input[type="number"].photon-number {
+input[type="number"] {
   box-sizing: content-box;
   min-height: unset;
   padding: 0;
@@ -133,42 +133,6 @@ input[type="number"].photon-number {
   margin: 0;
   height: 1.5em;
   width: 4em;
-
-  &::-moz-number-spin-box {
-    height: 100%;
-    max-height: 100%;
-    border-inline-start: 1px solid var(--in-content-box-border-color);
-    width: 1em;
-    border-start-end-radius: var(--border-radius-small);
-    border-end-end-radius: var(--border-radius-small);
-  }
-
-  &:hover::-moz-number-spin-box {
-    border-color: var(--in-content-border-hover);
-  }
-
-  &::-moz-number-spin-up,
-  &::-moz-number-spin-down {
-    appearance: none;
-    border: 0;
-    border-radius: 0;
-    background-color: var(--in-content-button-background);
-    background-image: url("chrome://global/skin/icons/arrow-down.svg");
-    background-repeat: no-repeat;
-    background-size: 8px;
-    background-position: center;
-    -moz-context-properties: fill;
-    fill: currentColor;
-
-    &:hover {
-      background-color: var(--in-content-button-background-hover);
-      color: var(--in-content-button-text-color-hover);
-    }
-  }
-
-  &::-moz-number-spin-up {
-    background-image: url("chrome://global/skin/icons/arrow-up.svg");
-  }
 }
 
 input:is([type="checkbox"], [type="radio"]):disabled + label,
diff --git a/toolkit/components/printing/content/print.html b/toolkit/components/printing/content/print.html
index 1be665acf7fd..4e129c3f6694 100644
--- a/toolkit/components/printing/content/print.html
+++ b/toolkit/components/printing/content/print.html
@@ -136,7 +136,6 @@
                  will filter this down to visible items only. -->
             <input
               id="percent-scale"
-              class="photon-number"
               is="setting-number"
               min="10"
               max="200"
@@ -166,7 +165,7 @@
         data-setting-name="numCopies"
         min="1"
         max="10000"
-        class="copy-count-input photon-number"
+        class="copy-count-input"
         aria-errormessage="error-invalid-copies"
         required
       />
@@ -205,7 +204,7 @@
             <input
               is="setting-number"
               id="custom-margin-top"
-              class="margin-input photon-number"
+              class="margin-input"
               aria-describedby="margins-custom-margin-top-desc"
               min="0"
               step="0.01"
@@ -226,7 +225,7 @@
             <input
               is="setting-number"
               id="custom-margin-bottom"
-              class="margin-input photon-number"
+              class="margin-input"
               aria-describedby="margins-custom-margin-bottom-desc"
               min="0"
               step="0.01"
@@ -249,7 +248,7 @@
             <input
               is="setting-number"
               id="custom-margin-left"
-              class="margin-input photon-number"
+              class="margin-input"
               aria-describedby="margins-custom-margin-left-desc"
               min="0"
               step="0.01"
@@ -270,7 +269,7 @@
             <input
               is="setting-number"
               id="custom-margin-right"
-              class="margin-input photon-number"
+              class="margin-input"
               aria-describedby="margins-custom-margin-right-desc"
               min="0"
               step="0.01"