feat: Allow tabs to have custom icons and other cleanups, p=#11697

* feat: Allow tabs to have custom icons and other cleanups, b=closes #11686, closees https://github.com/zen-browser/desktop/issues/9972, closes https://github.com/zen-browser/desktop/issues/9251, c=folders, workspaces, tabs, common


* chore: Lint, b=no-bug, c=tabs

src/browser/themes/shared/tabbrowser/tabs-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df432311b0081e1 100644
+index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..fef63d687ba4e816d3d36f34d4a39adef06359c9 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
 @@ -21,7 +21,7 @@
@@ -39,12 +39,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
  
      &::before {
        position: absolute;
-@@ -498,14 +498,11 @@
- .tab-icon-image {
-   -moz-context-properties: fill, stroke;
-   fill: currentColor;
-+  border-radius: 4px;
- 
+@@ -502,10 +502,6 @@
    /* stylelint-disable-next-line media-query-no-invalid */
    @media -moz-pref("browser.tabs.fadeOutUnloadedTabs") {
      &[pending] {
@@ -55,7 +50,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
        opacity: 0.5;
        /* Fade the favicon out */
        transition-property: filter, opacity;
-@@ -522,10 +519,6 @@
+@@ -522,10 +518,6 @@
    /* stylelint-disable-next-line media-query-no-invalid */
    @media -moz-pref("browser.tabs.fadeOutExplicitlyUnloadedTabs") {
      &[pending][discarded] {
@@ -66,7 +61,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
        opacity: 0.5;
        /* Fade the favicon out */
        transition-property: filter, opacity;
-@@ -593,7 +586,7 @@
+@@ -593,7 +585,7 @@
    z-index: 1; /* Overlay tab title */
  
    #tabbrowser-tabs[orient="vertical"] & {
@@ -75,7 +70,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
    }
  
    &[crashed] {
-@@ -601,7 +594,7 @@
+@@ -601,7 +593,7 @@
    }
  
    #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
@@ -84,7 +79,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
      &[soundplaying] {
        list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
      }
-@@ -658,7 +651,7 @@
+@@ -658,7 +650,7 @@
      }
    }
  
@@ -93,7 +88,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
    &[crashed] {
      display: revert;
    }
-@@ -759,7 +752,7 @@
+@@ -759,7 +751,7 @@
        has not been added to root. There are certain scenarios when that attribute is temporarily
        removed from root such as when toggling the sidebar to expand with the toolbar button. */
      #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
@@ -102,7 +97,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
        &:is([soundplaying], [muted], [activemedia-blocked]) {
          display: flex;
        }
-@@ -1446,7 +1439,7 @@ tab-group {
+@@ -1446,7 +1438,7 @@ tab-group {
  }
  
  #tabbrowser-tabs[orient="vertical"][expanded] {
@@ -111,7 +106,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
    &[movingtab][movingtab-addToGroup]:not([movingtab-group], [movingtab-ungroup]) .tabbrowser-tab:is(:active, [multiselected]) {
      margin-inline-start: var(--space-medium);
    }
-@@ -1893,7 +1886,7 @@ tab-group {
+@@ -1893,7 +1885,7 @@ tab-group {
    }
  }
  
@@ -120,7 +115,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
  #vertical-tabs-newtab-button {
    appearance: none;
    min-height: var(--tab-min-height);
-@@ -1904,7 +1897,7 @@ tab-group {
+@@ -1904,7 +1896,7 @@ tab-group {
    margin-inline: var(--tab-inner-inline-margin);
  
    #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text {
@@ -129,7 +124,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
    }
  
    &:hover {
-@@ -1928,7 +1921,7 @@ tab-group {
+@@ -1928,7 +1920,7 @@ tab-group {
   * flex container. #tabs-newtab-button is a child of the arrowscrollbox where
   * we don't want a gap (between tabs), so we have to add some margin.
   */
@@ -138,7 +133,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
    margin-block: var(--tab-block-margin);
  }
  
-@@ -2116,7 +2109,6 @@ tab-group {
+@@ -2116,7 +2108,6 @@ tab-group {
  
    &:not([expanded]) {
      .tabbrowser-tab[pinned] {
@@ -146,7 +141,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
      }
  
      .tab-background {
-@@ -2156,8 +2148,8 @@ tab-group {
+@@ -2156,8 +2147,8 @@ tab-group {
        display: block;
        position: absolute;
        inset: auto;
@@ -157,7 +152,7 @@ index 8a4d3860b344e2dc2128cfc2b1673de582e19c7c..f8e108d2c1c71070375fdae12df43231
  
        &:-moz-window-inactive {
          background-image:
-@@ -2276,7 +2268,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
+@@ -2276,7 +2267,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
    list-style-image: url(chrome://global/skin/icons/plus.svg);
  }