From 5f37ae4ab15fd90a9760862f6e7854d330f2d59a Mon Sep 17 00:00:00 2001 From: Bogdan Abaev Date: Thu, 25 Jan 2024 13:43:10 -0500 Subject: [PATCH] fx115: fix tabs menu Fixed visuals and working drag-drop again. Fx115 made previously used toolbarbuttons act very strange wih drag-drop: instead of dragging the actual button, the #text node would receive dragstart event and a single letter would end up being dragged. During troubleshooting, elements created via document.createXULElement had this issues while being dragged (or acted oddly in other ways, e.g. refusing to be dragged at all). This includes a minor rewrite to use div-s instead of XUL components. --- chrome/content/zotero/tabs.js | 40 ++++++++++++++------------ chrome/content/zotero/zoteroPane.xhtml | 2 +- scss/components/_tabsMenu.scss | 25 ++++++++++++++-- 3 files changed, 46 insertions(+), 21 deletions(-) diff --git a/chrome/content/zotero/tabs.js b/chrome/content/zotero/tabs.js index 668b621312..617b188cca 100644 --- a/chrome/content/zotero/tabs.js +++ b/chrome/content/zotero/tabs.js @@ -790,9 +790,7 @@ var Zotero_Tabs = new function () { * @returns with bold substrings of title matching this._tabsMenuFilter */ let createTabsMenuLabel = (title) => { - let xhtmlNS = "http://www.w3.org/1999/xhtml"; - let desc = document.createXULElement('description'); - + let desc = document.createElement('label'); let regex = new RegExp(`(${Zotero.Utilities.quotemeta(this._tabsMenuFilter)})`, 'gi'); let matches = title.matchAll(regex); @@ -804,9 +802,12 @@ var Zotero_Tabs = new function () { desc.appendChild(document.createTextNode(title.substring(lastIndex, match.index))); } // Add matched text wrapped in - let b = document.createElementNS(xhtmlNS, 'b'); - b.textContent = match[0]; - desc.appendChild(b); + + if (match[0]) { + let b = document.createElement('b'); + b.textContent = match[0]; + desc.appendChild(b); + } lastIndex = match.index + match[0].length; } @@ -839,12 +840,14 @@ var Zotero_Tabs = new function () { continue; } // Top-level entry of the opened tabs array - let row = document.createXULElement('toolbaritem'); + let row = document.createElement('div'); let rowIndex = this._tabs.findIndex(x => x.id === tab.id); + row.classList = "row"; row.setAttribute("index", rowIndex); - + row.setAttribute("draggable", true); + // Title of the tab - let tabName = document.createXULElement('toolbarbutton'); + let tabName = document.createElement('div'); tabName.setAttribute('flex', '1'); tabName.setAttribute('class', 'zotero-tabs-menu-entry title'); tabName.setAttribute('tabindex', `${index++}`); @@ -852,10 +855,13 @@ var Zotero_Tabs = new function () { tabName.setAttribute('tooltiptext', tab.title); // Cross button to close a tab - let closeButton = document.createXULElement('toolbarbutton'); - closeButton.setAttribute('class', 'zotero-tabs-menu-entry zotero-clicky-cross close'); + let closeButton = document.createElement('div'); + closeButton.className = "zotero-tabs-menu-entry close"; + let closeIcon = document.createElement('span'); + closeIcon.setAttribute('class', 'icon icon-css icon-x-8 icon-16'); closeButton.setAttribute('data-l10n-id', 'zotero-tabs-menu-close-button'); - closeButton.addEventListener("command", () => { + closeButton.appendChild(closeIcon); + closeButton.addEventListener("click", () => { // Keep the focus on the cross at the same spot if (this._tabsMenuFocusedIndex == this.tabsMenuList.childElementCount * 2) { this._tabsMenuFocusedIndex = Math.max(this._tabsMenuFocusedIndex - 2, 0); @@ -866,7 +872,6 @@ var Zotero_Tabs = new function () { // Library tab has no close button if (tab.id == "zotero-pane") { closeButton.hidden = true; - closeButton.disabled = true; } closeButton.setAttribute('tabindex', `${index++}`); @@ -892,7 +897,6 @@ var Zotero_Tabs = new function () { tabName.appendChild(span); // Actual label with bolded substrings matching the filter let tabLabel = createTabsMenuLabel(tab.title, this._tabsMenuFilter); - tabLabel.setAttribute('flex', 1); tabName.appendChild(tabLabel); // Selected tab is bold @@ -900,7 +904,7 @@ var Zotero_Tabs = new function () { tabName.classList.add('selected'); } // Onclick, go to selected tab + close popup - tabName.addEventListener("command", () => { + tabName.addEventListener("click", () => { this.tabsMenuPanel.hidePopup(); this.select(tab.id); }); @@ -1068,8 +1072,8 @@ var Zotero_Tabs = new function () { } moveTabIndex(); let candidate = this.tabsMenuList.parentElement.querySelector(`[tabindex="${tabindex}"]`); - // If the candidate is disabled (e.g. close button of library tab), skip it - if (candidate && candidate.disabled) { + // If the candidate is hidden (e.g. close button of library tab), skip it + if (candidate && candidate.hidden) { moveTabIndex(); } focusTabsMenuEntry(tabindex); @@ -1116,7 +1120,7 @@ var Zotero_Tabs = new function () { } focusTabsMenuEntry(tabindex); } - else if (event.key == "Enter") { + else if (["Enter", " "].includes(event.key)) { event.preventDefault(); if (event.target.id == "zotero-tabs-menu-filter") { focusTabsMenuEntry(1); diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml index 22f47568a1..e4ecffaf35 100644 --- a/chrome/content/zotero/zoteroPane.xhtml +++ b/chrome/content/zotero/zoteroPane.xhtml @@ -837,7 +837,7 @@ onkeydown="Zotero_Tabs.handleTabsMenuKeyPress(event)" tabindex="-1" > - +