WebUI Tab Strip: Update UI for tab groups

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

chrome/browser/resources/tab_strip/tab_group.html

 <style>
 :host {
-  display: block;
+  --tabstrip-tab-group-title-height: 22px;
+  --tabstrip-tab-group-title-margin: var(--tabstrip-tab-spacing);
+
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px rgba(var(--tabstrip-tab-group-color-rgb), .24);
+  padding: var(--tabstrip-tab-spacing);
+}
+
+#chip {
+  display: inline-block;
+  height: var(--tabstrip-tab-group-title-height);
+  margin-bottom: var(--tabstrip-tab-group-title-margin);
+}
+
+#title {
+  background: rgba(var(--tabstrip-tab-group-color-rgb), 1);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: rgb(var(--tabstrip-tab-group-text-color-rgb));
+  display: inline-block;
+  height: var(--tabstrip-tab-group-title-height);
+  line-height: var(--tabstrip-tab-group-title-height);
+  padding: 0 6px;
+}
+
+#title:empty {
+  border-radius: 50%;
+  height: 16px;
+  margin-top: 4px;
+  width: 16px;
 }
 
 #tabs {
+  /* Cached CSS variable so the children could use them and override the
+   * original values. */
+  --ungrouped-tab-thumbnail-height: var(--tabstrip-tab-thumbnail-height);
+
   display: flex;
   min-width: fit-content;
 }
+
+:host ::slotted(tabstrip-tab) {
+  --tabstrip-tab-thumbnail-height: calc(
+      var(--ungrouped-tab-thumbnail-height) -
+      var(--tabstrip-tab-group-title-height) -
+      var(--tabstrip-tab-group-title-margin));
+  --tabstrip-tab-thumbnail-width: calc(
+      var(--tabstrip-tab-thumbnail-height) *
+      var(--tabstrip-tab-thumbnail-aspect-ratio));
+
+  /* Recalculate tab heights and widths off new thumbnail sizes. */
+  --tabstrip-tab-height: calc(var(--tabstrip-tab-title-height) +
+                              var(--tabstrip-tab-thumbnail-height));
+  --tabstrip-tab-width: var(--tabstrip-tab-thumbnail-width);
+}
 </style>
 
+<div id="chip">
+  <div id="title"></div>
+</div>
 <div id="tabs">
   <slot></slot>
 </div>

chrome/browser/resources/tab_strip/tab_group.js

@@ -14,7 +14,10 @@ export class TabGroupElement extends CustomElement {
    * @param {!TabGroupVisualData} visualData
    */
   updateVisuals(visualData) {
-    // TODO(johntlee): Update the HTML with the visual data.
+    this.shadowRoot.querySelector('#title').innerText = visualData.title;
+    this.style.setProperty('--tabstrip-tab-group-color-rgb', visualData.color);
+    this.style.setProperty(
+        '--tabstrip-tab-group-text-color-rgb', visualData.textColor);
   }
 }
 

chrome/browser/resources/tab_strip/tab_list.html

@@ -34,8 +34,10 @@
     grid-auto-flow: column;
     grid-gap: 10px;
     grid-template-rows: repeat(3, var(--tabstrip-pinned-tab-size));
-    padding: var(--tabstrip-tab-spacing);
+    padding-block-end: var(--tabstrip-tab-list-vertical-padding);
+    padding-block-start: var(--tabstrip-tab-list-vertical-padding);
     padding-inline-end: 0;
+    padding-inline-start: var(--tabstrip-tab-spacing);
   }
 
   #pinnedTabs:empty {
@@ -45,16 +47,34 @@
   #unpinnedTabs {
     display: flex;
     min-width: fit-content;
-    padding: var(--tabstrip-tab-spacing);
+    padding-block-end: var(--tabstrip-tab-list-vertical-padding);
+    padding-block-start: var(--tabstrip-tab-list-vertical-padding);
     padding-inline-end: 0;
+    padding-inline-start: var(--tabstrip-tab-spacing);
+  }
+
+  tabstrip-tab-group {
+    --tabstrip-tab-spacing: 8px;
+    margin-block-end: calc(-1 * var(--tabstrip-tab-spacing));
+    margin-block-start: calc(-1 * var(--tabstrip-tab-spacing));
+    margin-inline-end: var(--tabstrip-tab-spacing);
+    margin-inline-start: 0;
+  }
+
+  tabstrip-tab-group tabstrip-tab:last-child {
+    --tabstrip-tab-spacing: 0px;
+  }
+
+  tabstrip-tab + tabstrip-tab-group {
+    margin-inline-start: calc(-1 * var(--tabstrip-tab-spacing));
   }
 
   #newTabButton {
     --cr-icon-button-size: var(--tabstrip-new-tab-button-width);
     --cr-icon-button-icon-size: 32px;
     --cr-icon-button-fill-color: var(--tabstrip-tab-text-color);
-    --cr-icon-button-margin-end: var(--new-tab-button-margin);
-    --cr-icon-button-margin-start: 0;
+    --cr-icon-button-margin-end: var(--tabstrip-new-tab-button-margin);
+    --cr-icon-button-margin-start: 0px;
     background: var(--tabstrip-tab-background-color);
     border-radius: 50%;
     box-shadow: 0 1px 3px 0 rgba(var(--google-grey-800-rgb), .3),

chrome/browser/resources/tab_strip/tabs_api_proxy.js

@@ -71,6 +71,7 @@ let ExtensionsApiTab;
 /**
  * @typedef {{
  *   color: string,
+ *   textColor: string,
  *   title: string,
  * }}
  */

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

@@ -478,10 +478,13 @@ base::DictionaryValue TabStripUIHandler::GetTabGroupData(TabGroup* group) {
       embedder_->GetThemeProvider()->GetColor(ThemeProperties::COLOR_FRAME));
   const tab_groups::TabGroupColor tab_group_color =
       tab_groups::GetTabGroupColorSet().at(visual_data->color());
+  const SkColor group_color = is_dark_frame ? tab_group_color.dark_theme_color
+                                            : tab_group_color.light_theme_color;
+  visual_data_dict.SetString("color",
+                             color_utils::SkColorToRgbString(group_color));
   visual_data_dict.SetString(
-      "color", color_utils::SkColorToRgbaString(
-                   is_dark_frame ? tab_group_color.dark_theme_color
-                                 : tab_group_color.light_theme_color));
+      "textColor", color_utils::SkColorToRgbString(
+                       color_utils::GetColorWithMaxContrast(group_color)));
 
   return visual_data_dict;
 }

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

@@ -79,7 +79,7 @@ class TabStripUIHandlerTest : public BrowserWithTestWindowTest {
 
     std::string group_color;
     ASSERT_TRUE(visual_data_dict->GetString("color", &group_color));
-    EXPECT_EQ(color_utils::SkColorToRgbaString(tab_groups::GetTabGroupColorSet()
+    EXPECT_EQ(color_utils::SkColorToRgbString(tab_groups::GetTabGroupColorSet()
                                                   .at(visual_data.color())
                                                   .light_theme_color),
               group_color);

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

@@ -42,12 +42,16 @@ TabStripUILayout TabStripUILayout::CalculateForWebViewportSize(
                                          layout.tab_title_height);
   }
 
+  layout.tab_thumbnail_aspect_ratio =
+      layout.tab_thumbnail_size.width() /
+      static_cast<double>(layout.tab_thumbnail_size.height());
+
   return layout;
 }
 
 base::Value TabStripUILayout::AsDictionary() const {
   base::Value dict(base::Value::Type::DICTIONARY);
-  dict.SetStringKey("--tabstrip-tab-list-padding",
+  dict.SetStringKey("--tabstrip-tab-list-vertical-padding",
                     base::NumberToString(padding_around_tab_list) + "px");
   dict.SetStringKey("--tabstrip-tab-title-height",
                     base::NumberToString(tab_title_height) + "px");
@@ -55,6 +59,8 @@ base::Value TabStripUILayout::AsDictionary() const {
                     base::NumberToString(tab_thumbnail_size.width()) + "px");
   dict.SetStringKey("--tabstrip-tab-thumbnail-height",
                     base::NumberToString(tab_thumbnail_size.height()) + "px");
+  dict.SetStringKey("--tabstrip-tab-thumbnail-aspect-ratio",
+                    base::NumberToString(tab_thumbnail_aspect_ratio));
   dict.SetStringKey("--tabstrip-viewport-width",
                     base::NumberToString(viewport_width) + "px");
   return dict;

chrome/browser/ui/webui/tab_strip/tab_strip_ui_layout.h

@@ -26,6 +26,7 @@ struct TabStripUILayout {
   int tab_title_height;
   int viewport_width;
   gfx::Size tab_thumbnail_size;
+  double tab_thumbnail_aspect_ratio;
 };
 
 #endif  // CHROME_BROWSER_UI_WEBUI_TAB_STRIP_TAB_STRIP_UI_LAYOUT_H_

chrome/test/data/webui/tab_strip/tab_group_test.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://tab-strip/tab_group.js';
+
+suite('TabGroup', () => {
+  let tabGroupElement;
+
+  setup(() => {
+    document.body.innerHTML = '';
+    tabGroupElement = document.createElement('tabstrip-tab-group');
+  });
+
+  test('UpdatesVisuals', () => {
+    const visuals = {
+      color: '255, 0, 0',
+      textColor: '0, 0, 255',
+      title: 'My new title',
+    };
+    tabGroupElement.updateVisuals(visuals);
+    assertEquals(
+        visuals.title,
+        tabGroupElement.shadowRoot.querySelector('#title').innerText);
+    assertEquals(
+        visuals.color,
+        tabGroupElement.style.getPropertyValue(
+            '--tabstrip-tab-group-color-rgb'));
+    assertEquals(
+        visuals.textColor,
+        tabGroupElement.style.getPropertyValue(
+            '--tabstrip-tab-group-text-color-rgb'));
+  });
+});

chrome/test/data/webui/tab_strip/tab_strip_browsertest.js

@@ -75,3 +75,13 @@ var TabStripTabSwiperTest = class extends TabStripBrowserTest {
 TEST_F('TabStripTabSwiperTest', 'All', function() {
   mocha.run();
 });
+
+var TabStripTabGroupTest = class extends TabStripBrowserTest {
+  get browsePreload() {
+    return 'chrome://tab-strip/test_loader.html?module=tab_strip/tab_group_test.js';
+  }
+};
+
+TEST_F('TabStripTabGroupTest', 'All', function() {
+  mocha.run();
+});