2 files changed, 41 insertions, 6 deletions
diff --git a/browser/components/tabpreview/tab-preview-panel.mjs b/browser/components/tabpreview/tab-preview-panel.mjs
index 683b2c17ec..40874dbbf6 100644
--- a/browser/components/tabpreview/tab-preview-panel.mjs
+++ b/browser/components/tabpreview/tab-preview-panel.mjs
@@ -38,6 +38,12 @@ export default class TabPreviewPanel {
       "browser.tabs.cardPreview.showThumbnails",
       false
     );
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "_prefShowPidAndActiveness",
+      "browser.tabs.tooltipsShowPidAndActiveness",
+      false
+    );
     this._timer = null;
   }
 
@@ -132,6 +138,17 @@ export default class TabPreviewPanel {
       this._displayTitle;
     this._panel.querySelector(".tab-preview-uri").textContent =
       this._displayURI;
+
+    if (this._prefShowPidAndActiveness) {
+      this._panel.querySelector(".tab-preview-pid").textContent =
+        this._displayPids;
+      this._panel.querySelector(".tab-preview-activeness").textContent =
+        this._displayActiveness;
+    } else {
+      this._panel.querySelector(".tab-preview-pid").textContent = "";
+      this._panel.querySelector(".tab-preview-activeness").textContent = "";
+    }
+
     let thumbnailContainer = this._panel.querySelector(
       ".tab-preview-thumbnail-container"
     );
@@ -171,4 +188,18 @@ export default class TabPreviewPanel {
     }
     return this.getPrettyURI(this._tab.linkedBrowser.currentURI.spec);
   }
+
+  get _displayPids() {
+    const pids = this._win.gBrowser.getTabPids(this._tab);
+    if (!pids.length) {
+      return "";
+    }
+
+    let pidLabel = pids.length > 1 ? "pids" : "pid";
+    return `${pidLabel}: ${pids.join(", ")}`;
+  }
+
+  get _displayActiveness() {
+    return this._tab.linkedBrowser.docShellIsActive ? "[A]" : "";
+  }
 }
diff --git a/browser/components/tabpreview/tabpreview.css b/browser/components/tabpreview/tabpreview.css
index e978266e5d..ad84f685a0 100644
--- a/browser/components/tabpreview/tabpreview.css
+++ b/browser/components/tabpreview/tabpreview.css
@@ -1,12 +1,11 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
-* License, v. 2.0. If a copy of the MPL was not distributed with this
-* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #tab-preview-panel {
   --panel-width: 280px;
   --panel-padding: 0;
-  --panel-background: var(--tab-selected-bgcolor);
-  --panel-color: var(--tab-selected-textcolor);
+  pointer-events: none;
 }
 
 .tab-preview-text-container {
@@ -14,19 +13,24 @@
 }
 
 .tab-preview-title {
-  max-height: 3em;
   overflow: hidden;
+  -webkit-line-clamp: 2;
   font-weight: var(--font-weight-bold);
 }
 
 .tab-preview-uri {
   color: var(--text-color-deemphasized);
-  max-height: 1.5em;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.tab-preview-pid-activeness {
+  color: var(--text-color-deemphasized);
+  display: flex;
+  justify-content: space-between;
+}
+
 .tab-preview-thumbnail-container {
   border-top: 1px solid var(--panel-border-color);
   &:empty {