1 files changed, 209 insertions, 39 deletions

diff --git a/chromium/chrome/browser/resources/tab_strip/tab.html b/chromium/chrome/browser/resources/tab_strip/tab.html
index 1e715432804..85517760d2d 100644
--- a/chromium/chrome/browser/resources/tab_strip/tab.html
+++ b/chromium/chrome/browser/resources/tab_strip/tab.html
@@ -1,38 +1,170 @@
 <style>
   :host {
-    border-radius: var(--tabstrip-card-border-radius);
-    box-shadow: var(--tabstrip-elevation-box-shadow);
+    --tabstrip-tab-title-height: 40px;
+    --tabstrip-tab-transition-duration: 250ms;
+
     cursor: pointer;
+    height: var(--tabstrip-tab-height);
+    position: relative;
+    width: var(--tabstrip-tab-width);
+  }
+
+  #dragImage {
+    background: var(--tabstrip-tab-background-color);
+    border-radius: var(--tabstrip-tab-border-radius);
+    box-shadow: 0 0 0 1px var(--tabstrip-tab-separator-color);
+    color: var(--tabstrip-tab-text-color);
     display: flex;
     flex-direction: column;
-    height: 230px;
+    height: 100%;
     overflow: hidden;
-    width: 280px;
+    width: 100%;
   }
 
-  :host([active]) {
-    box-shadow: 0 0 0 2px var(--tabstrip-focus-color);
+  :host([active]) #dragImage {
+    box-shadow: 0 0 0 2px var(--tabstrip-tab-active-border-color);
     outline: none;
   }
 
   #title {
     align-items: center;
-    background: var(--tabstrip-card-background-color);
-    border-block-end: 1px solid var(--tabstrip-separator-color);
+    border-block-end: 1px solid var(--tabstrip-tab-separator-color);
     box-sizing: border-box;
     display: flex;
-    height: 40px;
+    height: var(--tabstrip-tab-title-height);
     justify-content: center;
     margin: 0;
-    padding-inline-end: 4px;
-    padding-inline-start: 12px;
+    overflow: hidden;
   }
 
-  #favicon {
+  #faviconContainer {
+    --favicon-size: 16px;
     flex-shrink: 0;
-    height: 16px;
+    height: var(--favicon-size);
     margin-inline-end: 8px;
-    width: 16px;
+    margin-inline-start: 12px;
+    max-width: var(--favicon-size);
+    position: relative;
+    /* When transitioning to the default visible state, the margin and max-width
+     * transitions should finish first, then the opacity should be set to 1.
+     * This prevents the favicon and loading spinners from looking cropped
+     * while the element transitions. */
+    transition: margin var(--tabstrip-tab-transition-duration),
+                max-width var(--tabstrip-tab-transition-duration),
+                opacity 0ms linear var(--tabstrip-tab-transition-duration);
+    width: var(--favicon-size);
+  }
+
+  :host([hide-icon_]) #faviconContainer {
+    margin-inline-end: 0;
+    max-width: 0;
+    opacity: 0;
+    /* When transitioning to the hidden state, set opacity immediately to 0
+     * while transitioning the other values normally. */
+    transition: margin var(--tabstrip-tab-transition-duration),
+                max-width var(--tabstrip-tab-transition-duration),
+                opacity 0ms;
+  }
+
+  :host([pinned_]) #faviconContainer {
+    margin: 0;
+  }
+
+  #progressSpinner,
+  #favicon,
+  #crashedIcon {
+    height: var(--favicon-size);
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--favicon-size);
+  }
+
+  #progressSpinner {
+    -webkit-mask:
+        url(chrome://resources/images/throbber_small.svg)
+        center/contain no-repeat;
+    display: none;
+  }
+
+  #favicon {
+    background-size: contain;
+    transition: border-radius var(--tabstrip-tab-transition-duration);
+  }
+
+  #crashedIcon {
+    -webkit-mask:
+        url(chrome://theme/IDR_CRASH_SAD_FAVICON@2x)
+        center/contain no-repeat;
+    background-color: currentColor;
+    opacity: 0;
+    transform: translate(-50%, 100%);
+  }
+
+  #blocked {
+    background: var(--tabstrip-tab-blocked-color);
+    border: solid 1px var(--tabstrip-tab-background-color);
+    border-radius: 50%;
+    bottom: 0;
+    display: none;
+    height: 6px;
+    position: absolute;
+    right: 0;
+    transform: translate(50%, 50%);
+    width: 6px;
+  }
+
+  :host([waiting_]) #progressSpinner,
+  :host([loading_]) #progressSpinner {
+    display: block;
+  }
+
+  :host([loading_]) #favicon {
+    border-radius: 50%;
+    height: calc(var(--favicon-size) - 6px);
+    overflow: hidden;
+    width: calc(var(--favicon-size) - 6px);
+  }
+
+  :host([waiting_]) #progressSpinner {
+    background-color: var(--tabstrip-tab-waiting-spinning-color);
+    transform: /* Center first, then flip horizontally. */
+              translate(-50%, -50%) scaleX(-1);
+  }
+
+  :host([waiting_]) #favicon {
+    display: none;
+  }
+
+  :host([loading_]) #progressSpinner {
+    background-color: var(--tabstrip-tab-loading-spinning-color);
+  }
+
+  :host([crashed_]) #favicon {
+    opacity: 0;
+    transform: translate(-50%, 100%);
+    transition:
+        opacity var(--tabstrip-tab-transition-duration),
+        transform var(--tabstrip-tab-transition-duration);
+  }
+
+  :host([crashed_]) #crashedIcon {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+    transition:
+        opacity var(--tabstrip-tab-transition-duration),
+        transform var(--tabstrip-tab-transition-duration);
+    /* Wait until transition for #favicon finishes. */
+    transition-delay: var(--tabstrip-tab-transition-duration);
+  }
+
+  :host([blocked_]) #blocked {
+    display: block;
+  }
+
+  :host([active][blocked_]) #blocked {
+    display: none;
   }
 
   #titleText {
@@ -48,62 +180,100 @@
     align-items: center;
     background-color: transparent;
     border: 0;
+    color: inherit;
+    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;
+    -webkit-mask:
+        url(chrome://resources/images/icon_clear.svg)center/contain no-repeat;
+    background-color: currentColor;
     display: block;
-    height: 24px;
+    height: 18px;
     position: relative;
-    width: 24px;
+    width: 18px;
   }
 
   #thumbnail {
-    background: var(--tabstrip-card-background-color);
+    align-items: center;
+    background: var(--tabstrip-tab-background-color);
+    display: flex;
     flex: 1;
+    justify-content: center;
   }
 
   #thumbnailImg {
-    height: 100%;
-    object-fit: contain;
+    height: calc(var(--tabstrip-tab-height) - var(--tabstrip-tab-title-height));
+    object-fit: cover;
+    pointer-events: none;
+    width: var(--tabstrip-tab-width);
+  }
+
+  #thumbnailImg:not([src]) {
+    display: none;
+    pointer-events: none;
     width: 100%;
   }
 
   /* Pinned tab styles */
-  :host([pinned]) {
-    height: 50px;
-    width: 50px;
+  :host([pinned_]) {
+    height: var(--tabstrip-pinned-tab-size);
+    width: var(--tabstrip-pinned-tab-size);
   }
 
-  :host([pinned]) #title {
+  :host([pinned_]) #title {
     border-block-end: 0;
     height: 100%;
   }
 
-  :host([pinned]) #titleText,
-  :host([pinned]) #close,
-  :host([pinned]) #thumbnail {
+  :host([pinned_]) #titleText,
+  :host([pinned_]) #close,
+  :host([pinned_]) #thumbnail {
     display: none;
   }
+
+  :host([dragging_]) #dragPlaceholder {
+    background: var(--tabstrip-tab-background-color);
+    border-radius: var(--tabstrip-tab-border-radius);
+    height: 100%;
+    opacity: 0.5;
+    width: 100%;
+  }
+
+  /* When being dragged, the contents of the drag image needs to be off-screen
+   * with nothing else on top or below obscuring it. */
+  :host([dragging_]) #dragImage {
+    box-shadow: none;
+    position: absolute;
+    top: -999px;
+  }
 </style>
 
-<header id="title">
-  <span id="favicon"></span>
-  <h2 id="titleText"></h2>
-  <button id="close">
-    <span id="closeIcon"></span>
-  </button>
-</header>
+<div id="dragPlaceholder"></div>
+
+<div id="dragImage">
+  <header id="title">
+    <div id="faviconContainer">
+      <div id="progressSpinner"></div>
+      <div id="favicon"></div>
+      <div id="crashedIcon"></div>
+      <div id="blocked"></div>
+    </div>
+    <h2 id="titleText"></h2>
+    <button id="close">
+      <span id="closeIcon"></span>
+    </button>
+  </header>
 
-<div id="thumbnail">
-  <img id="thumbnailImg">
+  <div id="thumbnail">
+    <img id="thumbnailImg">
+  </div>
 </div>