[gnome-shell] renameFolderMenu: Use a custom menu item inheriting from PopupBaseMenuItem

[Florian Müllner <fmuellner src gnome org>]

commit dab60d5580d68903669591224bbb65adedc0eea7
Author: Marco Trevisan (Treviño) <mail 3v1n0 net>
Date:   Sat Sep 14 03:03:15 2019 +0200

    renameFolderMenu: Use a custom menu item inheriting from PopupBaseMenuItem
    
    The RenameFolderMenu uses the internal box as a menu item, while PopupMenu
    expects to have PopupBaseMenuItem based children with a delegate set.
    
    Instead of using a custom menu with a customized box acting as menu
    item,just add a RenameFolderMenuItem that inherits from the parent,
    adjusting the features as we need them. In fact, the rename folder menu item
    doesn't need any label, padding or default styling so we can reuse
    PopupMenuBaseItem after we use our styling properties and we set the
    Ornament to HIDDEN.
    
    To get the proper style in place, define rename-folder-popup and
    rename-folder-popup-item to override the default popup-menu-item rule
    padding instead of using margins.
    
    Pass the menu item as menu's focusActor as this will key-focus it on pop-up,
    by overriding the key_focus_in() vfunc we can then delegate the focus
    handling to the entry's clutter-text.
    
    Also override the map() vfunc in order to update the entry's content before
    mapping the entry.
    
    Finally, use the item's activate method in order to tell the parent menu
    we're done with it and that the menu can be closed.
    
    As consequence we can also remove the menu's popup() method, and just use
    the default open().
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/720

 data/theme/gnome-shell-sass/_common.scss | 11 ++---
 js/ui/appDisplay.js                      | 82 +++++++++++++++++++-------------
 2 files changed, 53 insertions(+), 40 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 852b505f18..9724a8f971 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -610,13 +610,12 @@ StScrollBar {
     border-bottom-style: solid;
   }
 
-
 // Rename popup
-
-.rename-folder-popup-box {
-  spacing: 6px;
-  margin-left: 12px;
-  margin-right: 12px;
+.rename-folder-popup {
+  .rename-folder-popup-item {
+    spacing: 6px;
+    &:ltr, &:rtl { padding: 0, 12px; }
+  }
 }
 
 // Background menu
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 2d5283c686..9147d4c02c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1699,7 +1699,7 @@ var FolderIcon = class FolderIcon {
         }
 
         this.actor.set_hover(true);
-        this._menu.popup();
+        this._menu.open();
         this._menuManager.ignoreRelease();
     }
 
@@ -1713,27 +1713,23 @@ var FolderIcon = class FolderIcon {
 };
 Signals.addSignalMethods(FolderIcon.prototype);
 
-var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
-    constructor(source, folder) {
-        super(source.actor, 0.5, St.Side.BOTTOM);
+var RenameFolderMenuItem = GObject.registerClass(
+class RenameFolderMenuItem extends PopupMenu.PopupBaseMenuItem {
+    _init(folder) {
+        super._init({
+            style_class: 'rename-folder-popup-item',
+            reactive: false,
+        });
+        this.setOrnament(PopupMenu.Ornament.HIDDEN);
 
         this._folder = folder;
 
-        // We want to keep the item hovered while the menu is up
-        this.blockSourceEvents = true;
-
-        let box = new St.BoxLayout({ style_class: 'rename-folder-popup-box' });
-        this.box.add_child(box);
-
         // Entry
         this._entry = new St.Entry({
             x_expand: true,
             width: 200,
         });
-        box.add_child(this._entry);
-
-        // Focus the text entry on menu pop-up
-        this.focusActor = this._entry.clutter_text;
+        this.add_child(this._entry);
 
         this._entry.clutter_text.connect(
             'notify::text', this._validate.bind(this));
@@ -1748,30 +1744,20 @@ var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
             can_focus: true,
             label: _('Rename'),
         });
-        box.add_child(this._button);
+        this.add_child(this._button);
 
         this._button.connect('clicked', this._updateFolderName.bind(this));
-
-        // Chain our visibility and lifecycle to that of the source
-        this._sourceMappedId = source.actor.connect('notify::mapped', () => {
-            if (!source.actor.mapped)
-                this.close();
-        });
-        source.actor.connect('destroy', () => {
-            source.actor.disconnect(this._sourceMappedId);
-            this.destroy();
-        });
-
-        Main.uiGroup.add_actor(this.actor);
     }
 
-    popup() {
-        let folderName = _getFolderName(this._folder);
-
-        this._entry.text = folderName;
-        this._entry.clutter_text.set_selection(0, folderName.length);
+    vfunc_map() {
+        this._entry.text = _getFolderName(this._folder);
+        this._entry.clutter_text.set_selection(0, -1);
+        super.vfunc_map();
+    }
 
-        this.open();
+    vfunc_key_focus_in() {
+        super.vfunc_key_focus_in();
+        this._entry.clutter_text.grab_key_focus();
     }
 
     _isValidFolderName() {
@@ -1794,7 +1780,35 @@ var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
         let newFolderName = this._entry.text.trim();
         this._folder.set_string('name', newFolderName);
         this._folder.set_boolean('translate', false);
-        this.close();
+        this.activate(Clutter.get_current_event());
+    }
+});
+
+var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
+    constructor(source, folder) {
+        super(source.actor, 0.5, St.Side.BOTTOM);
+        this.actor.add_style_class_name('rename-folder-popup');
+
+        // We want to keep the item hovered while the menu is up
+        this.blockSourceEvents = true;
+
+        let menuItem = new RenameFolderMenuItem(folder);
+        this.addMenuItem(menuItem);
+
+        // Focus the text entry on menu pop-up
+        this.focusActor = menuItem;
+
+        // Chain our visibility and lifecycle to that of the source
+        this._sourceMappedId = source.actor.connect('notify::mapped', () => {
+            if (!source.actor.mapped)
+                this.close();
+        });
+        source.actor.connect('destroy', () => {
+            source.actor.disconnect(this._sourceMappedId);
+            this.destroy();
+        });
+
+        Main.uiGroup.add_actor(this.actor);
     }
 };
 Signals.addSignalMethods(RenameFolderMenu.prototype);