Bug 1656298 - Line up the rows and columns in the print UI. r=mstriemer
authorSam Foster <sfoster@mozilla.com>
Thu, 06 Aug 2020 00:45:19 +0000
changeset 543497 6f90335f9391ac2825e2bc37f8a6c4f6600a8412
parent 543496 670195cb59f82661404fbcddff8734200b6d6700
child 543498 b0fd91f7cd9d95d29441e4d5be1f94b6c0d3544d
push id37675
push userncsoregi@mozilla.com
push dateThu, 06 Aug 2020 15:44:30 +0000
treeherdermozilla-central@af63ceb25422 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer
bugs1656298
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 1656298 - Line up the rows and columns in the print UI. r=mstriemer Differential Revision: https://phabricator.services.mozilla.com/D85950
toolkit/components/printing/content/print.css
toolkit/components/printing/content/print.html
--- a/toolkit/components/printing/content/print.css
+++ b/toolkit/components/printing/content/print.css
@@ -9,29 +9,55 @@ html, body {
 
 body {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   overflow: hidden;
 }
 
-.row {
-  padding-inline-start: 18px;
-  margin-block: 18px;
+.section-block {
+  padding-inline: 16px;
+  margin-block: 16px;
 }
 
-.row .block-label {
+.section-block .block-label {
   display: block;
   margin-bottom: 4px;
 }
-.row .block-label + input,
-.row .block-label + select,
-.row .block-label + .page-range-input select {
-  margin-inline-start: 0;
+
+.row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 1.8em;
+}
+
+.row > input,
+.row > select,
+.col > input {
+  margin-inline: 0 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.row.cols-2 {
+  flex-direction: row;
+  align-items: center;
+}
+
+.cols-2 > .col:nth-child(1) {
+  flex: 0 0 2em;
+  text-align: center;
+}
+
+.cols-2 > .col:nth-child(2) {
+  flex: 1 1 auto;
 }
 
 .header-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   flex: 0 1 auto;
@@ -60,25 +86,28 @@ form#print {
   overflow: hidden;
 }
 
 .body-container {
   flex: 1 1 auto;
   overflow: auto;
 }
 
+#copies-count {
+  width: 6em;
+}
+
 #more-settings {
   border-top: 1px solid var(--in-content-border-color);
 }
 
-#more-settings.twisty > summary {
+.twisty > summary {
   list-style: none;
   display: flex;
   cursor: pointer;
-  padding-inline-end: 8px;
 }
 
 #more-settings > summary > .twisty {
   background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
   background-repeat: no-repeat;
   background-position: center;
   width: 20px;
   scale: 1 1;
@@ -97,18 +126,25 @@ form#print {
   display: block;
 }
 
 .footer-container {
   border-top: 1px solid var(--in-content-border-color);
   flex: 0 1 auto;
 }
 
-#button-container > button:first-child {
-  margin-inline-start: 0;
+#button-container {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+#button-container > button {
+  flex: 1 1 auto;
+  margin: 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");
--- a/toolkit/components/printing/content/print.html
+++ b/toolkit/components/printing/content/print.html
@@ -34,84 +34,86 @@
 
     <template id="twisty-summary-template">
       <span class="label"></span>
       <span class="twisty"></span>
     </template>
 
     <template id="scale-template">
       <div role="radiogroup" aria-labelledby="scale-label">
-        <div>
-          <input type="radio" name="scale-choice" id="fit-choice" value="fit" checked>
-          <label for="fit-choice" data-l10n-id="printui-scale-fit-to-page"></label>
+        <div class="row cols-2">
+          <span class="col"><input type="radio" name="scale-choice" id="fit-choice" value="fit" checked></span>
+          <label for="fit-choice" data-l10n-id="printui-scale-fit-to-page" class="col"></label>
         </div>
-        <div>
-          <input type="radio" name="scale-choice" id="percent-scale-choice">
-          <label for="percent-scale-choice" data-l10n-id="printui-scale-pcent"></label>
-          <input id="percent-scale" placeholder="100%" type="text" disabled>
+        <div class="row cols-2">
+          <span class="col"><input type="radio" name="scale-choice" id="percent-scale-choice"></span>
+          <span class="col">
+            <label for="percent-scale-choice" data-l10n-id="printui-scale-pcent"></label>
+            <input id="percent-scale" size="6" placeholder="100%" type="text" disabled>
+          </span>
         </div>
       </div>
     </template>
 
     <header class="header-container">
       <h2 data-l10n-id="printui-title"></h2>
       <p id="sheet-count" is="page-count" hidden></p>
     </header>
 
     <form id="print" is="print-form" aria-labelledby="page-header">
       <section class="body-container">
-        <section id="destination" class="row">
+        <section id="destination" class="section-block row">
           <label for="printer-picker" class="block-label" data-l10n-id="printui-destination-label"></label>
           <select is="destination-picker" id="printer-picker"></select>
         </section>
         <section id="settings">
-          <section id="copies" class="row">
+          <section id="copies" class="section-block row">
             <label for="copies-count" class="block-label" data-l10n-id="printui-copies-label"></label>
             <input id="copies-count" is="copy-count-input" min="1" class="copy-count-input">
           </section>
 
-          <section id="orientation" class="row">
+          <section id="orientation" class="section-block row">
             <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">
+          <section id="pages" class="section-block 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>
+            <div id="page-range-input" is="page-range-input" class="page-range-input row"></div>
           </section>
 
           <details id="more-settings" class="twisty">
-            <summary class="block-label row" is="twisty-summary"
+            <summary class="block-label section-block" is="twisty-summary"
                      data-open-l10n-id="printui-less-settings"
                      data-closed-l10n-id="printui-more-settings"></summary>
-            <section id="scale" class="row">
+            <section id="scale" class="section-block row">
               <label for="scale-control" class="block-label" data-l10n-id="printui-scale"></label>
               <div is="scale-input" id="scale-control" role="radiogroup"></div>
             </section>
 
-            <section id="more-settings-options" class="row">
+            <section id="more-settings-options" class="section-block row">
               <label class="block-label" data-l10n-id="printui-options"></label>
-              <div>
-                <input type="checkbox" id="headers-footers-enabled" disabled="">
+              <div class="row cols-2">
+                <span class="col"><input type="checkbox" id="headers-footers-enabled" disabled=""></span>
                 <label for="headers-footers-enabled" data-l10n-id="printui-headers-footers-checkbox"></label>
               </div>
-              <div>
-                <input is="backgrounds-input" type="checkbox" id="backgrounds-enabled">
+              <div class="row cols-2">
+                <span class="col"><input is="backgrounds-input" type="checkbox" id="backgrounds-enabled"></span>
                 <label for="backgrounds-enabled" data-l10n-id="printui-backgrounds-checkbox"></label>
               </div>
             </section>
 
           </details>
         </section>
       </section>
 
       <footer class="footer-container" id="print-footer">
-        <section id="system-print" class="row">
+        <section id="system-print" class="section-block">
           <a href="#" id="open-dialog-link" data-l10n-id="printui-system-dialog-link"></a>
         </section>
-        <section id="button-container" class="row">
+        <section id="button-container" class="section-block">
           <button class="primary" name="print" data-l10n-id="printui-primary-button"></button>
           <button name="cancel" data-l10n-id="printui-cancel-button"></button>
         </section>
       </footer>
     </form>
   </body>
 </html>