Bug 1654073 - Rework orientation picker as 'toggle-group' of radio-buttons. r=mstriemer,fluent-reviewers,flod
authorSam Foster <sfoster@mozilla.com>
Mon, 03 Aug 2020 06:20:45 +0000
changeset 543053 092c2125463531e3bd8f095457df7440b1e8fe99
parent 543052 84b257d07031f657765a63f137f17b1f1c6587d7
child 543054 a25524d613da49b37f0b8e2d19bd38ebaa6af1e5
push id37664
push userncsoregi@mozilla.com
push dateMon, 03 Aug 2020 21:39:27 +0000
treeherdermozilla-central@255b4f5888e9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer, fluent-reviewers, flod
bugs1654073
milestone81.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1654073 - Rework orientation picker as 'toggle-group' of radio-buttons. r=mstriemer,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D84629
toolkit/components/printing/content/print.css
toolkit/components/printing/content/print.html
toolkit/components/printing/content/toggle-group.css
toolkit/components/printing/jar.mn
--- a/toolkit/components/printing/content/print.css
+++ b/toolkit/components/printing/content/print.css
@@ -104,8 +104,16 @@ form#print {
 
 #button-container > button:first-child {
   margin-inline-start: 0;
 }
 
 .page-range-input:not(.custom-input-selected) #custom-range {
   display: none;
 }
+
+.toggle-group #landscape + .toggle-group-label::before {
+  content: url("chrome://global/skin/icons/document.svg");
+  transform: scaleY(-1) rotate(90deg);
+}
+.toggle-group #portrait + .toggle-group-label::before {
+  content: url("chrome://global/skin/icons/document.svg");
+}
--- a/toolkit/components/printing/content/print.html
+++ b/toolkit/components/printing/content/print.html
@@ -7,37 +7,34 @@
     <meta charset="utf-8">
     <title data-l10n-id="printui-title"></title>
     <meta http-equiv="Content-Security-Policy" content="default-src chrome:;img-src data:; object-src 'none'">
 
     <link rel="localization" href="toolkit/printing/printUI.ftl">
 
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
     <link rel="stylesheet" href="chrome://global/content/print.css">
+    <link rel="stylesheet" href="chrome://global/content/toggle-group.css">
     <script defer src="chrome://global/content/print.js"></script>
   </head>
 
   <body>
     <template id="page-range-template">
       <select id="range-picker" name="page-range-type" data-l10n-id="printui-page-range-picker">
         <option value="all" selected data-l10n-id="printui-page-range-all"></option>
         <option value="custom" data-l10n-id="printui-page-range-custom"></option>
       </select>
       <input id="custom-range" name="page-range" pattern="\d(-\d)?" type="text" hidden data-l10n-id="printui-page-custom-range">
     </template>
 
     <template id="orientation-template">
-      <span>
-        <input type="radio" name="orientation" id="portrait" value="0" checked>
-        <label for="portrait" data-l10n-id="printui-portrait"></label>
-      </span>
-      <span>
-        <input type="radio" name="orientation" id="landscape" value="1">
-        <label for="landscape" data-l10n-id="printui-landscape"></label>
-      </span>
+      <input type="radio" name="orientation" id="portrait" value="0" checked class="toggle-group-input">
+      <label for="portrait" data-l10n-id="printui-portrait" class="toggle-group-label toggle-group-label-iconic"></label>
+      <input type="radio" name="orientation" id="landscape" value="1" class="toggle-group-input">
+      <label for="landscape" data-l10n-id="printui-landscape" class="toggle-group-label toggle-group-label-iconic"></label>
     </template>
 
     <template id="copy-count-template">
       <span class="input"></span>
       <input id="copies-count" type="number" min="1">
     </template>
 
     <template id="twisty-summary-template">
@@ -72,20 +69,18 @@
         </section>
         <section id="settings">
           <section id="copies" class="row">
             <label for="copy-count-input" class="block-label" data-l10n-id="printui-copies-label"></label>
             <span id="copy-count-input" is="copy-count-input" class="copy-count-input"></span>
           </section>
 
           <section id="orientation" class="row">
-            <div role="radiogroup" aria-labelledby="orientation-label">
-              <label class="block-label" data-l10n-id="printui-orientation"></label>
-              <span id="orientation-input" is="orientation-input" class="orientation-input"></span>
-            </div>
+            <label class="block-label" for="orientation-input" data-l10n-id="printui-orientation"></label>
+            <div id="orientation-input" is="orientation-input" role="radiogroup" class="toggle-group"></div>
           </section>
 
           <section id="pages" class="row">
             <label for="page-range-input" class="block-label" data-l10n-id="printui-page-range-label"></label>
             <span id="page-range-input" is="page-range-input" class="page-range-input"></span>
           </section>
 
           <details id="more-settings" class="twisty">
new file mode 100644
--- /dev/null
+++ b/toolkit/components/printing/content/toggle-group.css
@@ -0,0 +1,85 @@
+/* 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/. */
+
+
+/*
+ * A radiogroup styled to hide the radio buttons
+ * and present tab-like labels as buttons
+ */
+
+.toggle-group {
+  display: inline-flex;
+}
+
+.toggle-group-label {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  border: 1px solid var(--in-content-box-border-color);
+  border-inline-end-style: none;
+  padding: 6px 10px;
+  background-color: var(--in-content-box-background);
+}
+
+.toggle-group-input {
+  position: absolute;
+  inset-inline-start: -100px;
+}
+
+.toggle-group-label-iconic::before {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 5px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.toggle-group-label:first-of-type {
+  border-start-start-radius: 2px;
+  border-end-start-radius: 2px;
+}
+
+.toggle-group-label:last-of-type {
+  border-inline-end-style: solid;
+  border-start-end-radius: 2px;
+  border-end-end-radius: 2px;
+}
+
+.toggle-group-input:not(:enabled) + .toggle-group-label {
+  opacity: 0.7;
+}
+
+.toggle-group-input:enabled + .toggle-group-label:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+
+.toggle-group-input:enabled + .toggle-group-label:active {
+  background-color: var(--in-content-button-background-active);
+}
+
+.toggle-group-input:focus + .toggle-group-label{
+  box-shadow: 0 0 0 1px var(--border-color), 0 0 0 4px rgba(10, 132, 255, 0.3);
+  outline: none;
+  z-index: 1;
+}
+
+.toggle-group-input:checked:focus + .toggle-group-label {
+  box-shadow: 0 0 0 1px var(--in-content-border-active), 0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+.toggle-group-input:enabled:checked + .toggle-group-label{
+  background-color: var(--in-content-primary-button-background);
+  border-color: var(--in-content-primary-button-background-hover);
+  color: var(--in-content-selected-text);
+}
+
+.toggle-group-input:enabled:checked + .toggle-group-label:hover {
+  background-color: var(--in-content-primary-button-background-hover);
+  border-color: var(--in-content-primary-button-background-active);
+}
+
+.toggle-group-input:enabled:checked + .toggle-group-label:active {
+  background-color: var(--in-content-primary-button-background-active);
+  border-color: var(--in-content-primary-button-background-active);
+}
--- a/toolkit/components/printing/jar.mn
+++ b/toolkit/components/printing/jar.mn
@@ -13,9 +13,10 @@ toolkit.jar:
    content/global/printProgress.js                  (content/printProgress.js)
    content/global/printProgress.xhtml               (content/printProgress.xhtml)
 #endif
    content/global/printPreviewToolbar.js            (content/printPreviewToolbar.js)
    content/global/printUtils.js                     (content/printUtils.js)
    content/global/print.js                          (content/print.js)
    content/global/print.html                        (content/print.html)
    content/global/print.css                         (content/print.css)
+   content/global/toggle-group.css                  (content/toggle-group.css)
    content/global/simplifyMode.css                  (content/simplifyMode.css)