cr-input: add inline-suffix slot

This CL adds 'inline-suffix' slot that allows to have suffix
element within undelined space of cr-input.

It also renames existing 'prefix' slot to 'inline-prefix' for
consistency.

Bug: 856310
Change-Id: If371576fd69006a1c20d9ab5406ea6d2becdd88b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2198994Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#776164}

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

@@ -50,7 +50,7 @@
     on-search="onSearchTermSearch" on-input="onSearchTermInput"
     aria-label$="[[label]]" placeholder="[[label]]"
     autofocus="[[autofocus]]" spellcheck="false">
-  <div slot="prefix" id="icon" class="cr-icon icon-search" alt=""></div>
+  <div slot="inline-prefix" id="icon" class="cr-icon icon-search" alt=""></div>
   <cr-icon-button id="clearSearch" class="icon-cancel"
       hidden$="[[!hasSearchText]]" slot="suffix" on-click="onClearClick_"
       title="[[clearLabel]]">

chrome/test/data/webui/cr_elements/cr_input_test.js

@@ -5,7 +5,7 @@
 // clang-format off
 // #import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-// #import {eventToPromise, whenAttributeIs} from '../test_util.m.js';
+// #import {eventToPromise, isChildVisible, whenAttributeIs} from '../test_util.m.js';
 // #import {assertEquals, assertNotEquals, assertThrows, assertTrue, assertFalse} from '../chai_assert.js';
 // clang-format on
 
@@ -375,4 +375,22 @@ suite('cr-input', function() {
     assertTrue(input.matches(':focus'));
     assertEquals('', window.getSelection().toString());
   });
+
+  test('slots', function() {
+    /* #ignore */ PolymerTest.clearBody();
+    document.body.innerHTML = `
+      <cr-input>
+        <div slot="inline-prefix" id="inline-prefix">One</div>
+        <div slot="suffix" id="suffix">Two</div>
+        <div slot="inline-suffix" id="inline-suffix">Three</div>
+      </cr-input>
+    `;
+    Polymer.dom.flush();
+    crInput =
+        /** @type {!CrInputElement} */ (document.querySelector('cr-input'));
+    assertTrue(test_util.isChildVisible(crInput, '#inline-prefix', true));
+    assertTrue(test_util.isChildVisible(crInput, '#suffix', true));
+    assertTrue(test_util.isChildVisible(crInput, '#inline-suffix', true));
+  });
+
 });

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

@@ -13,21 +13,24 @@
     <style include="cr-hidden-style cr-input-style cr-shared-style">
       /*
         A 'suffix' element will be outside the underlined space, while a
-        'prefix' element will be inside the underlined space by default.
+        'inline-prefix' and 'inline-suffix' elements will be inside the
+        underlined space by default.
 
         Regarding cr-input's width:
-        When there's no element in the 'prefix' or 'suffix' slot, setting
-        the width of cr-input as follows will work as expected:
+        When there's no element in the 'inline-prefix', 'inline-suffix' 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' 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.
+        However, when there's an element in the 'suffix', 'inline-suffix' and/or
+        'inline-prefix' slot, setting the 'width' will dictate the total width
+        of the input field *plus* the 'inline-prefix', 'inline-suffix' and
+        'suffix' elements. To set the width of the input field +
+        'inline-prefix' + 'inline-suffix' when a 'suffix' is present,
+        use --cr-input-width.
 
           cr-input {
             --cr-input-width: 200px;
@@ -122,7 +125,7 @@
     <div id="row-container" part="row-container">
       <div id="input-container">
         <div id="inner-input-container">
-          <slot name="prefix"></slot>
+          <slot name="inline-prefix"></slot>
           <!-- Only attributes that are named inconsistently between html and js
               need to use attr$="", such as |tabindex| vs .tabIndex and
               |readonly| vs .readOnly. -->
@@ -136,6 +139,7 @@
               max="[[max]]" min="[[min]]" on-focus="onInputFocus_"
               on-blur="onInputBlur_" on-change="onInputChange_"
               on-keydown="onInputKeydown_" part="input">
+          <slot name="inline-suffix"></slot>
         </div>
         <div id="underline"></div>
       </div>