Print Preview Refresh: Address UI review comments

(1) Increase line height for destinations items
(2) Remove "Advanced" label for printer options button
(3) Remove margin on paper-icon-button so Print with system dialog...
    does not wrap (for English + normal font size)
(4) Change pages per sheet label to sentence case
(5) Fix alignment of "Destinations" label with printer names,
    particularly for printers that do not have a status/location
    displayed.

Bug: 891375, 891378, 891379, 891395, 891577
Change-Id: I13fbcd167e2e9ee513ef056ce5c9e471248dd3d8
Reviewed-on: https://chromium-review.googlesource.com/c/1257370
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596332}

chrome/app/printing_strings.grdp

@@ -80,7 +80,7 @@
       Scale
     </message>
     <message name="IDS_PRINT_PREVIEW_PAGES_PER_SHEET_LABEL" desc="Pages per sheet option label.">
-      Pages Per Sheet
+      Pages per sheet
     </message>
     <message name="IDS_PRINT_PREVIEW_EXAMPLE_PAGE_RANGE_TEXT" desc="Example page range text.">
       e.g. 1-5, 8, 11-13

chrome/browser/resources/print_preview/new/advanced_options_settings.html

@@ -22,7 +22,7 @@
       }
     </style>
     <print-preview-settings-section>
-      <span slot="title">$i18n{advancedOptionsLabel}</span>
+      <span slot="title"></span>
       <div slot="controls">
         <paper-button id="button" disabled$="[[disabled]]"
             on-click="onButtonClick_">

chrome/browser/resources/print_preview/new/app.html

@@ -69,20 +69,12 @@
         padding-bottom: 16px;
       }
 
-      #container > *,
-      #container iron-collapse > * {
+      .settings-section {
         display: block;
         margin-bottom: 16px;
         margin-top: 16px;
       }
 
-      #container print-preview-more-settings,
-      #container iron-collapse,
-      #container print-preview-link-container {
-        margin-bottom: 0;
-        margin-top: 0;
-      }
-
       #preview-area-container {
         align-items: center;
         background-color: var(--google-grey-200);
@@ -108,24 +100,24 @@
             invitation-store="[[invitationStore_]]"
             disabled="[[controlsDisabled_]]" state="[[state]]"
             recent-destinations="[[recentDestinations_]]"
-            user-info="{{userInfo_}}" available>
+            user-info="{{userInfo_}}" available class="settings-section">
         </print-preview-destination-settings>
         <print-preview-pages-settings settings="{{settings}}"
             document-info="[[documentInfo_]]"
             disabled="[[controlsDisabled_]]"
-            hidden$="[[!settings.pages.available]]">
+            hidden$="[[!settings.pages.available]]" class="settings-section">
         </print-preview-pages-settings>
         <print-preview-copies-settings settings="{{settings}}"
             disabled="[[controlsDisabled_]]"
-            hidden$="[[!settings.copies.available]]">
+            hidden$="[[!settings.copies.available]]" class="settings-section">
         </print-preview-copies-settings>
         <print-preview-layout-settings settings="{{settings}}"
             disabled="[[controlsDisabled_]]"
-            hidden$="[[!settings.layout.available]]">
+            hidden$="[[!settings.layout.available]]" class="settings-section">
         </print-preview-layout-settings>
         <print-preview-color-settings settings="{{settings}}"
             disabled="[[controlsDisabled_]]"
-            hidden$="[[!settings.color.available]]">
+            hidden$="[[!settings.color.available]]" class="settings-section">
         </print-preview-color-settings>
         <print-preview-more-settings
             settings-expanded-by-user="{{settingsExpandedByUser_}}"
@@ -138,35 +130,41 @@
           <print-preview-media-size-settings settings="{{settings}}"
               capability="[[destination_.capabilities.printer.media_size]]"
               disabled="[[controlsDisabled_]]"
-              hidden$="[[!settings.mediaSize.available]]">
+              hidden$="[[!settings.mediaSize.available]]"
+              class="settings-section">
           </print-preview-media-size-settings>
           <template is="dom-if" if="[[showPagesPerSheet_]]">
             <print-preview-pages-per-sheet-settings settings="{{settings}}"
                 disabled="[[controlsDisabled_]]"
-                hidden$="[[!settings.pagesPerSheet.available]]">
+                hidden$="[[!settings.pagesPerSheet.available]]"
+                class="settings-section">
             </print-preview-pages-per-sheet-settings>
           </template>
           <print-preview-margins-settings settings="{{settings}}"
               disabled="[[controlsDisabled_]]"
-              hidden$="[[!settings.margins.available]]">
+              hidden$="[[!settings.margins.available]]"
+              class="settings-section">
           </print-preview-margins-settings>
           <print-preview-dpi-settings settings="{{settings}}"
               capability="[[destination_.capabilities.printer.dpi]]"
               disabled="[[controlsDisabled_]]"
-              hidden$="[[!settings.dpi.available]]">
+              hidden$="[[!settings.dpi.available]]" class="settings-section">
           </print-preview-dpi-settings>
           <print-preview-scaling-settings settings="{{settings}}"
               document-info="[[documentInfo_]]" disabled="[[controlsDisabled_]]"
-              hidden$="[[!settings.scaling.available]]">
+              hidden$="[[!settings.scaling.available]]"
+              class="settings-section">
           </print-preview-scaling-settings>
           <print-preview-other-options-settings settings="{{settings}}"
               disabled="[[controlsDisabled_]]"
-              hidden$="[[!settings.otherOptions.available]]">
+              hidden$="[[!settings.otherOptions.available]]"
+              class="settings-section">
           </print-preview-other-options-settings>
           <print-preview-advanced-options-settings
               settings="{{settings}}" destination="[[destination_]]"
               disabled="[[controlsDisabled_]]"
-              hidden$="[[!settings.vendorItems.available]]">
+              hidden$="[[!settings.vendorItems.available]]"
+              class="settings-section">
           </print-preview-advanced-options-settings>
         </iron-collapse>
 <if expr="not chromeos">

chrome/browser/resources/print_preview/new/destination_dialog.html

@@ -74,16 +74,20 @@
         flex-direction: column;
       }
 
-      /* Height = 3 * destination item (28px) + 10px padding + 1 line text */
+      /* Height = 3 * destination item + 10px padding + 1 line text */
+      #recentList,
+      #printList {
+        min-height:
+            calc(3 * var(--destination-item-height) + 10px + 20 / 13 * 1rem);
+      }
+
       #recentList {
         flex: 0;
-        min-height: calc(94px + 20 / 13 * 1rem);
         padding-bottom: 18px;
       }
 
       #printList {
         flex: 1;
-        min-height: calc(94px + 20 / 13 * 1rem);
         padding-bottom: 0;
       }
 

chrome/browser/resources/print_preview/new/destination_list.html

@@ -26,7 +26,7 @@
 
       #listContainer {
         flex: 1;
-        min-height: 84px;
+        min-height: calc(3 * var(--destination-item-height));
       }
 
       .title,

chrome/browser/resources/print_preview/new/destination_list.js

@@ -65,7 +65,7 @@ Polymer({
 
       const entry = assert(entries[0]);
       // Don't set maxHeight below the minimum height.
-      const fullHeight = Math.max(entry.contentRect.height, 84);
+      const fullHeight = Math.max(entry.contentRect.height, 96);
       this.$.list.style.maxHeight = `${fullHeight}px`;
       this.forceIronResize();
     });

chrome/browser/resources/print_preview/new/destination_list_item.html

@@ -20,7 +20,7 @@
         cursor: default;
         display: flex;
         font-size: calc(12/13 * 1em);
-        min-height: 28px;
+        min-height: var(--destination-item-height);
         opacity: .87;
         padding-bottom: 2px;
         padding-inline-end: 2px;

chrome/browser/resources/print_preview/new/destination_settings.html

@@ -22,13 +22,9 @@
 <dom-module id="print-preview-destination-settings">
   <template>
     <style include="print-preview-shared paper-button-style throbber cr-hidden-style">
-      print-preview-settings-section {
-        margin-top: 16px;
-      }
-
       paper-button {
         margin: 2px;
-        margin-top: 12px;
+        margin-top: 8px;
         width: 89px;
       }
 
@@ -40,7 +36,6 @@
       .throbber-container {
         align-items: center;
         display: flex;
-        min-height: 28px;
         overflow: hidden;
       }
 
@@ -56,16 +51,16 @@
         overflow: hidden;
       }
 
+      .destination-name {
+        line-height: calc(20/13 * 1em);
+      }
+
       .destination-location,
       .destination-connection-status {
         color: var(--google-grey-700);
         font-size: calc(12/13 * 1em);
       }
 
-      .destination-name {
-        margin-bottom: 4px;
-      }
-
       .destination-info-wrapper > div,
       .destination-throbber-name {
         flex: 1;
@@ -78,7 +73,7 @@
         opacity: 0.4;
       }
     </style>
-    <print-preview-settings-section class="multirow-controls">
+    <print-preview-settings-section>
       <span slot="title">$i18n{destinationLabel}</span>
       <div slot="controls">
         <div class="throbber-container" hidden="[[!loadingDestination_]]">
@@ -96,6 +91,11 @@
             </div>
           </div>
         </div>
+      </div>
+    </print-preview-settings-section>
+    <print-preview-settings-section>
+      <div slot="title"></div>
+      <div slot="controls">
         <paper-button
           disabled$="[[shouldDisableButton_(destinationStore, disabled,
                                             state)]]"

chrome/browser/resources/print_preview/new/link_container.html

@@ -9,6 +9,14 @@
 <dom-module id="print-preview-link-container">
   <template>
     <style include="print-preview-shared throbber cr-hidden-style">
+      :host paper-icon-button-light {
+        --cr-paper-icon-button-margin: {
+          margin-inline-end: -6px;
+          margin-inline-start: 0;
+        };
+        --cr-icon-size: 16px;
+      }
+
       .link:not([actionable]) {
         pointer-events: none;
       }

chrome/browser/resources/print_preview/new/pages_settings.html

@@ -35,10 +35,14 @@
         cursor: default;
         height: 100%;
       }
+
+      :host #title {
+        justify-content: flex-start;
+        padding-top: 9px;
+      }
     </style>
-    <print-preview-settings-section
-        class="input-settings-section multirow-controls">
-      <span slot="title">$i18n{pagesLabel}</span>
+    <print-preview-settings-section>
+      <span id="title" slot="title">$i18n{pagesLabel}</span>
       <div slot="controls" id="controls">
         <paper-radio-group selectable="cr-radio-button" class="radio"
             disabled$="[[controlsDisabled_]]"

chrome/browser/resources/print_preview/new/print_preview_shared_css.html

@@ -17,6 +17,7 @@
         --print-preview-dialog-margin: 34px;
         --cr-form-field-label-height: 1.5rem;
         --cr-form-field-label-line-height: .75rem;
+        --destination-item-height: 32px;
       }
 
       /* Default state ********************************************************/

chrome/browser/resources/print_preview/new/settings_section.html

@@ -34,16 +34,12 @@
         color: var(--google-grey-900);
         flex: none;
         font-size: 1em;
+        line-height: calc(20/13 * 1em);
         padding-inline-end: var(--policy-icon-padding);
         width: calc(75px - var(--policy-icon-padding));
         word-break: break-word;
       }
 
-      :host(.multirow-controls) ::slotted([slot=title]) {
-        justify-content: flex-start;
-        padding-top: 10px;
-      }
-
       :host([managed]:not([show-policy-on-end])) ::slotted([slot=title]) {
         width: calc(75px - var(--policy-icon-size)
                     - var(--policy-icon-padding));