Add support for collapsible-section summaries

chrome/content/zotero/elements/collapsibleSection.js

@@ -98,8 +98,16 @@
 			this.setAttribute('label', val);
 		}
 		
+		get summary() {
+			return this.getAttribute('summary');
+		}
+		
+		set summary(val) {
+			this.setAttribute('summary', val);
+		}
+		
 		static get observedAttributes() {
-			return ['open', 'empty', 'label', 'extra-buttons'];
+			return ['open', 'empty', 'label', 'summary', 'extra-buttons'];
 		}
 		
 		attributeChangedCallback(name) {
@@ -126,9 +134,18 @@
 			this._head.addEventListener('keydown', this._handleKeyDown);
 			this._head.addEventListener('contextmenu', this._handleContextMenu);
 
+			let titleBox = document.createElement('div');
+			titleBox.className = 'title-box';
+			
 			this._title = document.createElement('span');
 			this._title.className = 'title';
-			this._head.append(this._title);
+			titleBox.append(this._title);
+			
+			this._summary = document.createElement('span');
+			this._summary.className = 'summary';
+			titleBox.append(this._summary);
+
+			this._head.append(titleBox);
 
 			this._contextMenu = this._buildContextMenu();
 			if (this._contextMenu) {
@@ -403,6 +420,7 @@
 			
 			this._head.setAttribute('aria-expanded', this.open);
 			this._title.textContent = this.label;
+			this._summary.textContent = this.summary;
 			this._head.querySelector('.twisty').hidden = this._disableCollapsing;
 		}
 	}

scss/elements/_collapsibleSection.scss

@@ -20,14 +20,35 @@ collapsible-section {
 		display: flex;
 		align-items: center;
 		
-		.title {
+		.title-box {
 			flex: 1;
-			
 			display: flex;
 			align-items: center;
-			gap: 4px;
-			color: var(--fill-secondary);
-			font-weight: 600;
+			gap: 8px;
+			
+			.title {
+				flex: 0 0 auto;
+
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				color: var(--fill-secondary);
+				font-weight: 600;
+			}
+
+			.summary {
+				flex: 1;
+				
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+				overflow: hidden;
+				color: var(--fill-secondary);
+				text-overflow: ellipsis;
+				
+				opacity: 1;
+				transition: opacity 0.2s ease-in-out;
+			}
 		}
 		
 		toolbarbutton {
@@ -67,6 +88,10 @@ collapsible-section {
 		toolbarbutton.twisty .toolbarbutton-icon {
 			transform: rotate(-180deg);
 		}
+		
+		.title-box .summary {
+			opacity: 0;
+		}
 	}
 	
 	&[empty] > .head > toolbarbutton.twisty {
@@ -75,7 +100,7 @@ collapsible-section {
 
 	@each $pane, $color in $item-pane-sections {
 		&[data-pane="#{$pane}"] {
-			& > .head > .title::before {
+			& > .head .title::before {
 				content: '';
 				width: 16px;
 				height: 16px;