Adds end padding to input box when lens search is enabled to account for

icon.

Screenshots: https://screenshot.googleplex.com/ApeMNbFSXyXS5TJ
https://screenshot.googleplex.com/9uLncSoR2L7gpUE

Bug: 1401354
Change-Id: Ic9eb4d34f2923f46920931a01b52d23fd7ce8a26
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4114620
Commit-Queue: Yo Wakita <yowakita@google.com>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1088988}

chrome/browser/resources/new_tab_page/realbox/realbox.html

@@ -3,6 +3,9 @@
     --ntp-realbox-border-radius: calc(0.5 * var(--ntp-realbox-height));
     --ntp-realbox-height: 44px;
     --ntp-realbox-shadow: 0 1px 6px 0 var(--color-realbox-shadow);
+    --ntp-realbox-icon-width: 26px;
+    --ntp-realbox-inner-icon-margin: 8px;
+    --ntp-realbox-voice-icon-offset: 16px;
     border-radius: var(--ntp-realbox-border-radius);
     box-shadow: var(--ntp-realbox-shadow);
     font-size: 16px;
@@ -13,6 +16,10 @@
     --ntp-realbox-shadow: 0 2px 6px 0 var(--color-realbox-shadow);
   }
 
+  :host([realbox-lens-search-enabled_]) {
+    --ntp-realbox-voice-icon-offset: 53px;
+  }
+
   @media (forced-colors: active) {
     :host {
       border: 1px solid ActiveBorder;
@@ -50,7 +57,7 @@
     font-size: inherit;
     height: 100%;
     outline: none;
-    padding-inline-end:  44px;
+    padding-inline-end: calc(var(--ntp-realbox-voice-icon-offset) + var(--ntp-realbox-icon-width) + var(--ntp-realbox-inner-icon-margin));
     padding-inline-start: 52px;
     position: relative;
     width: 100%;
@@ -118,7 +125,7 @@
     pointer-events: auto;
     position: absolute;
     right: 16px;
-    width: 26px;
+    width: var(--ntp-realbox-icon-width);
   }
 
   :host([single-colored-icons]) #voiceSearchButton,
@@ -146,12 +153,12 @@
   }
 
   :host([realbox-lens-search-enabled_]):host-context([dir='rtl']) #voiceSearchButton {
-    left: 53px;
+    left: var(--ntp-realbox-voice-icon-offset);
     right: unset;
   }
 
   :host([realbox-lens-search-enabled_]) #voiceSearchButton {
-    right: 53px;
+    right: var(--ntp-realbox-voice-icon-offset);
   }
 
   :host-context([dir='rtl']) .realbox-icon-button {
@@ -164,7 +171,7 @@
   }
 
   :-webkit-any(input, ntp-realbox-icon, .realbox-icon-button) {
-   z-index: 100;
+    z-index: 100;
   }
 
   ntp-realbox-dropdown {
@@ -180,30 +187,25 @@
   <input id="input" type="search" autocomplete="off" spellcheck="false"
       aria-live="[[inputAriaLive_]]" role="combobox"
       aria-expanded="[[matchesAreVisible]]" aria-controls="matches"
-      placeholder="$i18n{searchBoxHint}"
-      on-copy="onInputCutCopy_" on-cut="onInputCutCopy_"
-      on-focus="onInputFocus_" on-input="onInputInput_"
+      placeholder="$i18n{searchBoxHint}" on-copy="onInputCutCopy_"
+      on-cut="onInputCutCopy_" on-focus="onInputFocus_" on-input="onInputInput_"
       on-keydown="onInputKeydown_" on-keyup="onInputKeyup_"
       on-mousedown="onInputMouseDown_" on-paste="onInputPaste_">
   <ntp-realbox-icon id="icon" match="[[selectedMatch_]]"
       default-icon="[[realboxIcon_]]" in-searchbox>
   </ntp-realbox-icon>
-  <button id="voiceSearchButton"
-    class="realbox-icon-button"
-    on-click="onVoiceSearchClick_"
-    title="$i18n{voiceSearchButtonLabel}">
+  <button id="voiceSearchButton" class="realbox-icon-button"
+      on-click="onVoiceSearchClick_" title="$i18n{voiceSearchButtonLabel}">
   </button>
   <template is="dom-if" if="[[realboxLensSearchEnabled_]]">
-    <button id="lensSearchButton"
-        class="realbox-icon-button"
-        on-click="onLensSearchClick_"
-        title="$i18n{lensSearchButtonLabel}">
+    <button id="lensSearchButton" class="realbox-icon-button"
+        on-click="onLensSearchClick_" title="$i18n{lensSearchButtonLabel}">
     </button>
   </template>
-  <ntp-realbox-dropdown id="matches" role="listbox"
-      result="[[result_]]" selected-match-index="{{selectedMatchIndex_}}"
+  <ntp-realbox-dropdown id="matches" role="listbox" result="[[result_]]"
+      selected-match-index="{{selectedMatchIndex_}}"
       on-result-repaint="onResultRepaint_" on-match-focusin="onMatchFocusin_"
       on-match-click="onMatchClick_" on-match-remove="onMatchRemove_"
       on-header-focusin="onHeaderFocusin_" hidden$="[[!matchesAreVisible]]">
   </ntp-realbox-dropdown>
-</div>
+</div>