Print Preview: Fix some polish issues with icon alignment

Bug: 1156918
Change-Id: I0d3fcd231a8896aee4d3869cc1bb7b080e1558f7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2581022
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835885}

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

@@ -13,10 +13,9 @@
 
   .throbber-container {
     display: flex;
-    margin-inline-start: 14px;
+    margin-inline-start:
+        calc((var(--search-icon-size) - var(--throbber-size))/2);
     min-height: var(--destination-item-height);
-    padding-inline-end: 16px;
-    padding-inline-start: calc(10/13 * 1em);
   }
 
   .throbber {

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

@@ -7,7 +7,7 @@
     min-height: var(--destination-item-height);
     opacity: .87;
     padding-inline-end: 2px;
-    padding-inline-start: 14px;
+    padding-inline-start: 0;
     vertical-align: middle;
   }
 
@@ -15,19 +15,24 @@
     align-items: center;
     color: var(--cr-secondary-text-color);
     font-size: calc(10/12 * 1em);
-    margin-inline-start: 1em;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
     white-space: nowrap;
   }
 
+  :host > span {
+    margin-inline-start: 1em;
+  }
+
   iron-icon {
+    --icon-margin: calc((var(--search-icon-size) - var(--iron-icon-width))/2);
     fill: var(--google-grey-600);
     flex: 0;
-    height: 20px;
-    margin-inline-end: 12px;
-    min-width: 20px;
+    height: var(--iron-icon-height);
+    margin-inline-end: var(--icon-margin);
+    margin-inline-start: var(--icon-margin);
+    min-width: var(--iron-icon-width);
     transition: opacity 150ms;
   }
 
@@ -37,10 +42,12 @@
     }
   }
 
-  .name {
+  :host .name {
     color: var(--cr-primary-text-color);
     font-size: 1em;
     margin-inline-start: 0;
+    /* Matches cr-input-padding-start */
+    padding-inline-start: 8px;
   }
 
   .extension-controlled-indicator {
@@ -48,6 +55,7 @@
     flex: 1;
     justify-content: flex-end;
     min-width: 150px;
+    padding-inline-end: 8px;
   }
 
   .extension-icon {

chrome/browser/resources/print_preview/ui/print_preview_search_box.html

@@ -15,8 +15,8 @@
   }
 
   #icon {
-    height: 30px;
-    width: 30px;
+    height: var(--search-icon-size);
+    width: var(--search-icon-size);
   }
 
   #clearSearch {

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

@@ -19,6 +19,8 @@
     --iron-icon-fill-color: var(--google-grey-refresh-700);
     --iron-icon-height: var(--cr-icon-size);
     --iron-icon-width: var(--cr-icon-size);
+    --search-icon-size: 32px;
+    --throbber-size: 16px;
   }
 
   @media (prefers-color-scheme: dark) {

chrome/browser/resources/print_preview/ui/throbber_css.html

@@ -3,8 +3,8 @@
     .throbber {
       background: url(chrome://resources/images/throbber_small.svg) no-repeat;
       display: inline-block;
-      height: 16px;
-      width: 16px;
+      height: var(--throbber-size);
+      width: var(--throbber-size);
     }
   </style>
 </template>

chrome/browser/resources/print_preview/ui/throbber_css.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import './print_preview_vars_css.js';
 
 const template = document.createElement('template');
 template.innerHTML = `