Tab Strip WebUI: Update some dimensions

- Make close button touch target bigger, but actual icon smaller
- Make temporary off-size thumbnails cover its entire container
- Update tabstrip dimensions
- Make favicon container take full height (this will be useful for
animating crashed state later on)

https://i.imgur.com/SHPzosN.png

Bug: 989131
Change-Id: Ibf39f09c44764544fd16da08aff242234c22914f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1829249
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Peter Boström <pbos@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701365}

chrome/browser/resources/tab_strip/tab.html

 <style>
   :host {
-    --tabstrip-tab-height: 230px;
-    --tabstrip-tab-width: 280px;
+    --tabstrip-tab-height: 216px;
+    --tabstrip-tab-width: 288px;
     --tabstrip-tab-title-height: 40px;
 
     cursor: pointer;
@@ -34,23 +34,26 @@
     height: var(--tabstrip-tab-title-height);
     justify-content: center;
     margin: 0;
-    padding-inline-end: 4px;
-    padding-inline-start: 12px;
   }
 
   #faviconContainer {
+    --favicon-size: 16px;
     flex-shrink: 0;
-    height: 16px;
+    height: 100%;
     margin-inline-end: 8px;
+    margin-inline-start: 12px;
     position: relative;
-    width: 16px;
+    width: var(--favicon-size);
   }
 
   #loading,
   #favicon {
-    height: 100%;
+    height: var(--favicon-size);
+    left: 50%;
     position: absolute;
-    width: 100%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--favicon-size);
   }
 
   #loading {
@@ -61,9 +64,6 @@
 
   #favicon {
     background-size: contain;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
     transition: border-radius 250ms;
   }
 
@@ -74,9 +74,9 @@
 
   :host([loading]) #favicon {
     border-radius: 50%;
-    height: calc(100% - 6px);
+    height: calc(var(--favicon-size) - 6px);
     overflow: hidden;
-    width: calc(100% - 6px);
+    width: calc(var(--favicon-size) - 6px);
   }
 
   #titleText {
@@ -92,23 +92,24 @@
     align-items: center;
     background-color: transparent;
     border: 0;
+    cursor: pointer;
     display: flex;
     flex-shrink: 0;
-    height: 32px;
+    height: 100%;
     justify-content: center;
     margin-inline-start: auto;
     padding: 0;
     position: relative;
-    width: 32px;
+    width: 36px;
   }
 
   #closeIcon {
     background:
         url(chrome://resources/images/icon_clear.svg) center/contain no-repeat;
     display: block;
-    height: 24px;
+    height: 18px;
     position: relative;
-    width: 24px;
+    width: 18px;
   }
 
   #thumbnail {
@@ -121,7 +122,7 @@
 
   #thumbnailImg {
     height: calc(var(--tabstrip-tab-height) - var(--tabstrip-tab-title-height));
-    object-fit: contain;
+    object-fit: cover;
     pointer-events: none;
     width: var(--tabstrip-tab-width);
   }

chrome/browser/ui/views/frame/browser_view_layout.cc

@@ -411,7 +411,7 @@ int BrowserViewLayout::LayoutTabStripRegion(int top) {
 int BrowserViewLayout::LayoutWebUITabStrip(int top) {
   if (!webui_tab_strip_ || !webui_tab_strip_->GetVisible())
     return top;
-  constexpr int kWebUiTabStripHeightDp = 262;
+  constexpr int kWebUiTabStripHeightDp = 248;
   webui_tab_strip_->SetBounds(vertical_layout_rect_.x(), top,
                               vertical_layout_rect_.width(),
                               kWebUiTabStripHeightDp);