diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index cdb976ff1..e0d21b352 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/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); diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 3613dca34..de6c363ae 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -248,6 +248,9 @@ var gZenVerticalTabsManager = { if (!this.isWindowsStyledButtons) { document.documentElement.setAttribute('zen-window-buttons-reversed', true); } + + this._renameTabHalt = this.renameTabHalt.bind(this); + gBrowser.tabContainer.addEventListener('dblclick', this.renameTabStart.bind(this)); }, toggleExpand() { @@ -613,4 +616,72 @@ var gZenVerticalTabsManager = { } target.appendChild(child); }, + + renameTabKeydown(event) { + if (event.key === 'Enter') { + let label = this._tabEdited.querySelector('.tab-label-container-editing'); + let input = this._tabEdited.querySelector('#tab-label-input'); + let newName = input.value.trim(); + + // Check if name is blank, reset if so + if (newName) { + gBrowser._setTabLabel(this._tabEdited, newName); + this._tabEdited.setAttribute('zen-has-static-label', 'true'); + } else { + this._tabEdited.removeAttribute('zen-has-static-label'); + gBrowser.setTabTitle(this._tabEdited); + } + + this._tabEdited.querySelector('.tab-editor-container').remove(); + label.classList.remove('tab-label-container-editing'); + + this._tabEdited = null; + } else if (event.key === 'Escape') { + event.target.blur(); + } + }, + + renameTabStart(event) { + if ( + this._tabEdited || + !Services.prefs.getBoolPref('zen.tabs.rename-tabs') || + Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') || + !gZenVerticalTabsManager._prefsSidebarExpanded + ) + return; + this._tabEdited = event.target.closest('.tabbrowser-tab'); + if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) { + this._tabEdited = null; + return; + } + const label = this._tabEdited.querySelector('.tab-label-container'); + label.classList.add('tab-label-container-editing'); + + const container = window.MozXULElement.parseXULToFragment(` + + `); + label.after(container); + const containerHtml = this._tabEdited.querySelector('.tab-editor-container'); + const input = document.createElement('input'); + input.id = 'tab-label-input'; + input.value = this._tabEdited.label; + input.addEventListener('keydown', this.renameTabKeydown.bind(this)); + + containerHtml.appendChild(input); + input.focus(); + input.select(); + + input.addEventListener('blur', this._renameTabHalt); + }, + + renameTabHalt(event) { + 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.classList.remove('tab-label-container-editing'); + + this._tabEdited = null; + }, }; diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 7f0312f38..0ca35b4f0 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/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 tabs */ +.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; diff --git a/src/browser/components/sessionstore/TabState-sys-mjs.patch b/src/browser/components/sessionstore/TabState-sys-mjs.patch index a38f9b7c4..26972ac49 100644 --- a/src/browser/components/sessionstore/TabState-sys-mjs.patch +++ b/src/browser/components/sessionstore/TabState-sys-mjs.patch @@ -1,8 +1,8 @@ diff --git a/browser/components/sessionstore/TabState.sys.mjs b/browser/components/sessionstore/TabState.sys.mjs -index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..83bf443ca158c07e05075777da02b7f228d83dff 100644 +index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..dc0fdf17952df397a684f8a1da2f71739d007350 100644 --- a/browser/components/sessionstore/TabState.sys.mjs +++ b/browser/components/sessionstore/TabState.sys.mjs -@@ -84,6 +84,13 @@ class _TabState { +@@ -84,6 +84,14 @@ class _TabState { tabData.groupId = tab.group.id; } @@ -12,6 +12,7 @@ index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..83bf443ca158c07e05075777da02b7f2 + tabData.zenDefaultUserContextId = tab.getAttribute("zenDefaultUserContextId"); + tabData.zenPinnedEntry = tab.getAttribute("zen-pinned-entry"); + tabData.zenPinnedIcon = tab.getAttribute("zen-pinned-icon"); ++ tabData.zenHasStaticLabel = tab.getAttribute("zen-has-static-label"); + tabData.searchMode = tab.ownerGlobal.gURLBar.getSearchMode(browser, true);