1 files changed, 65 insertions, 26 deletions

diff --git a/browser/components/firefoxview/fxview-tab-row.css b/browser/components/firefoxview/fxview-tab-row.css
index ceb059a33b..219d7e8aa2 100644
--- a/browser/components/firefoxview/fxview-tab-row.css
+++ b/browser/components/firefoxview/fxview-tab-row.css
@@ -31,6 +31,12 @@
   user-select: none;
   cursor: pointer;
   text-decoration: none;
+
+  :host(.pinned) & {
+    padding: var(--space-small);
+    min-width: unset;
+    margin: 0;
+  }
 }
 
 .fxview-tab-row-main,
@@ -44,6 +50,10 @@
 .fxview-tab-row-button.ghost-button.icon-button:enabled: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,
@@ -52,15 +62,16 @@
 }
 
 @media (prefers-contrast) {
-  .fxview-tab-row-main,
-  .fxview-tab-row-main:hover,
-  .fxview-tab-row-main:active {
+  a.fxview-tab-row-main,
+  a.fxview-tab-row-main:hover,
+  a.fxview-tab-row-main:active {
     background-color: transparent;
     border: 1px solid LinkText;
     color: LinkText;
   }
 
-  .fxview-tab-row-main:visited .fxview-tab-row-main:visited:hover {
+  a.fxview-tab-row-main:visited,
+  a.fxview-tab-row-main:visited:hover {
     border: 1px solid VisitedText;
     color: VisitedText;
   }
@@ -68,14 +79,17 @@
 
 .fxview-tab-row-favicon-wrapper {
   height: 16px;
+  position: relative;
 
-  .fxview-tab-row-favicon::after {
+  .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: absolute;
+    position: relative;
     height: 12px;
     width: 12px;
     -moz-context-properties: fill, stroke;
@@ -83,36 +97,47 @@
     stroke: var(--fxview-background-color-secondary);
   }
 
-  &.bookmark .fxview-tab-row-favicon::after {
-    background-image: url("chrome://browser/skin/bookmark-12.svg");
+  &: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);
   }
 
-  &.notification .fxview-tab-row-favicon::after {
+  &.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;
   }
 
-  &.soundplaying .fxview-tab-row-favicon::after {
-    background-image: url("chrome://global/skin/media/audio.svg");
-    inset-block-start: -5px;
-    inset-inline-end: -7px;
+  &.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: 2px;
-  }
+    padding: 6px;
+    min-width: 0;
+    min-height: 0;
+    position: absolute;
 
-  &.muted .fxview-tab-row-favicon::after {
-    background-image: url("chrome://global/skin/media/audio-muted.svg");
-    inset-block-start: -5px;
-    inset-inline-end: -7px;
-    border-radius: 100%;
-    background-color: var(--fxview-background-color-secondary);
-    padding: 2px;
+    &[muted="true"] {
+      background-image: url("chrome://global/skin/media/audio-muted.svg");
+    }
+
+    &[soundplaying="true"] {
+      background-image: url("chrome://global/skin/media/audio.svg");
+    }
   }
 }
 
@@ -179,26 +204,40 @@
   &[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");
+  }
 }
 
 @media (prefers-contrast) {
-  .fxview-tab-row-button {
+  .fxview-tab-row-button,
+  button.fxview-tab-row-main {
     border: 1px solid ButtonText;
     color: ButtonText;
   }
 
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:hover {
+  .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.ghost-button.icon-button:enabled:active {
+  .fxview-tab-row-button.ghost-button.icon-button:enabled:active,
+  button.fxview-tab-row-main:enabled:active {
     color: SelectedItem;
   }
 
   .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 {
+  .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;
   }
 }