summaryrefslogtreecommitdiffstats
path: root/chromium/chrome/browser/resources/tab_strip/tab.html
diff options
context:
space:
mode:
Diffstat (limited to 'chromium/chrome/browser/resources/tab_strip/tab.html')
-rw-r--r--chromium/chrome/browser/resources/tab_strip/tab.html248
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-25 01:01:16 +0000