WebUI: Add shared vars and styles for make work better WebUI

This CL factors out common css styles from Tab Search into
mwb_shared_styles and mwb_shared_vars. These are currently being
referenced by Tab Search and will be used in 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.

Bug: 1099917
Change-Id: Idee622cb638499269a0bd2ad1135454e2e1aecb0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2365335
Commit-Queue: Thomas Lukaszewicz <tluk@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801575}

ui/webui/resources/cr_elements/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/html_to_js.gni")
 import("//tools/polymer/polymer.gni")
 import("//ui/webui/resources/tools/js_modulizer.gni")
 
@@ -163,6 +164,7 @@ group("polymer3_elements") {
     ":search_highlight_style_css_module",
     ":shared_style_css_module",
     ":shared_vars_css_module",
+    ":web_components",
     "cr_action_menu:cr_action_menu_module",
     "cr_button:cr_button_module",
     "cr_checkbox:cr_checkbox_module",
@@ -224,3 +226,10 @@ js_library("cr_scrollable_behavior.m") {
   ]
   extra_deps = [ ":modulize" ]
 }
+
+html_to_js("web_components") {
+  js_files = [
+    "mwb_shared_style.js",
+    "mwb_shared_vars.js",
+  ]
+}

ui/webui/resources/cr_elements/mwb_shared_style.html

+<template>
+  <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;
+    }
+
+    .mwb-list-item {
+      align-items: center;
+      background-color: var(--mwb-background-color);
+      display: flex;
+      padding: calc(var(--mwb-list-item-vertical-margin)/2) var(--mwb-list-item-horizontal-margin);
+    }
+
+    .mwb-list-item:hover {
+      background-color: var(--mwb-list-item-hover-background-color);
+    }
+
+    .mwb-list-item.selected {
+      background-color: var(--mwb-list-item-selected-background-color);
+    }
+  </style>
+</template>
\ No newline at end of file

ui/webui/resources/cr_elements/mwb_shared_style.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/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/cr_elements/mwb_shared_vars.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+<dom-module id="mwb-shared-style">{__html_template__}</dom-module>
+`;
+document.body.appendChild(template.content.cloneNode(true));
\ No newline at end of file

ui/webui/resources/cr_elements/mwb_shared_vars.html

+<custom-style>
+  <style>
+    html {
+      --mwb-background-color: white;
+      --mwb-icon-size: 16px;
+      --mwb-list-item-horizontal-margin: 8px;
+      --mwb-list-item-hover-background-color: rgba(var(--google-grey-900-rgb), 0.1);
+      --mwb-list-item-selected-background-color: rgba(var(--google-grey-900-rgb), 0.16);
+      --mwb-list-item-vertical-margin: 12px;
+      --mwb-primary-text-font-size: 13px;
+      --mwb-secondary-text-font-size: 12px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      html {
+        --mwb-background-color: var(--google-grey-900);
+        --mwb-list-item-hover-background-color: var(--google-grey-800);
+        --mwb-list-item-selected-background-color: var(--google-grey-refresh-700);
+      }
+    }
+  </style>
+</custom-style>

ui/webui/resources/cr_elements/mwb_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';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+
+const $_documentContainer = document.createElement('template');
+$_documentContainer.innerHTML = `{__html_template__}`;
+document.head.appendChild($_documentContainer.content);

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -184,6 +184,14 @@
          file="${root_gen_dir}/ui/webui/resources/cr_elements/md_select_css.m.js"
          use_base_dir="false"
          type="BINDATA" />
+  <include name="IDR_CR_ELEMENTS_MWB_SHARED_STYLE_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/mwb_shared_style.js"
+         use_base_dir="false"
+         type="BINDATA" />
+  <include name="IDR_CR_ELEMENTS_MWB_SHARED_VARS_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/mwb_shared_vars.js"
+         use_base_dir="false"
+         type="BINDATA" />
   <include name="IDR_CR_ELEMENTS_HIDDEN_STYLE_CSS_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/hidden_style_css.m.js"
          use_base_dir="false"