Add tab icon change handling and enhance tab background styles

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b6878d4d394 100644
+index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54da793e76 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -409,11 +409,39 @@
@@ -53,15 +53,16 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
          );
        } else {
          this.moveTabTo(aTab, this.pinnedTabCount);
-@@ -1052,6 +1080,7 @@
+@@ -1052,6 +1080,8 @@
  
        let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
  
 +      try {
++      gZenPinnedTabManager.onTabIconChanged(aTab, aIconURL);
        if (
          aIconURL &&
          !aLoadingPrincipal &&
-@@ -1062,6 +1091,9 @@
+@@ -1062,6 +1092,9 @@
          );
          return;
        }
@@ -71,7 +72,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
  
        let browser = this.getBrowserForTab(aTab);
        browser.mIconURL = aIconURL;
-@@ -1291,6 +1323,7 @@
+@@ -1291,6 +1324,7 @@
        if (!this._previewMode) {
          newTab.recordTimeFromUnloadToReload();
          newTab.updateLastAccessed();
@@ -79,7 +80,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -2374,7 +2407,7 @@
+@@ -2374,7 +2408,7 @@
  
        let panel = this.getPanel(browser);
        let uniqueId = this._generateUniquePanelID();
@@ -88,7 +89,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
        aTab.linkedPanel = uniqueId;
  
        // Inject the <browser> into the DOM if necessary.
-@@ -2434,7 +2467,7 @@
+@@ -2434,7 +2468,7 @@
        // hasSiblings=false on both the existing browser and the new browser.
        if (this.tabs.length == 2) {
          this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@@ -97,7 +98,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
        } else {
          aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
        }
-@@ -2666,6 +2699,12 @@
+@@ -2666,6 +2700,12 @@
          );
        }
  
@@ -110,7 +111,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2735,6 +2774,12 @@
+@@ -2735,6 +2775,12 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -123,7 +124,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -2878,6 +2923,13 @@
+@@ -2878,6 +2924,13 @@
          }
        }
  
@@ -137,7 +138,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
        // Additionally send pinned tab events
        if (pinned) {
          this._notifyPinnedStatus(t);
-@@ -3389,6 +3441,23 @@
+@@ -3389,6 +3442,23 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -161,7 +162,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3402,6 +3471,9 @@
+@@ -3402,6 +3472,9 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -171,7 +172,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3438,6 +3510,21 @@
+@@ -3438,6 +3511,21 @@
              preferredRemoteType,
            });
  
@@ -193,7 +194,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
            if (select) {
              tabToSelect = tab;
            }
-@@ -3491,7 +3578,6 @@
+@@ -3491,7 +3579,6 @@
              this.tabContainer._invalidateCachedTabs();
            }
          }
@@ -201,7 +202,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
          tab.initialize();
        }
  
-@@ -4070,6 +4156,10 @@
+@@ -4070,6 +4157,10 @@
          return;
        }
  
@@ -212,7 +213,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
        this.removeTabs(selectedTabs);
      }
  
-@@ -4389,6 +4479,13 @@
+@@ -4389,6 +4480,13 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -226,7 +227,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4404,6 +4501,10 @@
+@@ -4404,6 +4502,10 @@
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
  
@@ -237,7 +238,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4556,14 +4657,14 @@
+@@ -4556,14 +4658,14 @@
          !!this.tabsInCollapsedTabGroups.length;
        if (
          aTab.visible &&
@@ -254,7 +255,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -5411,10 +5512,10 @@
+@@ -5411,10 +5513,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -267,7 +268,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7384,6 +7485,7 @@
+@@ -7384,6 +7486,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -275,7 +276,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
              gBrowser.syncThrobberAnimations(this.mTab);
-@@ -8344,7 +8446,7 @@ var TabContextMenu = {
+@@ -8344,7 +8447,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;
@@ -284,7 +285,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -8378,7 +8480,7 @@ var TabContextMenu = {
+@@ -8378,7 +8481,7 @@ var TabContextMenu = {
      let contextMoveTabToStart = document.getElementById("context_moveToStart");
      let isFirstTab =
        tabsToMove[0] == visibleTabs[0] ||
@@ -293,7 +294,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
      contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
  
      document.getElementById("context_openTabInWindow").disabled =
-@@ -8607,6 +8709,7 @@ var TabContextMenu = {
+@@ -8607,6 +8710,7 @@ var TabContextMenu = {
      if (this.contextTab.multiselected) {
        gBrowser.removeMultiSelectedTabs();
      } else {