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

@@ -212,7 +212,6 @@ var gZenUIManager = {
 };
 
 var gZenVerticalTabsManager = {
-  _tabEdited: null,
   init() {
     this._multiWindowFeature = new ZenMultiWindowFeature();
     this._initWaitPromise();
@@ -250,11 +249,8 @@ var gZenVerticalTabsManager = {
       document.documentElement.setAttribute('zen-window-buttons-reversed', true);
     }
 
-    if (tabs) {
-      tabs.addEventListener('mouseup', this.openNewTabOnTabsMiddleClick.bind(this));
-    }
-
-    //this._insertDoubleClickListenerPinnedTabs();
+    this._tabEdited = null;
+    this._renameTabHalt = this.renameTabHalt.bind(this);
     gBrowser.tabContainer.addEventListener('dblclick', this.renameTabStart.bind(this));
   },
 
@@ -630,13 +626,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');
@@ -648,41 +637,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.label = gBrowser.getBrowserForTab(this._tabEdited).contentTitle || this._tabEdited.label;
-        // 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.removeAttribute('zen-has-static-label');
+        gBrowser.setTabTitle(this._tabEdited);
       }
 
       this._tabEdited.querySelector('.tab-editor-container').remove();
-      label.style.display = '';
-      label.className = label.className.replace(' tab-label-container-editing', '');
-      document.removeEventListener('click', this.renameTabHalt.bind(this));
+      label.classList.remove('tab-label-container-editing');
 
       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.className = label.className.replace(' tab-label-container-editing', '');
-      document.removeEventListener('click', this.renameTabHalt.bind(this));
+      label.classList.remove('tab-label-container-editing');
       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.className += ' tab-label-container-editing';
+    label.classList.add('tab-label-container-editing');
 
     const container = window.MozXULElement.parseXULToFragment(`
       <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
@@ -693,31 +678,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 (event.target.closest('#tab-label-input')) {
-      return;
-    }
-    if (!this._tabEdited) {
+    if (document.activeElement === event.target || !this._tabEdited) {
       return;
     }
     this._tabEdited.querySelector('.tab-editor-container').remove();
     const label = this._tabEdited.querySelector('.tab-label-container-editing');
-    label.style.display = '';
-    label.className = label.className.replace(' tab-label-container-editing', '');
+    label.classList.remove('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

@@ -1139,6 +1139,17 @@
   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;
+}
+
 /* Section: tab workspaces stylings */
 .zen-workspace-tabs-section {
   position: absolute;

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,52 @@
@@ -102,17 +102,17 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..4faba37097f376b57c7376e320f46e9c
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -1462,6 +1509,9 @@
-       }
- 
-       let activeEl = document.activeElement;
-+      if (gURLBar._zenHandleUrlbarClose) {
-+        gURLBar._zenHandleUrlbarClose(true);
-+      }
-       // If focus is on the old tab, move it to the new tab.
-       if (activeEl == oldTab) {
-         newTab.focus();
-@@ -1785,7 +1835,7 @@
+@@ -1477,6 +1511,9 @@
+           newBrowser &&
+           gURLBar.getBrowserState(newBrowser).urlbarFocused &&
+           gURLBar.focused;
++        if (gURLBar._zenHandleUrlbarClose) {
++          gURLBar._zenHandleUrlbarClose(true);
++        }
+         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 } = {}) {
@@ -121,7 +121,7 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..4faba37097f376b57c7376e320f46e9c
          return false;
        }
  
-@@ -2387,7 +2437,7 @@
+@@ -2387,7 +2424,7 @@
  
        let panel = this.getPanel(browser);
        let uniqueId = this._generateUniquePanelID();