[NTP][RQ] Adds support for repeatable queries in the NTP MV tiles

Requirements:
- Repeatable queries must feature a search loupe icon and appear similar
  to the Add Shortcut button with slight differences in icon color.
- Repeatable queries (only) can utilize two lines of text if needed.

Screenshots:
RQ tile in light mode: https://screenshot.googleplex.com/8Mzw3ppciHkGrBk
RQ tile in dark mode: https://screenshot.googleplex.com/78yVzsm6xA93M6F

This CL has no effect on visible MV tiles except for pushing down the
title slightly in order to support utilizing two lines of text for
repeatable query tiles. ThIS minor change is approved by UX (tinalzeng@).
MV tiles before: https://screenshot.googleplex.com/9ZVocxqwGzB6Yb7
MV tiles after: https://screenshot.googleplex.com/4GAQJNxu42jfNV4

Bug: 1138578
Change-Id: I941e849480adfb8451b969cfd2de54c7cbcbe317
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2472957
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#817333}

chrome/browser/resources/new_tab_page/most_visited.html

 <style include="cr-hidden-style cr-icons">
   :host {
-    --icon-size: 48px;
-    --tile-size: 112px;
-    --icon-button-color: var(--google-grey-600);
     --icon-button-color-active: var(--google-grey-refresh-700);
+    --icon-button-color: var(--google-grey-600);
+    --icon-size: 48px;
     --tile-hover-color: rgba(var(--google-grey-900-rgb), .1);
+    --tile-size: 112px;  /* top padding + icon + title margin + title */
+    --title-height: 32px;
   }
 
   #container {
@@ -26,7 +27,8 @@
     opacity: 1;
   }
 
-  #addShortcutIcon {
+  #addShortcutIcon,
+  .query-tile-icon {
     -webkit-mask-image: url(chrome://resources/images/add.svg);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
@@ -35,10 +37,19 @@
     width: 24px;
   }
 
+  .query-tile-icon {
+    -webkit-mask-image: url(chrome://resources/images/icon_search.svg);
+    background-color: var(--google-grey-700);
+  }
+
   :host([use-white-add-icon]) #addShortcutIcon {
     background-color: white;
   }
 
+  :host([use-white-add-icon]) .query-tile-icon {
+    background-color: var(--google-grey-400);
+  }
+
   .tile,
   #addShortcut {
     -webkit-tap-highlight-color: transparent;
@@ -72,7 +83,7 @@
     background-color: transparent;
     border: none;
     box-shadow: none;
-    padding: 0;
+    padding: 16px 0 0;
   }
 
   :host(:not([reordering_])) .tile:hover,
@@ -101,8 +112,7 @@
     border-radius: 12px;
     color: var(--ntp-theme-text-color);
     display: flex;
-    height: 24px;
-    margin-top: 7px;
+    margin-top: 16px;
     padding: 0 8px;
     width: 88px;
   }
@@ -114,6 +124,8 @@
 
   .tile-title span {
     font-weight: 400;
+    height: var(--title-height);
+    line-height: calc(var(--title-height) / 2);
     overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;
@@ -122,6 +134,13 @@
     width: 100%;
   }
 
+  .tile[query-tile] .tile-title span {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    white-space: initial;
+  }
+
   :host([use-title-pill]) .tile-title span {
     text-shadow: none;
   }
@@ -176,11 +195,14 @@
     style="--column-count: [[columnCount_]]; --row-count: [[rowCount_]];">
   <dom-repeat id="tiles" items="[[tiles_]]" on-dom-change="onTilesRendered_">
     <template>
+      <!-- TOOD(crbug.com/1138578): replace the query-tile attr binding to
+      something that checks whether the tile is a repeatable query tile. -->
       <a class="tile" draggable="true" href$="[[item.url.url]]"
           title$="[[item.title]]" on-dragstart="onDragStart_"
           on-touchstart="onTouchStart_"
           hidden$="[[isHidden_(index, columnCount_)]]"
-          on-click="onTileClick_" on-keydown="onTileKeyDown_">
+          on-click="onTileClick_" on-keydown="onTileKeyDown_"
+          query-tile$="[[isHidden_(index, columnCount_)]]">
         <cr-icon-button id="actionMenuButton" class="icon-more-vert"
             title="$i18n{moreActions}" on-click="onTileActionButtonClick_"
             tabindex="0" hidden$="[[!customLinksEnabled_]]"></cr-icon-button>
@@ -188,7 +210,12 @@
             title="$i18n{linkRemove}" on-click="onTileRemoveButtonClick_"
             tabindex="0" hidden$="[[customLinksEnabled_]]"></cr-icon-button>
         <div class="tile-icon">
-          <img src$="[[getFaviconUrl_(item.url)]]" draggable="false"></img>
+          <!-- TOOD(crbug.com/1138578): replace the hidden attr binding to
+          something that checks whether the tile is a repeatable query tile. -->
+          <img src$="[[getFaviconUrl_(item.url)]]" draggable="false"
+              hidden$="[[isHidden_(index, columnCount_)]]"></img>
+          <div class="query-tile-icon" draggable="false"
+              hidden$="[[!isHidden_(index, columnCount_)]]"></div>
         </div>
         <div class$="tile-title [[getTileTitleDirectionClass_(item)]]">
           <span>[[item.title]]</span>