WebUI: Update Tab Search to reference shared styles

This CL updates Tab Search WebUI to use the common make work better
WebUI styles in ui/webui/resources/cr_elements. This factoring has
been done to enable sharing of styles with the upcomming Read Later
feature.

Sharing common vars and styles will allow both features to remain
visually consistent and enable better co-ordination between the
teams wrt style changes.

Small formatting fixes to html.

Related refactoring CL:
https://crrev.com/c/2365335

Bug: 1099917
Change-Id: I4fdd0a2b0198ae026199526947e0933f90fb0df5
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3225026Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819587}

chrome/browser/resources/tab_search_merge/BUILD.gn

@@ -55,7 +55,6 @@ js_library("tab_search_search_field") {
 html_to_js("web_components") {
   js_files = [
     "app.js",
-    "shared_vars.js",
     "tab_search_item.js",
     "tab_search_search_field.js",
   ]

chrome/browser/resources/tab_search_merge/app.html

-<style>
-  ::-webkit-scrollbar-thumb {
-    background: var(--google-grey-refresh-300);
-  }
-
-  /* TODO(crbug.com/1110109): Add WCAG compliant dark mode support. */
-  @media (prefers-color-scheme: dark) {
-    ::-webkit-scrollbar-thumb {
-      background: var(--google-grey-refresh-500);
-    }
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--google-grey-refresh-500);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    ::-webkit-scrollbar-thumb:hover {
-      background: var(--google-grey-refresh-300);
-    }
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--tab-search-background-color);
-  }
-
-  ::-webkit-scrollbar {
-    width: 4px;
-  }
-
+<style include="mwb-shared-style">
   #tabs {
     max-height: 280px;
     overflow-x: hidden;
@@ -36,22 +7,25 @@
 
   #no-results {
     color: var(--cr-primary-text-color);
-    font-size: var(--primary-text-font-size);
+    font-size: var(--mwb-primary-text-font-size);
     padding: 12px;
     text-align: center;
   }
 </style>
-<tab-search-search-field id="searchField" on-search-changed="onSearchChanged_"
-    label="Search tabs [[getKeyboardShortcut_()]]" clear-label="Clear search" on-keydown="onKeyDown_"
-    autofocus>
+<tab-search-search-field id="searchField" autofocus clear-label="Clear search"
+    label="Search tabs [[getKeyboardShortcut_()]]" on-keydown="onKeyDown_"
+    on-search-changed="onSearchChanged_" >
 </tab-search-search-field>
 <div id="tabs">
-  <iron-selector id="selector" selected="{{selectedIndex_}}" selected-class="selected">
+  <iron-selector id="selector" selected="{{selectedIndex_}}"
+      selected-class="selected">
     <template id="tabsList" is="dom-repeat" items="[[filteredOpenTabs_]]">
-      <tab-search-item id="[[item.tabId]]" data="[[item]]"
+      <tab-search-item id="[[item.tabId]]" class="mwb-list-item" data="[[item]]"
           on-click="onItemClick_" on-close="onItemClose_" tabindex="-1" >
       </tab-search-item>
     </template>
   </iron-selector>
 </div>
-<div id="no-results" hidden="[[filteredOpenTabs_.length]]">No results found</div>
+<div id="no-results" hidden="[[filteredOpenTabs_.length]]">
+  No results found
+</div>

chrome/browser/resources/tab_search_merge/app.js

@@ -4,6 +4,8 @@
 
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/cr_elements/mwb_shared_style.js';
+import 'chrome://resources/cr_elements/mwb_shared_vars.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 import './tab_search_item.js';

chrome/browser/resources/tab_search_merge/shared_vars.html

-<custom-style>
-  <style>
-    html {
-      --icon-size: 16px;
-      --primary-text-font-size: 13px;
-    }
-  </style>
-</custom-style>
\ No newline at end of file

chrome/browser/resources/tab_search_merge/shared_vars.js

-// Copyright 2020 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-const $_documentContainer = document.createElement('template');
-$_documentContainer.innerHTML = `{__html_template__}`;
-document.head.appendChild($_documentContainer.content);

chrome/browser/resources/tab_search_merge/tab_search_item.html

 <style>
-  :host {
-    --horizontal-margin: 8px;
-    --vertical-margin: 12px;
-    align-items: center;
-    background-color: var(--tab-search-background-color);
-    display: flex;
-    padding: var(--vertical-margin) var(--horizontal-margin);
-  }
-
-  :host(:hover) {
-    background-color: rgba(var(--google-grey-900-rgb), 0.1);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :host(:hover) {
-      background-color: var(--google-grey-800);
-    }
-  }
-
-  :host(.selected) {
-    background-color: rgba(var(--google-grey-900-rgb), 0.16);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :host(.selected) {
-      background-color: var(--google-grey-refresh-700);
-    }
-  }
-
   :host(:hover, .selected) .button-container {
     display: flex;
   }
@@ -37,9 +8,9 @@
   }
 
   img {
-    height: var(--icon-size);
-    margin-inline-end: var(--horizontal-margin);
-    width: var(--icon-size);
+    height: var(--mwb-icon-size);
+    margin-inline-end: var(--mwb-list-item-horizontal-margin);
+    width: var(--mwb-icon-size);
   }
 
   .text-container {
@@ -57,19 +28,19 @@
 
   .primary-text {
     color: var(--cr-primary-text-color);
-    font-size: var(--primary-text-font-size);
+    font-size: var(--mwb-primary-text-font-size);
     margin-bottom: 3px;
   }
 
   .secondary-text {
     color: var(--cr-secondary-text-color);
-    font-size: 12px;
+    font-size: var(--mwb-secondary-text-font-size);
   }
 
   cr-icon-button {
-    --cr-icon-button-margin-end: calc(var(--icon-size) / 4);
-    --cr-icon-button-margin-start: calc(var(--icon-size) / 4);
-    --cr-icon-button-size: var(--icon-size);
+    --cr-icon-button-margin-end: calc(var(--mwb-icon-size) / 4);
+    --cr-icon-button-margin-start: calc(var(--mwb-icon-size) / 4);
+    --cr-icon-button-size: var(--mwb-icon-size);
   }
 </style>
 

chrome/browser/resources/tab_search_merge/tab_search_item.js

@@ -5,8 +5,8 @@
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/cr_elements/mwb_shared_vars.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import './shared_vars.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

chrome/browser/resources/tab_search_merge/tab_search_page.html

@@ -5,23 +5,16 @@
   <title>Tab Search</title>
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
   <style>
-    html {
-      --tab-search-background-color: white;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      html {
-        --tab-search-background-color: var(--google-grey-900);
-      }
-    }
-
     html,
     body {
       width: 320px;
     }
 
     body {
-      background-color: var(--tab-search-background-color);
+      /* Using a var here for the background color is not currently an issue for
+         Tab Search UI as it is shown asynchronously after the onload handler of
+         the main frame has completed. */
+      background-color: var(--mwb-background-color);
       margin: 0;
     }
   </style>
@@ -29,5 +22,7 @@
 <body>
   <tab-search-app></tab-search-app>
   <script type="module" src="app.js"></script>
+  <script type="module" src="chrome://resources/cr_elements/mwb_shared_vars.js">
+  </script>
 </body>
 </html>

chrome/browser/resources/tab_search_merge/tab_search_resources.grd

@@ -34,10 +34,6 @@
                file="${root_gen_dir}/chrome/browser/resources/tab_search/tab_search_search_field.js"
                type="BINDATA"
                use_base_dir="false" />
-      <include name="IDR_TAB_SEARCH_SHARED_VARS_JS"
-               file="${root_gen_dir}/chrome/browser/resources/tab_search/shared_vars.js"
-               type="BINDATA"
-               use_base_dir="false"/>
     </includes>
   </release>
 </grit>

chrome/browser/resources/tab_search_merge/tab_search_search_field.html

@@ -17,9 +17,9 @@
   }
 
   #searchIcon {
-    height: var(--icon-size);
+    height: var(--mwb-icon-size);
     padding-inline-end: 4px;
-    width: var(--icon-size);
+    width: var(--mwb-icon-size);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -35,7 +35,7 @@
     border-radius: 0;
     color: var(--cr-primary-text-color);
     flex: 1;
-    font-size: var(--primary-text-font-size);
+    font-size: var(--mwb-primary-text-font-size);
     outline: none;
     text-overflow: ellipsis;
   }

chrome/browser/resources/tab_search_merge/tab_search_search_field.js

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/cr_elements/mwb_shared_vars.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
-import './shared_vars.js';
 
 import {CrSearchFieldBehavior, CrSearchFieldBehaviorInterface} from 'chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';