From 628e41890fe7f8a3493cb81d632293c8de4ac880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Sun, 10 Dec 2023 23:21:38 +0100
Subject: [PATCH] extensions-app: Use details popover

Showing all the extension info and possible actions in every
row is fairly noisy, and doesn't match the usual list patterns.

Streamline the UI by moving the actions and most of the info into
a details popover, so the rows themselves get closer to the
standard pattern.

Closes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7119

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3051>
---
 subprojects/extensions-app/data/css/style.css |  22 +-
 .../scalable/actions/remove-symbolic.svg      |  10 +
 .../scalable/actions/settings-symbolic.svg    |   2 +
 .../scalable/actions/website-symbolic.svg     |   2 +
 ...org.gnome.Extensions.data.gresource.xml.in |   3 +
 .../extensions-app/data/ui/extension-row.ui   | 318 ++++++++++--------
 subprojects/extensions-app/js/main.js         |  23 +-
 7 files changed, 226 insertions(+), 154 deletions(-)
 create mode 100644 subprojects/extensions-app/data/icons/scalable/actions/remove-symbolic.svg
 create mode 100644 subprojects/extensions-app/data/icons/scalable/actions/settings-symbolic.svg
 create mode 100644 subprojects/extensions-app/data/icons/scalable/actions/website-symbolic.svg

diff --git a/subprojects/extensions-app/data/css/style.css b/subprojects/extensions-app/data/css/style.css
index f9fafa717..8564ba501 100644
--- a/subprojects/extensions-app/data/css/style.css
+++ b/subprojects/extensions-app/data/css/style.css
@@ -1,18 +1,16 @@
-row.extension>box {
- margin: 12px;
+.details-popover contents {
+  padding: 12px;
 }
 
-row.extension>box,
-row.extension box.header {
-  border-spacing: 12px;
-}
-
-row.extension box.actions,
-row.extension box.actions>box {
+.details-popover .information {
   border-spacing: 6px;
 }
 
-row.extension box.information,
-row.extension box.status {
-  border-spacing: 3px;
+.details-popover .actions {
+  margin-top: 6px;
+  border-spacing: 12px;
+}
+
+.details-popover .actions button {
+  padding: 12px;
 }
diff --git a/subprojects/extensions-app/data/icons/scalable/actions/remove-symbolic.svg b/subprojects/extensions-app/data/icons/scalable/actions/remove-symbolic.svg
new file mode 100644
index 000000000..b6f8bd1db
--- /dev/null
+++ b/subprojects/extensions-app/data/icons/scalable/actions/remove-symbolic.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#2e3436">
+        <path d="m 1 3 h 14 c 0.550781 0 1 0.449219 1 1 s -0.449219 1 -1 1 h -14 c -0.550781 0 -1 -0.449219 -1 -1 s 0.449219 -1 1 -1 z m 0 0"/>
+        <path d="m 4 4 v -1.5 c 0 -1.386719 1.113281 -2.5 2.5 -2.5 h 2.980469 c 1.382812 0 2.5 1.113281 2.5 2.5 v 1.5 h -2 v -1.5 c 0 -0.269531 -0.230469 -0.5 -0.5 -0.5 h -2.980469 c -0.269531 0 -0.5 0.230469 -0.5 0.5 v 1.5 z m 0 0"/>
+        <path d="m 4 4 v 9 c 0 0.546875 0.453125 1 1 1 h 6 c 0.546875 0 1 -0.453125 1 -1 v -9 h 2 v 9 c 0 1.660156 -1.339844 3 -3 3 h -6 c -1.660156 0 -3 -1.339844 -3 -3 v -9 z m 0 0"/>
+        <path d="m 7 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
+        <path d="m 10 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
+    </g>
+</svg>
diff --git a/subprojects/extensions-app/data/icons/scalable/actions/settings-symbolic.svg b/subprojects/extensions-app/data/icons/scalable/actions/settings-symbolic.svg
new file mode 100644
index 000000000..4ac785e2e
--- /dev/null
+++ b/subprojects/extensions-app/data/icons/scalable/actions/settings-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 7.5 1.019531 c -0.550781 0 -0.996094 0.445313 -0.996094 0.996094 v 0.453125 c -0.472656 0.128906 -0.929687 0.320312 -1.355468 0.566406 l -0.324219 -0.324218 c -0.390625 -0.390626 -1.019531 -0.390626 -1.410157 0 l -0.703124 0.707031 c -0.390626 0.390625 -0.390626 1.019531 0 1.410156 l 0.320312 0.320313 c -0.246094 0.425781 -0.433594 0.882812 -0.5625 1.355468 h -0.453125 c -0.550781 0 -0.996094 0.445313 -0.996094 0.996094 v 1 c 0 0.550781 0.445313 0.996094 0.996094 0.996094 h 0.449219 c 0.132812 0.472656 0.320312 0.929687 0.566406 1.355468 l -0.320312 0.320313 c -0.390626 0.390625 -0.390626 1.019531 0 1.410156 l 0.703124 0.707031 c 0.390626 0.390626 1.019532 0.390626 1.410157 0 l 0.320312 -0.320312 c 0.429688 0.242188 0.882813 0.433594 1.359375 0.558594 v 0.457031 c 0 0.550781 0.445313 0.996094 0.996094 0.996094 h 0.996094 c 0.554687 0 1 -0.445313 1 -0.996094 v -0.453125 c 0.472656 -0.128906 0.929687 -0.320312 1.355468 -0.566406 l 0.320313 0.324218 c 0.390625 0.390626 1.019531 0.390626 1.410156 0 l 0.707031 -0.707031 c 0.390626 -0.390625 0.390626 -1.019531 0 -1.410156 l -0.320312 -0.320313 c 0.242188 -0.425781 0.433594 -0.882812 0.558594 -1.355468 h 0.453125 c 0.554687 0 1 -0.445313 1 -0.996094 v -1 c 0 -0.550781 -0.445313 -0.996094 -1 -0.996094 h -0.449219 c -0.128906 -0.472656 -0.320312 -0.929687 -0.566406 -1.355468 l 0.324218 -0.320313 c 0.390626 -0.390625 0.390626 -1.019531 0 -1.410156 l -0.707031 -0.707031 c -0.390625 -0.390626 -1.019531 -0.390626 -1.410156 0 l -0.320313 0.320312 c -0.425781 -0.242188 -0.882812 -0.429688 -1.355468 -0.558594 v -0.457031 c 0 -0.550781 -0.445313 -0.996094 -1 -0.996094 z m 0.515625 3.976563 c 1.660156 0 3 1.34375 3 3 s -1.339844 3 -3 3 c -1.65625 0 -3 -1.34375 -3 -3 s 1.34375 -3 3 -3 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -540 -282)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -540 -282)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -540 -282)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>
diff --git a/subprojects/extensions-app/data/icons/scalable/actions/website-symbolic.svg b/subprojects/extensions-app/data/icons/scalable/actions/website-symbolic.svg
new file mode 100644
index 000000000..1a5b3c9e7
--- /dev/null
+++ b/subprojects/extensions-app/data/icons/scalable/actions/website-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 7.5 0 c -4.128906 0 -7.5 3.371094 -7.5 7.5 s 3.371094 7.5 7.5 7.5 s 7.5 -3.371094 7.5 -7.5 s -3.371094 -7.5 -7.5 -7.5 z m 1.84375 2.3125 c 0.953125 0.335938 1.78125 0.925781 2.40625 1.6875 h -1.226562 c -0.304688 -0.609375 -0.699219 -1.179688 -1.179688 -1.6875 z m -3.71875 0.011719 c -0.472656 0.507812 -0.867188 1.070312 -1.171875 1.675781 h -1.203125 c 0.617188 -0.753906 1.4375 -1.335938 2.375 -1.675781 z m 1.375 0.097656 v 1.578125 h -1.398438 c 0.363282 -0.59375 0.828126 -1.128906 1.398438 -1.578125 z m 1 0.015625 c 0.558594 0.445312 1.019531 0.976562 1.378906 1.5625 h -1.378906 z m -5.402344 2.5625 h 1.441406 c -0.214843 0.644531 -0.347656 1.320312 -0.390624 2 h -1.625 c 0.0625 -0.714844 0.265624 -1.390625 0.574218 -2 z m 2.507813 0 h 1.894531 v 2 h -2.34375 c 0.046875 -0.683594 0.195312 -1.359375 0.449219 -2 z m 2.894531 0 h 1.875 c 0.253906 0.640625 0.402344 1.316406 0.449219 2 h -2.324219 z m 2.941406 0 h 1.460938 c 0.308594 0.609375 0.511718 1.285156 0.574218 2 h -1.644531 c -0.042969 -0.679688 -0.175781 -1.355469 -0.390625 -2 z m -8.917968 3 h 1.625 c 0.046874 0.679688 0.175781 1.355469 0.394531 2 h -1.445313 c -0.308594 -0.609375 -0.511718 -1.285156 -0.574218 -2 z m 2.632812 0 h 2.34375 v 2 h -1.890625 c -0.253906 -0.636719 -0.402344 -1.316406 -0.453125 -2 z m 3.34375 0 h 2.324219 c -0.050781 0.683594 -0.199219 1.363281 -0.453125 2 h -1.871094 z m 3.332031 0 h 1.644531 c -0.0625 0.714844 -0.265624 1.390625 -0.574218 2 h -1.464844 c 0.21875 -0.644531 0.347656 -1.320312 0.394531 -2 z m -8.082031 3 h 1.210938 c 0.3125 0.609375 0.710937 1.179688 1.195312 1.6875 c -0.953125 -0.335938 -1.78125 -0.925781 -2.40625 -1.6875 z m 2.363281 0 h 1.386719 v 1.550781 c -0.5625 -0.441406 -1.027344 -0.96875 -1.386719 -1.550781 z m 2.386719 0 h 1.367188 c -0.355469 0.578125 -0.8125 1.097656 -1.367188 1.535156 z m 2.519531 0 h 1.230469 c -0.632812 0.769531 -1.472656 1.363281 -2.4375 1.695312 c 0.492188 -0.507812 0.894531 -1.082031 1.207031 -1.695312 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -720 -100)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -720 -100)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -720 -100)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>
diff --git a/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in b/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in
index 47aaf8cd8..fe9cbad08 100644
--- a/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in
+++ b/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in
@@ -4,6 +4,9 @@
     <file alias="style.css">css/style.css</file>
 
     <file preprocess="xml-stripblanks">icons/scalable/actions/info-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/actions/remove-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/actions/settings-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/actions/website-symbolic.svg</file>
 
     <file alias="gtk/help-overlay.ui">ui/help-overlay.ui</file>
   </gresource>
diff --git a/subprojects/extensions-app/data/ui/extension-row.ui b/subprojects/extensions-app/data/ui/extension-row.ui
index 38c374ab1..5208a9aa6 100644
--- a/subprojects/extensions-app/data/ui/extension-row.ui
+++ b/subprojects/extensions-app/data/ui/extension-row.ui
@@ -1,173 +1,227 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="ExtensionRow" parent="GtkListBoxRow">
-    <style>
-      <class name="extension"/>
-    </style>
-    <child>
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
-        <child>
-          <object class="GtkBox">
-            <child>
-              <object class="GtkBox">
-                <property name="orientation">vertical</property>
-                <property name="hexpand">true</property>
-                <style>
-                  <class name="information"/>
-                </style>
-                <child>
+  <template class="ExtensionRow" parent="AdwActionRow">
+    <property name="activatable-widget">switch</property>
+    <child type="suffix">
+      <object class="GtkMenuButton" id="errorButton">
+        <property name="visible">false</property>
+        <property name="valign">center</property>
+        <property name="has-frame">false</property>
+        <property name="icon-name">dialog-error-symbolic</property>
+        <accessibility>
+          <property name="label" translatable="yes">Error Details</property>
+        </accessibility>
+        <property name="popover">
+          <object class="GtkPopover" id="errorPopover">
+            <property name="child">
+              <object class="AdwClamp">
+                <property name="maximum-size">300</property>
+                <property name="tightening-threshold">300</property>
+                <property name="child">
+                  <object class="GtkLabel" id="errorLabel">
+                    <!-- Hack to make the screen reader read the label -->
+                    <property name="selectable"
+                              bind-source="errorPopover"
+                              bind-property="visible"
+                              bind-flags="invert-boolean|sync-create"/>
+                    <property name="wrap">true</property>
+                  </object>
+                </property>
+              </object>
+            </property>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child type="suffix">
+      <object class="GtkMenuButton" id="updatesButton">
+        <property name="visible">false</property>
+        <property name="valign">center</property>
+        <property name="has-frame">false</property>
+        <property name="icon-name">software-update-available-symbolic</property>
+        <accessibility>
+          <property name="label" translatable="yes">Updates Details</property>
+        </accessibility>
+        <property name="popover">
+          <object class="GtkPopover" id="updatesPopover">
+            <property name="child">
+              <object class="AdwClamp">
+                <property name="maximum-size">200</property>
+                <property name="tightening-threshold">200</property>
+                <property name="child">
+                  <object class="GtkLabel">
+                    <property name="label" translatable="yes">A new version of this extension is ready and will be loaded on next login.</property>
+                    <property name="wrap">true</property>
+                    <!-- Hack to make the screen reader read the label -->
+                    <property name="selectable"
+                              bind-source="updatesPopover"
+                              bind-property="visible"
+                              bind-flags="invert-boolean|sync-create"/>
+                  </object>
+                </property>
+              </object>
+            </property>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child type="suffix">
+      <object class="GtkSwitch" id="switch">
+        <property name="valign">center</property>
+        <property name="action-name">row.enabled</property>
+      </object>
+    </child>
+    <child type="suffix">
+      <object class="GtkMenuButton">
+        <property name="icon-name">view-more-symbolic</property>
+        <property name="has-frame">false</property>
+        <property name="valign">center</property>
+        <accessibility>
+          <property name="label" translatable="yes">Extension Details</property>
+        </accessibility>
+        <property name="popover">
+          <object class="GtkPopover" id="detailsPopover">
+            <style>
+              <class name="details-popover"/>
+            </style>
+            <property name="child">
+              <object class="AdwClamp">
+                <property name="maximum-size">300</property>
+                <property name="tightening-threshold">300</property>
+                <property name="child">
                   <object class="GtkBox">
+                    <property name="orientation">vertical</property>
                     <style>
-                      <class name="header"/>
+                      <class name="information"/>
                     </style>
                     <child>
-                      <object class="GtkLabel" id="nameLabel">
+                      <object class="GtkLabel">
+                        <property name="label"
+                                  bind-source="ExtensionRow"
+                                  bind-property="title"
+                                  bind-flags="sync-create"/>
                         <property name="xalign">0</property>
+                    <!-- Hack to make the screen reader read the label -->
+                        <property name="selectable"
+                                  bind-source="detailsPopover"
+                                  bind-property="visible"
+                                  bind-flags="invert-boolean|sync-create"/>
                         <style>
-                          <class name="title"/>
+                          <class name="title-4"/>
                         </style>
                       </object>
                     </child>
+                    <child>
+                      <object class="GtkLabel" id="descriptionLabel">
+                        <property name="xalign">0</property>
+                        <property name="wrap">True</property>
+                        <property name="selectable">true</property>
+                      </object>
+                    </child>
                     <child>
                       <object class="GtkLabel" id="versionLabel">
                         <property name="visible">false</property>
                         <property name="xalign">0</property>
-                        <property name="yalign">1</property>
+                        <property name="selectable">true</property>
                         <style>
-                          <class name="caption"/>
                           <class name="dim-label"/>
                         </style>
                       </object>
                     </child>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkBox" id="actionsBox">
                         <style>
-                          <class name="status"/>
+                          <class name="actions"/>
                         </style>
                         <child>
-                          <object class="GtkMenuButton" id="errorButton">
-                            <property name="visible">false</property>
-                            <property name="valign">center</property>
-                            <property name="has-frame">false</property>
-                            <property name="icon-name">dialog-error-symbolic</property>
-                            <accessibility>
-                              <property name="label" translatable="yes">Error Details</property>
-                            </accessibility>
-                            <property name="popover">
-                              <object class="GtkPopover" id="errorPopover">
-                                <property name="child">
-                                  <object class="AdwClamp">
-                                    <property name="maximum-size">300</property>
-                                    <property name="tightening-threshold">300</property>
-                                    <property name="child">
-                                      <object class="GtkLabel" id="errorLabel">
-                                        <!-- Hack to make the screen reader read the label -->
-                                        <property name="selectable"
-                                                  bind-source="errorPopover"
-                                                  bind-property="visible"
-                                                  bind-flags="invert-boolean|sync-create"/>
-                                        <property name="wrap">true</property>
-                                      </object>
-                                    </property>
+                          <object class="GtkButton" id="websiteButton">
+                            <property name="visible"
+                                      bind-source="websiteButton"
+                                      bind-property="sensitive"
+                                      bind-flags="sync-create"/>
+                            <property name="hexpand">true</property>
+                            <property name="action-name">row.show-url</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">website-symbolic</property>
+                                    <property name="accessible-role">presentation</property>
                                   </object>
-                                </property>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="use-underline">true</property>
+                                    <property name="label" translatable="yes">_Website</property>
+                                  </object>
+                                </child>
                               </object>
-                            </property>
+                            </child>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkMenuButton" id="updatesButton">
-                            <property name="visible">false</property>
-                            <property name="valign">center</property>
-                            <property name="has-frame">false</property>
-                            <property name="icon-name">software-update-available-symbolic</property>
-                            <accessibility>
-                              <property name="label" translatable="yes">Updates Details</property>
-                            </accessibility>
-                            <property name="popover">
-                              <object class="GtkPopover" id="updatesPopover">
-                                <property name="child">
-                                  <object class="AdwClamp">
-                                    <property name="maximum-size">200</property>
-                                    <property name="tightening-threshold">200</property>
-                                    <property name="child">
-                                      <object class="GtkLabel">
-                                        <property name="label" translatable="yes">A new version of this extension is ready and will be loaded on next login.</property>
-                                        <!-- Hack to make the screen reader read the label -->
-                                        <property name="selectable"
-                                                  bind-source="updatesPopover"
-                                                  bind-property="visible"
-                                                  bind-flags="invert-boolean|sync-create"/>
-                                        <property name="wrap">true</property>
-                                      </object>
-                                    </property>
+                          <object class="GtkButton" id="prefsButton">
+                            <property name="visible"
+                                      bind-source="prefsButton"
+                                      bind-property="sensitive"
+                                      bind-flags="sync-create"/>
+                            <property name="hexpand">true</property>
+                            <property name="action-name">row.show-prefs</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">settings-symbolic</property>
+                                    <property name="accessible-role">presentation</property>
                                   </object>
-                                </property>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="use-underline">true</property>
+                                    <property name="label" translatable="yes">_Settings</property>
+                                  </object>
+                                </child>
                               </object>
-                            </property>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="removeButton">
+                            <property name="visible"
+                                      bind-source="removeButton"
+                                      bind-property="sensitive"
+                                      bind-flags="sync-create"/>
+                            <property name="hexpand">true</property>
+                            <property name="action-name">row.uninstall</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">remove-symbolic</property>
+                                    <property name="accessible-role">presentation</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="use-underline">true</property>
+                                    <property name="label" translatable="yes">_Remove…</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
                     </child>
                   </object>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="descriptionLabel">
-                    <property name="xalign">0</property>
-                    <property name="ellipsize">end</property>
-                    <style>
-                      <class name="subtitle"/>
-                    </style>
-                  </object>
-                </child>
+                </property>
               </object>
-            </child>
-            <child>
-              <object class="GtkSwitch" id="switch">
-                <property name="valign">center</property>
-                <property name="action-name">row.enabled</property>
-              </object>
-            </child>
+            </property>
           </object>
-        </child>
-        <child>
-          <object class="GtkCenterBox" id="actionsBox">
-            <style>
-              <class name="actions"/>
-            </style>
-            <child type="start">
-              <object class="GtkBox">
-                <child>
-                  <object class="GtkButton" id="websiteButton">
-                    <property name="label" translatable="yes">Website</property>
-                    <property name="action-name">row.show-url</property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkButton" id="prefsButton">
-                    <property name="visible"
-                              bind-source="prefsButton"
-                              bind-property="sensitive"
-                              bind-flags="sync-create"/>
-                    <property name="label" translatable="yes">Settings</property>
-                    <property name="action-name">row.show-prefs</property>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child type="end">
-              <object class="GtkButton" id="removeButton">
-                <property name="visible"
-                          bind-source="removeButton"
-                          bind-property="sensitive"
-                          bind-flags="sync-create"/>
-                <property name="label" translatable="yes">Remove…</property>
-                <property name="action-name">row.uninstall</property>
-              </object>
-            </child>
-          </object>
-        </child>
+        </property>
       </object>
     </child>
   </template>
diff --git a/subprojects/extensions-app/js/main.js b/subprojects/extensions-app/js/main.js
index 0388eb693..e9a3183d2 100644
--- a/subprojects/extensions-app/js/main.js
+++ b/subprojects/extensions-app/js/main.js
@@ -357,7 +357,7 @@ var ExtensionRow = GObject.registerClass({
     GTypeName: 'ExtensionRow',
     Template: 'resource:///org/gnome/Extensions/ui/extension-row.ui',
     InternalChildren: [
-        'nameLabel',
+        'detailsPopover',
         'descriptionLabel',
         'versionLabel',
         'errorLabel',
@@ -366,7 +366,7 @@ var ExtensionRow = GObject.registerClass({
         'switch',
         'actionsBox',
     ],
-}, class ExtensionRow extends Gtk.ListBoxRow {
+}, class ExtensionRow extends Adw.ActionRow {
     _init(extension) {
         super._init();
 
@@ -384,7 +384,10 @@ var ExtensionRow = GObject.registerClass({
             name: 'show-prefs',
             enabled: this.hasPrefs,
         });
-        action.connect('activate', () => this.get_root().openPrefs(this.uuid));
+        action.connect('activate', () => {
+            this._detailsPopover.popdown();
+            this.get_root().openPrefs(this.uuid);
+        });
         this._actionGroup.add_action(action);
 
         action = new Gio.SimpleAction({
@@ -392,6 +395,7 @@ var ExtensionRow = GObject.registerClass({
             enabled: this.url !== '',
         });
         action.connect('activate', () => {
+            this._detailsPopover.popdown();
             Gio.AppInfo.launch_default_for_uri(
                 this.url, this.get_display().get_app_launch_context());
         });
@@ -401,7 +405,10 @@ var ExtensionRow = GObject.registerClass({
             name: 'uninstall',
             enabled: this.type === ExtensionType.PER_USER,
         });
-        action.connect('activate', () => this.get_root().uninstall(this.uuid));
+        action.connect('activate', () => {
+            this._detailsPopover.popdown();
+            this.get_root().uninstall(this.uuid);
+        });
         this._actionGroup.add_action(action);
 
         action = new Gio.SimpleAction({
@@ -417,7 +424,7 @@ var ExtensionRow = GObject.registerClass({
         });
         this._actionGroup.add_action(action);
 
-        this._nameLabel.label = this.name;
+        this.title = this.name;
 
         const desc = this._extension.metadata.description.split('\n')[0];
         this._descriptionLabel.label = desc;
@@ -436,10 +443,6 @@ var ExtensionRow = GObject.registerClass({
         this._updateState();
     }
 
-    vfunc_activate() {
-        this._switch.mnemonic_activate(false);
-    }
-
     get uuid() {
         return this._extension.uuid;
     }
@@ -520,7 +523,7 @@ var ExtensionRow = GObject.registerClass({
         this._errorButton.visible = this.hasError;
         this._errorLabel.label = this.error;
 
-        this._versionLabel.label = this.version.toString();
+        this._versionLabel.label = _('Version %s').format(this.version.toString());
         this._versionLabel.visible = this.version !== '';
     }