gwl: Add overflow support through slide/scroll list (#13352)

* gwl: Add initial overflow support through sliding

* gwl: Scroll to focused app when a new one is added or when changing workspaces

To find the new app position in the container instead of using actor.x we are summing the size of each preceding appGroup until the current app to focus because actor.x would report 0 some times.

* gwl: Avoid trying to remove slide timer multiple times

This was triggering GLib Critical error in the logs.

* gwl: Properly integrate with the scroll-behavior settings

* gwl: Avoid trying to remove the scroll to focused app deboucer timer after being removed already

* gwl: Listen to the scrollBox allocation signal to update the scroll buttons visibility

This avoids issues with improper representation of the current allocation after the buttons are hidden.

* gwl: Make sure to scroll to the focused app group on workspace switched

* gwl: Refactor the scroll logic to its own class

* gwl: Improve scroll to item implementation

* gwl: Extract app group scroll box to its own module

* gwl: Disable actions  if panel edit mode is enabled and update classes on orientation changed

* gwl: Debounce calls to updateScrollVisibility to avoid it being called excessively

* gwl: Define style in proper cinnamon theme file instead of in-code

* gwl: Update scroll button theme

* gwl: Implementation using the native St.ScrollView

* gwl: Update scroll police depending on the orientation and make sure to debounce setting scrollActive state as inactive to avoid triggering the menu during the scroll animation

* gwl: Fix handleDragOver positioning for the scrollview based implementation

* Update scrollbox vfade/hfade theme defaults

* gwl: Adjust min_size setting for lateral panels

* gwl: Only set appGroup focus if app actually has focus

This avoids an issue where during workspace switching some times a minimized window would visually have the focused window style when it shouldn't.

* gwl: Improve the scroll to last focused app

This is useful when switching to a new workspace or the applet is reloaded so it guarantees user will at least be aware of opened windows that could otherwise be hidden if the scroll state is mantained.

* gwl: Remove important attr from the scrollbox style

* gwl: Improve scroll to last focused

If there's no opened windows just keep the current scroll state.

* gwl: Improve scroll handling to work better with previous scroll options

I've also decided to change the scroll key name, this with the goal of guaranteeing that the scroll app window list will be set as default for all users, those that want other options, or none, can switch back.

* gwl: Remove unused import

* gwl: Bring back slider buttons

* gwl: Fix scroll handling and workspace scrollbox destroy process

* gwl: Improve edge slide area and style handling

gwl: Update name from box to container for clarity

* gwl: Add option to enable/disable slide to focused app button

* gwl: Use xsi-pan icons instead of the arrow icons

Looks better and is consistent with what is used in the alt-tab window switcher for example when it reaches the limits of the screen.

* gwl: Handle possible undefined or null this.state cases

* gwl: Add click to slide option

* gwl: Update scroll box buttons classes

* gwl: Break to handle lastFocused app instead of handling inside the loop

* gwl: Remove edge scroll zone in favor of the side buttons

Considering we are already using the side scroll buttons which gives a clear over area for sliding the app list, having a edge scroll zone there makes it redudant and potentially confusing for the user.

* gwl: Implement proper styling for the slide buttons

Author: anaximeno

data/theme/cinnamon-sass/widgets/_windowlist.scss

@@ -107,6 +107,58 @@
   &-notifications-badge-label {
     font-size: 12px;
   }
+
+  &-scrollbox {
+    &-scrollview {
+      &.vfade {
+        -st-vfade-offset: 68px;
+        -st-hfade-offset: 0;
+      }
+      &.hfade {
+        -st-hfade-offset: 68px;
+        -st-vfade-offset: 0;
+      }
+    }
+
+    &-button {
+      transition-duration: 100ms;
+
+      &-icon {
+        icon-size: $scalable_icon_size;
+        color: inherit;
+      }
+
+      &.vertical { }
+
+      &-start {
+        margin-right: 1px;
+
+        &.vertical {
+          margin-right: 0;
+          margin-bottom: 1px;
+        }
+      }
+
+      &-end {
+        margin-left: 1px;
+
+        &.vertical {
+          margin-left: 0;
+          margin-top: 1px;
+        }
+      }
+
+      &:hover {
+        background-color: $lighter_bg_color;
+        color: $fg_color;
+      }
+
+      &:active {
+        background-color: $lightest_bg_color;
+        color: $fg_color;
+      }
+    }
+  }
 }
 
 // classic window list

files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/appGroup.js

@@ -375,10 +375,6 @@ var AppGroup = class AppGroup {
     getPreferredWidth(actor, forHeight, alloc) {
         const [iconMinSize, iconNaturalSize] = this.iconBox.get_preferred_width(forHeight);
         const [labelMinSize, labelNaturalSize] = this.label.get_preferred_width(forHeight);
-        // The label text starts in the center of the icon, so we should allocate the space
-        // needed for the icon plus the space needed for(label - icon/2)
-        alloc.min_size = 1 * global.ui_scale;
-
         const {appId} = this.groupState;
 
         const allocateForLabel = this.labelVisiblePref ||
@@ -393,16 +389,18 @@ var AppGroup = class AppGroup {
             } else {
                 alloc.natural_size = iconNaturalSize + 6 * global.ui_scale;
             }
+            alloc.min_size = alloc.natural_size;
         } else {
             alloc.natural_size = this.state.trigger('getPanelHeight');
+            alloc.min_size = 1 * global.ui_scale;
         }
     }
 
     getPreferredHeight(actor, forWidth, alloc) {
         let [iconMinSize, iconNaturalSize] = this.iconBox.get_preferred_height(forWidth);
         let [labelMinSize, labelNaturalSize] = this.label.get_preferred_height(forWidth);
-        alloc.min_size = Math.min(iconMinSize, labelMinSize);
         alloc.natural_size = Math.max(iconNaturalSize, labelNaturalSize);
+        alloc.min_size = alloc.natural_size;
     }
 
     allocate(actor, box, flags) {
@@ -555,7 +553,7 @@ var AppGroup = class AppGroup {
     }
 
     onEnter() {
-        if (this.state.panelEditMode) return false;
+        if (this.state.panelEditMode || this.state.scrollActive) return false;
 
         this.actor.add_style_pseudo_class('hover');
 
@@ -642,7 +640,7 @@ var AppGroup = class AppGroup {
         const {appId, metaWindows, lastFocused} = this.groupState;
 
         if (hasFocus === undefined) {
-            hasFocus = this.workspaceState.lastFocusedApp === appId;
+            hasFocus = this.workspaceState.lastFocusedApp === appId && getFocusState(lastFocused);
         }
 
         // If any of the windows associated with our app have focus,

files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/applet.js

@@ -110,7 +110,7 @@ class PinnedFavs {
             const currentWorkspace = this.params.state.trigger('getCurrentWorkspace');
             const newFavorites = [];
             let refActorFound = false;
-            currentWorkspace.actor.get_children().forEach( (actor, i) => {
+            currentWorkspace.container.get_children().forEach( (actor, i) => {
                 const appGroup = currentWorkspace.appGroups.find( appGroup => appGroup.actor === actor );
                 if (!appGroup) return;
                 const {app, appId, isFavoriteApp} = appGroup.groupState;
@@ -254,6 +254,7 @@ class GroupedWindowListApplet extends Applet.Applet {
             removeFavorite: (id) => this.pinnedFavorites.removeFavorite(id),
             getFavorites: () => this.pinnedFavorites._favorites,
             cycleWindows: (e, source) => this.handleScroll(e, source),
+            handleScroll: (e) => this.handleScroll(e),
             openAbout: () => this.openAbout(),
             configureApplet: () => this.configureApplet(),
             removeApplet: (event) => this.confirmRemoveApplet(event)
@@ -300,7 +301,7 @@ class GroupedWindowListApplet extends Applet.Applet {
     bindSettings() {
         const settingsProps = [
             {key: 'group-apps', value: 'groupApps', cb: this.refreshAllWorkspaces},
-            {key: 'scroll-behavior', value: 'scrollBehavior', cb: null},
+            {key: 'list-scroll-behavior', value: 'scrollBehavior', cb: null},
             {key: 'left-click-action', value: 'leftClickAction', cb: null},
             {key: 'middle-click-action', value: 'middleClickAction', cb: null},
             {key: 'show-all-workspaces', value: 'showAllWorkspaces', cb: this.refreshAllWorkspaces},
@@ -314,6 +315,7 @@ class GroupedWindowListApplet extends Applet.Applet {
             {key: 'enable-window-count-badges', value: 'enableWindowCountBadges', cb: this.onEnableWindowCountBadgeChange},
             {key: 'enable-notification-badges', value: 'enableNotificationBadges', cb: this.onEnableNotificationsChange},
             {key: 'enable-app-button-dragging', value: 'enableDragging', cb: this.draggableSettingChanged},
+            {key: 'enable-click-to-slide', value: 'enableClickToSlide', cb: null},
             {key: 'thumbnail-scroll-behavior', value: 'thumbnailScrollBehavior', cb: null},
             {key: 'show-thumbnails', value: 'showThumbs', cb: this.updateVerticalThumbnailState},
             {key: 'animate-thumbnails', value: 'animateThumbs', cb: null},
@@ -794,14 +796,26 @@ class GroupedWindowListApplet extends Applet.Applet {
             && St.Widget.get_default_direction () === St.TextDirection.RTL;
 
         const axis = this.state.isHorizontal ? [x, 'x2'] : [y, 'y2'];
+
+        let adjustmentValue = 0;
+        if (currentWorkspace.scrollBox) {
+            const adjustment = this.state.isHorizontal ?
+                currentWorkspace.scrollBox.scrollView.get_hscroll_bar().get_adjustment() :
+                currentWorkspace.scrollBox.scrollView.get_vscroll_bar().get_adjustment();
+            adjustmentValue = adjustment.get_value();
+        }
+
+        // Add scroll position to current coordinate
+        axis[0] += adjustmentValue;
+
         if(rtl_horizontal)
             axis[0] = this.actor.width - axis[0];
 
         // save data on drag start
         if(this.state.dragging.posList === null){
             this.state.dragging.isForeign = !(source instanceof AppGroup);
             this.state.dragging.posList = [];
-            currentWorkspace.actor.get_children().forEach( child => {
+            currentWorkspace.container.get_children().forEach( child => {
                 let childPos;
                 if(rtl_horizontal)
                     childPos = this.actor.width - child.get_allocation_box()['x1'];
@@ -815,7 +829,7 @@ class GroupedWindowListApplet extends Applet.Applet {
         let pos = 0;
         while(pos < this.state.dragging.posList.length && axis[0] > this.state.dragging.posList[pos])
             pos++;
-        
+
         let favLength = 0;
         for (const appGroup of currentWorkspace.appGroups) {
             if(appGroup.groupState.isFavoriteApp)
@@ -835,21 +849,21 @@ class GroupedWindowListApplet extends Applet.Applet {
 
             if(this.state.dragging.isForeign) {
                 if (this.state.dragging.dragPlaceholder)
-                    currentWorkspace.actor.set_child_at_index(this.state.dragging.dragPlaceholder, pos);
+                    currentWorkspace.container.set_child_at_index(this.state.dragging.dragPlaceholder, pos);
                 else {
                     const iconSize = this.getPanelIconSize() * global.ui_scale;
                     this.state.dragging.dragPlaceholder = new DND.GenericDragPlaceholderItem();
                     this.state.dragging.dragPlaceholder.width = iconSize;
                     this.state.dragging.dragPlaceholder.height = iconSize;
-                    currentWorkspace.actor.insert_child_at_index(
+                    currentWorkspace.container.insert_child_at_index(
                         this.state.dragging.dragPlaceholder,
                         this.state.dragging.pos
                     );
                     this.state.dragging.dragPlaceholder.animateIn();
                 }
             }
             else
-                currentWorkspace.actor.set_child_at_index(source.actor, pos);
+                currentWorkspace.container.set_child_at_index(source.actor, pos);
         }
 
         if(this.state.dragging.isForeign)