Bug 1921536 - Make the SidebarState the source of truth for the current sidebar command/panel and re-open previous panel when toggling the sidebar open. r=sidebar-reviewers,jsudiaman

* We retain the behavior from legacy sidebar which re-opens the previously open sidebar panel when the sidebar is toggled open
* Rename SidebarState's '#previousLauncherVisible' to '#previousLauncherExpanded' as it actually tracks expandedness
* Don't persist the panel/command id when the panel isn't open
* Ensure all the sidebar tests reset the sidebar state when they are done

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

browser/components/sidebar/SidebarState.sys.mjs

@@ -55,8 +55,9 @@ export class SidebarState {
     launcherDragActive: false,
     launcherHoverActive: false,
     collapsedLauncherWidth: undefined,
+    command: undefined,
   };
-  #previousLauncherVisible = undefined;
+  #previousLauncherExpanded = undefined;
 
   /**
    * Construct a new SidebarState.
@@ -150,7 +151,7 @@ export class SidebarState {
       }
       switch (key) {
         case "command":
-          this.#controller.showInitially(value);
+          this.command = value;
           break;
         case "panelWidth":
           this.#panelEl.style.width = `${value}px`;
@@ -164,10 +165,23 @@ export class SidebarState {
         case "hidden":
           this.launcherVisible = !value;
           break;
+        case "panelOpen":
+          // we need to know if we have a command value before finalizing panelOpen
+          break;
         default:
           this[key] = value;
       }
     }
+    if (props.hasOwnProperty("panelOpen")) {
+      // sanitize inputs: we don't want to show a open panel without the launcher when sidebar.revamp is true
+      if (this.revampEnabled && !props.launcherVisible) {
+        props.panelOpen = false;
+      }
+      this.panelOpen = this.command && props.panelOpen;
+    }
+    if (this.command && this.panelOpen) {
+      this.#controller.showInitially(this.command);
+    }
   }
 
   /**
@@ -189,7 +203,8 @@ export class SidebarState {
    */
   getProperties() {
     return {
-      command: this.#controller.currentID,
+      command: this.command,
+      panelOpen: this.panelOpen,
       panelWidth: this.panelWidth,
       launcherWidth: convertToInt(this.launcherWidth),
       expandedLauncherWidth: convertToInt(this.expandedLauncherWidth),
@@ -207,16 +222,19 @@ export class SidebarState {
   }
 
   set panelOpen(open) {
-    this.#props.panelOpen = open;
+    if (this.#props.panelOpen == open) {
+      return;
+    }
+    this.#props.panelOpen = !!open;
     if (open) {
       // Launcher must be visible to open a panel.
-      this.#previousLauncherVisible = this.launcherVisible;
       this.launcherVisible = true;
+      // We need to know how to revert the launcher when the panel closes
+      this.#previousLauncherExpanded = this.launcherExpanded;
     } else if (this.revampVisibility === "hide-sidebar") {
       this.launcherExpanded = lazy.verticalTabsEnabled
-        ? this.#previousLauncherVisible
+        ? this.#previousLauncherExpanded
         : false;
-      this.launcherVisible = this.#previousLauncherVisible;
     }
   }
 
@@ -258,7 +276,7 @@ export class SidebarState {
       case "hide-sidebar":
         if (onToolbarButtonRemoval) {
           // If we are hiding the sidebar because we removed the toolbar button, close everything
-          this.#previousLauncherVisible = false;
+          this.#previousLauncherExpanded = false;
           this.launcherVisible = false;
           this.launcherExpanded = false;
 
@@ -276,7 +294,7 @@ export class SidebarState {
           } else {
             // Hide the launcher when the pref is set to hide-sidebar
             this.launcherVisible = false;
-            this.#previousLauncherVisible = false;
+            this.#previousLauncherExpanded = false;
             return;
           }
         }
@@ -413,6 +431,24 @@ export class SidebarState {
       .getElementById("tabbrowser-tabbox")
       .toggleAttribute("sidebar-shown", isSidebarShown);
   }
+
+  get command() {
+    return this.#props.command || "";
+  }
+
+  set command(id) {
+    if (id && !this.#controller.sidebars.has(id)) {
+      throw new Error("Setting command to an invalid value");
+    }
+    if (id && id !== this.#props.command) {
+      this.#props.command = id;
+      // We need the attribute to mirror the command property as its used as a CSS hook
+      this.#controller._box.setAttribute("sidebarcommand", id);
+    } else if (!id) {
+      delete this.#props.command;
+      this.#controller._box.setAttribute("sidebarcommand", "");
+    }
+  }
 }
 
 /**