Improve emoji picker dialog UI according to mocks.

Brief changes:
 - Set dialog window size.
 - Fix emoji spacing.
 - Hide (currently non-functional) search field.
 - Use Roboto font.
 - Sticky tab row to top while scrolling emoji.
 - Replace "frequently used" with "recently used" to match its behaviour (which is not implemented yet).

Screenshot:
https://screenshot.googleplex.com/4Y8zvfGgpmMHq9y.png

Bug: 1152237
Change-Id: I25c3a1787e80f6693edd483f502692fafe586e29
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2639615Reviewed-by: John Palmer <jopalmer@chromium.org>
Reviewed-by: Keith Lee <keithlee@chromium.org>
Commit-Queue: Kenton Lam <kentonlam@google.com>
Cr-Commit-Position: refs/heads/master@{#845528}

chrome/browser/resources/chromeos/emoji_picker/emoji_group.html

 <style>
+  :root {
+    --emoji-per-row: 7;
+    --emoji-height: 32px;
+  }
+
   .emoji-group-emoji {
     display: flex;
     flex-wrap: wrap;
   }
   .emoji-button {
     font-size: 17px;
-    height: 20px;
-    margin: 8px;
+    height: var(--emoji-height);
+    line-height: var(--emoji-height);
     text-align: center;
-    width: 20px;
+    width: calc(100% / var(--emoji-per-row));
   }
   .emoji-button.variants {
     background-color: red;

chrome/browser/resources/chromeos/emoji_picker/emoji_group_button.html

@@ -2,6 +2,8 @@
   button {
     background-color: transparent;
     border: 5px solid transparent;
+    font-size: 24px;
+    height: 36px;
     padding: 0;
     width: 36px;
   }

chrome/browser/resources/chromeos/emoji_picker/emoji_picker.html

 <style>
-  .w-100 {
-    width: 100%;
+  .emoji-picker {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 20px);
+    margin: 10px;
+    margin-top: 0;
+    width: calc(100vw - 20px);
   }
 
-  .emoji-picker {
-    max-height: 343px;
-    min-height: 343px;
-    width: calc(36px * 7);
+  #search {
+    display: none;
   }
 
   .emoji-tabs {
     display: flex;
+    flex-shrink: 0;
     overflow-x: scroll;
     width: 100%;
   }
 
   .emoji-groups {
-    max-height: 400px;
+    flex-grow: 1;
     overflow-y: scroll;
   }
 </style>

chrome/browser/resources/chromeos/emoji_picker/emoji_picker.js

@@ -59,7 +59,7 @@ export class EmojiPicker extends PolymerElement {
     // TODO(https://crbug.com/1164828): replace placeholder frequently used
     // data.
     this.history = {
-      'group': 'Frequently used',
+      'group': 'Recently Used',
       'emoji': [
         {
           'base': [128512],

chrome/browser/resources/chromeos/emoji_picker/index.html

@@ -6,7 +6,15 @@
   <script type="module" src="emoji_picker.js"></script>
   <style>
     * {
-      font-family: sans-serif;
+      font-family: 'Roboto', sans-serif;
+    }
+    body {
+      margin: 0;
+      /* these sizes for testing on chrome://emoji-picker. 
+       * dialog window size is set in code. 
+       */
+      max-height: 343px;
+      max-width: 280px;
     }
   </style>
 </head>

chrome/browser/ui/webui/chromeos/emoji/emoji_dialog.cc

@@ -25,7 +25,7 @@ ui::ModalType EmojiPickerDialog::GetDialogModalType() const {
 }
 
 base::string16 EmojiPickerDialog::GetDialogTitle() const {
-  return base::UTF8ToUTF16("Emoji picker");
+  return base::UTF8ToUTF16("Emoji Picker");
 }
 
 GURL EmojiPickerDialog::GetDialogContentURL() const {
@@ -36,8 +36,8 @@ void EmojiPickerDialog::GetWebUIMessageHandlers(
     std::vector<content::WebUIMessageHandler*>* handlers) const {}
 
 void EmojiPickerDialog::GetDialogSize(gfx::Size* size) const {
-  const int kDefaultWidth = 544;
-  const int kDefaultHeight = 628;
+  const int kDefaultWidth = 280;
+  const int kDefaultHeight = 343;
   size->SetSize(kDefaultWidth, kDefaultHeight);
 }