appDisplay: Add carousel arrows to app grid

These only show during navigation (not DnD), along with the
previewed page.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>

data/gnome-shell-theme.gresource.xml

@@ -2,6 +2,8 @@
 <gresources>
   <gresource prefix="/org/gnome/shell/theme">
     <file>calendar-today.svg</file>
+    <file alias="icons/scalable/status/carousel-arrow-next-24-symbolic.svg">carousel-arrow-next-24-symbolic.svg</file>
+    <file alias="icons/scalable/status/carousel-arrow-back-24-symbolic.svg">carousel-arrow-back-24-symbolic.svg</file>
     <file>checkbox-focused.svg</file>
     <file>checkbox-off-focused.svg</file>
     <file>checkbox-off.svg</file>

data/theme/carousel-arrow-back-24-symbolic.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24.000001"
+   version="1.1"
+   id="svg19258">
+  <defs
+     id="defs19252" />
+  <metadata
+     id="metadata19255">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g834"
+     transform="rotate(-90,-246.75894,471.75774)"
+     style="fill:#241f31">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#241f31;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 213.0007,724.40348 -10.3711,7.3945 v 0 a 1.5,1.5 0 0 0 -0.6308,1.2187 v 1.5 h 1.5 a 1.5,1.5 0 0 0 0.8711,-0.2793 l 8.6289,-6.1523 8.6289,6.1523 a 1.5,1.5 0 0 0 0.8711,0.2793 h 1.5 v -1.5 a 1.5,1.5 0 0 0 -0.6309,-1.2187 v 0 z"
+       id="path832" />
+  </g>
+</svg>

data/theme/carousel-arrow-next-24-symbolic.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24.000001"
+   version="1.1"
+   id="svg19258">
+  <defs
+     id="defs19252" />
+  <metadata
+     id="metadata19255">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g872"
+     transform="matrix(0,-1,-1,0,742.51668,224.9988)"
+     style="fill:#241f31">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#241f31;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 213.0007,724.40348 -10.3711,7.3945 v 0 a 1.5,1.5 0 0 0 -0.6308,1.2187 v 1.5 h 1.5 a 1.5,1.5 0 0 0 0.8711,-0.2793 l 8.6289,-6.1523 8.6289,6.1523 a 1.5,1.5 0 0 0 0.8711,0.2793 h 1.5 v -1.5 a 1.5,1.5 0 0 0 -0.6309,-1.2187 v 0 z"
+       id="path870" />
+  </g>
+</svg>

data/theme/gnome-shell-sass/widgets/_app-grid.scss

@@ -156,3 +156,9 @@ $app_grid_fg_color: #fff;
     &:rtl { border-radius: 15px 0px 0px 15px; }
   }
 }
+
+.page-navigation-arrow {
+  margin: 6px;
+  width: 24px;
+  height: 24px;
+}

js/ui/appDisplay.js

@@ -211,6 +211,31 @@ var BaseAppView = GObject.registerClass({
             y_align: Clutter.ActorAlign.FILL,
         });
 
+        // Next/prev page arrows
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
+        this._nextPageArrow = new St.Icon({
+            style_class: 'page-navigation-arrow',
+            icon_name: rtl
+                ? 'carousel-arrow-back-24-symbolic'
+                : 'carousel-arrow-next-24-symbolic',
+            opacity: 0,
+            reactive: false,
+            visible: false,
+            x_expand: true,
+            x_align: Clutter.ActorAlign.END,
+        });
+        this._prevPageArrow = new St.Icon({
+            style_class: 'page-navigation-arrow',
+            icon_name: rtl
+                ? 'carousel-arrow-next-24-symbolic'
+                : 'carousel-arrow-back-24-symbolic',
+            opacity: 0,
+            reactive: false,
+            visible: false,
+            x_expand: true,
+            x_align: Clutter.ActorAlign.START,
+        });
+
         const scrollContainer = new St.Widget({
             layout_manager: new Clutter.BinLayout(),
             clip_to_allocation: true,
@@ -219,6 +244,8 @@ var BaseAppView = GObject.registerClass({
         scrollContainer.add_child(this._prevPageIndicator);
         scrollContainer.add_child(this._nextPageIndicator);
         scrollContainer.add_child(this._scrollView);
+        scrollContainer.add_child(this._nextPageArrow);
+        scrollContainer.add_child(this._prevPageArrow);
 
         this._box = new St.BoxLayout({
             vertical: true,
@@ -990,6 +1017,7 @@ var BaseAppView = GObject.registerClass({
     _syncPageHints(pageNumber, animate = true) {
         const showingNextPage = this._pagesShown & SidePages.NEXT;
         const showingPrevPage = this._pagesShown & SidePages.PREVIOUS;
+        const dnd = this._pagesShown & SidePages.DND;
         const duration = animate ? PAGE_INDICATOR_FADE_TIME : 0;
 
         if (showingPrevPage) {
@@ -999,6 +1027,14 @@ var BaseAppView = GObject.registerClass({
                 opacity,
                 duration,
             });
+
+            if (!dnd) {
+                this._prevPageArrow.visible = true;
+                this._prevPageArrow.ease({
+                    opacity,
+                    duration,
+                });
+            }
         }
 
         if (showingNextPage) {
@@ -1008,6 +1044,14 @@ var BaseAppView = GObject.registerClass({
                 opacity,
                 duration,
             });
+
+            if (!dnd) {
+                this._nextPageArrow.visible = true;
+                this._nextPageArrow.ease({
+                    opacity,
+                    duration,
+                });
+            }
         }
     }
 
@@ -1076,6 +1120,17 @@ var BaseAppView = GObject.registerClass({
             if (hasFollowingPage) {
                 const items = this._grid.getItemsAtPage(nextPage);
                 items.forEach(item => (item.translation_x = translationX));
+
+                if (!(state & SidePages.DND)) {
+                    const pageArrow = page > 0
+                        ? this._nextPageArrow
+                        : this._prevPageArrow;
+                    pageArrow.set({
+                        visible: true,
+                        opacity: adjustment.value * 255,
+                        translationX,
+                    });
+                }
             }
             if (hasFollowingPage ||
                 (page > 0 &&
@@ -1141,6 +1196,7 @@ var BaseAppView = GObject.registerClass({
                 onComplete: () => {
                     this._teardownPagePreview(1);
                     this._syncClip();
+                    this._nextPageArrow.visible = false;
                     this._nextPageIndicator.visible = false;
                     this._updateFadeForNavigation();
                 },
@@ -1163,6 +1219,7 @@ var BaseAppView = GObject.registerClass({
                 onComplete: () => {
                     this._teardownPagePreview(-1);
                     this._syncClip();
+                    this._prevPageArrow.visible = false;
                     this._prevPageIndicator.visible = false;
                     this._updateFadeForNavigation();
                 },