Print Preview: Clean up height/width values by moving to variables

Also create a new print_preview_vars_css.html file, to store all CSS
variables separately from common styles.

Bug: 952960, 941369
Change-Id: I24bcc3cca781d7acfe7ff075e5b954827b009745
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1573163
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652666}

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

@@ -11,6 +11,7 @@
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="print_preview_search_box.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="print-preview-advanced-dialog">

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/load_time_data.html">
@@ -13,7 +12,7 @@
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="../data/document_info.html">
 <link rel="import" href="../data/measurement_system.html">
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="strings.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="state.html">
@@ -23,7 +22,7 @@
 
 <dom-module id="print-preview-app">
   <template>
-    <style include="print-preview-shared cr-shared-style">
+    <style>
       :host {
         display: flex;
         height: 100%;
@@ -40,7 +39,7 @@
 
       print-preview-sidebar {
         flex: none;
-        width: 326px;
+        width: var(--print-preview-sidebar-width);
       }
 
       #preview-area-container {

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

@@ -6,13 +6,12 @@
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="../data/destination.html">
-<link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="state.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="print-preview-button-strip">
   <template>
-    <style include="print-preview-shared paper-button-style">
+    <style include="paper-button-style">
       :host {
         display: flex;
         flex-direction: row;

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

@@ -6,9 +6,9 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-/* The imports below are needed as an action-link is added to the promo-text
- * div to create the cloud print "Sign in" link when this element is
- * attached. */
+<!-- The imports below are needed as an action-link is added to the promo-text
+  div to create the cloud print "Sign in" link when this element is
+  attached. -->
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/event_tracker.html">
@@ -29,6 +29,7 @@
 <link rel="import" href="destination_list.html">
 <link rel="import" href="print_preview_search_box.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="provisional_destination_resolver.html">
 <link rel="import" href="strings.html">
 <link rel="import" href="throbber_css.html">

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

@@ -6,13 +6,13 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="destination_list_item.html">
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="strings.html">
 <link rel="import" href="throbber_css.html">
 
 <dom-module id="print-preview-destination-list">
   <template>
-    <style include="print-preview-shared cr-hidden-style throbber">
+    <style include="cr-hidden-style throbber">
       :host {
         display: flex;
         flex-direction: column;

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

@@ -9,12 +9,12 @@
 <link rel="import" href="../icons.html">
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="highlight_utils.html">
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="print-preview-destination-list-item">
   <template>
-    <style include="print-preview-shared cr-hidden-style">
+    <style include="cr-hidden-style">
       :host {
         align-items: center;
         cursor: default;

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

@@ -15,6 +15,7 @@
 <link rel="import" href="destination_dialog.html">
 <link rel="import" href="destination_select.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="throbber_css.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="settings_section.html">
@@ -46,7 +47,9 @@
       }
 
       #destinationSelect {
-        margin-inline-start: 13px;
+        /* Reduce margin by 2px so that the <select> inside this element will
+           be aligned with others after adding margin for the border. */
+        margin-inline-start: calc(var(--print-preview-sidebar-margin) - 2px);
       }
 
       #destination-status-wrapper,

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

@@ -8,13 +8,13 @@
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="settings_behavior.html">
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="state.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="print-preview-header">
   <template>
-    <style include="print-preview-shared paper-button-style">
+    <style include="paper-button-style">
       :host {
         border-bottom: var(--print-preview-settings-border);
         display: block;

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

@@ -6,13 +6,13 @@
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="settings_behavior.html">
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="state.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="print-preview-header-new">
   <template>
-    <style include="print-preview-shared">
+    <style>
       :host {
         align-items: center;
         display: flex;

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

@@ -2,14 +2,15 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="../data/destination.html">
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="throbber_css.html">
 
 <dom-module id="print-preview-link-container">
   <template>
-    <style include="print-preview-shared throbber cr-hidden-style">
+    <style include="cr-shared-style throbber cr-hidden-style">
       :host {
         display: block;
       }

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

@@ -24,7 +24,7 @@
         font: inherit;
         margin: 0 auto;
         min-height: 48px;
-        padding: 0 20px;
+        padding: 0 var(--print-preview-sidebar-padding);
       }
 
       :host cr-expand-button {

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

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="input_behavior.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="settings_section.html">
 
 <dom-module id="print-preview-number-settings-section">
@@ -19,7 +20,7 @@
 
       cr-input {
         margin-inline-end: 16px;
-        min-height: 38px;
+        min-height: var(--print-preview-row-height);
         overflow: hidden;
       }
 
@@ -35,7 +36,7 @@
 
       span[slot=suffix] {
         max-width: calc(100% - 5em);
-        min-height: 38px;
+        min-height: var(--print-preview-row-height);
         overflow: hidden;
         word-wrap: break-word;
       }

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

@@ -20,12 +20,6 @@
         --cr-input-error-display: none;
       }
 
-      #pageSettingsCustomInput {
-        --cr-input-row-container: {
-          min-height: 38px;
-        }
-      }
-
       /* Margin = standard margin (16px) - error field margin (8px) */
       :host([error-state_='1']) #customInputWrapper,
       :host([error-state_='2']) #customInputWrapper {

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

@@ -27,9 +27,6 @@
 
       #pinValue {
         --cr-form-field-label-height: 100%;
-        --cr-input-row-container: {
-          min-height: 38px;
-        }
         cursor: default;
       }
 

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

@@ -17,14 +17,14 @@
 <link rel="import" href="margin_control_container.html">
 <link rel="import" href="model.html">
 <link rel="import" href="plugin_proxy.html">
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="state.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="print-preview-preview-area">
   <template>
-    <style include="print-preview-shared cr-hidden-style">
+    <style include="cr-hidden-style">
       @keyframes dancing-dots-jump {
         0% { top: 0; }
         55% { top: 0; }

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

@@ -2,38 +2,11 @@
 
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 
 <dom-module id="print-preview-shared">
   <template>
     <style include="cr-shared-style">
-      /* Shared variables *****************************************************/
-      :host {
-        --cr-input-row-container: {
-          min-height: 38px;
-        };
-        --md-select-width: calc(100% - 17px);
-        --print-preview-settings-border: 1px solid var(--google-grey-200);
-        --print-preview-dialog-margin: 34px;
-        --print-preview-disabled-label: {
-          color: var(--paper-grey-600);
-          opacity: .65;
-        }
-        --cr-form-field-label-height: initial;
-        --cr-form-field-label-line-height: .75rem;
-        --destination-item-height: 32px;
-        --preview-area-background-color: var(--google-grey-200);
-        --preview-area-background-color-new: var(--google-grey-refresh-300);
-      }
-
-      :host-context([dark]) {
-        --preview-area-background-color: var(--google-grey-400);
-        --preview-area-background-color-new: var(--google-grey-refresh-700);
-        --print-preview-disabled-label: {
-          opacity: var(--cr-disabled-opacity);
-        }
-        --print-preview-settings-border: var(--cr-separator-line);
-      }
-
       /* Default state ********************************************************/
       select.md-select {
         margin: 2px;
@@ -51,11 +24,11 @@
       }
 
       .checkbox cr-checkbox {
-        min-height: 38px;
-        --cr-checkbox-ripple-size: 38px;
+        min-height: var(--print-preview-row-height);
+        --cr-checkbox-ripple-size: var(--print-preview-row-height);
         --cr-checkbox-label-container: {
           overflow: hidden;
-          padding-inline-start: 15px;
+          padding-inline-start: var(--print-preview-sidebar-margin);
         };
       }
 
@@ -74,7 +47,7 @@
       }
 
       print-preview-settings-section [slot=controls] > * {
-        margin-inline-start: 15px;
+        margin-inline-start: var(--print-preview-sidebar-margin);
       }
 
       /* Default print preview dialog styles. */

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/dark_mode.html">
@@ -28,7 +29,7 @@
 <if expr="chromeos">
   <link rel="import" href="pin_settings.html">
 </if>
-<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="scaling_settings.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="state.html">
@@ -39,7 +40,7 @@
 </if>
 <dom-module id="print-preview-sidebar">
   <template>
-    <style include="print-preview-shared cr-shared-style">
+    <style include="cr-hidden-style cr-shared-style">
       :host {
         background-color: white;
         border-inline-end: var(--print-preview-settings-border);

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+
+<!-- Common CSS variables for Print Preview. -->
+<custom-style>
+<style is="custom-style">
+  html {
+    --print-preview-row-height: 38px;
+    --print-preview-sidebar-width: 326px;
+    --print-preview-sidebar-padding: 20px;
+    --print-preview-title-width: 100px;
+    --print-preview-sidebar-margin: 15px;
+
+    --cr-input-row-container: {
+      min-height: var(--print-preview-row-height);
+    };
+    /* Full width - sidebar margin - 2px for end focus ring border */
+    --md-select-width: calc(
+        100% - var(--print-preview-sidebar-margin) - 2px);
+    --print-preview-settings-border: 1px solid var(--google-grey-200);
+    --print-preview-dialog-margin: 34px;
+    --print-preview-disabled-label: {
+      color: var(--paper-grey-600);
+      opacity: .65;
+    }
+    --cr-form-field-label-height: initial;
+    --cr-form-field-label-line-height: .75rem;
+    --destination-item-height: 32px;
+    --preview-area-background-color: var(--google-grey-200);
+    --preview-area-background-color-new: var(--google-grey-refresh-300);
+  }
+
+  html[dark] {
+    --preview-area-background-color: var(--google-grey-400);
+    --preview-area-background-color-new: var(--google-grey-refresh-700);
+    --print-preview-disabled-label: {
+      opacity: var(--cr-disabled-opacity);
+    }
+    --print-preview-settings-border: var(--cr-separator-line);
+  }
+</style>
+</custom-style>

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

@@ -10,6 +10,7 @@
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="../data/destination_store.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="print_preview_vars_css.html">
 <link rel="import" href="strings.html">
 <link rel="import" href="throbber_css.html">
 

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="print_preview_shared_css.html">
 
 <dom-module id="print-preview-settings-section">
   <template>
-    <style>
+    <style include="print-preview-shared">
       :host {
         display: flex;
-        padding: 0 20px;
+        padding: 0 var(--print-preview-sidebar-padding);
       }
 
       ::slotted([slot=controls]),
@@ -15,7 +16,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        min-height: 38px;
+        min-height: var(--print-preview-row-height);
         word-break: break-word;
       }
 
@@ -29,7 +30,7 @@
         flex: none;
         font-size: 1em;
         line-height: calc(20/13 * 1em);
-        width: 100px;
+        width: var(--print-preview-title-width);
       }
     </style>
     <slot name="title"></slot>

chrome/browser/resources/print_preview/print_preview_new.html

@@ -49,7 +49,7 @@
       content: '';
       display: block;
       height: 100%;
-      width: 326px;
+      width: 326px;  /* --print-preview-sidebar-width */
     }
 
     [new-print-preview-layout].loading body::before {

chrome/browser/resources/print_preview/print_preview_resources.grd

@@ -415,6 +415,10 @@
                  file="new/print_preview_shared_css.html"
                  type="chrome_html"
                  preprocess="true" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_PRINT_PREVIEW_VARS_CSS_HTML"
+                 file="new/print_preview_vars_css.html"
+                 type="chrome_html"
+                 preprocess="true" />
       <structure name="IDR_PRINT_PREVIEW_NEW_THROBBER_CSS_HTML"
                  file="new/throbber_css.html"
                  type="chrome_html"/>