Bug 1941189 - Make vertical pinned tabs container adjustable r=desktop-theme-reviewers,tabbrowser-reviewers,sidebar-reviewers,jsudiaman,nsharpley,sfoster

Differential Revision: https://phabricator.services.mozilla.com/D246484

browser/components/sidebar/SidebarState.sys.mjs

@@ -32,11 +32,20 @@ XPCOMUtils.defineLazyPreferenceGetter(
  *   When sidebar.visibility pref value is "always-show", the toolbar button serves to toggle this property
  * @property {boolean} launcherDragActive
  *   Whether the launcher is currently being dragged.
+ * @property {boolean} pinnedTabsDragActive
+ *   Whether the pinned tabs container is currently being dragged.
  * @property {boolean} launcherHoverActive
  *   Whether the launcher is currently being hovered.
  * @property {number} launcherWidth
  *   Current width of the sidebar launcher.
  * @property {number} expandedLauncherWidth
+ *   Width of the expanded launcher
+ * @property {number} pinnedTabsHeight
+ *   Current height of the pinned tabs container
+ * @property {number} expandedPinnedTabsHeight
+ *   Height of the pinned tabs container when the sidebar is expanded
+ * @property {number} collapsedPinnedTabsHeight
+ *   Height of the pinned tabs container when the sidebar is collapsed
  */
 
 const LAUNCHER_MINIMUM_WIDTH = 100;
@@ -66,6 +75,7 @@ export class SidebarState {
     launcherHoverActive: false,
     launcherVisible: false,
     panelOpen: false,
+    pinnedTabsDragActive: false,
   });
 
   /**
@@ -122,6 +132,26 @@ export class SidebarState {
     return this.#controller._box;
   }
 
+  /**
+   * Get the pinned tabs container element.
+   *
+   * @returns {XULElement}
+   */
+  get #pinnedTabsContainerEl() {
+    return this.#controller._pinnedTabsContainer;
+  }
+
+  /**
+   * Get the items-wrapper part of the pinned tabs container element.
+   *
+   * @returns {XULElement}
+   */
+  get #pinnedTabsItemsWrapper() {
+    return this.#pinnedTabsContainerEl.shadowRoot.querySelector(
+      "[part=items-wrapper]"
+    );
+  }
+
   /**
    * Get window object from the controller.
    */
@@ -193,6 +223,10 @@ export class SidebarState {
         case "panelOpen":
           // we need to know if we have a command value before finalizing panelOpen
           break;
+        case "expandedPinnedTabsHeight":
+        case "collapsedPinnedTabsHeight":
+          this.#updatePinnedTabsHeight();
+          break;
         default:
           this[key] = value;
       }
@@ -240,6 +274,9 @@ export class SidebarState {
       expandedLauncherWidth: convertToInt(this.expandedLauncherWidth),
       launcherExpanded: this.launcherExpanded,
       launcherVisible: this.launcherVisible,
+      pinnedTabsHeight: this.pinnedTabsHeight,
+      expandedPinnedTabsHeight: this.expandedPinnedTabsHeight,
+      collapsedPinnedTabsHeight: this.collapsedPinnedTabsHeight,
     };
     // omit any properties with undefined values'
     for (let [key, value] of Object.entries(props)) {
@@ -290,6 +327,24 @@ export class SidebarState {
     this.#launcherContainerEl.style.maxWidth = `calc(${SIDEBAR_MAXIMUM_WIDTH} - ${width}px)`;
   }
 
+  get expandedPinnedTabsHeight() {
+    return this.#props.expandedPinnedTabsHeight;
+  }
+
+  set expandedPinnedTabsHeight(height) {
+    this.#props.expandedPinnedTabsHeight = height;
+    this.#updatePinnedTabsHeight();
+  }
+
+  get collapsedPinnedTabsHeight() {
+    return this.#props.collapsedPinnedTabsHeight;
+  }
+
+  set collapsedPinnedTabsHeight(height) {
+    this.#props.collapsedPinnedTabsHeight = height;
+    this.#updatePinnedTabsHeight();
+  }
+
   get defaultLauncherVisible() {
     if (!this.revampEnabled) {
       return false;
@@ -390,6 +445,12 @@ export class SidebarState {
     if (!this.launcherDragActive) {
       this.#updateLauncherWidth();
     }
+    if (
+      !this.pinnedTabsDragActive &&
+      this.#controller.sidebarRevampVisibility !== "expand-on-hover"
+    ) {
+      this.#updatePinnedTabsHeight();
+    }
   }
 
   get launcherDragActive() {
@@ -429,6 +490,34 @@ export class SidebarState {
     rootEl.toggleAttribute("sidebar-launcher-drag-active", active);
   }
 
+  get pinnedTabsDragActive() {
+    return this.#props.pinnedTabsDragActive;
+  }
+
+  set pinnedTabsDragActive(active) {
+    this.#props.pinnedDragActive = active;
+
+    let itemsWrapperHeight =
+      this.#controllerGlobal.windowUtils.getBoundsWithoutFlushing(
+        this.#pinnedTabsItemsWrapper
+      ).height;
+    if (this.pinnedTabsHeight > itemsWrapperHeight) {
+      this.pinnedTabsHeight = itemsWrapperHeight;
+      if (this.#props.launcherExpanded) {
+        this.expandedPinnedTabsHeight = this.pinnedTabsHeight;
+      } else {
+        this.collapsedPinnedTabsHeight = this.pinnedTabsHeight;
+      }
+    } else if (!active) {
+      // Store the user-preferred pinned tabs height.
+      if (this.#props.launcherExpanded) {
+        this.expandedPinnedTabsHeight = this.pinnedTabsHeight;
+      } else {
+        this.collapsedPinnedTabsHeight = this.pinnedTabsHeight;
+      }
+    }
+  }
+
   get launcherHoverActive() {
     return this.#props.launcherHoverActive;
   }
@@ -478,6 +567,31 @@ export class SidebarState {
     );
   }
 
+  get pinnedTabsHeight() {
+    return this.#props.pinnedTabsHeight;
+  }
+
+  set pinnedTabsHeight(height) {
+    this.#props.pinnedTabsHeight = height;
+    if (this.launcherExpanded) {
+      this.expandedPinnedTabsHeight = height;
+    } else {
+      this.collapsedPinnedTabsHeight = height;
+    }
+  }
+
+  /**
+   * When the sidebar is expanded/collapsed, resize the pinned tabs container to the user-preferred
+   * height (if available).
+   */
+  #updatePinnedTabsHeight() {
+    if (this.launcherExpanded && this.expandedPinnedTabsHeight) {
+      this.#pinnedTabsContainerEl.style.height = `${this.expandedPinnedTabsHeight}px`;
+    } else if (!this.launcherExpanded && this.collapsedPinnedTabsHeight) {
+      this.#pinnedTabsContainerEl.style.height = `${this.collapsedPinnedTabsHeight}px`;
+    }
+  }
+
   #updateTabbrowser(isSidebarShown) {
     this.#controllerGlobal.document
       .getElementById("tabbrowser-tabbox")