diff --git a/chrome/content/zotero/elements/zoteroSearch.js b/chrome/content/zotero/elements/zoteroSearch.js index 426b9f3ec0..20cc94e7c3 100644 --- a/chrome/content/zotero/elements/zoteroSearch.js +++ b/chrome/content/zotero/elements/zoteroSearch.js @@ -1164,18 +1164,11 @@ let cols = Zotero.Collections.getByLibrary(libraryID, true); for (let col of cols) { - // Indent subcollections - var indent = ''; - if (col.level) { - for (let j = 1; j < col.level; j++) { - indent += ' '; - } - indent += '- '; - } rows.push({ - name: indent + Zotero.Utilities.trimInternal(col.name), + name: Zotero.Utilities.trimInternal(col.name), value: 'C' + col.key, - image: Zotero.Collection.prototype.treeViewImage + image: Zotero.Collection.prototype.treeViewImage, + level: col.level }); } @@ -1361,6 +1354,11 @@ menuitem.className = 'menuitem-iconic'; menuitem.setAttribute('image', row.image); } + // Indent nested rows (subcollections) via CSS rather than by prefixing + // the label, which would break find-as-you-type in the menu + if (row.level) { + menuitem.style.setProperty('--nesting-level', row.level); + } } valueMenu.selectedIndex = 0; diff --git a/scss/elements/_zoteroSearch.scss b/scss/elements/_zoteroSearch.scss index e1aa0a48ae..9995a73f38 100644 --- a/scss/elements/_zoteroSearch.scss +++ b/scss/elements/_zoteroSearch.scss @@ -320,8 +320,9 @@ zoterosearch { max-height: 16px; } - #valuemenu::part(label), #valuemenu menuitem > .menu-iconic-text { - white-space: pre; + // Indent subcollections below their parents, icon included + #valuemenu menuitem > .menu-icon { + margin-inline-start: calc(var(--nesting-level, 0) * 16px); } #condition-tooltips hbox > label diff --git a/test/tests/advancedSearchTest.js b/test/tests/advancedSearchTest.js index b289f33b1d..9a93c79a23 100644 --- a/test/tests/advancedSearchTest.js +++ b/test/tests/advancedSearchTest.js @@ -1075,12 +1075,20 @@ describe("Advanced Search", function () { assert.isFalse(valueMenu.hidden); // Only the collections, with the saved searches no longer mixed in assert.equal(valueMenu.itemCount, 4); + // Subcollections are indented via their icons rather than in the label, + // which would break find-as-you-type in the menu + function getIndent(menuitem) { + return win.getComputedStyle(menuitem.querySelector('.menu-icon')) + .marginInlineStart; + } var valueMenuItem = valueMenu.getItemAtIndex(1); - assert.equal(valueMenuItem.getAttribute('label'), "- " + col2.name); + assert.equal(valueMenuItem.getAttribute('label'), col2.name); assert.equal(valueMenuItem.getAttribute('value'), "C" + col2.key); + assert.equal(getIndent(valueMenuItem), '16px'); valueMenuItem = valueMenu.getItemAtIndex(2); - assert.equal(valueMenuItem.getAttribute('label'), " - " + col3.name); + assert.equal(valueMenuItem.getAttribute('label'), col3.name); assert.equal(valueMenuItem.getAttribute('value'), "C" + col3.key); + assert.equal(getIndent(valueMenuItem), '32px'); var values = []; for (let i = 0; i < valueMenu.itemCount; i++) { values.push(valueMenu.getItemAtIndex(i).getAttribute('value'));