Bug 1659184 - Replace photon-number with pseudo-elements r=ntim,jaws

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

toolkit/components/printing/content/photon-number.css

@@ -1,59 +0,0 @@
-/* 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/. */
-
-.wrapper {
-  display: inline-flex;
-  border-radius: 2px;
-}
-
-.wrapper:focus-within {
-  outline: 2px solid var(--in-content-border-active);
-  /* offset outline to align with 1px border-width set for buttons/menulists above. */
-  outline-offset: -1px;
-  /* Make outline-radius slightly bigger than the border-radius set above,
-   * to make the thicker outline corners look smooth */
-  -moz-outline-radius: 2px;
-  box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
-}
-
-::slotted(input[type="number"]) {
-  margin: 0 !important;
-  appearance: textfield !important;
-  border-start-end-radius: 0 !important;
-  border-end-end-radius: 0 !important;
-  box-shadow: none !important;
-  border-color: var(--in-content-box-border-color) !important;
-  outline: none !important;
-}
-
-div {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-button {
-  appearance: none;
-  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
-  background-size: 8px;
-  background-position: center;
-  color: inherit;
-  width: 16px;
-  flex-grow: 1;
-  background-repeat: no-repeat;
-  background-color: var(--in-content-button-background);
-  border: none;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  border-end-end-radius: 2px; /* Up button is flipped, so this works for both. */
-  outline: none; /* Avoid the outline when clicked. */
-}
-
-button:hover {
-  background-color: var(--in-content-button-background-hover);
-}
-
-button[step="up"] {
-  scale: 1 -1;
-}

toolkit/components/printing/content/print.css

@@ -181,10 +181,6 @@ input[type="text"] {
   overflow: auto;
 }
 
-#copies-count {
-  width: 3em;
-}
-
 #more-settings {
   border-top: 1px solid var(--in-content-border-color);
 }
@@ -278,3 +274,44 @@ input[type="number"]:invalid {
   appearance: textfield;
   margin-inline-start: 4px;
 }
+
+#copies-count {
+  width: 4em;
+  height: 20px;
+}
+
+input[type="number"].photon-number {
+  padding: 0;
+  padding-inline-start: 4px;
+  margin: 0;
+}
+
+input[type="number"].photon-number::-moz-number-spin-box {
+  height: 100%;
+  max-height: 100%;
+  border-inline-start: 1px solid var(--in-content-box-border-color);
+  width: 1em;
+}
+
+input[type="number"].photon-number:hover::-moz-number-spin-box {
+  border-color: var(--in-content-border-hover);
+}
+
+input[type="number"].photon-number::-moz-number-spin-up,
+input[type="number"].photon-number::-moz-number-spin-down {
+  border: 0;
+  border-radius: 0;
+  background-color: var(--in-content-button-background);
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
+  background-size: 8px;
+  background-position: center;
+}
+
+input[type="number"].photon-number::-moz-number-spin-up {
+  scale: 1 -1;
+}
+
+input[type="number"].photon-number::-moz-number-spin-up:hover,
+input[type="number"].photon-number::-moz-number-spin-down:hover {
+  background-color: var(--in-content-button-background-hover);
+}

toolkit/components/printing/content/print.html

@@ -74,9 +74,7 @@
         <section id="settings">
           <section id="copies" class="section-block">
             <label for="copies-count" class="block-label" data-l10n-id="printui-copies-label"></label>
-            <photon-number>
-              <input id="copies-count" is="copy-count-input" type="number" min="1" class="copy-count-input" autocomplete="off">
-            </photon-number>
+            <input id="copies-count" is="copy-count-input" type="number" min="1" class="copy-count-input photon-number" autocomplete="off">
           </section>
 
           <section id="orientation" class="section-block">

toolkit/components/printing/content/print.js

@@ -442,59 +442,6 @@ class OrientationInput extends PrintUIControlMixin(HTMLElement) {
 }
 customElements.define("orientation-input", OrientationInput);
 
-class PhotonNumber extends HTMLElement {
-  connectedCallback() {
-    this.attachShadow({ mode: "open" });
-    let slot = document.createElement("slot");
-    this.upButton = this.makeButton("up");
-    this.downButton = this.makeButton("down");
-    let styles = document.createElement("link");
-    styles.rel = "stylesheet";
-    styles.href = "chrome://global/content/photon-number.css";
-    let buttons = document.createElement("div");
-    buttons.append(this.upButton, this.downButton);
-    let wrapper = document.createElement("span");
-    wrapper.classList.add("wrapper");
-    wrapper.append(slot, buttons);
-    this.shadowRoot.append(wrapper, styles);
-  }
-
-  makeButton(direction) {
-    let button = document.createElement("button");
-    button.setAttribute("step", direction);
-    button.tabIndex = "-1";
-    button.addEventListener("click", this);
-    button.addEventListener("mousedown", this);
-    return button;
-  }
-
-  get input() {
-    return this.querySelector("input[type=number]");
-  }
-
-  handleEvent(e) {
-    if (e.type == "mousedown") {
-      // Prevent mousedown pulling focus from the input when the spinner is
-      // clicked, this was causing a focus style flicker on macOS.
-      e.preventDefault();
-    } else if (e.type == "click") {
-      // TODO: You can hold down on a regular spinner to make it count up/down.
-      let step = e.originalTarget.getAttribute("step");
-      switch (step) {
-        case "up":
-          this.input.stepUp();
-          this.input.focus();
-          break;
-        case "down":
-          this.input.stepDown();
-          this.input.focus();
-          break;
-      }
-    }
-  }
-}
-customElements.define("photon-number", PhotonNumber);
-
 class CopiesInput extends PrintUIControlMixin(HTMLInputElement) {
   update(settings) {
     this.value = settings.numCopies;

toolkit/components/printing/jar.mn

@@ -14,7 +14,6 @@ toolkit.jar:
    content/global/printProgress.xhtml               (content/printProgress.xhtml)
 #endif
    content/global/landscape.svg                     (content/landscape.svg)
-   content/global/photon-number.css                 (content/photon-number.css)
    content/global/portrait.svg                      (content/portrait.svg)
    content/global/printPreviewToolbar.js            (content/printPreviewToolbar.js)
    content/global/printUtils.js                     (content/printUtils.js)