Sanitize height, border and padding of gr-autocomplete

Remove --gr-autocomplete. Always put border, border-radius, padding
on gr-autocomplete, unless it is classified as "borderless".

Add a border-radius also to the gr-autocomplete-dropdown. Makes it
look nicer.

Adjust the vertical offset of where the dropdown is shown in
gr-autocomplete to 31px, which matches the default styles. Only needs
a different value in gr-account-entry, where no border and no padding
is used.

Drop height:2em from gr-autocomplete usages, which makes it fall back
to height being calculated from border, padding, line-height as usual.

Also drop height:2em from input,select,textarea form styles, and
align their padding to 4px as used everywhere else.

Align also the standard border-radius and padding of input with that
of gr-autocomplete.

Change-Id: If3e1434f206f50577b926b3f35b624636534926b

polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html

@@ -43,11 +43,6 @@ limitations under the License.
       .value {
         width: 32em;
       }
-      gr-autocomplete {
-        --gr-autocomplete: {
-          padding: 0 var(--spacing-xs);
-        }
-      }
       .hide {
         display: none;
       }

polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html

@@ -40,15 +40,8 @@ limitations under the License.
         width: 20em;
       }
       gr-autocomplete {
-        border: none;
-        --gr-autocomplete: {
-          border: 1px solid var(--border-color);
-          border-radius: var(--border-radius);
-          height: 2em;
-          padding: 0 var(--spacing-xs);
         width: 20em;
       }
-      }
     </style>
 
     <div class="gr-form-styles">

polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html

@@ -48,10 +48,6 @@ limitations under the License.
       }
       gr-autocomplete {
         width: 20em;
-        --gr-autocomplete: {
-          height: 2em;
-          width: 20em;
-        }
       }
       a {
         color: var(--primary-text-color);

polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html

@@ -29,11 +29,9 @@ limitations under the License.
       }
       gr-autocomplete {
         background-color: var(--view-background-color);
-        border: 1px solid var(--border-color);
         border-radius: var(--border-radius);
         flex: 1;
         outline: none;
-        padding: var(--spacing-xs);
       }
     </style>
     <form>
@@ -45,7 +43,6 @@ limitations under the License.
           on-commit="_handleInputCommit"
           allow-non-suggested-values
           multi
-          borderless
           threshold="[[_threshold]]"
           tab-complete
           vertical-offset="30"></gr-autocomplete>

polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html

@@ -55,21 +55,13 @@ limitations under the License.
       gr-dialog .main > iron-input{
         width: 100%;
       }
-      gr-autocomplete {
-        --gr-autocomplete: {
-          border: 1px solid var(--border-color);
-          border-radius: var(--border-radius);
-          height: 2em;
-          padding: 0 var(--spacing-xs);
-        }
-      }
       input {
         border: 1px solid var(--border-color);
         border-radius: var(--border-radius);
-        height: 2em;
         margin: var(--spacing-m) 0;
-        padding: 0 var(--spacing-xs);
+        padding: var(--spacing-s);
         width: 100%;
+        box-sizing: content-box;
       }
       @media screen and (max-width: 50em) {
         gr-dialog {

polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.html

@@ -40,7 +40,8 @@ limitations under the License.
         on-commit="_handleInputCommit"
         clear-on-commit
         warn-uncommitted
-        text="{{_inputText}}">
+        text="{{_inputText}}"
+        vertical-offset="24">
     </gr-autocomplete>
   </template>
   <script src="gr-account-entry.js"></script>

polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html

@@ -60,6 +60,7 @@ limitations under the License.
       .dropdown-content {
         background: var(--dropdown-background-color);
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+        border-radius: var(--border-radius);
         max-height: 50vh;
         overflow: auto;
       }

polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html

@@ -36,13 +36,14 @@ limitations under the License.
         margin: 0 var(--spacing-xs);
         vertical-align: top;
       }
-      paper-input:not(.borderless) {
+      paper-input.borderless {
-        border: 1px solid var(--border-color);
+        border: none;
+        padding: 0;
       }
       paper-input {
-        height: var(--line-height-normal);
+        border: 1px solid var(--border-color);
-        width: 100%;
+        border-radius: var(--border-radius);
-        @apply --gr-autocomplete;
+        padding: var(--spacing-s);
         --paper-input-container: {
           padding: 0;
         };
@@ -50,13 +51,25 @@ limitations under the License.
           font-size: var(--font-size-normal);
           line-height: var(--line-height-normal);
         };
+        /* This is a hack for not being able to set height:0 on the underline
+           of a paper-input 2.2.3 element. All the underline fixes below only
+           actually work in 3.x.x, so the height must be adjusted directly as
+           a workaround until we are on Polymer 3. */
+        height: var(--line-height-normal);
+        --paper-input-container-underline-height: 0;
+        --paper-input-container-underline-wrapper-height: 0;
+        --paper-input-container-underline-focus-height: 0;
+        --paper-input-container-underline-legacy-height: 0;
         --paper-input-container-underline: {
+          height: 0;
           display: none;
         };
         --paper-input-container-underline-focus: {
+          height: 0;
           display: none;
         };
         --paper-input-container-underline-disabled: {
+          height: 0;
           display: none;
         };
       }

polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js

@@ -89,11 +89,15 @@
           type: Boolean,
           value: false,
         },
-        // Vertical offset needed for a 1em font-size with no vertical padding.
+        /**
-        // Inputs with additional padding will need to increase vertical offset.
+         * Vertical offset needed for an element with 20px line-height, 4px
+         * padding and 1px border (30px height total). Plus 1px spacing between
+         * input and dropdown. Inputs with different line-height or padding will
+         * need to tweak vertical offset.
+         */
         verticalOffset: {
           type: Number,
-          value: 20,
+          value: 31,
         },
 
         text: {

polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html

@@ -335,7 +335,7 @@ limitations under the License.
     });
 
     test('vertical offset overridden by param if it exists', () => {
-      assert.equal(element.$.suggestions.verticalOffset, 20);
+      assert.equal(element.$.suggestions.verticalOffset, 31);
       element.verticalOffset = 30;
       assert.equal(element.$.suggestions.verticalOffset, 30);
     });

polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.html

@@ -38,14 +38,7 @@ limitations under the License.
       #body {
         display: flex;
       }
-      gr-autocomplete {
-        height: 1.5em;
-        --gr-autocomplete: {
-          border: none;
-        }
-      }
       #trigger {
-        border-left: 1px solid var(--deemphasized-text-color);
         color: var(--deemphasized-text-color);
         cursor: pointer;
         padding-left: var(--spacing-s);

polygerrit-ui/app/styles/gr-form-styles.html

@@ -61,7 +61,6 @@ limitations under the License.
       }
       .gr-form-styles td,
       .gr-form-styles tfoot th {
-        height: 2em;
         padding: var(--spacing-s) 0;
         vertical-align: middle;
       }
@@ -84,8 +83,7 @@ limitations under the License.
       .gr-form-styles textarea {
         border: 1px solid var(--border-color);
         border-radius: var(--border-radius);
-        height: 2em;
+        padding: var(--spacing-s);
-        padding: 0 var(--spacing-xs);
       }
       .gr-form-styles td:last-child {
         width: 5em;
@@ -97,24 +95,17 @@ limitations under the License.
       .gr-form-styles iron-autogrow-textarea {
         border: none;
         height: auto;
-        min-height: 2em;
+        min-height: 4em;
         --iron-autogrow-textarea: {
           border: 1px solid var(--border-color);
           border-radius: var(--border-radius);
           box-sizing: border-box;
-          padding: var(--spacing-s) var(--spacing-xs) 0 var(--spacing-xs);
+          padding: var(--spacing-s);
         }
       }
       .gr-form-styles gr-autocomplete {
-        border: none;
-        --gr-autocomplete: {
-          border: 1px solid var(--border-color);
-          border-radius: var(--border-radius);
-          height: 2em;
-          padding: 0 var(--spacing-xs);
         width: 14em;
       }
-      }
       @media only screen and (max-width: 40em) {
         .gr-form-styles section {
           margin-bottom: var(--spacing-l);

polygerrit-ui/app/styles/shared-styles.html

@@ -42,10 +42,11 @@ limitations under the License.
       input {
         background-color: inherit;
         border: 1px solid var(--border-color);
+        border-radius: var(--border-radius);
         box-sizing: border-box;
         color: var(--primary-text-color);
         margin: 0;
-        padding: 0;
+        padding: var(--spacing-s);
       }
       iron-autogrow-textarea {
         background-color: inherit;