[gnome-shell] loginDialog: Only highlight a single item at any time

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

commit 526f2c8bcfdc3efbffba8425d69858195081c797
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Jun 9 17:34:43 2017 +0200

    loginDialog: Only highlight a single item at any time
    
    The user list uses the same indication for hover and focus, so it
    is possible for two items to be highlighted at the same time. Using
    different styling would improve the situation, but only to some
    extent - the user would still need to figure out which highlight
    corresponds to which activation method. So instead, copy the
    approach we use in popup menus and use a single property for
    highlights that is updated by both focus- and hover changes.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=772284

 data/theme/gnome-shell-high-contrast.css |    5 +----
 data/theme/gnome-shell-sass              |    2 +-
 data/theme/gnome-shell.css               |    5 +----
 js/gdm/loginDialog.js                    |   19 +++++++++++++++++++
 4 files changed, 22 insertions(+), 9 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index e973db1..a388ef0 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1724,7 +1724,7 @@ StScrollBar {
   spacing: 12px;
   padding: .2em;
   width: 23em; }
-  .login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
+  .login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
     background-color: #215d9c;
     color: #ffffff; }
   .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
@@ -1738,9 +1738,6 @@ StScrollBar {
     padding-right: 1em; }
   .login-dialog-user-list-item:rtl {
     padding-left: 1em; }
-  .login-dialog-user-list-item:hover {
-    background-color: #215d9c;
-    color: #ffffff; }
   .login-dialog-user-list-item .login-dialog-timed-login-indicator {
     height: 2px;
     margin: 2px 0 0 0;
diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 2bef9b2..4de5298 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 2bef9b25e23632fe66e12c5d96a9c487f172a6a0
+Subproject commit 4de529843779532db8e5aa76b4e8a74f163e79c5
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c9396a2..6f9f201 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1724,7 +1724,7 @@ StScrollBar {
   spacing: 12px;
   padding: .2em;
   width: 23em; }
-  .login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
+  .login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
     background-color: #215d9c;
     color: #ffffff; }
   .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
@@ -1738,9 +1738,6 @@ StScrollBar {
     padding-right: 1em; }
   .login-dialog-user-list-item:rtl {
     padding-left: 1em; }
-  .login-dialog-user-list-item:hover {
-    background-color: #215d9c;
-    color: #ffffff; }
   .login-dialog-user-list-item .login-dialog-timed-login-indicator {
     height: 2px;
     margin: 2px 0 0 0;
diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index 5055a0a..49cab56 100644
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -70,6 +70,16 @@ const UserListItem = new Lang.Class({
         this.actor.connect('destroy',
                            Lang.bind(this, this._onDestroy));
 
+        this.actor.connect('key-focus-in', () => {
+            this._setSelected(true);
+        });
+        this.actor.connect('key-focus-out', () => {
+            this._setSelected(false);
+        });
+        this.actor.connect('notify::hover', () => {
+            this._setSelected(this.actor.hover);
+        });
+
         this._userWidget = new UserWidget.UserWidget(this.user);
         layout.add(this._userWidget.actor);
 
@@ -103,6 +113,15 @@ const UserListItem = new Lang.Class({
         this.emit('activate');
     },
 
+    _setSelected: function(selected) {
+        if (selected) {
+            this.actor.add_style_pseudo_class('selected');
+            this.actor.grab_key_focus();
+        } else {
+            this.actor.remove_style_pseudo_class('selected');
+        }
+    },
+
     showTimedLoginIndicator: function(time) {
         let hold = new Batch.Hold();