Distinguish two monospace fonts: code and mono

Add new css vars to app-theme.

Set 12px default for code and 13px default for mono.

Use "code" just in gr-diff and gr-formatted-text, mono everywhere else.

Ensure that font-size and line-height are set whenever the mono/code
fonts are used.

Fixes the font in the reply dialog being too small.

Fixes the code font in the comment card being too large.

Prominently, the commit message will also use 13px instead of 14px.

Screenshots: https://imgur.com/a/HTHy9fp

Bug: Issue 11839
Change-Id: I4a23ac99233656465707a083428fbe05cb146c95

polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html

@@ -98,6 +98,8 @@ limitations under the License.
       }
       .u-monospace {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
       }
       .u-green {
         color: var(--vote-text-color-recommended);

polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.html

@@ -34,8 +34,10 @@ limitations under the License.
       .status {
         color: #FFA62F;
         display: inline-block;
-        font-family: var(--monospace-font-family);
         text-align: center;
+        font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
       }
       .approved.status {
         color: var(--vote-text-color-recommended);

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html

@@ -126,6 +126,8 @@ limitations under the License.
       }
       .commitMessage {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         margin-right: var(--spacing-l);
         margin-bottom: var(--spacing-l);
         max-width: var(--commit-message-max-width, 72ch);;

polygerrit-ui/app/elements/change/gr-confirm-abandon-dialog/gr-confirm-abandon-dialog.html

@@ -43,6 +43,8 @@ limitations under the License.
       }
       iron-autogrow-textarea {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         padding: 0;
         width: 73ch; /* Add a char to account for the border. */
 

polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.html

@@ -51,6 +51,10 @@ limitations under the License.
         width: 100%;
       }
       iron-autogrow-textarea {
+        font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
+        padding: 0;
         --iron-autogrow-textarea: {
           font-family: var(--monospace-font-family);
           width: 72ch;

polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.html

@@ -38,6 +38,8 @@ limitations under the License.
       }
       iron-autogrow-textarea {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         padding: 0;
         width: 73ch; /* Add a char to account for the border. */
 

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html

@@ -138,6 +138,8 @@ limitations under the License.
       .row:not(.header-row) .stats,
       .total-stats {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         display: flex;
       }
       .sizeBars {

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -44,8 +44,8 @@ limitations under the License.
       }
       :host {
         font-family: var(--monospace-font-family, ''), 'Roboto Mono';
-        font-size: var(--font-size, var(--font-size-mono, 12px));
-        line-height: var(--line-height-mono, 1.334);
+        font-size: var(--font-size, var(--font-size-code, 12px));
+        line-height: var(--line-height-code, 1.334);
       }
 
       .thread-group {

polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor.html

@@ -25,6 +25,8 @@ limitations under the License.
         border: none;
         box-sizing: border-box;
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-code);
+        line-height: var(--line-height-code);
         min-height: 60vh;
         resize: none;
         white-space: pre;

polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.html

@@ -40,6 +40,8 @@ limitations under the License.
       }
       .publicKey {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         overflow-x: scroll;
         overflow-wrap: break-word;
         width: 30em;

polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html

@@ -27,6 +27,8 @@ limitations under the License.
     <style include="shared-styles">
       .password {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
       }
       #generatedPasswordOverlay {
         padding: var(--spacing-xxl);
@@ -37,6 +39,8 @@ limitations under the License.
       }
       #generatedPasswordDisplay .value {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
       }
       #passwordWarning {
         font-style: italic;

polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html

@@ -40,6 +40,8 @@ limitations under the License.
       }
       .publicKey {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         overflow-x: scroll;
         overflow-wrap: break-word;
         width: 30em;

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

@@ -294,7 +294,7 @@ limitations under the License.
               id="editTextarea"
               class="editMessage"
               autocomplete="on"
-              monospace
+              code
               disabled="{{disabled}}"
               rows="4"
               text="{{_messageText}}"></gr-textarea>

polygerrit-ui/app/elements/shared/gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog.html

@@ -43,6 +43,8 @@ limitations under the License.
       }
       iron-autogrow-textarea {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         padding: 0;
         width: 73ch; /* Add a char to account for the border. */
 

polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.html

@@ -38,6 +38,8 @@ limitations under the License.
       }
       input#input {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-mono);
+        line-height: var(--line-height-mono);
         @apply --text-container-style;
         width: 100%;
       }

polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html

@@ -33,7 +33,7 @@ limitations under the License.
       .viewer {
         background-color: var(--view-background-color);
         border: 1px solid var(--border-color);
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         padding: var(--spacing-s);
       }
       .editor iron-autogrow-textarea {

polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.html

@@ -52,6 +52,8 @@ limitations under the License.
       }
       gr-linked-text.pre {
         font-family: var(--monospace-font-family);
+        font-size: var(--font-size-code);
+        line-height: var(--line-height-code);
       }
 
     </style>

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

@@ -36,8 +36,14 @@ limitations under the License.
       :host(.monospace) {
         font-family: var(--monospace-font-family);
         font-size: var(--font-size-mono);
-        font-weight: var(--font-weight-normal);
         line-height: var(--line-height-mono);
+        font-weight: var(--font-weight-normal);
+      }
+      :host(.code) {
+        font-family: var(--monospace-font-family);
+        font-size: var(--font-size-code);
+        line-height: var(--line-height-code);
+        font-weight: var(--font-weight-normal);
       }
       #emojiSuggestions {
         font-family: var(--font-family);

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

@@ -74,10 +74,17 @@
         type: Boolean,
         value: false,
       },
+      /** Text input should be rendered in monspace font.  */
       monospace: {
         type: Boolean,
         value: false,
       },
+      /** Text input should be rendered in code font, which is smaller than the
+          standard monospace font. */
+      code: {
+        type: Boolean,
+        value: false,
+      },
       /** @type(?number) */
       _colonIndex: Number,
       _currentSearchString: {
@@ -115,6 +122,9 @@
       if (this.monospace) {
         this.classList.add('monospace');
       }
+      if (this.code) {
+        this.classList.add('code');
+      }
       if (this.hideBorder) {
         this.$.textarea.classList.add('noBorder');
       }

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

@@ -51,7 +51,7 @@ limitations under the License.
         background-color: inherit;
         color: var(--primary-text-color);
         border: 1px solid var(--border-color);
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         box-sizing: border-box;
         /* iron-autogrow-textarea has a "-webkit-appearance: textarea" :host
            css rule, which prevents overriding the border color. Clear that. */

polygerrit-ui/app/styles/themes/app-theme.html

@@ -75,13 +75,15 @@ html {
   /* fonts */
   --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
-  --font-size-mono: 12px;     /* 12px */
+  --font-size-code: 12px;     /* 12px mono */
+  --font-size-mono: .929rem;  /* 13px mono */
   --font-size-small: .857rem; /* 12px */
   --font-size-normal: 1rem;   /* 14px */
   --font-size-h3: 1.143rem;   /* 16px */
   --font-size-h2: 1.429rem;   /* 20px */
   --font-size-h1: 1.714rem;   /* 24px */
-  --line-height-mono: 1.334;      /* 16px */
+  --line-height-code: 1.334;      /* 16px */
+  --line-height-mono: 1.286rem;   /* 18px */
   --line-height-small: 1.143rem;  /* 16px */
   --line-height-normal: 1.429rem; /* 20px */
   --line-height-h3: 1.714rem;     /* 24px */