gdm: Add AuthList control

Ultimately, we want to add support for GDM's new ChoiceList
PAM extension.  That extension allows PAM modules to present
a list of choices to the user. Before we can support that
extension, however, we need to have a list control in the
login-screen/unlock screen.  This commit adds that control.

For the most part, it's a copy-and-paste of the gdm userlist,
but with less features.  It lacks API specific to the users,
lacks the built in timed login indicator, etc. It does feature
a label heading.

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

data/theme/gnome-shell-sass/widgets/_login-dialog.scss

@@ -109,6 +109,32 @@
   padding-top: 1em;
 }
 
+.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
+.login-dialog-auth-list {
+  spacing: 6px;
+  margin-left: 2em;
+}
+
+.login-dialog-auth-list-title {
+  margin-left: 2em;
+}
+
+.login-dialog-auth-list-item {
+  border-radius: $base_border_radius + 4px;
+  padding: 6px;
+  color: darken($osd_fg_color,30%);
+  &:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+}
+
+.login-dialog-auth-list-label {
+  @include fontsize($base_font_size + 2);
+  font-weight: bold;
+  padding-left: 15px;
+
+  &:ltr { padding-left: 14px; text-align: left; }
+  &:rtl { padding-right: 14px; text-align: right; }
+}
+
 .login-dialog-user-list-view { -st-vfade-offset: 1em; }
 .login-dialog-user-list {
   spacing: 12px;

js/gdm/authList.js

@@ -0,0 +1,176 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+/*
+ * Copyright 2017 Red Hat, Inc
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, see <http://www.gnu.org/licenses/>.
+ */
+/* exported AuthList */
+
+const { Clutter, GObject, Meta, St } = imports.gi;
+
+const SCROLL_ANIMATION_TIME = 500;
+
+const AuthListItem = GObject.registerClass({
+    Signals: { 'activate': {} },
+}, class AuthListItem extends St.Button {
+    _init(key, text) {
+        this.key = key;
+        const label = new St.Label({
+            text,
+            style_class: 'login-dialog-auth-list-label',
+            y_align: Clutter.ActorAlign.CENTER,
+            x_expand: false,
+        });
+
+        super._init({
+            style_class: 'login-dialog-auth-list-item',
+            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
+            can_focus: true,
+            child: label,
+            reactive: true,
+        });
+
+        this.connect('key-focus-in',
+            () => this._setSelected(true));
+        this.connect('key-focus-out',
+            () => this._setSelected(false));
+        this.connect('notify::hover',
+            () => this._setSelected(this.hover));
+
+        this.connect('clicked', this._onClicked.bind(this));
+    }
+
+    _onClicked() {
+        this.emit('activate');
+    }
+
+    _setSelected(selected) {
+        if (selected) {
+            this.add_style_pseudo_class('selected');
+            this.grab_key_focus();
+        } else {
+            this.remove_style_pseudo_class('selected');
+        }
+    }
+});
+
+var AuthList = GObject.registerClass({
+    Signals: {
+        'activate': { param_types: [GObject.TYPE_STRING] },
+        'item-added': { param_types: [AuthListItem.$gtype] },
+    },
+}, class AuthList extends St.BoxLayout {
+    _init() {
+        super._init({
+            vertical: true,
+            style_class: 'login-dialog-auth-list-layout',
+            x_align: Clutter.ActorAlign.START,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+
+        this.label = new St.Label({ style_class: 'login-dialog-auth-list-title' });
+        this.add_child(this.label);
+
+        this._scrollView = new St.ScrollView({
+            style_class: 'login-dialog-auth-list-view',
+        });
+        this._scrollView.set_policy(
+            St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
+        this.add_child(this._scrollView);
+
+        this._box = new St.BoxLayout({
+            vertical: true,
+            style_class: 'login-dialog-auth-list',
+            pseudo_class: 'expanded',
+        });
+
+        this._scrollView.add_actor(this._box);
+        this._items = new Map();
+
+        this.connect('key-focus-in', this._moveFocusToItems.bind(this));
+    }
+
+    _moveFocusToItems() {
+        let hasItems = this.numItems > 0;
+
+        if (!hasItems)
+            return;
+
+        if (global.stage.get_key_focus() !== this)
+            return;
+
+        let focusSet = this.navigate_focus(null, St.DirectionType.TAB_FORWARD, false);
+        if (!focusSet) {
+            Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => {
+                this._moveFocusToItems();
+                return false;
+            });
+        }
+    }
+
+    _onItemActivated(activatedItem) {
+        this.emit('activate', activatedItem.key);
+    }
+
+    scrollToItem(item) {
+        let box = item.get_allocation_box();
+
+        let adjustment = this._scrollView.get_vscroll_bar().get_adjustment();
+
+        let value = (box.y1 + adjustment.step_increment / 2.0) - (adjustment.page_size / 2.0);
+        adjustment.ease(value, {
+            duration: SCROLL_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
+    addItem(key, text) {
+        this.removeItem(key);
+
+        let item = new AuthListItem(key, text);
+        this._box.add(item);
+
+        this._items.set(key, item);
+
+        item.connect('activate', this._onItemActivated.bind(this));
+
+        // Try to keep the focused item front-and-center
+        item.connect('key-focus-in', () => this.scrollToItem(item));
+
+        this._moveFocusToItems();
+
+        this.emit('item-added', item);
+    }
+
+    removeItem(key) {
+        if (!this._items.has(key))
+            return;
+
+        let item = this._items.get(key);
+
+        item.destroy();
+
+        this._items.delete(key);
+    }
+
+    get numItems() {
+        return this._items.size;
+    }
+
+    clear() {
+        this.label.text = '';
+        this._box.destroy_all_children();
+        this._items.clear();
+    }
+});

js/js-resources.gresource.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/org/gnome/shell">
+    <file>gdm/authList.js</file>
     <file>gdm/authPrompt.js</file>
     <file>gdm/batch.js</file>
     <file>gdm/loginDialog.js</file>