Enhance animations and sidebar panel styles for improved UI transitions

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

@@ -1,8 +1,8 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338e14216df 100644
+index fec3dc8129a4d235fdd05e0390145a02064ebaa5..636b56754f48c1ec931152cf34bab8414a75cebc 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -462,11 +462,26 @@
+@@ -402,11 +402,26 @@
        return count;
      },
  
@@ -31,7 +31,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        }
        return i;
      },
-@@ -860,7 +875,7 @@
+@@ -800,7 +815,7 @@
        if (this.tabContainer.verticalMode) {
          let wasFocused = document.activeElement == this.selectedTab;
          let oldPosition = aTab._tPos;
@@ -40,7 +40,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
        } else {
          this.moveTabTo(aTab, this.pinnedTabCount);
-@@ -1107,6 +1122,7 @@
+@@ -1047,6 +1062,7 @@
  
        let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
  
@@ -48,7 +48,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        if (
          aIconURL &&
          !aLoadingPrincipal &&
-@@ -1117,6 +1133,9 @@
+@@ -1057,6 +1073,9 @@
          );
          return;
        }
@@ -58,7 +58,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
  
        let browser = this.getBrowserForTab(aTab);
        browser.mIconURL = aIconURL;
-@@ -1346,6 +1365,7 @@
+@@ -1286,6 +1305,7 @@
        if (!this._previewMode) {
          newTab.recordTimeFromUnloadToReload();
          newTab.updateLastAccessed();
@@ -66,7 +66,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -2431,7 +2451,7 @@
+@@ -2371,7 +2391,7 @@
  
        let panel = this.getPanel(browser);
        let uniqueId = this._generateUniquePanelID();
@@ -75,7 +75,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        aTab.linkedPanel = uniqueId;
  
        // Inject the <browser> into the DOM if necessary.
-@@ -2491,7 +2511,7 @@
+@@ -2431,7 +2451,7 @@
        // hasSiblings=false on both the existing browser and the new browser.
        if (this.tabs.length == 2) {
          this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@@ -84,7 +84,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        } else {
          aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
        }
-@@ -2711,6 +2731,11 @@
+@@ -2651,6 +2671,11 @@
          );
        }
  
@@ -96,7 +96,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2780,6 +2805,9 @@
+@@ -2720,6 +2745,9 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -106,7 +106,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3291,6 +3319,23 @@
+@@ -3342,6 +3370,23 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -130,7 +130,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3304,6 +3349,9 @@
+@@ -3355,6 +3400,9 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -140,7 +140,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3340,6 +3388,21 @@
+@@ -3391,6 +3439,21 @@
              preferredRemoteType,
            });
  
@@ -162,7 +162,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
            if (select) {
              tabToSelect = tab;
            }
-@@ -3374,7 +3437,6 @@
+@@ -3444,7 +3507,6 @@
              this.tabContainer._invalidateCachedTabs();
            }
          }
@@ -170,7 +170,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          tab.initialize();
        }
  
-@@ -3831,6 +3893,10 @@
+@@ -3992,6 +4054,10 @@
          return;
        }
  
@@ -181,7 +181,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        this.removeTabs(selectedTabs);
      },
  
-@@ -4148,6 +4214,13 @@
+@@ -4309,6 +4375,13 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -195,7 +195,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4163,6 +4236,10 @@
+@@ -4324,6 +4397,10 @@
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
  
@@ -206,7 +206,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4311,7 +4388,7 @@
+@@ -4472,7 +4549,7 @@
  
        var closeWindow = false;
        var newTab = false;
@@ -215,7 +215,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          closeWindow =
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
-@@ -5123,10 +5200,10 @@
+@@ -5265,10 +5342,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  
@@ -228,7 +228,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7042,6 +7119,7 @@
+@@ -7181,6 +7258,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -236,7 +236,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
              gBrowser.syncThrobberAnimations(this.mTab);
-@@ -7874,7 +7952,7 @@ var TabContextMenu = {
+@@ -8114,7 +8192,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;
@@ -245,7 +245,16 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -8136,6 +8214,7 @@ var TabContextMenu = {
+@@ -8148,7 +8226,7 @@ var TabContextMenu = {
+     let contextMoveTabToStart = document.getElementById("context_moveToStart");
+     let isFirstTab =
+       tabsToMove[0] == visibleTabs[0] ||
+-      tabsToMove[0] == visibleTabs[gBrowser.pinnedTabCount];
++      tabsToMove[0] == visibleTabs[gBrowser._numVisiblePinTabs];
+     contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
+ 
+     document.getElementById("context_openTabInWindow").disabled =
+@@ -8376,6 +8454,7 @@ var TabContextMenu = {
      if (this.contextTab.multiselected) {
        gBrowser.removeMultiSelectedTabs();
      } else {