From 3abf59cdb7f547c79ff5146182c66f475339557a Mon Sep 17 00:00:00 2001
From: Gijs Kruitbosch <gijskruitbosch@gmail.com>
Date: Mon, 8 Mar 2021 17:19:47 +0000
Subject: [PATCH] Bug 1696645 - fix height of buttons in container settings
 rows r=preferences-reviewers,desktop-theme-reviewers,ntim

Wrapping text can mean the container name takes up more vertical space.
The buttons should keep their ideal spacing instead of stretching vertically.

Differential Revision: https://phabricator.services.mozilla.com/D107486
---
 browser/components/preferences/containers.js     |  6 ++++--
 browser/themes/shared/preferences/containers.css | 11 +++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/browser/components/preferences/containers.js b/browser/components/preferences/containers.js
index fd9393ab9de6..4a0c1c4cd56b 100644
--- a/browser/components/preferences/containers.js
+++ b/browser/components/preferences/containers.js
@@ -53,11 +53,13 @@ let gContainersPane = {
       outer.appendChild(userContextIcon);
 
       let label = document.createXULElement("label");
+      label.className = "userContext-label-inprefs";
       label.setAttribute("flex", 1);
-      label.setAttribute("crop", "end");
-      label.textContent = ContextualIdentityService.getUserContextLabel(
+      let containerName = ContextualIdentityService.getUserContextLabel(
         container.userContextId
       );
+      label.textContent = containerName;
+      label.setAttribute("tooltiptext", containerName);
       outer.appendChild(label);
 
       let containerButtons = document.createXULElement("hbox");
diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css
index 578a27bf0203..1a63c60249fb 100644
--- a/browser/themes/shared/preferences/containers.css
+++ b/browser/themes/shared/preferences/containers.css
@@ -28,6 +28,17 @@
   border-block-end: 1px solid var(--in-content-box-border-color);
 }
 
+/* Crop the label at the end using CSS. This isn't using XUL crop
+ * and a value attribute because those labels cannot be highlighted
+ * by the prefs' find-in-page feature.
+ */
+.userContext-label-inprefs {
+  display: -moz-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 #containersView richlistitem:last-of-type {
   border-block-end: 0 none;
   margin-block-end: 8px;