Refactor ZenCompactMode to add event listeners and flashSidebar enhancements

src/ZenCompactMode.mjs

@@ -1,5 +1,6 @@
 var gZenCompactModeManager = {
   _flashSidebarTimeout: {},
+  _evenListeners: [],
 
   init() {
     Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
@@ -26,7 +27,12 @@ var gZenCompactModeManager = {
     return this._sidebar;
   },
 
+  addEventListener(callback) {
+    this._evenListeners.push(callback);
+  },
+
   _updateEvent() {
+    this._evenListeners.forEach((callback) => callback());
     Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
   },
 
@@ -63,7 +69,7 @@ var gZenCompactModeManager = {
     ];
   },
 
-  flashSidebar(element = null, duration = null, id = null) {
+  flashSidebar(element = null, duration = null, id = null, forFlash = true) {
     if (!element) {
       element = this.sidebar;
     }
@@ -74,18 +80,23 @@ var gZenCompactModeManager = {
       id = this.sidebar.id;
     }
     let tabPanels = document.getElementById('tabbrowser-tabpanels');
-    if (element.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
+    if (element.matches(':hover') || (forFlash && tabPanels.matches("[zen-split-view='true']"))) {
       return;
     }
     if (this._flashSidebarTimeout[id]) {
       clearTimeout(this._flashSidebarTimeout[id]);
-    } else {
+    } else if (forFlash) {
       window.requestAnimationFrame(() => element.setAttribute('flash-popup', ''));
+    } else {
+      window.requestAnimationFrame(() => element.setAttribute('zen-has-hover', 'true'));
     }
     this._flashSidebarTimeout[id] = setTimeout(() => {
       window.requestAnimationFrame(() => {
+        if (forFlash) {
           element.removeAttribute('flash-popup');
+        } else {
           element.removeAttribute('zen-has-hover');
+        }
         this._flashSidebarTimeout[id] = null;
       });
     }, duration);
@@ -95,12 +106,12 @@ var gZenCompactModeManager = {
     for (let i = 0; i < this.hoverableElements.length; i++) {
       this.hoverableElements[i].addEventListener('mouseenter', (event) => {
         let target = this.hoverableElements[i];
-        target.setAttribute('zen-has-hover', 'true', target.id);
+        target.setAttribute('zen-has-hover', 'true');
       });
 
       this.hoverableElements[i].addEventListener('mouseleave', (event) => {
         let target = this.hoverableElements[i];
-        this.flashSidebar(target, this.hideAfterHoverDuration, target.id);
+        this.flashSidebar(target, this.hideAfterHoverDuration, target.id, false);
       });
     }
   },

src/ZenSidebarManager.mjs

@@ -133,6 +133,7 @@ var gZenBrowserManagerSidebar = {
     }
 
     const button = document.getElementById('zen-sidepanel-button');
+    if (!button) return;
     if (Services.prefs.getBoolPref('zen.sidebar.enabled')) {
       button.removeAttribute('hidden');
     } else {
@@ -187,6 +188,7 @@ var gZenBrowserManagerSidebar = {
 
   _updateSidebarButton() {
     let button = document.getElementById('zen-sidepanel-button');
+    if (!button) return;
     if (!document.getElementById('zen-sidebar-web-panel').hasAttribute('hidden')) {
       button.setAttribute('open', 'true');
     } else {

src/ZenWorkspaces.mjs

@@ -515,6 +515,8 @@ var ZenWorkspaces = {
     icon?.removeAttribute('selected');
     await this.createAndSaveWorkspace(workspaceName, false, icon?.label);
     document.getElementById('PanelUI-zen-workspaces').hidePopup(true);
+    await this._updateWorkspacesButton();
+    await this._propagateWorkspaceData();
   },
 
   async saveWorkspaceFromEdit() {