chore: Update sidebar close-on-blur preference handling

src/browser/app/profile/zen-browser.js

@@ -77,7 +77,7 @@ pref('zen.view.sidebar-expanded.max-width', 400);
 // Zen Sidebar
 pref('zen.sidebar.data', "{\"data\":\n {\"p1\":{\n   \"url\":\"https://www.wikipedia.org/\"\n  },\n\"p2\":{\n   \"url\":\"https://m.twitter.com/\",\n\"ua\": true\n  },\n\"p3\": {\n   \"url\": \"https://www.youtube.com/\",\n\"ua\": true\n},\n\"p4\": {\n   \"url\": \"https://translate.google.com/\",\n\"ua\": true\n},\n\"p5\": {\n   \"url\": \"https://todoist.com/\",\n\"ua\": true\n}},\n\"index\":[\"p1\",\"p2\",\"p3\",\"p4\",\"p5\"]}");
 pref('zen.sidebar.enabled', true);
-pref('zen.sidebar.floating', true);
+pref('zen.sidebar.close-on-blur', true);
 
 // Zen Split View
 pref('zen.splitView.working', false);

src/browser/base/content/ZenSidebarManager.mjs

@@ -31,10 +31,13 @@ var gZenBrowserManagerSidebar = {
     return JSON.parse(services);
   },
 
+  get shouldCloseOnBlur() {
+    return Services.prefs.getBoolPref("zen.sidebar.close-on-blur");
+  },
+
   listenForPrefChanges() {
     Services.prefs.addObserver("zen.sidebar.data", this.handleEvent.bind(this));
     Services.prefs.addObserver("zen.sidebar.enabled", this.handleEvent.bind(this));
-    Services.prefs.addObserver("zen.sidebar.floating", this.handleEvent.bind(this));
 
     let sidebar = document.getElementById("zen-sidebar-web-panel");
     this.splitterElement.addEventListener("mousedown", (function(event) {
@@ -102,6 +105,10 @@ var gZenBrowserManagerSidebar = {
     this.handleEvent();
   },
 
+  get isFloating() {
+    return document.getElementById("zen-sidebar-web-panel").hasAttribute("pinned");
+  },
+
   handleEvent() {
     this._hasChangedConfig = true;
     this.update();
@@ -109,10 +116,11 @@ var gZenBrowserManagerSidebar = {
 
     // https://stackoverflow.com/questions/11565471/removing-event-listener-which-was-added-with-bind
     var clickOutsideHandler = this._handleClickOutside.bind(this);
-    if (Services.prefs.getBoolPref("zen.sidebar.floating") && !this._hasRegisteredPinnedClickOutside) {
+    let isFloating = this.isFloating;
+    if (isFloating && !this._hasRegisteredPinnedClickOutside) {
       document.addEventListener("mouseup", clickOutsideHandler);
       this._hasRegisteredPinnedClickOutside = true;
-    } else if (!Services.prefs.getBoolPref("zen.sidebar.floating") && this._hasRegisteredPinnedClickOutside) {
+    } else if (!isFloating && this._hasRegisteredPinnedClickOutside) {
       document.removeEventListener("mouseup", clickOutsideHandler);
       this._hasRegisteredPinnedClickOutside = false;
     }
@@ -129,7 +137,7 @@ var gZenBrowserManagerSidebar = {
 
   _handleClickOutside(event) {
     let sidebar = document.getElementById("zen-sidebar-web-panel");
-    if (!sidebar.hasAttribute("pinned") || !this._currentPanel || this._isDragging) {
+    if (!sidebar.hasAttribute("pinned") || this._isDragging || !this.shouldCloseOnBlur) {
       return;
     }
     let target = event.target;
@@ -420,7 +428,6 @@ var gZenBrowserManagerSidebar = {
     } else {
       this._setPinnedToElements();
     }
-    Services.prefs.setBoolPref("zen.sidebar.floating", sidebar.hasAttribute("pinned"));
     this.update();
   },
 

src/browser/base/content/zen-sidebar-panel.inc.xhtml

@@ -1,5 +1,5 @@
 <box id="zen-sidebar-web-panel-wrapper">
-  <box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true">
+  <box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true" persist="pinned style hidden">
     <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
       <hbox>
         <toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.back();"/>

src/browser/components/preferences/zen-settings.js

@@ -64,6 +64,11 @@ Preferences.addAll([
     type: "bool",
     default: true,
   },
+  {
+    id: "zen.sidebar.close-on-blur",
+    type: "bool",
+    default: true,
+  },
   {
     id: "zen.view.compact",
     type: "bool",

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -45,6 +45,11 @@
       <checkbox id="zenLooksAndFeelUseThemedToolbar"
             data-l10n-id="zen-side-panels-enabled"
             preference="zen.sidebar.enabled"/>
+      <hbox class="indent">
+            <checkbox id="zenLooksAndFeelSidebarCloseOnBlur"
+                  data-l10n-id="zen-side-panels-close-on-blur"
+                  preference="zen.sidebar.close-on-blur"/>
+      </hbox>
 </groupbox>
 
 <hbox id="zenVerticalTabsCategory"

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -15,6 +15,8 @@ zen-side-panels-description = Increase productivity by having multiple views at
 zen-side-panels-enabled = 
     .label = Enable Web Side Panels
 
+zen-side-panels-close-on-blur = 
+    .label = Close the panel when it loses focus if it's not pinned
 
 zen-look-and-feel-compact-view-header = Show in compact view
 zen-look-and-feel-compact-view-description = Only show the toolbars you use!