Added preference to disable tab renaming, refactored inline styles to css files, changed listener to blur, refactored code

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

@@ -80,6 +80,7 @@ pref('zen.welcome-screen.seen', false);
 
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
+pref('zen.tabs.rename-tabs', true);
 pref('zen.theme.accent-color', "#ffb787");
 pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.pill-button', false);

src/browser/base/content/ZenUIManager.mjs

@@ -186,7 +186,6 @@ var gZenUIManager = {
 };
 
 var gZenVerticalTabsManager = {
-  _tabEdited: null,
   init() {
     this._multiWindowFeature = new ZenMultiWindowFeature();
     this._initWaitPromise();
@@ -224,7 +223,8 @@ var gZenVerticalTabsManager = {
       document.documentElement.setAttribute('zen-window-buttons-reversed', true);
     }
 
-    //this._insertDoubleClickListenerPinnedTabs();
+    this._tabEdited = null;
+    this._renameTabHalt = this.renameTabHalt.bind(this);
     gBrowser.tabContainer.addEventListener('dblclick', this.renameTabStart.bind(this));
   },
 
@@ -586,13 +586,6 @@ var gZenVerticalTabsManager = {
     target.appendChild(child);
   },
 
-  //_insertDoubleClickListenerPinnedTabs() {
-  //  const tabs = gBrowser.tabs;
-  //  for (const tab of tabs) {
-  //    tab.addEventListener('dblclick', this.renameTabStart.bind(this));
-  //  }
-  //},
-
   renameTabKeydown(event) {
     if (event.key === 'Enter') {
       let label = this._tabEdited.querySelector('.tab-label-container-editing');
@@ -604,41 +597,37 @@ var gZenVerticalTabsManager = {
         this._tabEdited.label = newName;
         this._tabEdited.setAttribute('zen-has-static-label', 'true');
       } else {
-        // If the page is loaded, get the title of the page. Otherwise, keep name as is
+        this._tabEdited.removeAttribute('zen-has-static-label');
-        this._tabEdited.label = gBrowser.getBrowserForTab(this._tabEdited).contentTitle || this._tabEdited.label;
+        gBrowser.setTabTitle(this._tabEdited);
-        // If the page had a title, reset the zen-has-static-label attribute
-        if (gBrowser.getBrowserForTab(this._tabEdited).contentTitle) {
-          this._tabEdited.removeAttribute('zen-has-static-label');
-        }
       }
 
       this._tabEdited.querySelector('.tab-editor-container').remove();
-      label.style.display = '';
+      label.classList.remove('tab-label-container-editing');
-      label.className = label.className.replace(' tab-label-container-editing', '');
-      document.removeEventListener('click', this.renameTabHalt.bind(this));
 
       this._tabEdited = null;
     } else if (event.key === 'Escape') {
       let label = this._tabEdited.querySelector('.tab-label-container-editing');
       this._tabEdited.querySelector('.tab-editor-container').remove();
 
-      label.style.display = '';
+      label.classList.remove('tab-label-container-editing');
-      label.className = label.className.replace(' tab-label-container-editing', '');
-      document.removeEventListener('click', this.renameTabHalt.bind(this));
       this._tabEdited = null;
     }
   },
 
   renameTabStart(event) {
-    if (this._tabEdited) return;
+    if (
+      this._tabEdited ||
+      !Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
+      Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick')
+    )
+      return;
     this._tabEdited = event.target.closest('.tabbrowser-tab');
-    if (!this._tabEdited || !this._tabEdited.pinned) {
+    if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) {
       this._tabEdited = null;
       return;
     }
     const label = this._tabEdited.querySelector('.tab-label-container');
-    label.style.display = 'none';
+    label.classList.add('tab-label-container-editing');
-    label.className += ' tab-label-container-editing';
 
     const container = window.MozXULElement.parseXULToFragment(`
       <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
@@ -649,31 +638,22 @@ var gZenVerticalTabsManager = {
     input.id = 'tab-label-input';
     input.value = this._tabEdited.label;
     input.addEventListener('keydown', this.renameTabKeydown.bind(this));
-    input.style['white-space'] = 'nowrap';
-    input.style['overflow-x'] = 'scroll';
-    input.style['margin'] = '0';
 
     containerHtml.appendChild(input);
     input.focus();
     input.select();
 
-    document.addEventListener('click', this.renameTabHalt.bind(this));
+    input.addEventListener('blur', this._renameTabHalt);
   },
 
   renameTabHalt(event) {
-    // Ignore click event if it's clicking the input
+    if (document.activeElement === event.target || !this._tabEdited) {
-    if (event.target.closest('#tab-label-input')) {
-      return;
-    }
-    if (!this._tabEdited) {
       return;
     }
     this._tabEdited.querySelector('.tab-editor-container').remove();
     const label = this._tabEdited.querySelector('.tab-label-container-editing');
-    label.style.display = '';
+    label.classList.remove('tab-label-container-editing');
-    label.className = label.className.replace(' tab-label-container-editing', '');
 
-    document.removeEventListener('click', this.renameTabHalt.bind(this));
     this._tabEdited = null;
   },
 };

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -1143,3 +1143,14 @@
 #zen-essentials-container .tabbrowser-tab.drag-over-after {
   box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
 }
+
+/* Renaming tab */
+.tab-label-container-editing {
+  display: none !important;
+}
+
+#tab-label-input {
+  white-space: nowrap;
+  overflow-x: scroll;
+  margin: 0;
+}

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..4faba37097f376b57c7376e320f46e9cd3aacffe 100644
+index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..c29a3620f85219074b2eeef8d75b4ca7232414e2 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -406,11 +406,39 @@
@@ -90,6 +90,15 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..4faba37097f376b57c7376e320f46e9c
          if (!keepFocusOnUrlBar) {
            // Clear focus so that _adjustFocusAfterTabSwitch can detect if
            // some element has been focused and respect that.
+@@ -1785,7 +1822,7 @@
+     }
+ 
+     _setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) {
+-      if (!aLabel || aLabel.includes("about:reader?")) {
++      if (!aLabel || aLabel.includes("about:reader?") || aTab.hasAttribute("zen-has-static-label")) {
+         return false;
+       }
+ 
 @@ -2387,7 +2424,7 @@
  
        let panel = this.getPanel(browser);