Tab Strip WebUI: Add placeholder front-end

This CL adds the basic elements needed to display the tab strip and
adds some basic placeholder HTML, CSS, and text to the UI.

Bug: 989131
Change-Id: I8f74dfb3b35b84ba349a6e6e44fd67fca2bbe117
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1726664
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683435}

chrome/browser/resources/BUILD.gn

@@ -42,6 +42,9 @@ if (closure_compile) {
     if (enable_extensions) {
       deps += [ "extensions:closure_compile" ]
     }
+    if (enable_webui_tab_strip) {
+      deps += [ "tab_strip:closure_compile" ]
+    }
     if (is_android) {
       deps += [
         "explore_sites_internals:closure_compile",
@@ -310,6 +313,10 @@ if (enable_webui_tab_strip) {
   grit("tab_strip_resources") {
     source = "tab_strip/tab_strip_resources.grd"
     defines = chrome_grit_defines
+    deps = [
+      "tab_strip:tab_strip_modules",
+    ]
+    source_is_generated = true
     outputs = [
       "grit/tab_strip_resources.h",
       "grit/tab_strip_resources_map.cc",
@@ -317,5 +324,9 @@ if (enable_webui_tab_strip) {
       "tab_strip_resources.pak",
     ]
     output_dir = "$root_gen_dir/chrome"
+    grit_flags = [
+      "-E",
+      "root_gen_dir=" + rebase_path(root_gen_dir, root_build_dir),
+    ]
   }
 }

chrome/browser/resources/tab_strip/BUILD.gn

+# Copyright 2019 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("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":custom_element",
+    ":tab",
+    ":tab_list",
+  ]
+}
+
+js_library("custom_element") {
+}
+js_library("tab") {
+}
+js_library("tab_list") {
+}
+
+group("tab_strip_modules") {
+  deps = [
+    ":tab_list_module",
+    ":tab_module",
+  ]
+}
+
+polymer_modulizer("tab") {
+  js_file = "tab.js"
+  html_file = "tab.html"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("tab_list") {
+  js_file = "tab_list.js"
+  html_file = "tab_list.html"
+  html_type = "v3-ready"
+}

chrome/browser/resources/tab_strip/custom_element.js

+// Copyright 2019 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.
+
+/**
+ * Super class for all custom elements defined in the tab strip.
+ */
+export class CustomElement extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({mode: 'open'});
+    const template = document.createElement('template');
+    template.innerHTML = this.constructor.template || '';
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}

chrome/browser/resources/tab_strip/tab.html

+<style>
+  :host {
+    border-radius: 8px;
+    box-shadow: var(--tabstrip-elevation-box-shadow);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    height: 312px;
+    overflow: hidden;
+    transition: box-shadow 125ms;
+    width: 216px;
+  }
+
+  :host(:focus) {
+    box-shadow: 0 0 0 2px var(--tabstrip-focus-color);
+    outline: none;
+  }
+
+  #title {
+    align-items: center;
+    background: var(--tabstrip-card-background-color);
+    border-block-end: 1px solid rgb(var(--google-grey-300-rgb));
+    box-sizing: border-box;
+    display: flex;
+    height: 40px;
+    margin: 0;
+    padding-inline-end: 4px;
+    padding-inline-start: 12px;
+  }
+
+  #favicon {
+    flex-shrink: 0;
+    height: 16px;
+    margin-inline-end: 8px;
+    width: 16px;
+  }
+
+  #titleText {
+    font-size: 100%;
+    font-weight: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  #close {
+    -webkit-appearance: none;
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    display: flex;
+    flex-shrink: 0;
+    height: 32px;
+    justify-content: center;
+    margin-inline-start: auto;
+    padding: 0;
+    position: relative;
+    width: 32px;
+  }
+
+  #closeIcon {
+    background:
+        url(chrome://resources/images/icon_clear.svg) center/contain no-repeat;
+    display: block;
+    height: 24px;
+    position: relative;
+    width: 24px;
+  }
+
+  #thumbnail {
+    background: var(--tabstrip-card-background-color);
+    flex: 1;
+  }
+</style>
+
+<header id="title">
+  <span id="favicon"></span>
+  <h2 id="titleText">Page title</h2>
+  <button id="close" aria-label="Close tab">
+    <span id="closeIcon"></span>
+  </button>
+</header>
+
+<div id="thumbnail"></div>

chrome/browser/resources/tab_strip/tab.js

+// Copyright 2019 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 {CustomElement} from './custom_element.js';
+
+class Tab extends CustomElement {
+  static get template() {
+    return `{__html_template__}`;
+  }
+
+  connectedCallback() {
+    this.setAttribute('tabindex', 0);
+  }
+}
+
+customElements.define('tabstrip-tab', Tab);

chrome/browser/resources/tab_strip/tab_list.html

+<style>
+  :host {
+    display: flex;
+    padding: 16px;
+    width: fit-content;
+  }
+
+  tabstrip-tab {
+    flex-shrink: 0;
+    margin-inline-end: 16px;
+  }
+
+  tabstrip-tab:last-child {
+    margin-inline-end: 0;
+  }
+</style>
+
+<tabstrip-tab></tabstrip-tab>
+<tabstrip-tab></tabstrip-tab>
+<tabstrip-tab></tabstrip-tab>
+<tabstrip-tab></tabstrip-tab>
+<tabstrip-tab></tabstrip-tab>
+<tabstrip-tab></tabstrip-tab>

chrome/browser/resources/tab_strip/tab_list.js

+// Copyright 2019 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 './tab.js';
+
+import {CustomElement} from './custom_element.js';
+
+class TabList extends CustomElement {
+  static get template() {
+    return `{__html_template__}`;
+  }
+}
+
+customElements.define('tabstrip-tab-list', TabList);

chrome/browser/resources/tab_strip/tab_strip.html

@@ -2,7 +2,35 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}">
   <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+    <style>
+      html {
+        --google-grey-50-rgb: 248, 249, 250;
+        --google-grey-200-rgb: 232, 234, 237;
+        --google-grey-300-rgb: 218, 220, 224;
+        --google-grey-800-rgb: 60, 64, 67;
+        --google-grey-900-rgb: 32, 33, 36;
+        --google-blue-300-rgb: 138, 180, 248;
+        --google-blue-500-rgb: 66, 133, 244;
+
+        --tabstrip-background-color: rgb(var(--google-grey-50-rgb));
+        --tabstrip-card-background-color: white;
+        --tabstrip-elevation-box-shadow:
+            0 0 0 1px rgb(var(--google-grey-300-rgb));
+        --tabstrip-focus-color: rgb(var(--google-blue-500-rgb));
+        --tabstrip-primary-text-color: rgb(var(--google-grey-900-rgb));
+      }
+
+      body {
+        background: var(--tabstrip-background-color);
+        color: var(--tabstrip-primary-text-color);
+        margin: 0;
+        padding: 0;
+      }
+    </style>
   </head>
   <body>
+    <tabstrip-tab-list></tabstrip-tab-list>
+    <script src="tab_list.js" type="module"></script>
   </body>
 </html>

chrome/browser/resources/tab_strip/tab_strip_resources.grd

@@ -17,6 +17,23 @@
           file="tab_strip.html"
           type="chrome_html"
           compress="gzip"/>
+      <structure
+          name="IDR_TAB_STRIP_CUSTOM_ELEMENT_JS"
+          file="custom_element.js"
+          type="chrome_html"
+          compress="gzip"/>
+      <structure
+          name="IDR_TAB_STRIP_TAB_LIST_JS"
+          file="${root_gen_dir}/chrome/browser/resources/tab_strip/tab_list.js"
+          use_base_dir="false"
+          type="chrome_html"
+          compress="gzip"/>
+      <structure
+          name="IDR_TAB_STRIP_TAB_JS"
+          file="${root_gen_dir}/chrome/browser/resources/tab_strip/tab.js"
+          use_base_dir="false"
+          type="chrome_html"
+          compress="gzip"/>
     </structures>
   </release>
 </grit>

chrome/browser/ui/webui/tab_strip/tab_strip_ui.cc

@@ -16,9 +16,15 @@ TabStripUI::TabStripUI(content::WebUI* web_ui)
   content::WebUIDataSource* html_source =
       content::WebUIDataSource::Create(chrome::kChromeUITabStripHost);
 
+  std::string generated_path =
+      "@out_folder@/gen/chrome/browser/resources/tab_strip/";
+
   for (size_t i = 0; i < kTabStripResourcesSize; ++i) {
-    html_source->AddResourcePath(kTabStripResources[i].name,
-                                 kTabStripResources[i].value);
+    std::string path = kTabStripResources[i].name;
+    if (path.rfind(generated_path, 0) == 0) {
+      path = path.substr(generated_path.length());
+    }
+    html_source->AddResourcePath(path, kTabStripResources[i].value);
   }
 
   html_source->SetDefaultResource(IDR_TAB_STRIP_HTML);