extensions-app: Indicate extension errors

Currently there is no indication that an extension had an error except
for the sensitivity of the switch (which may have a different cause).

This is useful information to users, so add a small error indicator
alongside the updates icon and show the actual error in the details.

https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2337

subprojects/extensions-app/data/css/application.css

@@ -8,4 +8,5 @@
   -gtk-icon-transform: rotate(-0.25turn);
 }
 
+image.error { color: @error_color; }
 image.warning { color: @warning_color; }

subprojects/extensions-app/data/ui/extension-row.ui

@@ -15,6 +15,15 @@
             <property name="visible">True</property>
           </object>
         </child>
+        <child>
+          <object class="GtkImage" id="errorIcon">
+            <property name="no_show_all">True</property>
+            <property name="icon_name">dialog-error-symbolic</property>
+            <style>
+              <class name="error"/>>
+            </style>
+          </object>
+        </child>
         <child>
           <object class="GtkImage" id="updatesIcon">
             <property name="no_show_all">True</property>
@@ -169,6 +178,38 @@
                     <property name="top_attach">2</property>
                   </packing>
                 </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible"
+                              bind-source="errorLabel"
+                              bind-property="visible"
+                              bind-flags="sync-create"/>
+                    <property name="no_show_all">True</property>
+                    <property name="label" translatable="yes">Error</property>
+                    <property name="xalign">0</property>
+                    <property name="yalign">0</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">3</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="errorLabel">
+                    <property name="no_show_all">True</property>
+                    <property name="selectable">True</property>
+                    <property name="wrap">True</property>
+                    <property name="max_width_chars">60</property>
+                    <property name="xalign">0</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">1</property>
+                    <property name="top_attach">3</property>
+                  </packing>
+                </child>
                 <child>
                   <object class="GtkButton">
                     <property name="visible">True</property>
@@ -179,7 +220,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">3</property>
+                    <property name="top_attach">4</property>
                   </packing>
                 </child>
                 <child>
@@ -200,7 +241,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">1</property>
-                    <property name="top_attach">3</property>
+                    <property name="top_attach">4</property>
                   </packing>
                 </child>
               </object>
@@ -209,7 +250,7 @@
           <packing>
             <property name="left_attach">0</property>
             <property name="top_attach">1</property>
-            <property name="width">7</property>
+            <property name="width">8</property>
           </packing>
         </child>
       </object>

subprojects/extensions-app/js/main.js

@@ -331,6 +331,8 @@ var ExtensionRow = GObject.registerClass({
         'descriptionLabel',
         'versionLabel',
         'authorLabel',
+        'errorLabel',
+        'errorIcon',
         'updatesIcon',
         'switch',
         'revealButton',
@@ -429,6 +431,12 @@ var ExtensionRow = GObject.registerClass({
         return this._extension.hasUpdate || false;
     }
 
+    get hasError() {
+        const { state } = this._extension;
+        return state === ExtensionState.OUT_OF_DATE ||
+               state === ExtensionState.ERROR;
+    }
+
     get type() {
         return this._extension.type;
     }
@@ -445,6 +453,17 @@ var ExtensionRow = GObject.registerClass({
         return this._extension.metadata.version || '';
     }
 
+    get error() {
+        if (!this.hasError)
+            return '';
+
+        if (this._extension.state === ExtensionState.OUT_OF_DATE)
+            return _('The extension is incompatible with the current GNOME version');
+
+        return this._extension.error
+            ? this._extension.error : _('The extension had an error');
+    }
+
     _updateState() {
         let state = this._extension.state === ExtensionState.ENABLED;
 
@@ -456,6 +475,10 @@ var ExtensionRow = GObject.registerClass({
             this._switch.active = state;
 
         this._updatesIcon.visible = this.hasUpdate;
+        this._errorIcon.visible = this.hasError;
+
+        this._errorLabel.label = this.error;
+        this._errorLabel.visible = this.error !== '';
 
         this._versionLabel.label = this.version.toString();
         this._versionLabel.visible = this.version !== '';