WebUI Tab Strip: Reorganize spacing for tabs

This CL sets overflow of the tabs container to hidden so that when the
last tab animates out and its max-width goes to 0, the container's
width also shrinks.

Moving the gap internally to TabElement makes more sense in terms of
consistency since it's also included internally in the animation of
slideIn and slideOut. Also, previously, having 16px margin on all tabs
except the last tab caused the 16px to snap into place when the last
tab slides out and a new tab becomes the last-child.

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

chrome/browser/resources/tab_strip/tab.html

@@ -3,6 +3,7 @@
     --tabstrip-tab-transition-duration: 250ms;
 
     height: var(--tabstrip-tab-height);
+    padding-inline-end: var(--tabstrip-tab-spacing);
     position: relative;
     transform-origin: top left;
     width: var(--tabstrip-tab-width);

chrome/browser/resources/tab_strip/tab.js

@@ -37,11 +37,11 @@ function getAccessibleTitle(tab) {
 }
 
 /**
- * TODO(crbug.com/1025390): margin-inline-end cannot be animated yet.
+ * TODO(crbug.com/1025390): padding-inline-end cannot be animated yet.
  * @return {string}
  */
-function getMarginInlineEndProperty() {
-  return isRTL() ? 'marginLeft' : 'marginRight';
+function getPaddingInlineEndProperty() {
+  return isRTL() ? 'paddingLeft' : 'paddingRight';
 }
 
 export class TabElement extends CustomElement {
@@ -254,19 +254,19 @@ export class TabElement extends CustomElement {
    * @return {!Promise}
    */
   slideIn() {
-    const marginInlineEnd = getMarginInlineEndProperty();
+    const paddingInlineEnd = getPaddingInlineEndProperty();
 
     const startState = {
       maxWidth: 0,
       transform: `scale(0)`,
     };
-    startState[marginInlineEnd] = 0;
+    startState[paddingInlineEnd] = 0;
 
     const finishState = {
       maxWidth: `var(--tabstrip-tab-width)`,
       transform: `scale(1)`,
     };
-    finishState[marginInlineEnd] = 'var(--tabstrip-tab-margin-inline-end)';
+    finishState[paddingInlineEnd] = 'var(--tabstrip-tab-spacing)';
 
     return new Promise(resolve => {
       const animation = this.animate([startState, finishState], {
@@ -317,8 +317,8 @@ export class TabElement extends CustomElement {
       const widthAnimationKeyframes = {
         maxWidth: ['var(--tabstrip-tab-width)', 0],
       };
-      widthAnimationKeyframes[getMarginInlineEndProperty()] =
-          ['var(--tabstrip-tab-margin-inline-end)', 0];
+      widthAnimationKeyframes[getPaddingInlineEndProperty()] =
+          ['var(--tabstrip-tab-spacing)', 0];
       const widthAnimation = this.animate(widthAnimationKeyframes, {
         delay: 97.5,
         duration: 300,

chrome/browser/resources/tab_strip/tab_list.html

@@ -3,13 +3,12 @@
     --tabstrip-tab-height: calc(var(--tabstrip-tab-title-height) +
                                 var(--tabstrip-tab-thumbnail-height));
     --tabstrip-tab-width: var(--tabstrip-tab-thumbnail-width);
-    --tabstrip-tab-margin-inline-end: 16px;
+    --tabstrip-tab-spacing: 16px;
 
     background: var(--tabstrip-background-color);
     box-sizing: border-box;
     display: flex;
     min-width: fit-content;
-    padding: 16px;
     width: 100%;
   }
 
@@ -24,7 +23,8 @@
     grid-auto-flow: column;
     grid-gap: 10px;
     grid-template-rows: repeat(4, var(--tabstrip-pinned-tab-size));
-    margin-inline-end: var(--tabstrip-tab-margin-inline-end);
+    padding: var(--tabstrip-tab-spacing);
+    padding-inline-end: 0;
   }
 
   #pinnedTabsContainer:empty {
@@ -33,14 +33,9 @@
 
   #tabsContainer {
     display: flex;
-  }
-
-  #tabsContainer tabstrip-tab {
-    margin-inline-end: var(--tabstrip-tab-margin-inline-end);
-  }
-
-  #tabsContainer tabstrip-tab:last-child {
-    --tabstrip-tab-margin-inline-end: 0;
+    overflow: hidden;
+    padding: var(--tabstrip-tab-spacing);
+    padding-inline-end: 0;
   }
 
   #demoOptions {

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

@@ -53,34 +53,34 @@ suite('Tab', function() {
 
   test('slideIn animates in the element', async () => {
     document.documentElement.dir = 'ltr';
-    tabElement.style.marginRight = '100px';
+    tabElement.style.paddingRight = '100px';
     const tabElementStyle = window.getComputedStyle(tabElement);
 
     const animationPromise = tabElement.slideIn();
     // Before animation completes.
-    assertEquals('0px', tabElementStyle.marginRight);
+    assertEquals('0px', tabElementStyle.paddingRight);
     assertEquals('0px', tabElementStyle.maxWidth);
     assertEquals('matrix(0, 0, 0, 0, 0, 0)', tabElementStyle.transform);
     await animationPromise;
     // After animation completes.
-    assertEquals('100px', tabElementStyle.marginRight);
+    assertEquals('100px', tabElementStyle.paddingRight);
     assertEquals('none', tabElementStyle.maxWidth);
     assertEquals('matrix(1, 0, 0, 1, 0, 0)', tabElementStyle.transform);
   });
 
   test('slideIn animations right to left for RTL languages', async () => {
     document.documentElement.dir = 'rtl';
-    tabElement.style.marginLeft = '100px';
+    tabElement.style.paddingLeft = '100px';
     const tabElementStyle = window.getComputedStyle(tabElement);
 
     const animationPromise = tabElement.slideIn();
     // Before animation completes.
-    assertEquals('0px', tabElementStyle.marginLeft);
+    assertEquals('0px', tabElementStyle.paddingLeft);
     assertEquals('0px', tabElementStyle.maxWidth);
     assertEquals('matrix(0, 0, 0, 0, 0, 0)', tabElementStyle.transform);
     await animationPromise;
     // After animation completes.
-    assertEquals('100px', tabElementStyle.marginLeft);
+    assertEquals('100px', tabElementStyle.paddingLeft);
     assertEquals('none', tabElementStyle.maxWidth);
     assertEquals('matrix(1, 0, 0, 1, 0, 0)', tabElementStyle.transform);
   });