1 files changed, 29 insertions, 149 deletions
diff --git a/browser/components/firefoxview/fxview-tab-row.css b/browser/components/firefoxview/fxview-tab-row.css
index 219d7e8aa2..c1c8f967a7 100644
--- a/browser/components/firefoxview/fxview-tab-row.css
+++ b/browser/components/firefoxview/fxview-tab-row.css
@@ -2,9 +2,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+@import url("chrome://global/skin/design-system/text-and-typography.css");
+
 :host {
-  --fxviewtabrow-element-background-hover: color-mix(in srgb, currentColor 14%, transparent);
-  --fxviewtabrow-element-background-active: color-mix(in srgb, currentColor 21%, transparent);
+  --fxviewtabrow-element-background-hover: var(--button-background-color-ghost-hover);
+  --fxviewtabrow-element-background-active: var(--button-background-color-ghost-active);
   display: grid;
   grid-template-columns: subgrid;
   grid-column: span 9;
@@ -12,7 +14,7 @@
   border-radius: 4px;
 }
 
-@media (prefers-contrast) {
+@media (forced-colors) {
   :host {
     --fxviewtabrow-element-background-hover: ButtonText;
     --fxviewtabrow-element-background-active: ButtonText;
@@ -32,115 +34,42 @@
   cursor: pointer;
   text-decoration: none;
 
-  :host(.pinned) & {
-    padding: var(--space-small);
-    min-width: unset;
-    margin: 0;
+  :host([compact]) & {
+    grid-template-columns: min-content auto;
   }
 }
 
 .fxview-tab-row-main,
 .fxview-tab-row-main:visited,
-.fxview-tab-row-main:hover:active,
-.fxview-tab-row-button {
+.fxview-tab-row-main:hover:active {
   color: inherit;
 }
 
-.fxview-tab-row-main:hover,
-.fxview-tab-row-button.ghost-button.icon-button:enabled:hover {
+.fxview-tab-row-main:hover {
   background-color: var(--fxviewtabrow-element-background-hover);
   color: var(--fxviewtabrow-text-color-hover);
-
-  & .fxview-tab-row-favicon-wrapper .fxview-tab-row-favicon::after {
-    stroke: var(--fxview-indicator-stroke-color-hover);
-  }
 }
 
-.fxview-tab-row-main:hover:active,
-.fxview-tab-row-button.ghost-button.icon-button:enabled:hover:active {
+.fxview-tab-row-main:hover:active {
   background-color: var(--fxviewtabrow-element-background-active);
 }
 
-@media (prefers-contrast) {
-  a.fxview-tab-row-main,
-  a.fxview-tab-row-main:hover,
-  a.fxview-tab-row-main:active {
+@media (forced-colors) {
+  .fxview-tab-row-main,
+  .fxview-tab-row-main:hover,
+  .fxview-tab-row-main:active {
     background-color: transparent;
     border: 1px solid LinkText;
     color: LinkText;
   }
 
-  a.fxview-tab-row-main:visited,
-  a.fxview-tab-row-main:visited:hover {
+  .fxview-tab-row-main:visited,
+  .fxview-tab-row-main:visited:hover {
     border: 1px solid VisitedText;
     color: VisitedText;
   }
 }
 
-.fxview-tab-row-favicon-wrapper {
-  height: 16px;
-  position: relative;
-
-  .fxview-tab-row-favicon::after,
-  .fxview-tab-row-button::after,
-  &.pinned .fxview-tab-row-pinned-media-button {
-    display: block;
-    content: "";
-    background-size: 12px;
-    background-position: center;
-    background-repeat: no-repeat;
-    position: relative;
-    height: 12px;
-    width: 12px;
-    -moz-context-properties: fill, stroke;
-    fill: currentColor;
-    stroke: var(--fxview-background-color-secondary);
-  }
-
-  &:is(.pinnedOnNewTab, .bookmark):not(.attention) .fxview-tab-row-favicon::after {
-    inset-block-start: 9px;
-    inset-inline-end: -6px;
-  }
-
-  &.pinnedOnNewTab .fxview-tab-row-favicon::after,
-  &.pinnedOnNewTab .fxview-tab-row-button::after {
-    background-image: url("chrome://browser/skin/pin-12.svg");
-  }
-
-  &.bookmark .fxview-tab-row-favicon::after,
-  &.bookmark .fxview-tab-row-button::after {
-    background-image: url("chrome://browser/skin/bookmark-12.svg");
-    fill: var(--fxview-primary-action-background);
-  }
-
-  &.attention .fxview-tab-row-favicon::after,
-  &.attention .fxview-tab-row-button::after {
-    background-image: radial-gradient(circle, light-dark(rgb(42, 195, 162), rgb(84, 255, 189)), light-dark(rgb(42, 195, 162), rgb(84, 255, 189)) 2px, transparent 2px);
-    height: 4px;
-    width: 100%;
-    inset-block-start: 20px;
-  }
-
-  &.pinned .fxview-tab-row-pinned-media-button {
-    inset-block-start: -10px;
-    inset-inline-end: -10px;
-    border-radius: 100%;
-    background-color: var(--fxview-background-color-secondary);
-    padding: 6px;
-    min-width: 0;
-    min-height: 0;
-    position: absolute;
-
-    &[muted="true"] {
-      background-image: url("chrome://global/skin/media/audio-muted.svg");
-    }
-
-    &[soundplaying="true"] {
-      background-image: url("chrome://global/skin/media/audio.svg");
-    }
-  }
-}
-
 .fxview-tab-row-favicon {
   background-size: cover;
   -moz-context-properties: fill;
@@ -155,15 +84,6 @@
   text-align: match-parent;
 }
 
-.fxview-tab-row-container-indicator {
-  height: 16px;
-  width: 16px;
-  background-image: var(--identity-icon);
-  background-size: cover;
-  -moz-context-properties: fill;
-  fill: var(--identity-icon-color);
-}
-
 .fxview-tab-row-url {
   color: var(--text-color-deemphasized);
   text-decoration-line: underline;
@@ -182,62 +102,22 @@
   font-weight: 400;
 }
 
-.fxview-tab-row-button {
-  margin: 0;
-  cursor: pointer;
-  min-width: 0;
-  background-color: transparent;
-
-  &[muted="true"],
-  &[soundplaying="true"] {
-    background-size: 16px;
-    background-repeat: no-repeat;
-    background-position: center;
-    -moz-context-properties: fill;
-    fill: currentColor;
-  }
-
-  &[muted="true"] {
-    background-image: url("chrome://global/skin/media/audio-muted.svg");
-  }
-
-  &[soundplaying="true"] {
-    background-image: url("chrome://global/skin/media/audio.svg");
-  }
-
-  &.dismiss-button {
-    background-image: url("chrome://global/skin/icons/close.svg");
-  }
-
-  &.options-button {
-    background-image: url("chrome://global/skin/icons/more.svg");
-  }
+.fxview-tab-row-button::part(button) {
+  color: var(--fxview-text-primary-color)
 }
 
-@media (prefers-contrast) {
-  .fxview-tab-row-button,
-  button.fxview-tab-row-main {
-    border: 1px solid ButtonText;
-    color: ButtonText;
-  }
+.fxview-tab-row-button[muted="true"]::part(button) {
+  background-image: url("chrome://global/skin/media/audio-muted.svg");
+}
 
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:hover,
-  button.fxview-tab-row-main:enabled:hover {
-    border: 1px solid SelectedItem;
-    color: SelectedItem;
-  }
+.fxview-tab-row-button[soundplaying="true"]::part(button) {
+  background-image: url("chrome://global/skin/media/audio.svg");
+}
 
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:active,
-  button.fxview-tab-row-main:enabled:active {
-    color: SelectedItem;
-  }
+.fxview-tab-row-button.dismiss-button::part(button) {
+  background-image: url("chrome://global/skin/icons/close.svg");
+}
 
-  .fxview-tab-row-button.ghost-button.icon-button:enabled,
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:hover,
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:active
-  button.fxview-tab-row-main:enabled,
-  button.fxview-tab-row-main:enabled:hover,
-  button.fxview-tab-row-main:enabled:active {
-    background-color: ButtonFace;
-  }
+.fxview-tab-row-button.options-button::part(button) {
+  background-image: url("chrome://global/skin/icons/more.svg");
 }