Print Preview Refresh: Fix destinations polish bugs

Fixing:
(1) Action links fell out of the tab order because destinations_dialog
and destinations_list were not correctly importing action_link.html
(2) Absolute positioning of icon to set it on top of the cr-input in
print_preview_search_box led to icon getting misplaced when browser
window size changed. Fix by adding a prefix in cr-input.
(3) Destination icon was shrinking for large font sizes due to using
flex layout. Make icon fixed size (20px, per spec).
(4) Ensure there is enough margin on the "Manage" link to show the
focus outline.

Bug: 884600, 885090, 886593, 887227, 887229
Change-Id: Ic7d910ad1460e8d457186b9c189797f12db4de5f
Reviewed-on: https://chromium-review.googlesource.com/1237137
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593205}

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

@@ -4,6 +4,10 @@
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.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. */
+<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">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<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/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
@@ -39,6 +40,10 @@
         padding: 0 4px;
       }
 
+      .action-link {
+        margin: 0 2px;
+      }
+
       .throbber-container {
         display: inline-block;
         padding-inline-end: 16px;

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

@@ -46,7 +46,9 @@
 
       .destination-settings-box iron-icon {
         fill: var(--google-grey-600);
+        flex: 0;
         margin-inline-end: 8px;
+        min-width: 20px;
         vertical-align: middle;
       }
 

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

@@ -17,7 +17,6 @@
           min-height: 32px;
         };
         --cr-input-error-display: none;
-        --cr-input-padding-start: 32px;
       }
 
       #icon {
@@ -25,9 +24,7 @@
         height: 30px;
         margin-inline-end: 0;
         margin-inline-start: 0;
-        position: absolute;
         width: 30px;
-        z-index: 1;
       }
 
       .search-box-input {
@@ -38,11 +35,12 @@
         -webkit-appearance: none;
       }
     </style>
-    <div id="icon" class="cr-icon icon-search" alt=""></div>
     <cr-input type="search" id="searchInput" class="search-box-input"
         on-search="onSearchTermSearch" on-input="onSearchTermInput"
         aria-label$="[[label]]" placeholder="[[label]]"
-        autofocus="[[autofocus]]" spellcheck="false"></cr-input>
+        autofocus="[[autofocus]]" spellcheck="false">
+      <div slot="prefix" id="icon" class="cr-icon icon-search" alt=""></div>
+    </cr-input>
   </template>
   <script src="print_preview_search_box.js"></script>
 </dom-module>

ui/webui/resources/cr_elements/cr_input/cr_input.html

@@ -10,18 +10,22 @@
   <template>
     <style include="cr-hidden-style cr-input-style">
       /*
+        A 'suffix' element will be outside the underlined space, while a
+        'prefix' element will be inside the underlined space by default.
+
         Regarding cr-input's width:
-        When there's no element in the 'suffix' slot, setting the width of
-        cr-input as follows will work as expected:
+        When there's no element in the 'prefix' or 'suffix' slot, setting
+        the width of cr-input as follows will work as expected:
 
           cr-input {
             width: 200px;
           }
 
-        However, when there's an element in the 'suffix' slot, setting the
-        'width' will dictate the total with of the input field *plus* the
-        'suffix' element. To set the width of the input field itself when
-        a 'suffix' is present, use --cr-input-width.
+        However, when there's an element in the 'suffix' and/or 'prefix'
+        slot, setting the 'width' will dictate the total width of the input
+        field *plus* the 'prefix' and 'suffix' elements. To set the width
+        of the input field + 'prefix' when a 'suffix' is present, use
+        --cr-input-width.
 
           cr-input {
             --cr-input-width: 200px;
@@ -82,7 +86,8 @@
         visibility: visible;
       }
 
-      #row-container {
+      #row-container,
+      #inner-input-container {
         align-items: center;
         display: flex;
         /* This will spread the input field and the suffix apart only if the
@@ -103,14 +108,17 @@
         <!-- Only attributes that are named inconsistently between html and js
              need to use attr$="", such as |tabindex| vs .tabIndex and
              |readonly| vs .readOnly. -->
-        <input id="input" disabled="[[disabled]]" autofocus="[[autofocus]]"
-            value="{{value::input}}" tabindex$="[[tabindex]]" type="[[type]]"
-            readonly$="[[readonly]]" maxlength$="[[maxlength]]"
-            pattern="[[pattern]]" required="[[required]]"
-            minlength$="[[minlength]]"
-            max="[[max]]" min="[[min]]" on-focus="onInputFocus_"
-            on-blur="onInputBlur_" on-change="onInputChange_"
-            on-keydown="onInputKeydown_">
+        <div id="inner-input-container">
+          <slot name="prefix"></slot>
+          <input id="input" disabled="[[disabled]]" autofocus="[[autofocus]]"
+              value="{{value::input}}" tabindex$="[[tabindex]]" type="[[type]]"
+              readonly$="[[readonly]]" maxlength$="[[maxlength]]"
+              pattern="[[pattern]]" required="[[required]]"
+              minlength$="[[minlength]]"
+              max="[[max]]" min="[[min]]" on-focus="onInputFocus_"
+              on-blur="onInputBlur_" on-change="onInputChange_"
+              on-keydown="onInputKeydown_">
+        </div>
         <div id="underline"></div>
       </div>
       <slot name="suffix"></slot>