From f90fe305f7f9055c7da185c3d5a6c7289c325e57 Mon Sep 17 00:00:00 2001 From: Mark Striemer Date: Tue, 18 Aug 2020 13:38:11 +0000 Subject: [PATCH] Bug 1659184 - Replace photon-number with pseudo-elements r=ntim,jaws Differential Revision: https://phabricator.services.mozilla.com/D87193 --- .../printing/content/photon-number.css | 59 ------------------- toolkit/components/printing/content/print.css | 45 ++++++++++++-- .../components/printing/content/print.html | 4 +- toolkit/components/printing/content/print.js | 53 ----------------- toolkit/components/printing/jar.mn | 1 - 5 files changed, 42 insertions(+), 120 deletions(-) delete mode 100644 toolkit/components/printing/content/photon-number.css diff --git a/toolkit/components/printing/content/photon-number.css b/toolkit/components/printing/content/photon-number.css deleted file mode 100644 index 98bc54b87aaa..000000000000 --- a/toolkit/components/printing/content/photon-number.css +++ /dev/null @@ -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; -} diff --git a/toolkit/components/printing/content/print.css b/toolkit/components/printing/content/print.css index 7c9ed61a5704..1bc84344d7f3 100644 --- a/toolkit/components/printing/content/print.css +++ b/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); +} diff --git a/toolkit/components/printing/content/print.html b/toolkit/components/printing/content/print.html index 844b32fb2620..2091aa534554 100644 --- a/toolkit/components/printing/content/print.html +++ b/toolkit/components/printing/content/print.html @@ -74,9 +74,7 @@
- - - +
diff --git a/toolkit/components/printing/content/print.js b/toolkit/components/printing/content/print.js index 0b18371a0573..7c7fb419b7df 100644 --- a/toolkit/components/printing/content/print.js +++ b/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; diff --git a/toolkit/components/printing/jar.mn b/toolkit/components/printing/jar.mn index d0dff6a21ec0..2d1bce0120e0 100644 --- a/toolkit/components/printing/jar.mn +++ b/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)