From ed3394a95390e7791586c00b3b39c6f4ac2d3d9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Sun, 10 Dec 2023 23:59:04 +0100
Subject: [PATCH] extensions-app: Make error/update icon interactive

Both icons are not immediately obvious, and the context provided
by the tooltip can be hard to discover.

Address this by making the icons interactive, and provide further
information in a popover.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3051>
---
 subprojects/extensions-app/data/css/style.css |  3 -
 .../extensions-app/data/ui/extension-row.ui   | 73 ++++++++++++++-----
 subprojects/extensions-app/js/main.js         | 12 +--
 3 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/subprojects/extensions-app/data/css/style.css b/subprojects/extensions-app/data/css/style.css
index dac76335b..f9fafa717 100644
--- a/subprojects/extensions-app/data/css/style.css
+++ b/subprojects/extensions-app/data/css/style.css
@@ -16,6 +16,3 @@ row.extension box.information,
 row.extension box.status {
   border-spacing: 3px;
 }
-
-image.error { color: @error_color; }
-image.warning { color: @warning_color; }
diff --git a/subprojects/extensions-app/data/ui/extension-row.ui b/subprojects/extensions-app/data/ui/extension-row.ui
index 37acb68d3..efcb852a3 100644
--- a/subprojects/extensions-app/data/ui/extension-row.ui
+++ b/subprojects/extensions-app/data/ui/extension-row.ui
@@ -46,23 +46,68 @@
                           <class name="status"/>
                         </style>
                         <child>
-                          <object class="GtkImage" id="errorIcon">
+                          <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>
                             <property name="tooltip-text" translatable="yes">The extension had an error</property>
-                            <style>
-                              <class name="error"/>
-                            </style>
+                            <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>
-                          <object class="GtkImage" id="updatesIcon">
+                          <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>
                             <property name="tooltip-text" translatable="yes">The extension can be updated</property>
-                            <style>
-                              <class name="warning"/>
-                            </style>
+                            <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>
+                                </property>
+                              </object>
+                            </property>
                           </object>
                         </child>
                       </object>
@@ -78,18 +123,6 @@
                     </style>
                   </object>
                 </child>
-                <child>
-                  <object class="GtkLabel" id="errorLabel">
-                    <property name="visible">false</property>
-                    <property name="selectable">true</property>
-                    <property name="wrap">True</property>
-                    <property name="xalign">0</property>
-                    <style>
-                      <class name="caption"/>
-                      <class name="error"/>
-                    </style>
-                  </object>
-                </child>
               </object>
             </child>
             <child>
diff --git a/subprojects/extensions-app/js/main.js b/subprojects/extensions-app/js/main.js
index 77cac9122..d656e201a 100644
--- a/subprojects/extensions-app/js/main.js
+++ b/subprojects/extensions-app/js/main.js
@@ -361,8 +361,8 @@ var ExtensionRow = GObject.registerClass({
         'descriptionLabel',
         'versionLabel',
         'errorLabel',
-        'errorIcon',
-        'updatesIcon',
+        'errorButton',
+        'updatesButton',
         'switch',
         'actionsBox',
     ],
@@ -503,13 +503,9 @@ var ExtensionRow = GObject.registerClass({
         if (!action.enabled)
             this._switch.active = state;
 
-        this._updatesIcon.visible = this.hasUpdate;
-        this._errorIcon.visible = this.hasError;
-
-        this._descriptionLabel.visible = !this.hasError;
-
+        this._updatesButton.visible = this.hasUpdate;
+        this._errorButton.visible = this.hasError;
         this._errorLabel.label = this.error;
-        this._errorLabel.visible = this.error !== '';
 
         this._versionLabel.label = this.version.toString();
         this._versionLabel.visible = this.version !== '';