Citation dialog: add a dropmarker to bubbles (#5130)

- add dropmarker to bubbles after the text to indicate
that bubbles are clickable
- remove X remove button that was there before
- no more mask over the bubble on hover, since dropmarker
is just always visible
- 4px distance between the dropmarker and bubble text

Fixes: #2712

chrome/content/zotero/elements/bubbleInput.js

@@ -74,8 +74,8 @@
 					allBubbles = this.getAllBubbles();
 				}
 				// Update bubble string
-				if (bubbleNode.textContent !== bubbleString) {
-					bubbleNode.textContent = bubbleString;
+				if (bubbleNode.querySelector(".text").textContent !== bubbleString) {
+					bubbleNode.querySelector(".text").textContent = bubbleString;
 				}
 				// Move bubble if it's index does not correspond to the position of the item
 				let expectedIndex = allBubbles.indexOf(bubbleNode);
@@ -233,16 +233,10 @@
 			text.className = "text";
 			bubble.append(text);
 			
-			let deleteBtn = document.createElement("div");
-			deleteBtn.className = "delete-btn";
-			let cross = document.createElement("span");
-			cross.className = "icon icon-css icon-x-8 icon-16";
-			deleteBtn.addEventListener("click", (event) => {
-				this._deleteBubble(bubble);
-				event.stopPropagation();
-			});
-			deleteBtn.appendChild(cross);
-			bubble.append(deleteBtn);
+			// Add a dropmarker to indicate that the bubble is clickable
+			let dropmarker = document.createElement("span");
+			dropmarker.className = "icon icon-css icon-chevron-6 icon-8 dropmarker";
+			bubble.append(dropmarker);
 			
 			return bubble;
 		}
@@ -397,11 +391,6 @@
 		},
 
 		handleDragStart(event) {
-			// No drag on X button
-			if (event.target.closest(".delete-btn")) {
-				event.preventDefault();
-				return;
-			}
 			this.dragBubble = event.target;
 			event.dataTransfer.setData("text/plain", '<span id="zotero-drag"/>');
 			event.stopPropagation();

scss/elements/_bubbleInput.scss

@@ -77,16 +77,6 @@ bubble-input {
 		
 		&:hover:not(.showingDetails) {
 			background-color: var(--fill-quarternary);
-			
-			.delete-btn {
-				display: flex;
-			}
-			
-			.text {
-				mask-image: linear-gradient(to left, transparent 14px, var(--fill-primary) 24px);
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
 		}
 		&.showingDetails {
 			background-color: var(--fill-quarternary) !important;
@@ -111,22 +101,8 @@ bubble-input {
 			background-color: var(--accent-blue10);
 		}
 
-		.delete-btn {
-			display: none;
-			width: 20px;
-			height: 20px;
-			align-items: center;
-			justify-content: center;
-			border-radius: 5px;
-			position: absolute;
-			right: 4px;
-			color: var(--fill-secondary);
-			&:hover {
-				background-color: var(--fill-quarternary);
-			}
-			&:active {
-				background-color: var(--fill-tertiary);
-			}
+		.dropmarker {
+			margin-inline-start: 4px;
 		}
 	}
 }